В данном уроке мы поэтапно трансформируем список HTML в стену облепленную "липкими заметками".
Шаг 1: HTML и основные прямоугольники
Начнем с простейшей версии, которая работает во всех браузерах. Основным HTML элементом будет неупорядоченный список ссылок, в которых содержатся все остальные элементы каждого пункта списка:
<ul>
<li>
<a href="#">
<h2>Заголовок #1</h2>
<p>Текст заметки #1</p>
</a>
</li>
<li>
<a href="#">
<h2>Заголовок #2</h2>
<p>Текст заметки #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;
}
Сначала мы осуществляем сброс полей и отступов, затем устанавливаем общие настройки и задаем для списков стиль без маркеров.
Затем для элемента UL устанавливаются отступ и свойство overflow:hidden – таким образом, когда позже мы сместим пункты списка, они будут автоматически обтекать друг друга.
Затем задаем стиль для ссылок, чтобы они стали желтыми квадратами и смещаем их всех влево. В результате мы получим серию из желтых квадратов:
Шаг 1
Результат наших действий будет выводиться в любом браузере, включая IE6. Далее поддержка используемых эффектов этим чудесным браузером не распространяется.
Шаг 2: Тени и особенный шрифт
Теперь настало время установить тени для заметок и какой-нибудь декоративный шрифт для содержания. Будем использовать API Google Fonts и шрифт. Самый простой способ задействовать API - использовать Google Font Directory:
На вкладке "Get the code" на странице выбранного шрифта (в нашем примере это Neucha) получаем простую HTML строку для включения шрифта на странице:
<link href="http://fonts.googleapis.com/css?family=Neucha&subset=cyrillic" rel="stylesheet" type="text/css" >
Далее устанавливаем отступы для заголовков на липких заметках, и устанавливаем шрифт для параграфов:
ul li h2{
font-size:140%;
font-weight:bold;
padding-bottom:10px;
}
ul li p{
font-family:"Neucha",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);
}
Синтаксис для всех строк одинаковый: смещение, размытие и цвет. После завершения действий страница должна принять такой вид:
Шаг 3: Наклоняем заметки
Для наклона элементов страницы будем использовать свойство CSS3 transform:rotate с добавлением префикса для каждого поддерживаемого браузера:
ul li a{
-webkit-transform: rotate(-6deg);
-o-transform: rotate(-6deg);
-moz-transform:rotate(-6deg);
}
Данное правило наклоняет все ссылки на шесть градусов влево. Чтобы внести элемент пвсевдослучайности в расположение заметок будем использовать свойство CSS3 nth-child:
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;
}
Таким образом мы наклоняем каждую вторую ссылку на 4 градуса вправо и смещаем ее на 5 пикселей вниз. Каждая третья ссылка наклоняется на 3 градуса влево и сдвигается на 5 пикселей вверх. А каждая пятая ссылка поворачивается на пять градусов вправо и смещается на 10 пикселей вверх. Все эти действия создают иллюзию случайного расположения заметок:
Шаг 4: Масштабирование липких заметок при наведении курсора и получении фокуса ввода
Для выделения заметки мы будем использовать тень большего размера и трансформацию с помощью правила CSS3 scale. Нужно использовать префиксы для каждого поддерживаемого браузера:
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;
}
Заключение
Использование свойств CSS3 позволило избежать кодирования на Javascript, хотя в старых браузерах такой дизайн будет отображаться желтыми квадратами. Также использование API Google Font применять более интересные шрифты. Переключение между заметками возможно как с помощью мыши, так и с помощью клавиатуры.