Создаем стикеры при помощи CSS3

Главная

Статьи

Верстка сайтов

11.12.2011 00:00

Создаем стикеры при помощи CSS3 и HTML5

В этой статье вы узнаете, как создать прикрепленные к стене стикеры при помощи обычного HTML-списка. Данный пример работает в последних версиях современных браузеров, таких как WebKit (Safari, Chrome), Firefox и Opera. Другие браузеры отображают просто желтые квадраты.

Шаг 1: HTML-разметка

Начнем с простейшего варианта, который работает во всех браузерах. Основной HTML-код нашей разметки представляет собой обычный неупорядоченный список, содержащий в каждом элементе списка все остальные элементы:

<ul>  

 <li>  

 <a href="#">  

 <h2>Title #1</h2>  

 <p>Text Content #1</p>  

 </a>  

 </li>  

 <li>  

 <a href="#">  

 <h2>Title #2</h2>  

 <p>Text Content #2</p>  

 </a>  

 </li>  

 […]  

 </ul>

Обратите внимание, что каждый стикер окружен ссылкой, которая является хорошим элементом при использовании клавиатуры. Если бы мы использовали элемент списка для эффекта, то мы должны были бы установить свойство tabindex, чтобы перемещаться по стикерам при помощи клавиатуры.

CSS, который превращает наш список в желтые квадраты, очень прост:

 *{  

 margin:0;  

 padding:0;  

 }  

 body{  

 font-family:arial,sans-serif;  

 font-size:100%;  

 margin:3em;  

 background:#666;  

 color:#fff;  

 }  

 h2,p{  

 font-size:100%;  

 font-weight:normal;  

 }  

 ul,li{  

 list-style:none;  

 }  

 ul{  

 overflow:hidden;  

 padding:3em;  

 }  

 ul li a{  

 text-decoration:none;  

 color:#000;  

 background:#ffc;  

 display:block;  

 height:10em;  

 width:10em;  

 padding:1em;  

 }  

 ul li{  

 margin:1em;  

 float:left;  

 }

Вначале мы сбрасываем все отступы, которые устанавливают браузеры по умолчанию, и избавляемся от маркеров возле каждого элемента списка. Затем мы устанавливаем padding для элемента UL и overflow:hidden.

Для ссылок мы зададим желтый фон и ширину с высотой, создав таким образом желтый квадрат, для всех элементов списка установим float:left, чтобы они следовали друг за другом. Результат вы можете увидеть на картинке ниже:

шаг 1

Здесь нет ничего сложного и это будет работать в любом браузере, в том числе в IE6.

Шаг 2: Тени и шрифт

Теперь пришло время добавить тени к стикерам и использовать шрифт, напоминающий текст написанный от руки. Для подключения шрифта мы используем Google Fonts API, и найдем там шрифт под названием "Marck Script". Самый простой способ воспользоваться этим API - использовать Google font previewer:

google font previewer

Используя font previewer, мы получим HTML-строку для подключения этого шрифта на страницу. Это поддерживается всеми современными браузерами.

<link  href="http://fonts.googleapis.com/css? 

family=Marck+Script&amp;subset=latin,cyrillic"  

rel="stylesheet"  

type="text/css">

Затем мы установим некоторые отступы к заголовкам в стикерах, и установим новый шрифт для параграфов. Обратите внимание, что шрифт "Marck Script" должен быть большим, чтобы быть читаемым:

ul li h2{  

 font-size:140%;  

 font-weight:bold;  

 padding-bottom:10px;  

}  

ul li p{  

 font-family:"Marck Script",arial,sans-serif;  

 font-size:180%;  

}

Для того чтобы создать тени для стикера, что позволит его "приподнять" над страницей, нам нужно применить box-shadow. Для этого мы должны добавить это правило для каждого из браузеров, которые поддерживают его, с соответствующим префиксом:

 ul li a{  

 text-decoration:none;  

 color:#000;  

 background:#ffc;  

 display:block;  

 height:10em;  

 width:10em;  

 padding:1em;  

 /* Firefox */  

 -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);  

 /* Safari+Chrome */  

 -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);  

 /* Opera */  

 box-shadow: 5px 5px 7px rgba(33,33,33,.7);  

 }

Синтаксис, к счастью, одинаков для каждого блока: смещение, распространение и цвет - в данном случае темно-серый с непрозрачностью 70%. Теперь с новым шрифтом наши заметки выглядят следующим образом:

шаг 2

Шаг 3: Наклон стикеров

На следующем шаге мы немного повернем наши стикеры, чтобы они выглядели естесственно.

Для этого, чтобы наклонить элемент, мы используем transform:rotate свойство CSS3, не забудем также добавить префикс для каждого из браузеров:

ul li a{  

 -webkit-transform:rotate(-6deg);  

 -o-transform:rotate(-6deg);  

 -moz-transform:rotate(-6deg);  

 }

Это позволит повернуть все ссылки на шесть градусов влево. Теперь, чтобы повернуть стикеры случайным образом, мы используем nth-child свойство CSS3:

 ul li:nth-child(even) a{  

 -o-transform:rotate(4deg);  

 -webkit-transform:rotate(4deg);  

 -moz-transform:rotate(4deg);  

 position:relative;  

 top:5px;  

 }  

 ul li:nth-child(3n) a{  

 -o-transform:rotate(-3deg);  

 -webkit-transform:rotate(-3deg);  

 -moz-transform:rotate(-3deg);  

 position:relative;  

 top:-5px;  

 }  

 ul li:nth-child(5n) a{  

 -o-transform:rotate(5deg);  

 -webkit-transform:rotate(5deg);  

 -moz-transform:rotate(5deg);  

 position:relative;  

 top:-10px;  

 }

Теперь каждая вторая ссылка повернута на четыре градуса вправо. Каждая третья ссылка наклонена на три градуса влево. И каждая пятая повернута на пять градусов вправо. В целом это производит впечатление случайно расположенных заметок:

шаг 3

Шаг 4: Увеличение стикеров при наведении мыши

Для того, чтобы заметка увеличивалась при наведении мыши или попадании фокуса мы используем большую тень и scale трансформацию CSS3. Опять же, мы должны определить их для каждого из браузеров:

ul li a:hover,ul li a:focus{  

 -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);  

 -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);  

 box-shadow:10px 10px 7px rgba(0,0,0,.7);  

 -webkit-transform: scale(1.25);  

 -moz-transform: scale(1.25);  

 -o-transform: scale(1.25);  

 position:relative;  

 z-index:5;  

 }

Мы также добавляем z-index для того, чтобы увеличившийся стикер перекрывал остальные. Мы применяем это при наведении мыши (:hover) или при попадании фокуса (:focus) на ссылку:

Шаг 5: Добавление плавных переходов и цвета

На последнем шаге, сделаем переход, от наклоненного стикера к увеличенному, гладким и привлекательным, а не резким. Для этого мы используем CSS3 transition:

 ul li a{  

 text-decoration:none;  

 color:#000;  

 background:#ffc;  

 display:block;  

 height:10em;  

 width:10em;  

 padding:1em;  

 -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);  

 -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);  

 box-shadow: 5px 5px 7px rgba(33,33,33,.7);  

 -moz-transition:-moz-transform .15s linear;  

 -o-transition:-o-transform .15s linear;  

 -webkit-transition:-webkit-transform .15s linear;  

 }

По сути это правило говорит: что если что-то изменяется в этом элементе, то изменения необходимо делать постепенно, в течение четверти секунды. Также давайте добавим немного цвета: сделаем каждый второй стикер зеленым и каждый третий синего света:

ul li:nth-child(even) a{  

 -o-transform:rotate(4deg);  

 -webkit-transform:rotate(4deg);  

 -moz-transform:rotate(4deg);  

 position:relative;  

 top:5px;  

 background:#cfc;  

 }  

 ul li:nth-child(3n) a{  

 -o-transform:rotate(-3deg);  

 -webkit-transform:rotate(-3deg);  

 -moz-transform:rotate(-3deg);  

 position:relative;  

 top:-5px;  

 background:#ccf;  

 }

Для того, чтобы увидеть итоговый результат посмотрите демо-пример.

шаг 5

Заключение

Итак, что мы имеем - плавная анимация и наклоненные заметки без использования изображений или JavaScript - с поддержкой Firefox, Opera, Safari и Chrome. Используя селектор nth-child, CSS-преобразования и переходы, мы избежали использования скриптов. Кроме того, Google Web Font API сделал простым использование пользовательских шрифтов. Использование псевдо классов hover и focus для эффекта, позволит пользователям наблюдать эффект при использовании как мыши, так и клавиатуры.

Скачать исходный код.

Перевод