Эффект старой фотографии (ретро) - CSS
Эта простая техника CSS градиентов и CSS фильтров позволит вам сделать наложение цветов на фотографию и добиться характерного эффекта фотографий прошлого времени. Обратите внимание, на то, что к настоящему моменту CSS фильтры работают только в WebKit браузерах (Chrome и Safari), но пройдет немного времени, когда эта техника будет применима и для других браузеров.
Ставим это в CSS:
Вызывается эффект с помощью класса: class="retro"
Ставим код в нужное место:
Ставим это в CSS:
Код
.retro {
-webkit-box-shadow: inset 0px 0px 100px #000014;
-moz-box-shadow: inset 0px 0px 100px #000014;
-o-box-shadow: inset 0px 0px 100px #000014;
-ms-box-shadow: inset 0px 0px 100px #000014;
box-shadow: inset 0px 0px 100px #000014;
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%);
-moz-filter: sepia(20%) brightness(10%) contrast(130%);
-o-filter: sepia(20%) brightness(10%) contrast(130%);
-ms-filter: sepia(20%) brightness(10%) contrast(130%);
filter: sepia(20%) brightness(10%) contrast(130%);
position: relative;
z-index: -1;
}
-webkit-box-shadow: inset 0px 0px 100px #000014;
-moz-box-shadow: inset 0px 0px 100px #000014;
-o-box-shadow: inset 0px 0px 100px #000014;
-ms-box-shadow: inset 0px 0px 100px #000014;
box-shadow: inset 0px 0px 100px #000014;
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%);
-moz-filter: sepia(20%) brightness(10%) contrast(130%);
-o-filter: sepia(20%) brightness(10%) contrast(130%);
-ms-filter: sepia(20%) brightness(10%) contrast(130%);
filter: sepia(20%) brightness(10%) contrast(130%);
position: relative;
z-index: -1;
}
Вызывается эффект с помощью класса: class="retro"
Ставим код в нужное место:
Код
<div class="retro">
<img src="images/retro.jpg" alt="Изображение с ретро эффектом на CSS" />
</div>
<img src="images/retro.jpg" alt="Изображение с ретро эффектом на CSS" />
</div>
0| Всего комментариев: 0 | |
 | Информация: Посетители, находящиеся в группе Гости, не могут оставлять комментарии. |