Стиль сайта в виде липких заметок (CSS3 и HTML5)
В данном уроке мы поэтапно трансформируем список HTML в стену облепленную "липкими заметками".
Шаг 1: HTML и основные прямоугольники
Начнем с простейшей версии, которая работает во всех
браузерах. Основным HTML элементом будет неупорядоченный список ссылок, в
которых содержатся все остальные элементы каждого пункта списка:
05 | <p>Текст заметки #1</p> |
11 | <p>Текст заметки #2</p> |
Заметьте, что каждая заметка заключена в тег ссылки,
который всегда является хорошим вариантом для автоматического
обеспечения доступа с помощью клавиатуры. Если для этого использовать
пункты списка, то для них надо добавлять свойство tabindex, чтобы получить такой же эффект.
А CSS сделает их желтыми квадратами:
06 | font-family:arial,sans-serif; |
Сначала мы осуществляем сброс полей и отступов, затем устанавливаем общие настройки и задаем для списков стиль без маркеров.
Затем для элемента UL устанавливаются отступ и свойство overflow:hidden – таким образом, когда позже мы сместим пункты списка, они будут автоматически обтекать друг друга.
Затем задаем стиль для ссылок, чтобы они стали
желтыми квадратами и смещаем их всех влево. В результате мы получим
серию из желтых квадратов:
Результат наших действий будет выводиться в любом
браузере, включая IE6. Далее поддержка используемых эффектов этим
чудесным браузером не распространяется.
Шаг 2: Тени и особенный шрифт
Теперь настало время установить тени для заметок и какой-нибудь декоративный шрифт для содержания. Будем использовать API Google Fonts и шрифт. Самый простой способ задействовать API - использовать Google Font Directory:
На вкладке "Get the code" на странице выбранного
шрифта (в нашем примере это Neucha) получаем простую HTML строку для
включения шрифта на странице:
Далее устанавливаем отступы для заголовков на липких заметках, и устанавливаем шрифт для параграфов:
7 | font-family:"Neucha",serif; |
Для того, чтобы задать тень для заметки, чтобы выделить ее на фоне страницы, будем использовать box-shadow. Для этого нужно добавить строку для каждого браузера, который будет поддерживаться нашим проектом:
10 | -moz-box-shadow:5px 5px 7px rgba(33,33,33,1); |
12 | -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7); |
14 | box-shadow: 5px 5px 7px rgba(33,33,33,.7); |
Синтаксис для всех строк одинаковый: смещение, размытие и цвет. После завершения действий страница должна принять такой вид:
Шаг 3: Наклоняем заметки
Для наклона элементов страницы будем использовать свойство CSS3 transform:rotate с добавлением префикса для каждого поддерживаемого браузера:
2 | -webkit-transform: rotate(-6deg); |
3 | -o-transform: rotate(-6deg); |
4 | -moz-transform:rotate(-6deg); |
Данное правило наклоняет все ссылки на шесть градусов
влево. Чтобы внести элемент пвсевдослучайности в расположение заметок
будем использовать свойство CSS3 nth-child:
01 | ul li:nth-child(even) a{ |
02 | -o-transform:rotate(4deg); |
03 | -webkit-transform:rotate(4deg); |
04 | -moz-transform:rotate(4deg); |
09 | -o-transform:rotate(-3deg); |
10 | -webkit-transform:rotate(-3deg); |
11 | -moz-transform:rotate(-3deg); |
16 | -o-transform:rotate(5deg); |
17 | -webkit-transform:rotate(5deg); |
18 | -moz-transform:rotate(5deg); |
Таким образом мы наклоняем каждую вторую ссылку на 4
градуса вправо и смещаем ее на 5 пикселей вниз. Каждая третья ссылка
наклоняется на 3 градуса влево и сдвигается на 5 пикселей вверх. А
каждая пятая ссылка поворачивается на пять градусов вправо и смещается
на 10 пикселей вверх. Все эти действия создают иллюзию случайного
расположения заметок:
Шаг 4: Масштабирование липких заметок при наведении курсора и получении фокуса ввода
Для выделения заметки мы будем использовать тень большего размера и трансформацию с помощью правила CSS3 scale. Нужно использовать префиксы для каждого поддерживаемого браузера:
01 | ul li a:hover,ul li a:focus{ |
02 | -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7); |
03 | -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7); |
04 | box-shadow:10px 10px 7px rgba(0,0,0,.7); |
05 | -webkit-transform: scale(1.25); |
06 | -moz-transform: scale(1.25); |
07 | -o-transform: scale(1.25); |
Также мы добавили более высокое значение z-index,
чтобы увеличенная заметка гарантированно размещалась поверх остальных
элементов страницы. Набор свойств используется для псевдоселекторов hover и focus, что означает применение стилей при наведении курсора на ссылку и при получении ей фокуса ввода:
Шаг 5: Добавляем плавность переходов и цвета
Теперь нужно добавить плавности при переходах от
нормального к увеличенному состоянию заметки. Для этого будем
использовать свойство CSS3 transition с установленными префиксами, соответствующими браузерам:
09 | -moz-box-shadow:5px 5px 7px rgba(33,33,33,1); |
10 | -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7); |
11 | box-shadow: 5px 5px 7px rgba(33,33,33,.7); |
12 | -moz-transition:-moz-transform .15s linear; |
13 | -o-transition:-o-transform .15s linear; |
14 | -webkit-transition:-webkit-transform .15s linear; |
Изменения элемента теперь происходят в течении четверти секунды.
Добавим еще различных цветов: для каждой второй
липкой заметки устанавливаем зеленый цвет, а для каждой третьей - светло
голубой:
01 | ul li:nth-child(even) a{ |
02 | -o-transform:rotate(4deg); |
03 | -webkit-transform:rotate(4deg); |
04 | -moz-transform:rotate(4deg); |
10 | -o-transform:rotate(-3deg); |
11 | -webkit-transform:rotate(-3deg); |
12 | -moz-transform:rotate(-3deg); |
Заключение
Использование свойств CSS3 позволило избежать
кодирования на Javascript, хотя в старых браузерах такой дизайн будет
отображаться желтыми квадратами. Также использование API Google Font
применять более интересные шрифты. Переключение между заметками возможно
как с помощью мыши, так и с помощью клавиатуры.
Здесь может быть Ваша реклама.
Рекламное место сдается.
