Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Сниппеты » CSS Сниппеты » Ретро-эффект для картинки на CSS3

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


     28.03.2013    css3, сниппет    CSS Сниппеты    4008

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;
}
Демо
Чтобы комментировать - войдите или зарегистрируйтесь на сайте
наверх