Как создать глянцевый эффект на фото при помощи CSS3

Многие веб разработчики последнее время пытаются воссоздавать эффекты, которые веб дизайнеры создают при помощи специальных программ, таких как Adobe Photoshop. Казалось бы, что такие эффекты достаточно тяжело реализовать , но благодаря новым спецификациям CSS3 нет ничего возможного, особенно когда у тебя полно времени на эксперименте.

И так, сегодня мы рассмотрим простую технологию создания глянцевого эффекта на фотографиях.
Как создать глянцевый эффект на фото

1. Структура HTML файла достаточно простая. Мы заполняем основной информацией промежуток между тэгами заголовка. А вот уже в тело body тэга вносим основной код. И так это будет простой div блок (у которого будет свой особый класс), внутри которого мы объявляем изображение.

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Глянцевый эффект</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
 
    <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
 
  <body>
    <div id="wrapper">
 <!-- Здесь начинается сам эффект, всё что нужно так это создать специальный класс --> 
        <div class="photo">
            <img src="images/bag.jpg" alt="Bag">
        </div>   
 
    </div> <!-- END Wrapper -->
  </body>
  </html>

2. Теперь создадим style.css файл, откроем его в редакторе и внесём стандартную информацию о стилях документа

body {
    background: #EDEFF4;
}
 
#wrapper {
    margin: 30px auto;
    width: 600px;
} 

3. А теперь опишем класс для изображения.

.photo {
    margin: 30px auto;
    height: 401px;
    width: 602px;
    position: relative;
    -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, .5), 0 2px 3px rgba(0, 0, 0, .5);
    -moz-box-shadow: 0 2px 10px rgba(0, 0, 0, .5), 0 2px 3px rgba(0, 0, 0, .5);
    -o-box-shadow: 0 2px 10px rgba(0, 0, 0, .5), 0 2px 3px rgba(0, 0, 0, .5);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .5), 0 2px 3px rgba(0, 0, 0, .5);
}
 
.photo img {
    border: 1px solid rgba(255, 255, 255, .1);
}  

4. И самое главное, мы будем описывать стили, которые будут прикреплены к псевдо элементу before div тэга.Зададим прозрачный градиент. Прелесть данного эффекта состоит в том, что только при помощи CSS3 мы наложили несколько эффектов на один объект. Если же вы сомневаетесь в возможностях браузеров большинства ваших пользователей, у которых стили прикреплённые к элементам before и after могут не сработать, то всегда можно задействовать несколько div блоков, предварительно описав для них свой класс.

.photo:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, .15)), to(rgba(0, 0, 0, .25))), -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, .1)), color-stop(0.501, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0)));
    background: -moz-linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .25)), -moz-linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
    background: linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .25)), linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
} 


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *