Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Css3 » Sozdanie-fotografij-s-pomoshhyu-css3

Создание фотографий с помощью CSS3

Как и обещал в предыдущей статье, эта статья будет необычной. Сегодня я расскажу вам, как можно с помощью стилей CSS3 создать симпатичные на мой взгляд фотографии. Скажу что данный пример, который тут будет показан не мой. Вот ссылка на первоисточник: Polaroids with CSS3. Текст оригинальной статьи и сам код я немного изменил, но суть от этого не поменялась. Ну что ж, пожалуй начнём!

Как это работает?

Благодаря комбинации спецификаций CSS(2 и 3) и основного стиля, обычные изображения былиФото на CSS3 превращены в классные фотографии в стиле Polaroid.

Используем атрибут Title

Вместо дополнительной разметки было решено вытащить из картинки значение атрибута title. (Помните я писал про использование функции attr()?) Значением атрибута title является описание картинки. В этом примере будет тоже самое:

ul a:after {
  content: attr(title);
}

Примечание: это свойство из спецификации CSS 2.1 не было полностью реализовано браузерами, но современные браузеры легко его отобразят. Поверьте это работает.


Надо ещё отметить одну важную вещь, что мы должны использовать именно атрибут title, а не alt. Дело в том, что значение атрибута alt отобразиться не во всех браузерах.

Добавление случайного наклона

Наконец-то мы дошли до самого главного! В этом примере будут использованы случайные наклоны с помощью уже знакомого Вам псевдокласса :nth-child:


/* По умолчанию, повернём наши изображения на 3 градуса */
ul a {
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
}
 
/* Поворачиваем все четные изображения на 2 градуса */
ul li:nth-child(even) a {
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
}
 
/* Не поворачиваем каждый третий рисунок и сдвигаем вверх на 5 пикселей */
ul li:nth-child(3n) a {
  -webkit-transform: none;
  -moz-transform: none;
  position: relative;
  top: -5px;
}
 
/* Поворачиваем каждый 5 рисунок на 4 градуса и сдвигаем влево на 5 пикселей */
ul li:nth-child(5n) a {
  -webkit-transform: rotate(4deg);
  -moz-transform: rotate(4deg);
  position: relative;
  right: 5px;
}
 
/* Не вращаем, по умолчанию, 8 элемент */
ul li:nth-child(8n) a {
  position: relative;
  top: 8px;
  right: 5px;
}
 
/*  Не вращаем, по умолчанию, 11 элемент */
ul li:nth-child(11n) a {
  position: relative;
  top: 3px;
  left: -5px;
}

На первый взгляд кажется, что мы прописали много свойств, для наших рисунков. Но главный «плюс» состоит в том, что мы можем использовать эти свойства для создания большой галереи фотографий. Правда здорово?!

Масштабирование изображений

Для масштабирования, вновь обратимся к новым свойствам CSS3. Будем масштабировать наши изображения с помощью значения свойства трансформации — scale.

ul a:hover {
  -webkit-transform: scale(1.3);
  -moz-transform: scale(1.3);
  position: relative;
  z-index: 5;
}

То есть при наведении на ссылку мы немного увеличим изображение. Нам осталось немного сгладить эффект при наведении на ссылку:

ul a {
-webkit-transition: -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
}
ul a {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-o-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-ms-box-shadow: 0 3px 6px rgba(0,0,0,.5);
}

А теперь смотрим что получилось в результате наших трудов — галерея фотографий.



наверх