Анимированный заголовок на главной странице с причудливым шрифтом
Название сайта должно привлекать внимание посетителей, чтобы вызывать желание смотреть дальше.
Для выберем красивый шрифт, и все это немного анимируем с помощью CSS3.
Благодаря свободной библиотеке шрифтов, предоставляемых Google, вы можете использовать широкий спектр элегантных и необычных шрифтов. Преимущество в том, что этот шрифт не должен быть установлен на компьютерах посетителей веб-сайта. Google Web Fonts является набором оптимизированных шрифтов для веб-сайтов, и простая интеграция этих шрифтов является дополнительным преимуществом!
Подключение нового типа шрифта происходит в разделе “<HEAD>” веб-страницы до вызова собственных “стилей”. В общем, интеграция заключается в следующем:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Comic Sans">
Вы можете изменить шрифт, в данном случае используется “Comic Sans”.
Теперь рассмотрим анимации. Во-первых напишем заголовок “Vavik96” и “Интернет дайджест для вэбмастеров и фотографов” Вот как это выглядит в HTML:
<h2 class='modern1'>
<span>Vavik</span>
<span>96</span>
</h2>
<h2 class="modern2">
Интернет дайджест для вэбмастеров и фотографов
</h2>
Благодаря двум “<SPAN>” элементам, слова отделены друг от друга, и их можно анимировать индивидуально. Это может быть использовано как для слов, как описано ниже, так и для отдельных букв.
Важное значение для анимации, имеет смещение элемента “top-” и “left-“. По этой причине, в элементе “<span>-” значения “top-” и “left-“всегда устанавливается в 0!
CSS выглядит следующим образом:
h2.modern1 span,
h2.modern2 {
font: bold 1.5em 'Comic Sans MS';
font-style: italic;
}
h2.modern1 span {
position: relative;
margin: 0 auto;
line-height: 1.4em;
color: #5f5f5f;
top: 0;
left: 0;
text-shadow: 3px 8px 3px #999;
cursor: crosshair;
transition: .3s linear;
}
h2.modern1 span:hover,
h2.modern1 span:active,
h2.modern1 span:focus {
color: #497cab;
top: 4px;
left: 2px;
text-shadow: 2px 5px 1px #101010, 1px 1px 0 #505050;
}
h2.modern2 {
text-align: center;
margin: 1em;
color: #497cab;
text-shadow: 3px 4px 3px #999;
}Пример:
Vavik96
Интернет дайджест для вэбмастеров и фотографов
Когда вы перемещаете указатель мыши тень становится более резкой, и слова перемещаются на 4px вниз и на 2px вправо, ближе к тени, и выбирается другой цвет шрифта. Изменения, благодаря команде “transition” происходят в линейном порядке и в течение 0,3 сек.
