Анимированный заголовок на главной странице с причудливым шрифтом

Название сайта должно привлекать внимание посетителей, чтобы вызывать желание смотреть дальше.
Для выберем красивый шрифт, и все это немного анимируем с помощью 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 сек.

Оригинал / Перевод

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.