Фрэйн . - HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд.

Проследить за ходом разработки спецификации CSS Color Module Level 4 можно по адресу http://dev.w3.org/csswg/css-color-4/.

Резюме

В данной главе были изучены способы, позволяющие легко выбирать практически все, что нам нужно на странице, с помощью новых селекторов CSS3. Были также рассмотрены способы создания за рекордно короткие сроки адаптивных колонок и прокручиваемых панелей с содержимым, а также решения часто возника­ющих и весьма неприятных проблем с не помещающимися в области ввода длинными URL-адресами путем организации их многострочного вывода. Кроме того, теперь мы получили представление о новом цветовом модуле CSS3 и о том, как применять цвета с RGB и HSL, дополненные прозрачными альфа-слоями, для получения интересных эстетических эффектов.

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

6. Создание эстетически привлекательных эффектов средствами CSS3

Особая важность средств CSS3 для создания впечатляющих эстетически привлекательных эффектов в адаптивной конструкции обусловливается предоставлением во многих ситуациях возможностей замены ими изображений. Тем самым экономится ваше время, код приобретает повышенную гибкость, облегчается его поддержка, а для конечного пользователя страница становится «легковеснее». Эти преимущества пригодились бы даже в обычной конструкции, рассчитанной на использование на настольной системе и имеющей фиксированную ширину, но все же они важнее в адаптивном дизайне, поскольку использование CSS в характерных для него ситуа­циях облегчает создание различных эстетически привлекательных эффектов для разных окон просмотра.

В данной главе будут рассмотрены следующие вопросы:

• создание с помощью CSS теней для текста;

• создание с помощью CSS теней для блоков;

• создание с помощью CSS градиентных фонов;

• использование с помощью CSS нескольких фонов;

• использование градиентных фонов CSS3 для создания узоров;

• реализация фоновых изображений с высоким разрешением с помощью медиазапросов;

• использование фильтров CSS и их влияние на производительность.

А теперь приступим к изучению перечисленных вопросов.

Префиксы производителей

При реализации экспериментальных возможностей CSS не забывайте добавлять соответствующие префиксы производителей, но не вручную, а с использованием специального средства. Тем самым гарантируются самая широкая кросс-браузерная совместимость, а также избавление от добавления уже ненужных префиксов. На момент написания книги в качестве наилучшего инструмента такого плана мне виделось средство Autoprefixer (https://github.com/postcss/autoprefixer), упоминаемое мною в большинстве глав.

Создание теней для текста средствами CSS3

Одним из наиболее широко реализованных средств CSS3 является text-shadow. У него, как и у @font-face, была своя предыстория, прервавшаяся в CSS 2.1. К счастью, оно вернулось и получило весьма широкую поддержку во всех современных браузерах, начиная с Internet Explorer 9. Рассмотрим базовый синтаксис:

.element {

text-shadow: 1px 1px 1px #ccc;

}

Не забудьте, что значения в краткой форме правил всегда идут сначала слева направо, а затем сверху вниз (можно также, если вам так легче, представлять себе направление по часовой стрелке). Следовательно, первое значение будет задавать объем тени справа, второе — объем тени снизу, третье — протяженность размытия (расстояние, проходимое тенью до ее полного исчезновения), четвертое — цвет.