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

Синтаксис 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):