Разрабатываем HTML5/CSS3-шаблон веб-сайта без изображений – часть 2

В первой части данной статьи мы закончили разъяснения всех элементов HTML5, примененных в коде демо-страницы Index.html, а сегодня мы будем обсуждать CSS-параметры, применённые в оформлении этой страницы.

Напоминаем вам, как шаблон будет выглядеть после того, как мы применим все параметры CSS3:


Смотреть демо | Скачать архивом

CSS3: украшаем страницу

Так как основу HTML мы закончили, настало самое время перейти к украшениям, чем мы и займемся, вооружившись CSS3. Мы сосредоточимся на параметрах CSS3, сократив комментарии по поводу остального кода CSS до минимума. Но, как обычно, если что-то вам окажется неясным, пожалуйста, не стесняйтесь спрашивать в комментариях, мы обязательно изучим ваш вопрос.

Сброс CSS

Некая вещь, которая очень помогает сделать так, чтобы наши страницы выглядели максимально одинаково во всех браузерах – это CSS Reset от Эрика Мейера (Eric Meyer). Мы немного изменили сброс, чтобы исключить HTML-элементы, которые отсутствуют в спецификации HTML5 по тем или иным причинам.


Мы добавили HTML5-элементы, которые нам нужно было сбросить, а также установили их значение display на block. Это оповестит браузеры о том, что эти элементы должны быть расценены как блочные.


Конечно же, что касается других страниц/веб-сайтов, вам также следует включить любые другие использующиеся HTML5-элементы в список сброса.

Объявления @font-face

Для того чтобы сделать заголовок нашей демо-страницы не таким безобразным, мы воспользуемся двумя шрифтами, которые не относятся к веб-шрифтам. Эти шрифты: HighlandGothic и Colaborate, и оба они бесплатны на сайте Font Squirrel.

CSS-объявления @font-face работают за счет создания нового семейства шрифтов, которые вы можете отображать на страницах. После объявления названия семейства шрифта, задействованные файлы шрифтов должны подгружаться отдельно, и тут могут возникнуть проблемы, так как различные браузеры поддерживают различные шрифты по-разному!


Как видно в таблице, представленной выше, самый короткий путь к тому, чтобы охватить всевозможные варианты – это внести версии шрифтов TTF (TrueType Font) или OTF (OpenType Font) и EOT (Embedded OpenType). Сначала определите, какой шрифт вы хотите внедрить в формате TTF и/или OTF, а затем вам на помощь придёт Font Squirrel, когда станет нужно конвертировать шрифт в EOT. Это можно будет сделать посредством @font-face kit Generator. Генератор позволяет вам конвертировать ваши шрифты во все требующиеся форматы, в зависимости от нужд, а также у вас будет возможность создать файлы Cufon.

@font-face {
    font-family: 'Colaborate-RegularRegular';
    src: url('fonts/ColabReg-webfont.eot');
    src: local(' '),
    url('fonts/ColabReg-webfont.woff') format('woff'),
    url('fonts/ColabReg-webfont.ttf') format('truetype'),
    url('fonts/ColabReg-webfont.svg#webfont') format('svg');
}

Учтите, что источники во втором параметре src должны быть на разных линиях, что способствует различию. В CSS-файле, использованном тут, мы оставили их на одной линии.

Код, использованный для объявления @font-face, основан на идее Bulletproof @font-face от Пола Айриша (Paul Irish). Мы не будем вдаваться в подробности здесь, так как Пол уже рассказал всё досконально в собственной статье. Итак, после определения имени шрифта, мы для начала укажем расположение файла шрифта EOT, который будет работать в IE. После этого мы повторим параметр src и, так как IE не распознает локальное расположение, указанные файлы шрифтов во второй части не будут подгружаться браузером IE. Что касается порядка расположения различных форматов шрифтов во втором параметре src, давайте ознакомимся с тем, что об этом сказано в спецификации от W3C:


Итак, учитывая то, что браузер будет использовать первый поддерживаемый формат, порядок следует сделать следующим: WOFF > OTF/TTF > SVG. Если подумать о том, что WOFF означает Web Open Font Format (Открытый формат веб-шрифта), то этого становится достаточно для того, чтобы понять, что он более значимый, нежели OTF/TTF и SVG, и советуем вам ознакомиться с данной статьей. Здесь также следует помнить о том, что есть ряд преимуществ, как например, тот факт, что этот формат является сжатым, а также содержит в себе мета-данные о происхождении шрифта и так далее. Причина, по которой SVG-шрифты расположены в конце порядка, кроется в том, что они более деривативны: были конвертированы из форматов OTF или TTF, и здесь возникает вероятность потери некоторых данных при конвертации.

Вполне просто отобразить шрифт посредством встроенных шрифтов, нам нужно задать просто список с заданным именем семейства шрифта, указанное в @font-face в параметре желаемых селекторов CSS. Например, мы использовали шрифт HighlandGothic в качестве логотипа страницы, а объявление этого элемента выглядело примерно так:

hgroup h1 {
    font: 40px/54px HighlandGothicLightFLFRegular, "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color: #970000;
    text-shadow: -1px -1px 0 #650000, 0 0 10px rgba(255,255,255,0.7);
}

Очевидно, что шрифт HighlandGothic указан первым, а затем идут два шрифта для отката. Мы также указали цвет шрифта и, наконец, мы добавили небольшую тень логотипу, что переносит нас к следующему параметру CSS3: text-shadow.

Параметр text-shadow

Перед тем, как мы перейдём на этот параметр, давайте немного ознакомимся кое с чем: параметр text-shadow – это не новшество в CSS3, этот параметр был представлен в CSS2, а далее изъят из CSS2.1.

Итак, это поможет нам избегать пользования Photoshop, и спокойно добавлять тени к тексту (и @font-face также позволил нам опираться на Photoshop, чтобы использовать на сайте безопасные веб-шрифты).

text-shadow: -1px -1px 0 #650000, 0 0 10px rgba(255,255,255,0.7);

Код параметра text-shadow вполне прост: первые два значения определяют горизонтальную и вертикальную дистанции от объекта до тени. Третье значение указывает коэффициент размытости, принятой к тени, а последнее значение указывает цвет тени. Мы также можем добавить более чем одну тень к одному и тому же тексту: мы просто разделяем параметры каждой тени запятой. Также стоит помнить, что тени отображаются в том же порядке, как указаны в коде. Т.е. на самом верху стоит тень, параметры которой в коде указаны первыми.

В нашем примере первая тень не размыта и сдвинута от элемента на 1 пиксель в левую сторону и вверх, создавая интересный эффект, который в наше время используется крайне редко. Вторая тень размыта и придает нашему логотипу небольшой эффект свечения. Вы наверняка заметили, что у второй тени нет параметра цвета, указанного в привычном формате HEX. Это новое свойство (и еще кое-какие другие свойства, связанные с цветом) будет темой следующего раздела статьи.

Цвет и плотность

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

* Значением в формате HEX - #ff0000;
* Путем указания цветов формате RGB (красный, зеленый, синий) - rgb(255, 0, 0) или
* Используя css-имя цвета – red.

Почти все использовали первый вариант, так как он был самый легкий, и значения всегда можно было подобрать в Photoshop и скопировать. RGB-значения не так повсеместно применялись, так как их не так и просто скопировать из Photoshop, и их не так просто было запоминать. Нам кажется, что меньше всего пользовался популярностью третий метод (вспоминается текст о безопасных веб-цветах?).

Все современные браузеры (за исключением одного, и мы готовы выслать вам печеньку, если угадаете – какой из них) поддерживают новые свойства цветов CSS3, и первое из таких свойств, о котором мы с вами поговорим сейчас – это opacity (плотность).

Плотность (opacity)

Возможность редактировать плотность отображения элементов на странице была давно ожидаема многими веб-дизайнерами, и теперь она, наконец, стала доступна (доступна, конечно же, только тем, кто не использует Internet Explorer). Код катастрофически простой:

opacity: X.X;

Уровень плотности может варьироваться от 0 (полностью прозрачный) до 1 (100% плотности) с порогом на одну десятую. Все просто и понятно!

Плотность может быть очень полезна, но существует небольшой минус, который мы обсудим в следующем разделе статьи о свойстве цвета в CSS3: RGBA.

Цвет RGBA

Как вы уже догадались, RGBA – это модификация RGB, где дополнительная буква алфавита отвечает за прозрачность. Итак, указывая цвет с помощью RGBA, вы можете указать значение цвета + уровень его плотности. Код здесь также очень простой:

rgba(255,255,255,0.7);

Первые три значения в скобках – это значения RGB, а последнее значение отвечает за прозрачность. Т.е. цвет, как указано выше - #ffffff, а уровень его плотности – 70%.

Выше мы написали, что у этого свойства есть небольшой минус, и для того, чтобы продемонстрировать вам его, мы воспользуемся нашим логотипом. Представьте, что мы указали тень текста следующим образом:

text-shadow: -1px -1px 0 #650000, 0 0 10px rgb(255,255,255);
opacity: 0.5;

Мы поставили уровень плотности чуть ниже для того, чтобы были заметны различия, и вы смогли бы увидеть, что при выставленном значении в 0.5, плотность всего элемента понижается до 50%, и эффект не сильно похож на тот, который мы ожидали увидеть. Если у нашего логотипа есть фоновый рисунок или цвет фона, но и его плотность тоже становится 50%. Нам нужно, чтобы лишь у второго параметра тени текста была прозрачность, но вместо этого весь элемент становится полупрозрачным. Поэтому мы воспользуемся параметром указания цвета посредством RGBA:

text-shadow: -1px -1px 0 #650000, 0 0 10px rgba(255,255,255,0.5);

Вот так гораздо лучше! И, наконец, наш последний пример с уровнем плотности тени, установленным на 70%:

text-shadow: -1px -1px 0 #650000, 0 0 10px rgba(255,255,255,0.7);

Как нам показалось, если пользоваться параметром opacity, то это не более чем создание иллюзии прозрачности. Гораздо легче и практичнее будет пользоваться RGBA или следующим параметром, о котором мы вам расскажем – цвет HSLA.

HSL и цвет HSLA

Значения цвета HSL основаны на цветовой модели Hue (цвет), Saturation (насыщенность), Lightness (яркость). Взгляните на пример нашего текста с цветом, указанным в HSLA:

text-shadow: -1px -1px 0 #650000, 0 0 10px hsla(0,0%,100%,0.7);

Вышеприведенный код позволит нам достичь того же эффекта, что и вариант с RGBA. Значения в скобках отвечают за цвет, насыщенность, яркость и плотность, соответственно. Кое-что, что следует отметить: насыщенность и яркость указываются в процентном соотношении, а цвет указывается в безразмерной единице (здесь нет ни пикселей, ни процентов; в Photoshop цвет обозначается в градусах). Также заметьте, что важно включить знак процента, даже если значение насыщенности или яркости является 0. Если вы забудете внести знак процента, браузер не распознает код, и цвет не будет присвоен.


Работая с CSS-значениями, отвечающими за цвета, мы предпочитаем использовать значения в формате HEX, но зачастую приходится использовать RGBA, если нужно добавить прозрачность. Тем не менее, также имеет место быть применение формата HSLA, так как этот вариант ближе к тому, как человек воспринимает цвет. Используя HSLA, вы можете напрямую контролировать оттенок цвета, его насыщенность и яркость. Это позволяет идеально подбирать цвета посредством кода CSS, так как вы знаете, за что отвечает каждый параметр, и вам можно не прыгать туда-сюда в Photoshop.

Параметр border-radius (закругленные углы)

Следующее свойства CSS3, о котором мы поговорим, также многие ждали достаточно долго. Речь идет о закругленных углах. Долгое время веб-дизайнерам приходилось использовать изображения или javascript, чтобы сделать закругленные углы элементов на странице, но сегодня мы можем сделать это посредством лишь кода CSS. Многие браузеры полностью поддерживают эту функцию, за исключением, опять же, IE (хотя в IE9 что-то подобное проглядывается).

Мы используем основной элемент навигации для отображения работы параметра border-radius, а затем используем элемент nav для объяснения некоторых других причуд CSS3.

Спецификация W3C предлагает следующий код для применения border-radius:

border-radius: 20px;

Вряд ли его можно сделать более прямым, а полученный результат крайне впечатляюще выглядит в Opera и IE9: в элементе навигации мы можем наблюдать красивенькие закругленные углы с радиусом углов в 21 пиксель. Тем не менее, если мы остановимся на этом, то эффект не будет работать в браузерах семейств Gecko (Firefox) и Webkit (Safari, Chrome). Для того чтобы элемент nav и в них был с закругленными углами, нам нужно добавить еще два параметра:

-moz-border-radius: 20px;
-webkit-border-radius: 20px;

Спецификация W3C рекомендует использовать параметры с префиксами разработчиков браузеров, так как они действуют лишь для определенных браузеров. Следуя данной рекомендации, Mozilla и Webkit разработали собственные префиксы: moz- и -webkit-, соответственно. Итак, каждый префикс отвечает за отображение параметра в определенных браузерах.

У Opera есть политика, в рамках которой разработчики не внедряют новые свойства до того момента, пока они не будут официально утверждены в спецификации W3C. Нам кажется, что параметр border-radius уже близок к завершению разработки, и поэтому он всё же присутствует в Opera, к тому же, работает он без специально префикса -o-.

Еще одно преимущество при использовании border-radius вместо изображений заключается в том, что эффект масштабируем. Вот скриншот страницы, увеличенной на 300%:


Плавно! Мне кажется, каждый знает, какие резкие углы были бы сейчас, если бы это было изображение.

CSS3 градации

Еще одно свойство CSS3, которое украшает наш сайт – это параметр linear-gradient. Мы использовали линейную градацию несколько раз по всей странице, и здесь возникают некоторые сложности, так как все браузеры по своему генерируют градации. Мы разделили эту часть статьи на 2 подраздела, в которых опишем работу с каждым из 4 самых популярных браузеров.

Gecko – Mozilla Firefox

Начнем с Firefox:

background-image: -moz-linear-gradient(top, #ca0000, #970000);

Разработчики Mozilla следовали спецификациям, предложенным командой W3C и добавили префикс. Итак, первое значение внутри скобок отвечает за угол градации. Оно может быть указано посредством значения background-position (как в нашем примере), либо цифрой угла в градусах. Если нам нужно будет указать текущую градацию, использованную на сайте, в градусах, то это будет -90deg. Пожалуйста, учитывайте, что вы можете не указывать угол вообще, тогда он будет выставлен по умолчанию – вверх.

Следующие два значения внутри скобок отвечают за цвета, и здесь вы можете использовать любую модель указания цвета: HEX, RGB(A), HSL(A). Также вы не ограничены лишь двумя цветами. Для получения дополнительной информации о разработке кода -moz-linear-gradient, ознакомьтесь с материалами от команды разработчиков Mozilla.

Webkit – Safari и Google Chrome

Теперь давайте ознакомимся с кодом, нужным для интеграции градаций в браузера Safari и Google Chrome:

background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ca0000),color-stop(1, #970000));

Webkit-браузеры, очевидно, используют другой код, но всё ещё включают специальный префикс. Первое значение в скобках определяет тип градации, который мы хотим использовать: линейный или радиальный. Следующие два пункта определяют точки старта и окончания линии; вы можете использовать числительные (пиксели), процентное соотношение или ключевики (верх, низ, лево, право). Наконец, нам предлагают выставить цвета и, как вы уже догадались, их может быть и больше двух. Для указания цвета используется два значения: значение точки (процентное соотношение или числительное от 0 до 1) и значение цвета (здесь применимы любые css-формы определения цветов).

Trident – Internet Explorer

Наш заклятые враг, Internet Explorer, не поддерживает градации CSS, но мы можем использовать фильтр DirectX для генерации градации в качестве фона элемента:

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType='0', StartColorStr='#ca0000', EndColorStr='#970000')";

Итак, здесь у нас есть три параметра:

* GradientType – контролирует направление градации: 0 даёт вертикальную градацию, а 1 – горизонтальную;
* StartColorStr – определяет начальный цвет градации, и здесь вам лучше применять формат HEX (нам не удалось заставить это работать правильно посредством RGB(A) или HSL(A));
* EndColorStr – определяет конечный цвет градации и, как уже было сказано выше, используйте HEX-формат.

Мы разместили все DirectX-фильтры в отдельном CSS-файле, на который затем сослались в головной секции нашего HTML-файла:

<!--[if lt IE 9]><link href=ie.css rel=stylesheet /><![endif]-->

Немного заметок:

* Возможно, вам покажется странным то, что мы вынесли стили для IE в отдельный файл, а все остальные оставили в основном документе. Здесь всё заключается в том, что лишь IE позволяет указать условные комментарии, поэтому мы его и вынесли. К тому же, здесь используется множество фильтров DX, а нам ведь надо, чтобы наш CSS был валидным, не так ли? Тут даже можно не объяснять то, что таким образом и размер нашего CSS-файла будет гораздо меньше. Конечно же, при использовании IE, будет сделан еще один запрос HTTP, но мы считаем, что лучше все-таки держать наш CSS-файл валидным.

* Здесь мы попытались довести до ума внешний вид страницы лишь для браузера IE от 8-й версии. На IE 6 и 7 даже не смотрели.

* IE 9 еще очень сырой, и вряд ли нормально поддерживает закругленные границы и CSS псевдо-элемент, и это очень плохо (касательно элементов, примененных на нашей странице). Нам показалось, что не стоит уделять так много времени для этой проблемы, так как у нас даже нет информации о том, какие параметры будут поддерживаться в финальной версии.

Presto – Opera

Opera не имеет поддержки градаций CSS, а также не поддерживает и фильтры DirectX, но мы и здесь нашли выход – параметр box-shadow. В следующем разделе статьи мы расскажем вам о работе параметра box-shadow, а затем покажем, как имитировать градацию.

Параметр box-shadow

Давайте познакомимся ещё с одним параметром, который так часто используется на нашей демо-странице. Код параметра box-shadow очень похож на код параметра text-shadow. Давайте ознакомимся с кодом внешней тени нашего навигационного меню:

box-shadow:  inset 0 0 15px #900, inset 0 35px 35px -18px #ca0000, 0 0 20px #446b6b;
-moz-box-shadow:    inset 0 0 15px #900, 0 0 20px #446b6b;
-webkit-box-shadow: 0 0 20px #446b6b;

Одно различие, которое вы наверняка заметили, заключается в использовании префиксов для браузеров на базе Gecko и Webkit, хотя стандартный параметр box-shadow и так прекрасно работает в Opera. Мы также можем указать несколько браузеров и порядок идентификации, идентичный тому, что вы видим в параметре text-shadow. У нас есть 2 новые опции, которые относятся лишь к box-shadow: врезка и радиус распространения.

Сперва, давайте рассмотрим значение врезки: он отвечает за расположение тени (другими словами, тень находится в пределах элемента или вокруг него).


Думаем, здесь вы можете увидеть внутреннюю тень вокруг углов. Этот скриншот был сделан в Opera, но выглядит так, как будто в Firefox. На данный момент в Google Chrome присутствует некий баг, который препятствует корректной генерации параметра внутренних теней.


Как видно, цвет фона старательно пытается покрыть весь периметр элемента. Вот почему не следует включать внутреннюю тень в параметр -webkit-box-shadow. Ещё одна причина заключается в том, что Safari пока ещё не предоставляет поддержку внутренней тени.

Наконец, мы подошли к параметру внутренней тени, которая определяется в Opera. Здесь тень будет имитировать градацию:

inset 0 35px 35px -18px #ca0000

Итак, у нас есть ключевое слово «inset»; два значения, которые определяют позицию тени; радиус распространения; размер тени и её цвет. Значения радиуса распространения обозначает развёрнутость тени, если значение положительное, или её уменьшение, если значение отрицательное. Учтите, что тень распространяется в перпендикулярном направлении от краев тени. Теперь, что касается внутренних теней, положительное значение радиуса распространения, наоборот, будет уменьшать тень.

Здесь идея заключается в том, чтобы получить внутреннюю тень, которая будет больше элемента (т.е. нам нужно отрицательное значение радиуса), и будет покрывать элемента полностью с верха до середины навигационного меню, создавая иллюзию, будто у нас применена градация. Если вы сравните два изображения, приведенные выше (из Opera и из Chrome), то вы увидите, что эффект вполне схож, даже если увеличивать изображение.

Но и этот фокус у нас не без изъяна: если использовать отрицательное значение распространения тени для внутренних теней, то в Opera размеры элемента могут быть увеличены. Правда, это не имеет никакого значения, если элемент очень маленький или находится где-то с краю каркаса. Мы указали края, так как этот эффект сделает каркас шире, чем 960 пикселей, как указано в CSS, и наверняка не избежать горизонтального скроллинга, если вы используете маленькое разрешение (для того, чтобы избежать появления горизонтального скроллинга, разрешения экрана в 1024х768 пикселей будет достаточно).

Учтите, что то же самое происходит в Firefox, но нам не нужно эмулировать данный тип «градаций» в Firefox. Итак, если вы уверены, что посетители вашего веб-сайта используют большие разрешения экрана, то не беспокойтесь об этом.

CSS3 Animations и Transitions

Прикольные анимации, которые вы можете наблюдать на демо странице, выполнены посредством лишь кода CSS, без применения javascript. В этом разделе мы расскажем немного о каждой анимации.

Раскрытие подменю

В нашей основной навигации есть подменю, которое выезжает при наведении курсора мыши, а именно по разделу Services (Услуги). Перед тем, как мы окунемся в код, давайте немного поговорим об оформлении подменю.

Так как нам надо было, чтобы подменю раскрылись в вертикальном порядке, мы установили высоту подменю на 0, а параметр z-index на -1. Высота ссылок в подменю, а также высота строки (line-height) тоже выставлены на 0:

nav#global ul li #subMenu {
    height: 0;
    z-index: -1;
    […]
}
nav#global ul li #subMenu li a {
    height: 0;
    line-height: 0;
    […]
}

При наведении курсора мыши на раздел Услуги, к нему применяется следующий стиль:

#services:hover > #subMenu { z-index: 2 }
#services:hover > #subMenu li a { height: 40px; line-height: 40px }

Мы применили селектор > (child), чтобы сообщить браузерам, что при наведении курсора на раздел Услуги, подменю должны двигаться вверх в параметре z-index, а высота строк для ссылок в подменю должна выставляться по умолчанию.

Всё это довольно красиво, но что же насчет анимации? Итак, анимация реализована за счет добавления параметра перехода, примененного к пункту, который запускает анимацию. В нашем случае рычагом является ссылка внутри пункта списка с Id services:

#services a {
    transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
}

Параметр transition сообщает браузеру, что параметр элемента должен быть анимирован на период примерно в 0.3 секунды, и что у перехода должна быть линейная функция тайминга. Нам не хотелось бы вдаваться в подробности здесь, так как в сети есть множество информации по этому поводу. Не бойтесь обыгрывать значения, пока не найдете что-то, что понравится вам.

Немного о префиксах: для того чтобы этот параметр заработал, нам нужно включить префикс даже в Opera. Поддержка этой функции немного ограничена: Internet Explorer не поддерживает её (сюрприз!) и Firefox не будет поддерживать её вплоть до версии 3.7. Итак, первый (без указания префикса) и третий (-moz-) параметры перехода указаны здесь на будущее.

Скользящие ссылки

CSS3-переходы также применяются для выдвижения ссылок в Blogroll и в разделе Popular Posts, а также в качестве ссылки на аккаунт Twitter’а @TheBlackAdder. Это реализовано за счет левого поля, примененного к ссылкам в состоянии при наведенном курсоре.

Кнопки чтения полной версии записи

Еще один элемент, анимированный посредством параметра перехода, это – кнопка «Continue Reading», или кнопка чтения полной версии записи, расположенная в нижней части каждой записи на странице. На этот раз, левый отступ кнопки применен к :hover так, что сгенерированный элемент :before может подъехать близко к тексту кнопки.

Цитатник Twitter в виде шарика

Здесь применены несколько анимаций. Для увеличения размеров при наведении курсора была использована функция transformation.

blockquote:hover {
    transform: scale(1.05);
    -o-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -webkit-transform: scale(1.05);
}

Вряд ли этот код может быть еще более простым: просто укажите степень увеличения, и всё готово. Если вам нужно увеличить элемент, используйте число выше 1; если хотите уменьшить – меньше 1.

Стиль цитатника Twitter основан на CSS-кодах от Николаса Галлахера (Nicolas Gallagher).

Вращение даты

В каждой записи мы можем наблюдать информацию с датой публикации, где применена схожая с transformation анимация, а точнее – rotate:

.year {
    transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    […]
}

Учтите, что трансформации были применены к стандартному положению элементов с классом year. Таким образом, вращение выполняется сразу по загрузке таблиц стилей.

Смотреть демо | Скачать архивом


Заключение

Итак, вот мы и подошли к концу второй части статьи. Здесь мы охватили множество элементов, и надеемся, что рассказали о них достаточно детально. Если нет, то не стесняйтесь, и задавайте вопросы в комментариях.

Спасибо за чтение!