Это цитата сообщения lyudmilakedinova Оригинальное сообщение
Создаем разметку сайта без изображений c помощью HTML5/CSS3. Часть 4.
В спецификации 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’у визуализировать градиент:
1.background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ca0000),color-st
Webkit явно пользуется другим синтаксисом, но все же включает префикс фирмы-разработчика. Первое значение в скобках определяет вид градиента, который мы хотим визуализировать: линейный или радиальный. Две следующих позиции устанавливают начальную и конечную точки линии градиента; можно пользоваться числами (пикселями), процентами или ключевыми словами (top, bottom, left, right). Наконец, у нас есть color stop’ы (начальные и конечные цвета) и, конечно, их может быть более двух. У color stop’ов имеется два аргумента: значение stop (проценты или число от 0 до 1) и значение цвета (и опять принимаются все действующие цветовые системы CSS).
Trident – Internet Explorer
Это сущее наказание, Internet Explorer, не поддерживает градиенты CSS, но мы можем применить фильтр DirectX для визуализации градиента на фоне элемента:
1.-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, на который ссылаюсь в начале файла index.html:
Пара заметок:
Может показаться странным, что я помещаю специальные стили для IE в отдельную таблицу стилей в то время, как специальные стили для других браузеров находятся в основной таблице. Собственно, IE – единственный браузер, на который можно нацелиться с помощью условных комментариев, так что мы обеспечиваем таблицу стилей только для него. Кроме того, в употреблении находится множество фильтров DX, и нам нужно, чтобы наш CSS подтверждал их правильность, не так ли? Другая причина их перемещения – уменьшение размеров основного файла CSS. Дополнительный запрос HTTP делается, когда IE получает доступ к странице, но я думаю, что аккуратная и правильная основная таблица стилей того стоит.
Я всего лишь попытался сделать так, чтобы страница достойно выглядела (читайте: смотрелась близко к визуализации в современных браузерах) в Internet Explorer 8, я не беспокоился об IE6 и IE7.
IE9 все еще находится в разработке и в данный момент, кажется, поддерживает закругленные границы, псевдоэлементы CSS и это уже многое (из свойств, использованных в нашей демо-странице). Я почувствовал, что нам не следует тратить на это время, не зная, какие из свойств будут поддерживаться в конечной версии.
Presto – Opera
Opera не поддерживает градиенты CSS и фильтры DirectX, но здесь имеется свой обходной путь – свойство box-shadow. В следующем разделе я объясню, как оно работает, а затем покажу, как его использовать для имитации градиентов.
Свойство box-shadow
Это другое свойство, которое широко применялось в нашей демо-странице. Синтаксис свойства box-shadow довольно сильно похож на синтаксис text-shadow. Вот код внешней тени основной навигации:
1.box-shadow: inset 0 0 15px #900, inset 0 35px 35px -18px #ca0000, 0 0 20px #446b6b;2.-moz-box-shadow: inset 0 0 15px #900, 0 0 20px #446b6b;3.-webkit-box-shadow: 0 0 20px #446b6b;
Одна отличительная черта, которую вы наверняка заметили, состоит в том, что нам нужно применять префиксы фирмы-разработчика для браузеров, основанных на 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:
01.nav#global ul li #subMenu {02.height: 0;03.z-index: -1;04.[…]05.}06.nav#global ul li #subMenu li a {07.height: 0;08.line-height: 0;09.[…]10.}
Когда над пунктом меню Services проводят мышью, мы применяем следующие стили:
1.#services:hover > #subMenu { z-index: 2 }2.#services:hover > #subMenu li a { height: 40px; line-height: 40px }
Мы употребили селектор > – (child), чтобы сказать браузерам, что когда над пунктом меню Services проводят мышью, подменю должно выдвинуть z-index, и ссылки в подменю должны восстановить полную высоту full (line-)height.
Это хорошо, но как насчет анимации? Ну, анимация достигается путем добавления свойства transition к тому пункту, который ее запускает. В нашем случае спусковым крючком служит ссылка внутри пункта списка с id services:
1.#services a {2.transition: all 0.3s linear;3.-o-transition: all 0.3s linear;4.-moz-transition: all 0.3s linear;5.-webkit-transition: all 0.3s linear;6.}
Свойство 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.blockquote:hover {2.transform: scale(1.05);3.-o-transform: scale(1.05);4.-moz-transform: scale(1.05);5.-webkit-transform: scale(1.05);6.}
Синтаксиса проще быть не может: всего лишь определите величину масштабирования и можете продолжать. Если хотите увеличить масштаб, примените число больше 1; хотите уменьшить – меньше 1.
Стиль цитаты в «облачке» из Twitter’а основывается на одном из прекрасных speech bubbles из чистого CSS от Николаса Галлахера (Nicolas Gallagher).
Повернутые года
Аналогичное изменение масштабирования было использовано в разделе года в датах публикаций раздела статей:
1..year {2.transform: rotate(270deg);3.-o-transform: rotate(270deg);4.-moz-transform: rotate(270deg);5.-webkit-transform: rotate(270deg);6.[…]7.}
Обратите внимание, что изменения применялись к состоянию по умолчанию элементов класса year. Таким образом, поворот совершается, как только загружена таблица стилей.
Последние слова
Итак, вот перед вами вторая часть статьи. Нужно было охватить множество элементов и, надеюсь, все было понятно. Если нет, пожалуйста, разместите вопрос в комментариях, и я постараюсь все объяснить.
Спасибо за прочтение, с нетерпением жду любых вопросов и комментариев.
Автор: Marko Randjelovic
Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.
E-mail: contact@webformyself.com