Создаем разметку сайта без изображений с помощью HTML5/CSS3 – часть 2

От автора: В первой части этой статьи — Создаем разметку сайта без изображений с помощью HTML5/CSS3 – часть 1 мы закончили объяснять все элементы HTML5, используемые в коде нашей демо-страницы index.html и сегодня обсудим свойства CSS, применяемые для того, чтобы сделать ее красивой.

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

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

Также скачайте исходники себе на компьютер!

CSS3 — украшаем свою страницу

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

CSS Reset

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

basefront, big, center, font, s, strike, tt, u, frame, frameset, noframes, acronym, applet, isindex и dir более не являются частью спецификации HTML.

Я добавил элементы HTML5, которые мы использовали для reset, а также установил их свойства display на block. Так мы отдаем указание браузерам относиться к ним как к элементам block-level.

Новыми дополнениями к CSS reset являются следующие элементы: header, nav, article, aside, footer, hgroup и section.

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

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

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

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

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

Обратите внимание, что каждый источник во втором свойстве src для лучшей читабельности расположен на отдельной строке; в настоящем файле CSS я поместил их в одну строку.

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

Когда требуется шрифт, агент пользователя итерирует по набору ссылок в списке, пользуясь первой, которую может успешно активировать.

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

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

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

Свойство text-shadow

Перед переходом к этому свойству позвольте небольшое отклонение от темы: свойство text-shadow не ново для CSS3, впервые оно было представлено в CSS2, а позже переместилось в CSS2.1.

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

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

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

Цвет и непрозрачность

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

Из трех вышеизложенных вариантов я всегда использовал первый, потому что его легче всего скопировать из Photoshop’а. Значения RGB не очень практичны, потому что их не так легко скопировать из Photoshop’а и сложно запомнить. Я считаю, что третья опция была самой негодной и ограниченной.

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

Непрозрачность

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

Значение непрозрачности может варьироваться от 0 – полностью прозрачно до 1 – полностью непрозрачно в величинах .1. Это очень просто!

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

Цвет RGBA

Как можно представить себе, RGBA более усовершенствован, чем RGB, и дополнительная буква означает параметр alpha. Таким образом, определение цветовых свойств при помощи RGBA в основном похоже на то же самое в RGB и включает определение непрозрачности в отдельное свойство. Синтаксис довольно прост:

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

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

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

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

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

Цвет HSL и HSLA

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

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

Работая со значениями цвета CSS, я предпочитаю HEX, но обычно использую значения RGBA, когда нужно добавить прозрачности. Однако использование значений HSLA могло бы иметь больше смысла, потому что они ближе всего к цветовому восприятию человека. При использовании HSL можно напрямую контролировать тон, насыщенность и яркость цветов. Так удается тонко настроить цвета и найти самый подходящий гораздо легче, просто используя CSS, потому что вы знаете, что изменяет каждое значение, и не придется прибегать к Photoshop’у для настройки цветов, а затем копировать их в CSS как значения HEX или RGB.

Свойство border-radius

Следующую особенность CSS3, которую я хочу обсудить, долго ожидали (хотя, если быть честным, эта характеристика была какое-то время известна, но широко не поддерживалась) – закругленные углы. Очень долго веб-дизайнерам приходилось для применения закругленных углов к элементам страницы употреблять изображения или JavaScript, но сейчас мы можем делать это при помощи одного лишь CSS. Браузеры хорошо поддерживают свойство border-radius, один только IE не делает этого (но, судя по анонсам, IE9 поддерживает, так что скоро все изменится).

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

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

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

В спецификации W3C рекомендуется ставить перед свойствами на стадиях разработки префиксы, определяемые фирмой-разработчиком с тем, чтобы они обращались только к определенным браузерам. Следуя этой рекомендации, Mozilla и Webkit включили соответствующие префиксы -moz- и -webkit-. Таким образом, каждый префикс, в некотором смысле, похож на условный комментарий HTML к Internet Explorer’у – включая префикс, мы точно знаем, какой браузер(ы) станет его целью.

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

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

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

Градиенты CSS3

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

Gecko – Mozilla Firefox

Начнем с реализации в Firefox:

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

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

Webkit – Safari и Google Chrome

Давайте рассмотрим синтаксис, который скажет Safari и Chrome’у визуализировать градиент:

Webkit явно пользуется другим синтаксисом, но все же включает префикс фирмы-разработчика. Первое значение в скобках определяет вид градиента, который мы хотим визуализировать: линейный или радиальный. Две следующих позиции устанавливают начальную и конечную точки линии градиента; можно пользоваться числами (пикселями), процентами или ключевыми словами (top, bottom, left, right). Наконец, у нас есть color stop’ы (начальные и конечные цвета) и, конечно, их может быть более двух. У color stop’ов имеется два аргумента: значение stop (проценты или число от 0 до 1) и значение цвета (и опять принимаются все действующие цветовые системы CSS).

Trident – Internet Explorer

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

Итак, тут у нас имеется три параметра:

Я поместил все фильтры DirectX в отдельный файл CSS, на который ссылаюсь в начале файла index.html:

Пара заметок:

Presto – Opera

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

Свойство box-shadow

Это другое свойство, которое широко применялось в нашей демо-странице. Синтаксис свойства box-shadow довольно сильно похож на синтаксис text-shadow. Вот код внешней тени основной навигации:

Одна отличительная черта, которую вы наверняка заметили, состоит в том, что нам нужно применять префиксы фирмы-разработчика для браузеров, основанных на Gecko- и Webkit, в то время как по умолчанию свойство box-shadow работает в Opera. Помимо этого, мы можем устанавливать множественные тени, а порядок расположения идентичен порядку свойства text-shadow. Характерными для свойства box-shadow являются две новых опции: это ключевое слово inset и значение spread radius.

Сначала давайте рассмотрим ключевое слово inset, его присутствие устанавливает, что тень должна быть нарисована скорее внутри элемента, чем вне его краев.

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

Вы видите, что цвет фона растекается для наполнения квадратного очертания элемента. Это одна из причин для того, чтобы не включать вложенную тень inset в свойство -webkit-box-shadow. Другая – это факт того, что в данный момент Safari не поддерживает вложенные тени.

Наконец, мы приходим к другой тени inset в свойстве, имеющим своей целью Opera; тени, которая будет имитировать градиент:

Итак, у нас имеется ключевое слово inset; два значения, которые определяют местоположение тени; spread radius; размер тени и ее цвет. Spread radius заставляет тени увеличиваться, если имеет положительное значении и сжиматься при отрицательном значении. Обратите внимание, что тень увеличивается/сжимается в направлении, перпендикулярном своему краю. Теперь, что касается вложенных теней inset, положительный spread radius заставит их сокращаться и наоборот.

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

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

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

Анимация и переходы CSS3

Красивая анимация, которую можно видеть на демо-странице, сделана исключительно при помощи CSS, не употреблялось никакого JavaScript’а. В этом разделе я пройдусь по странице и немного расскажу о каждой анимации.

Выдвигающееся подменю

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

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

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

Мы употребили селектор > — (child), чтобы сказать браузерам, что когда над пунктом меню Services проводят мышью, подменю должно выдвинуть z-index, и ссылки в подменю должны восстановить полную высоту full (line-)height.

Это хорошо, но как насчет анимации? Ну, анимация достигается путем добавления свойства transition к тому пункту, который ее запускает. В нашем случае спусковым крючком служит ссылка внутри пункта списка с id services:

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

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

Выдвигающиеся ссылки

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

Кнопки Continue Reading

Другим элементом, анимированным свойством transition, является кнопка Continue Reading, которая появляется в нижнем колонтитуле элементов article. На этот раз левый отступ кнопки для состояния :hover уменьшается, так что сгенерированный элемент :before может придвигаться ближе к тексту кнопки.

Цитата в «облачке» из Twitter’а

Цитата из Twitter’а в «облачке» имеет другую анимацию. Для увеличения ее размера при проведении мышью было использовано изменение масштаба.

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

Стиль цитаты в «облачке» из Twitter’а основывается на одном из прекрасных speech bubbles из чистого CSS от Николаса Галлахера (Nicolas Gallagher).

Повернутые года

Аналогичное изменение масштабирования было использовано в разделе года в датах публикаций раздела статей:

Обратите внимание, что изменения применялись к состоянию по умолчанию элементов класса year. Таким образом, поворот совершается, как только загружена таблица стилей.

Последние слова

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

Спасибо за прочтение, с нетерпением жду любых вопросов и комментариев.

Автор: Marko Randjelovic

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

E-mail: contact@webformyself.com

Комментарии Вконтакте:

Комментарии (13)