Ретро-эффект для картинки на CSS3

Все блоги / DLE движок для сайтов | 28 марта 2013

HTML: 
<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
Перейти на сайт

Похожие новости