CSS3: псевдо-класс :target и анимация

Ни для кого не является секретом то, что лучше использовать CSS для каких-то интересных вещей, чем мучатся с запутанным кодом. В этой статье речь пойдет о псевдо-классе :target и простой CSS-анимации.

Псевдо-класс :target

Мы очень часто используем в своем коде фрагменты идентификаторов — для того, чтобы указать на специфический элемент на странице, представленный, как правило, симвлом «#» и якорем ссылки. Когда мы кликаем по ссылке, в адресе которой содержится фрагмент идентификатора какого-то элемента, то этот элемент становится целью (отсюда и :target).

Элемент с этим псевдо-классом может быть как-нибудь оформлен — точно так же, как мы обычно оформляем ссылки с псевдо-классами :hover или :active.

Посмотрите на пример, взятый с Википедии: если вы пройдете по ссылке, то (при условии использования современного браузера) увидите элемент списка на светло-голубом фоне. Если заглянуть в CSS-код, то можно увидеть следущее:

ol.references > li:target, sup.reference:target, span.citation:target, cite:target {
background-color:#DDEEFF;
}

Просто, не правда ли?

Наш пример

Имеем вот такой HTML-код:

<div id="content">

<ul>
<li><a href="#b1">Block 1</a></li>
<li><a href="#b2">Block 2</a></li>
<li><a href="#b3">Block 3</a></li>
<li><a href="#b4">Block 4</a></li>
</ul>

<div id="b1">
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me? " he thought.</p>
</div>

<div id="b2">
<p>The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack.</p>
</div>

<div id="b3">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
</div>

<div id="b4">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>

</div>

Базовый CSS-код

Сначала нам нужно написать основу. Тут мы опишем параметры шрифтов, отбивку внутри элементов и границы снаружи этих эелементов:

body {
font:62.5%/1.5 Cambria,Georgia,"Times New Roman",Times,serif;
}
div, ul, li, a, p {
padding:0; margin:0;
}

Теперь, быстренько опишем контейнер с идентификатором «content»:

#content {
width:500px;
margin:auto;
font-size:1.4em;
}

Далее, сделаем вот что:

1. Сделаем небольшую нижнюю границу между списком и всем блоками с текстом;
2. Уберем маркеры из списка;
3. Сделаем небольшую отбивку внутри блоков с текстом, добавим им светлую границу вокруг;
4. Как бы наберем каждую первую строку абзаца с текстом капсом. Ну, чтоб красивенько было.

ul, div > div {
margin-bottom:1em;
}
li {
list-style:none;
}
div > div {
padding:1em;
border:1px solid #ffffd3;
}
div > div p:first-line {
font-variant:small-caps;
font-size:1.2em;
}

Тут мы использовали селектор child для того, чтобы быть уверенными в том, что обозначенный блок является прямым потомком контейнера «content». Это нужно для того, чтобы заданные свойства применялись по назначению, а не ко всем блокам, которые могут оказаться в контейнере с текстом.

Самое интересное

Для начала сделаем у «цели» более темную границу:

div > div:target {
border:1px solid #dac89d;
}

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

Определяемся с эффектом

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

Приступим. Назовем нашу анимацию просто и незатейливо — «target». Выглядеть она будет вот так:

@-webkit-keyframes target {
from { background:#ffffff; } /*Отправная точка — белый цвет*/
50% { background:#ffffd3; } /*Серединный момент времени — светло-желтый цвет*/
to { background:#ffffff; } /*Конец анимации — снова белый цвет*/
}

Так-с, анимация готова, теперь мы должны каким-то образом послать ей «зов» от «цели»:

div > div:target {
border:1px solid #dac89d;
-webkit-animation-name:target;
-webkit-animation-duration:.5s;
-webkit-animation-iteration-count:1;
-webkit-animation-direction:linear;
}

Мы должны определить имя анимации («target»), её продолжительность (5 милисекунд), сколько раз она будет повторяться (1 раз) и её направление («linear»). Можно это все написать гораздо короче:

div > div:target {
border:1px solid #dac89d;
-webkit-animation:target .5s linear;
}

Напоследок

Я надеюсь, вам понравилось. Что еще можно сказать? Ах да, работающий пример смотрите тут. Все это счастье, к сожалению, будет работать только в Webkit-браузерах (Safari, Chrome).