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

 

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

 

 

[580x400]

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

[580x300]

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

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

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

[580x158]

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

[580x300]

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

[580x300]

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

[580x300]

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

Цвет HSL и HSLA

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

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

[580x300]

Работая со значениями цвета 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:

[580x300]

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