Ретро-эффект для картинки на CSS3
HTML:
CSS:
Источник:dle-faq.pro, DLE
<div class="retro">
<img src="http://lorempixel.com/400/200" alt="Retro is cool!" />
</div>
CSS:
.retro {
-webkit-box-shadow: inset 0px 0px 100px rgba(0,0,20,1);
box-shadow: inset 0px 0px 100px rgba(0,0,20,1);
background: -webkit-linear-gradient(top, rgba(255,145,0,0.2) 0%,rgba(255,230,48,0.2) 60%), -webkit-linear-gradient(20deg, rgba(255,0,0,0.5) 0%,rgba(255,0,0,0) 35%);
background: -moz-linear-gradient(top, rgba(255,145,0,0.2) 0%,rgba(255,230,48,0.2) 60%), -moz-linear-gradient(20deg, rgba(255,0,0,0.5) 0%,rgba(255,0,0,0) 35%);
background: -o-linear-gradient(top, rgba(255,145,0,0.2) 0%,rgba(255,230,48,0.2) 60%), -o-linear-gradient(20deg, rgba(255,0,0,0.5) 0%,rgba(255,0,0,0) 35%);
background: -ms-linear-gradient(top, rgba(255,145,0,0.2) 0%,rgba(255,230,48,0.2) 60%), -ms-linear-gradient(20deg, rgba(255,0,0,0.5) 0%,rgba(255,0,0,0) 35%);
background: linear-gradient(top, rgba(255,145,0,0.2) 0%,rgba(255,230,48,0.2) 60%), linear-gradient(20deg, rgba(255,0,0,0.5) 0%,rgba(255,0,0,0) 35%);
display: table;
}
.retro img {
-webkit-filter: sepia(20%) brightness(10%) contrast(130%);
position: relative; z-index: -1;
}
.retro:hover {
background: none;
}
.retro:hover img {
-webkit-filter: none;
}Источник:dle-faq.pro, DLE
