HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд. - Фрэйн .
Шрифт:
Интервал:
Закладка:
.redness-alpha {
color: hsla(359, 99%, 50%, .5);
}
Синтаксис RGBA следует тому же соглашению, что и его HSLA-эквивалент:
.redness-alpha-rgba {
color: rgba(255, 255, 255, 0.8);
}
А почему бы просто не воспользоваться свойством opacity?
В CSS3 элементам также позволяется иметь установку непрозрачности, задаваемую объявлением свойства opacity. Значение устанавливается между 0 и 1 с десятичным шагом (например, непрозрачность, установленная в .1, означает 10 %). Но данное свойство отличается от RGBA и HSLA тем, что с его помощью устанавливается непрозрачность для всего элемента. А установка значения для HSLA или RGBA позволяет иметь уровень альфа-прозрачности конкретной части элемента. Например, у элемента может быть HSLA-значение для фона, а для текста внутри него задан сплошной цвет.
Работа над цветовым оформлением с CSS Color Module Level 4
Несмотря на то что эта функциональная возможность находится на весьма ранних стадиях спецификации, возможно, в скором будущем вы сможете получить удовольствие от работы над цветовым оформлением в CSS с помощью функции color(). А пока для нее не появится широкая браузерная поддержка, с подобными манипуляциями неплохо справляются пре- и постпроцессоры CSS (сделайте себе приятное и купите прямо сейчас книгу по этой теме, я рекомендую остановить выбор на Sass and Compass for Designers Бена Фрэйна).
Проследить за ходом разработки спецификации 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;
}
Не забудьте, что значения в краткой форме правил всегда идут сначала слева направо, а затем сверху вниз (можно также, если вам так легче, представлять себе направление по часовой стрелке). Следовательно, первое значение будет задавать объем тени справа, второе — объем тени снизу, третье — протяженность размытия (расстояние, проходимое тенью до ее полного исчезновения), четвертое — цвет.
Тени, направленные влево и вверх, можно получить, задав отрицательные значения, например:
.text {
text-shadow: -4px -4px 0px #dad7d7;
}
Цветовое значение не обязательно определять в HEX-виде (то есть задавать в виде шестнадцатеричных чисел цветовых составляющих), с тем же успехом оно может быть определено в формате HSL(A) или RGB(A):
text-shadow: 4px 4px 0px hsla(140, 3%, 26%, 0.4);
И тем не менее следует иметь в виду, что тогда для вывода эффекта на экран браузер также должен поддерживать не только тени для текста, но и режимы задания цвета HSL/RGB.
Значения, задающие тень, можно указывать и в любых других приемлемых для CSS единицах длины, таких как em, rem, ch и т. д. Лично я при задании значений для свойства text-shadow редко пользуюсь единицами длины em или rem. Поскольку значения всегда небольшие, то при всех величинах окон просмотра обычно неплохо выглядят тени, для задания которых используется значение 1px или 2px.
Благодаря использованию медиазапросов мы можем также без особого труда удалять текстовые тени при различных окнах просмотра. Ключевым в данном случае выступает значение none:
.text {
text-shadow: .0625rem .0625rem 0 #bfbfbf;
}
@media (min-width: 30rem) {
.text {
text-shadow: none;
}
}
совет
Кстати, вам стоит знать, что в CSS там, где значение начинается с нуля, например 0.14s, лидирующий нуль можно не ставить: .14s будет работать точно так же, как и предыдущее указание значения.
Если размытие не нужно, его значение можно опустить
Если добавлять размытие к значениям свойства text-shadow не нужно, то его можно опустить, например:
.text {
text-shadow: -4px -4px #dad7d7;
}
Это значение будет вполне допустимым. Браузер поймет, что если не задано третье значение, то первые два значения будут относиться к смещению тени.
Получение нескольких теней для текста
Если разделить задания теней запятыми, то к тексту можно добавить сразу несколько теней, например:
.multiple {
text-shadow: 0px 1px #fff,4px 4px 0px #dad7d7;
}
Кроме того, поскольку в CSS на пробельные символы не обращается никакого внимания, подобные значения можно разметить следующим образом, если, конечно, так их будет легче прочитать:
.text {
font-size: calc(100vmax / 40);
text-shadow:
3px 3px #bbb, /* справа и внизу */
-3px -3px #999; /* слева вверху */
}
совет
W3C-спецификацию, касающуюся свойства text-shadow, можно найти по адресу http://www.w3.org/TR/css3-text/.
Создание теней для блоков
Свойство box-shadow позволяет создавать прямоугольные тени как снаружи, так и внутри того элемента, к которому они применяются. После того как вы разобрались с тенями для текста, понять суть теней для блоков будет намного легче. В принципе, и те и другие следуют одному и тому же синтаксису: смещение по горизонтали, смещение по вертикали, размытие, протяженность (о которой мы вскоре узнаем) и цвет.
Из четырех возможных значений длины обязательными являются только два (в отсутствие последних двух цветовым значением определяется цвет тени, а для радиуса размытия используется нулевое значение). Рассмотрим простой пример:
.shadow {
box-shadow: 0px 3px 5px #444;
}
Изначально свойство box-shadow настроено на создание тени снаружи элемента. Хотя дополнительное ключевое слово inset позволяет применить box-shadow для создания тени внутри элемента.
Тень внутри элемента
