6. Создание эстетически привлекательных эффектов средствами CSS3
Особая важность средств CSS3 для создания впечатляющих эстетически привлекательных эффектов в адаптивной конструкции обусловливается предоставлением во многих ситуациях возможностей замены ими изображений. Тем самым экономится ваше время, код приобретает повышенную гибкость, облегчается его поддержка, а для конечного пользователя страница становится «легковеснее». Эти преимущества пригодились бы даже в обычной конструкции, рассчитанной на использование на настольной системе и имеющей фиксированную ширину, но все же они важнее в адаптивном дизайне, поскольку использование CSS в характерных для него ситуациях облегчает создание различных эстетически привлекательных эффектов для разных окон просмотра.
В данной главе будут рассмотрены следующие вопросы:
• создание с помощью CSS теней для текста;
• создание с помощью CSS теней для блоков;
• создание с помощью CSS градиентных фонов;
• использование с помощью CSS нескольких фонов;
• использование градиентных фонов CSS3 для создания узоров;
• реализация фоновых изображений с высоким разрешением с помощью медиазапросов;
• использование фильтров CSS и их влияние на производительность.
А теперь приступим к изучению перечисленных вопросов.
Префиксы производителей
При реализации экспериментальных возможностей CSS не забывайте добавлять соответствующие префиксы производителей, но не вручную, а с использованием специального средства. Тем самым гарантируются самая широкая кросс-браузерная совместимость, а также избавление от добавления уже ненужных префиксов. На момент написания книги в качестве наилучшего инструмента такого плана мне виделось средство 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, можно найти по адресу /.
Создание теней для блоков
Свойство box-shadow позволяет создавать прямоугольные тени как снаружи, так и внутри того элемента, к которому они применяются. После того как вы разобрались с тенями для текста, понять суть теней для блоков будет намного легче. В принципе, и те и другие следуют одному и тому же синтаксису: смещение по горизонтали, смещение по вертикали, размытие, протяженность (о которой мы вскоре узнаем) и цвет.
Из четырех возможных значений длины обязательными являются только два (в отсутствие последних двух цветовым значением определяется цвет тени, а для радиуса размытия используется нулевое значение). Рассмотрим простой пример:
.shadow {
box-shadow: 0px 3px 5px #444;
}
Изначально свойство box-shadow настроено на создание тени снаружи элемента. Хотя дополнительное ключевое слово inset позволяет применить box-shadow для создания тени внутри элемента.
Тень внутри элемента
Свойство box-shadow может также использоваться для создания внутренней тени. Синтаксис при этом идентичен тому, который используется для задания обычной тени, за исключением того, что значения начинаются с ключевого слова inset:
.inset {
box-shadow: inset 0 0 40px #000;
}
Все работает точно так же, как и раньше, но inset-составляющая объявления предписывает браузеру применить эффект к внутренней части элемента. Примеры обоих типов можно увидеть, запустив код из каталога example_06-01.
Создание нескольких теней
Как и text-shadow, свойство box-shadow позволяет применить сразу несколько теней. Разделите значения, задаваемые свойству box-shadow запятой, и они будут применены, начиная с нижнего набора значений и заканчивая верхним набором (от последнего к первому). Усвойте мнемоническое правило, согласно которому самое близкое к вершине правило (в коде) проявится как самое верхнее в порядке вывода браузером на экран. Как и с text-shadow, вы можете извлечь пользу от применения пробельных символов для выстраивания визуального столбца из различных наборов значений для свойства box-shadow:
box-shadow: inset 0 0 30px hsl(0, 0%, 0%),
inset 0 0 70px hsla(0, 97%, 53%, 1);
совет
Выстраивая в коде в столбец нескольких длинных значений по принципу одно под другим, вы получаете дополнительные преимущества при использовании систем управления версиями, поскольку упрощаете обнаружение различий, когда сравниваете две версии файла в режиме их поиска. Именно поэтому я также выстраиваю в столбцы один под другим и селекторы в группах селекторов.
Понятие протяженности
Буду честен: буквально несколько лет назад я никак не мог взять в толк, что на самом деле для свойства box-shadow означает параметр spread. Не думаю, что название spread («распространение») отражает его истинный смысл. Лучше думать о нем как о протяженности. Позвольте пояснить.
Посмотрите на блок, появляющийся слева на экране при запуске кода из каталога example_06-02. К нему применены стандартные значения свойства box-shadow. А к блоку справа применено отрицательное значение spread, заданное четвертым по счету. Вот как выглядит соответствующий код:
.no-spread {
box-shadow: 0 10px 10px;
}
.spread {
box-shadow: 0 10px 10px -10px;
}
А вот эффект от каждой настройки на экране (элемент с установленным значением spread расположен справа).
Значение spread позволяет за счет его указания расширить или сократить тень по всем направлениям. В этом примере отрицательное значение «задвинуло» тень по всем направлениям. Получилось, что мы видим только тень внизу, вместо того чтобы увидеть, как размытие растекается во все стороны (поскольку в противовес размытию работает отрицательное значение параметра spread).
примечание
W3C-спецификацию, касающуюся свойства box-shadow, можно найти по адресу /.
Градиентные фоны
В прежние времена, чтобы получить для элемента градиентный фон, нужно было выложить плиткой тонкие графические фрагменты градиента. С точки зрения расхода графических ресурсов это был весьма экономный компромисс. Изображение шириной всего лишь в один или два пиксела не наносило существенного ущерба пропускной способности сети и могло на одном и том же сайте использоваться сразу для нескольких элементов.
Но чтобы настроить градиент, приходилось по-прежнему возвращаться к использованию графического редактора. Кроме того, иногда содержимое могло выплескиваться за пределы градиентного фона, выходя за рамки ограничений фиксированного размера изображений. В адаптируемой конструкции эта проблема усложнялась, поскольку разделы страницы в различных окнах просмотра могли увеличиваться.
Но с применением CSS-градиента background-image все стало намного гибче. Являясь частью спецификации CSS Image Values and Replaced Content Module Level 3, CSS позволяет создавать линейные и радиальные градиентные фоны. Посмотрим, как их можно определить.
СОВЕТ
Спецификацию CSS Image Values and Replaced Content Module Level 3 можно найти по адресу /.
Запись линейного градиента
Запись линейного градиента linear-gradient в наипростейшей форме выглядит следующим образом:
.linear-gradient {
background: linear-gradient(red, blue);
}
Она приведет к созданию линейного градиента, начинающегося с красного (градиент по умолчанию начинается сверху) и постепенно переходящего в синий цвет.
Указание направления градиента
Теперь, если нужно указать направление градиента, можно воспользоваться двумя способами. Начинаться градиент всегда будет с направления, противоположного указанному. Но когда направление не указано, он всегда будет распространяться сверху вниз, например:
.linear-gradient {
background: linear-gradient(to top right, red, blue);
}
В данном примере градиент направляется в правый верхний угол. Он начинается с красного цвета в левом нижнем углу и постепенно переходит в синий цвет в правом верхнем углу.
Если вам ближе математические представления, то можете поверить, что градиент допустимо записать в следующей форме:
.linear-gradient {
background: linear-gradient(45deg, red, blue);
}
Но имейте в виду, что в прямоугольном блоке градиент, направляющийся в правый верхний угол, 'to top right' (что всегда относится к правому верхнему углу того элемента, к которому он применяется), будет заканчиваться немного в другой позиции, чем при указании 45deg (градиент, заданный под углом 45° от его стартовой позиции).
Полезно будет также знать, что стартовую точку градиентов можно назначать еще до того, как они приобретут видимость внутри блока, например:
.linear-gradient {
background: linear-gradient(red -50%, blue);
}
При такой настройке градиент как таковой начинается до обретения видимости внутри блока.
В последнем примере мы также воспользовались цветовой опорной точкой, чтобы определить то место, где цвет должен начинаться и заканчиваться, поэтому разберемся в этом подробнее.
Цветовые опорные точки
Возможно, самыми удобными средствами задания градиентных фонов являются цветовые опорные точки. Они позволяют устанавливать, какой цвет нужно использовать и в какой точке градиента. С помощью цветовых опорных точек можно задать установки любой сложности. Рассмотрим следующий пример:
.linear-gradient {
margin: 1rem;
width: 400px;
height: 200px;
background: linear-gradient(#f90 0, #f90 2%, #555 2%, #eee 50%, #555 98%,
#f90 98%, #f90 100%);
}
Вот каким будет вывод на экран при таком задании значений для свойства linear-gradient..
В данном примере (код которого находится в каталоге example_06-03) направление не указывалось, поэтому было применено исходное направление сверху вниз.
Цветовые опорные точки внутри градиента записаны через запятые и определены путем указания сначала цвета, а затем позиции остановки. Обычно советуют не смешивать единицы измерения в одной и той же записи, но делать это никто не запрещает. Цветовых опорных точек может быть сколько угодно, а цвета могут быть заданы ключевыми словами, а также значениями в форматах HEX, RGBA или HSLA.
совет
Следует иметь в виду, что с годами сложилось множество различных синтаксисов градиентных фонов, поэтому данная область относится к тем, в которых невероятно трудно записывать альтернативные варианты вручную. Чтобы не рисковать получить эффект испорченной пластинки (если молодежь не знает, что такое пластинка, нужно спросить об этом у родителей), упростите свою жизнь путем использования средства Autoprefixer. Оно позволит записывать код, соответствующий текущему стандарту синтаксиса W3C (как указывалось ранее), и автоматически создавать для вас предыдущие версии.
Спецификацию W3C, относящуюся к линейным градиентным фонам, можно найти по адресу /.
Добавление альтернативных вариантов для устаревших браузеров
В качестве альтернативного варианта для устаревших браузеров, не поддерживающих градиентные фоны, нужно просто сначала определить сплошной фоновый цвет. Тогда устаревшие браузеры, если они не понимают градиентов, определяемых после этой установки, будут как минимум выводить на экран сплошной фон, например:
.thing {
background: red;
background: linear-gradient(45deg, red, blue);
}
Радиальные градиентные фоны
Создавать радиальные градиенты в CSS ничуть не сложнее. Как правило, они начинаются в центральной точке и постепенно распространяются в форме эллипса или круга.
Радиальный градиентный фон имеет следующий синтаксис (испытать его на практике можно, запустив код из каталога example_06-04):
.radial-gradient {
margin: 1rem;
width: 400px;
height: 200px;
background: radial-gradient(12rem circle at bottom, yellow, orange, red);
}
Анализ синтаксиса radial-gradient. После указания свойства (background:) начинается запись radial-gradient. Для начала перед первой запятой определяются форма или размер градиента и его позиция.
Для формы и размера в показанном ранее примере мы использовали круг размером 12 rem, но давайте теперь рассмотрим несколько других примеров значений.
• 5em задаст круг размером 5 em. Если задан только размер, то ту часть, которая определяет форму ('circle'), можно опустить.
• circle задаст круг на весь размер контейнера (изначально размер радиального градиента, если он не указан, задается до самого дальнего угла, а ключевые слова для задания размера будут рассмотрены позже).
• 40px 30px определит форму эллипса, как бы прорисованного внутри прямоугольника шириной 40 пикселов и высотой 30 пикселов.
• ellipse задаст форму эллипса, помещаемого внутрь элемента.
После размера и/или формы определяется позиция. Позицией по умолчанию является центр, но рассмотрим ряд других возможностей и способы их определения.
• at top right задает начало распространения радиального градиента из правого верхнего угла.
• at right 100px top 20px устанавливает начало распространения радиального градиента на 100 пикселов от правого края объекта и на 20 пикселов от верхнего края.
• at center left задает начало распространения градиента на половине пути вниз по левой стороне элемента.
Наши параметры размеров, формы и позиции завершаются запятой, после чего определяются любые цветовые опорные точки, работающие точно так же, как и в linear-gradient.
Упростим описание записи: размер, форма и позиция указываются перед первой запятой, после которой указывается любое количество цветовых опорных точек (эти точки разделяются запятыми).
Удобные ключевые слова распространения для задания размеров адаптивных конструкций
Чтобы добиться адаптивности, может оказаться полезно задавать размеры градиентов в пропорциях, а не в фиксированных пиксельных размерах. Тогда вы будете знать, что защищены (как буквально, так и фигурально) от изменения размеров элементов. К градиентам можно применять ряд удобных ключевых слов, задающих размеры. Их вместо любых значений размеров можно записывать следующим образом:
background: radial-gradient(closest-side circle at center, #333, blue);
А вот то, к чему приводит применение каждого из них.
• closest-side — фигура распространяется до ближайшей к центру стороны блока (в случае задания круглой формы) или соответствует расстояниям до ближайших к центру горизонтальной и вертикальной сторон (в случае задания эллиптической формы).
• closest-corner — фигура распространяется от центра строго до ближайшего угла блока.
• farthest-side — в противоположность closest-side вместо распространения фигуры до ближайшей стороны она распространяется из центра до самой дальней стороны (или, в случае задания эллипса, до самых дальних горизонтальной и вертикальной сторон).
• farthest-corner — фигура распространяется из центра до самого дальнего угла блока.
• cover — результат идентичен применению farthest-corner.
• contain — результат идентичен применению closest-side.
Спецификацию W3C, относящуюся к радиальным градиентным фонам можно найти по адресу /.
Хитрый способ получения отличных линейных и радиальных градиентов CSS3
Если задание градиентов вручную представляется весьма трудоемкой работой, существует несколько интерактивных генераторов градиентов. Я предпочитаю пользоваться средством, которое можно найти по адресу /. В его графическом интерфейсе используется стиль графического редактора, позволяющий выбирать цвета, цветовые опорные точки, стиль градиента (поддерживаются как линейные, так и радиальные градиенты) и даже цветовое пространство (HEX, RGB(A), HSL(A)), в котором нужно задать получающийся в результате этого выбора градиент. Допускается также загружать в качестве отправных предопределенные градиенты. Если этого будет недостаточно, данное средство даже обеспечит вас дополнительным кодом для исправления недостатков Internet Explorer 9, чтобы показать градиент, и для создания альтернативного варианта со сплошным цветом для устаревших браузеров. Все еще сомневаетесь? А как насчет способности генерировать CSS-градиент на основе градиентных значений в существующем изображении? Возможно, именно этот аргумент станет для вас решающим.
Повторяющиеся градиенты
CSS3 также дает нам возможность создавать повторяющиеся градиентные фоны. Посмотрим, как это делается:
.repeating-radial-gradient {
background: repeating-radial-gradient(black 0px, orange 5px, red 10px);
}
А вот как это выглядит на экране (чтобы не начало тошнить, долго на это смотреть не стоит).
Сначала нужно для linear-gradient или radial-gradient указать префикс repeating, после чего использовать тот же синтаксис, что и для обычного градиента. Здесь между черным, оранжевым и красным цветом (0, 5 и 10 пикселов соответственно) я использовал пиксельную дистанцию, но вы можете задать значения и в процентах. Для получения наилучших результатов рекомендуется использовать внутри градиента одинаковые единицы измерений (например, пикселы или проценты).
примечание
Информацию от W3C, касающуюся повторяющихся градиентов, можно получить по адресу /.
Хочу поделиться с вами еще одним способом использования градиентных фонов.
Узоры из градиентных фонов
В своих конструкциях я часто использовал едва заметные линейные градиенты и считал, что радиальные и повторяющиеся градиенты менее практичны. Но умные люди уже воспользовались эффективностью градиентов для создания узоров из градиентных фонов. Рассмотрим примеры из CSS Ninja — коллекции фоновых узоров CSS, принадлежащей Лиа Веру (Lea Verou) и доступной на сайте /:
.carbon-fibre {
margin: 1rem;
width: 400px;
height: 200px;
background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#2 82828;
background-size:16px 16px;
}
После запуска кода в браузере на экране будет виден эффект фона carbon-fibre.
Понравилось? Всего лишь несколько строк кода CSS3, и у нас есть легко редактируемый адаптивный и масштабируемый фоновый узор.
совет
Чтобы разобраться в работе того или иного правила, попробуйте добавить в конце правила background-repeat: no-repeat.
Как всегда, благодаря медиазапросам для различных адаптивных сценариев могут использоваться разные объявления. Например, притом что в менее широких окнах просмотра вполне успешно могут работать градиентные узоры, для более крупных окон может быть лучше выводить простой фон:
@media (min-width: 45rem) {
.carbon-fibre {
background: #333;
}
}
Этот пример можно увидеть, запустив файл из каталога example_06-05.
Использование нескольких фоновых изображений
Хотя теперь это немного и вышло из моды, раньше было весьма распространено требование к конструкции, заключавшееся в создании страницы, у которой верхнее фоновое изображение отличалось от нижнего. Или же в использовании различных фоновых изображений для верхнего и нижнего разделов внутри страницы. В прежние времена при использовании CSS 2.1 для получения этого эффекта обычно требовалась дополнительная разметка (один элемент нужен был для фона заголовка, а другой — для фона подвала).
Используя CSS3, в одном элементе можно накладывать друг на друга любое количество изображений.
Синтаксис имеет следующий вид:
.bg {
background:
url('../img/1.png'),
url('../img/2.png'),
url('../img/3.png');
}
Как и при накладывании друг на друга нескольких теней, изображение, стоящее в перечне первым, станет на экране браузера верхним. Если нужно, в том же самом объявлении можно добавить общий цвет фона:
.bg {
background:
url('../img/1.png'),
url('../img/2.png'),
url('../img/3.png') left bottom, black;
}
Цвет следует указать последним, и тогда он будет показан под всеми изображениями, заданными выше его.
совет
При указании нескольких фоновых элементов вам не нужно выстраивать ссылки на различные изображения на разных строчках одну под другой, я это сделал исключительно из соображений улучшения читаемости кода.
Браузеры, не понимающие правила нескольких фонов (например, Internet Explorer 8 и более ранние версии), будут игнорировать все правило целиком, поэтому может потребоваться объявить свойство обычного фона непосредственно перед CSS3-правилом, касающимся нескольких фонов, в качестве альтернативного варианта для безнадежно устаревших браузеров.
При использовании нескольких фоновых изображений и том условии, что это PNG-файлы со свойством прозрачности, любые частично прозрачные фоновые изображения, находящиеся выше других изображений, позволят просматривать то, что находится под ними. Но фоновые изображения не обязательно должны наслаиваться друг на друга и не обязательно должны быть одного и того же размера.
Размер фона
Чтобы установить для каждого изображения различные размеры, нужно воспользоваться свойством background-size. При использовании нескольких изображений синтаксис работает следующим образом:
.bg {
background-size: 100% 50%, 300px 400px, auto;
}
Здесь в том порядке, в котором изображения перечислены в свойстве background, указаны значения размеров каждого изображения (сначала ширина, а затем высота), отделенные друг от друга запятыми. Как и в том примере, который приведен ранее, для каждого изображения можно использовать значения, выраженные как в процентах, так и в пикселах, и кроме этого, можно воспользоваться следующими ключевыми словами:
• auto — задает естественный размер элемента;
• cover — расширяет изображение, сохраняя соотношение его сторон, чтобы занять всю площадь элемента;
• contain — расширяет изображение таким образом, чтобы оно поместилось внутри элемента по своей самой длинной стороне с сохранением соотношения сторон.
Позиция фона
Если имеются различные фоновые изображения с отличающимися размерами, далее может потребоваться указать для них разные позиции. К счастью, с этой задачей вполне может справиться свойство background-position.
Объединим в одно целое все возможности указания фоновых изображений, а также воспользуемся некоторыми установками для адаптируемых конструкций, рассмотренными в предыдущих главах.
Создадим простую космическую сцену из одного элемента и трех фоновых изображений, для которых устанавливаются три различных размера и задаются совершенно разные позиции:
.bg-multi {
height: 100vh;
width: 100vw;
background:
url('rosetta.png'),
url('moon.png'),
url('stars.jpg');
background-size: 75vmax, 50vw, cover;
background-position: top 50px right 80px, 40px 40px, top center;
background-repeat: no-repeat;
}
В браузере мы увидим картинку, похожую на эту.
В нижнем слое будет звездное небо, поверх него — луна, и, наконец, в самом верхнем слое — космический зонд «Розетта». Самостоятельно вывести картинку на экран можно, запустив файл из каталога example_06-06. Обратите внимание на то, что при изменении размеров окна браузера адаптивные единицы измерения (vmax, vh и vw) срабатывают довольно четко, сохраняя пропорции, чего нельзя сказать о тех изображениях, для которых в качестве единицы измерения использовались пикселы.
примечание
Если значения для свойства background-position не указывались, то по умолчанию применяется позиция в левом верхнем углу.
Краткий метод записи фона
Существует краткий метод записи, объединяющий различные свойства настройки фона. Соответствующую спецификацию можно найти по адресу /. Но пока что мой опыт мне подсказывает, что данный метод выдает ошибочные результаты. Поэтому я рекомендую пользоваться развернутым методом записи и сначала объявлять несколько изображений, затем размеры, а за ними — позиции.
примечание
Документацию W3C, относящуюся к нескольким фоновым элементам, можно найти по адресу /.
Фоновые изображения с высоким разрешением
Благодаря медиазапросам у нас есть возможность загружать различные фоновые изображения не только для различных размеров окон просмотра, но и для различных разрешений этих окон. Например, вот как выглядит официально утвержденный способ указания фонового изображения для нормального экрана и для экрана с высоким показателем dpi. Этот код можно найти в файле каталога example_06-07:
.bg {
background-image: url('bg.jpg');
}
@media (min-resolution: 1.5dppx) {
.bg {
background-image: ');
}
}
Медиазапрос составляется точно так же, как и раньше, с проверкой ширины, высоты или любой другой характеристики. В данном примере определен минимальный показатель разрешения, при котором должно использоваться изображение , составляющее 1.5dppx (количество пикселов устройства, приходящихся на один пиксел CSS). При желании можно также использовать такие единицы измерения, как dpi (количество точек на дюйм) или dpcm (количество точек на сантиметр). Я считаю, что проще всего осмыслить единицу измерения dppx, невзирая на ее более слабую поддержку, поскольку, к примеру, 2dppx означает удвоенное разрешение, а 3dppx — утроенное. Разобраться в разрешении, выраженном в dpi, намного сложнее. Стандартным считается разрешение 96dpi, удвоенное разрешение выражается значением 192dpi и т. д.
Пока поддержка единицы измерения dppx не слишком широка (ее наличие в тех браузерах, на которые рассчитано ваше устройство, можно проверить на сайте /), поэтому, чтобы все это работало повсеместно с приемлемым результатом, требуется создать несколько версий медиазапросов в отношении разрешения или положиться на средство, расставляющее нужные префиксы производителей.
Краткое замечание по поводу производительности
Следует помнить, что большие изображения потенциально могут снизить наблюдаемую скорость работы сайта, что приведет к ухудшению пользовательского восприятия. Хотя фоновые изображения не заблокируют вывод страницы на экран (ожидая загрузки, вы по-прежнему будете наблюдать на экране прорисовку всего остального сайта), они поспособствуют существенному общему утяжелению страницы, что немаловажно, если пользователям приходится платить за принятый объем данных.
CSS-фильтры
У свойства box-shadow есть одна вполне очевидная проблема. В соответствии с названием его работа ограничена принятой в CSS прямоугольной формой блока, к которому оно применяется. Вот как выглядит копия экрана треугольника, полученного с помощью CSS, с примененной к нему тенью блока (код можно найти в каталоге example_06-08).
Я же надеялся получить другой результат. К счастью, этот недочет можно обойти с помощью CSS-фильтров, являющихся частью спецификации Filter Effects Module Level 1 (/). Они не пользуются такой же широкой поддержкой, как box-shadow, но отлично работают при использовании подхода, предусматривающего постепенное улучшение качества вывода на экран. Если браузер не понимает, что ему нужно делать с фильтром, он его просто проигнорирует. А для тех браузеров, которые его поддерживают, на экран выводятся просто фантастические эффекты.
Вот тот же самый элемент с CSS-фильтром drop-shadow, примененным вместо box-shadow.
Формат CSS-фильтров имеет следующий вид:
.filter-drop-shadow {
filter: drop-shadow(8px 8px 6px #333);
}
После свойства filter указывается тот фильтр, который нужно применить, в данном примере это drop-shadow, а затем передаются аргументы для фильтра. Для drop-shadow используется такой же синтаксис, как и для box-shadow, поэтому разобраться в нем довольно просто: смещение по осям X и Y, размытие, затем радиус протяженности (оба этих параметра являются необязательными) и, наконец, цвет (указывать его также не обязательно, хотя в целях совместимости я все же рекомендую от этого не отказываться).
совет
Фактически CSS-фильтры основаны на SVG-фильтрах, обладающих более широкой поддержкой. Их эквиваленты на основе SVG рассматриваются в главе 7.
Доступные CSS-фильтры
Выбирать мы можем из нескольких фильтров. Рассмотрим каждый из них. Хотя далее будут показаны изображения после применения большинства фильтров, читателям бумажной версии книги с черно-белыми картинками заметить разницу будет нелегко. Оказавшись в подобной ситуации, следует помнить, что работу различных фильтров можно по-прежнему увидеть в браузере, открыв файл из каталога example_06-08. Теперь я собираюсь перечислить все эти фильтры с указанными для них подходящими значениями. Нетрудно представить, что чем больше значение, тем выше степень применения фильтра. Там, где используются изображения, они следуют сразу же после соответствующего кода.
• filter: url ('./img/filters.svg#filterRed') — позволяет указать используемый SVG-фильтр.
• filter: blur(3px) — используется единственное значение протяженности размытия (но только не в процентном выражении).
• filter: brightness(2) — используются значения в диапазоне от 0 до 1 или от 0 до 100 %. Значения 0 или 0% приводят к полному затемнению изображения, 1 или 100% обеспечивают нормальную яркость, а более высокие значения вызывают осветление элемента.
• filter: contrast(2) — применяются значения в диапазоне от 0 до 1 или от 0 до 100 %. Значения 0 или 0% приводят к полному затемнению изображения, 1 или 100 % обеспечивают нормальную контрастность, а более высокие значения вызывают повышение цветовой контрастности.
• filter: drop-shadow(4px 4px 6px #333) — фильтр drop-shadow был подробно рассмотрен ранее.
• filter: grayscale(.8) — используются значения от 0 до 1 или от 0 до 100 %, приводящие к различным степеням обесцвечивания элемента. Значение 0 оставляет изображение полноцветным, а 1 его полностью обесцвечивает, превращая цвета в оттенки серого.
• filter: hue-rotate(25deg) — используются значения от 0 до 360°, вызывающие коррекцию цвета по цветовому кругу.
• filter: invert(75%) — используются значения от 0 до 1 или от 0 до 100 %, приводящие к различным степеням цветового инвертирования элемента.
• filter: opacity(50%) — используются значения от 0 до 1 или от 0 до 100 %, приводящие к изменению прозрачности элемента. Этот фильтр по своему действию аналогичен уже знакомому вам свойству opacity. Но фильтры, в чем мы вскоре сможем убедиться, могут объединяться, позволяя применять прозрачность одновременно с другими фильтрами.
• filter: saturate(15%) — используются значения от 0 до 1 или от 0 до 100 %, приводящие к снижению насыщенности изображения, и значения, превышающие 1 или 100 %, вызывающие ее повышение.
• filter: sepia(.75) — используются значения от 0 до 1 или от 0 до 100 %, приводящие к появлению элемента в коричневых оттенках. Значение 0 или 0% сохраняет внешний вид элемента неизменным, а все, что больше, придает ему все больше коричневых оттенков вплоть до максимума при значении 1 или 100%.
Объединение CSS-фильтров
Фильтры можно легко объединять, просто разделяя их пробелами. Например, одновременного применения фильтров opacity, blur и sepia можно добиться с помощью следующего кода:
.MultipleFilters {
filter: opacity(10%) blur(2px) sepia(35%);
}
примечание
Отрицательные значения для фильтров, за исключением hue-rotate, применять не разрешается.
Полагаю, вы не станете возражать, когда я скажу, что CSS-фильтры предлагают нам довольно мощные эффекты. Существуют также эффекты, которые от ситуации к ситуации можно подвергать превращениям и преобразованиям. Как это делается, будет показано в главе 8.
Но пока вы не стали забавляться с этими новыми игрушками, мы должны серьезно поговорить о производительности.
Предупреждения, касающиеся CSS-производительности
Когда речь заходит о CSS-производительности, мне хочется напомнить о следующем: «Архитектура находится за скобками, а производительность — внутри» (Бен Фрэйн).
Позвольте раскрыть смысл этого небольшого изречения. Насколько я могу судить, разговор о том, насколько быстро или медленно работает селектор CSS (являющийся той частью, которая находится за скобками), не имеет смысла. Доказательства я поместил в статье по адресу /.
Но есть то, что действительно может довести страницу до остановки, — это использование в CSS затратных свойств (той части, которая находится внутри скобок). Когда в отношении конкретных стилей используется понятие «затратные», под этим подразумевается, что они заставляют браузер претерпевать массу издержек. Это то, что браузер считает чрезмерно обременительным для выполнения.
Чтобы догадаться о том, что, скорее всего, вызовет перегрузку браузера, можно обратиться к здравому смыслу. В основном это все, что заставит его производить предварительные вычисления, прежде чем заняться прорисовкой на экране. Сравним, к примеру, стандартный div-контейнер со сплошным однотонным фоном с полупрозрачным изображением в самом верхнем слое фона, составленного из нескольких градиентов, имеющего скругленные углы и отбрасываемую тень, полученную с применением фильтра drop-shadow. Последний из сравниваемых вариантов будет намного затратнее, вызовет существенно больший объем вычислительной работы для браузера и, соответственно, станет причиной более серьезных издержек.
Поэтому при применении таких эффектов, как фильтры, нужно проявлять расчетливость и по возможности проверять, где падает скорость работы страницы на самых маломощных устройствах, для которых вы надеетесь сохранить поддержку. В качестве крайней меры включите такие свойства средств разработки, как постоянная перерисовка страницы в Chrome, и выключите те эффекты, которые, по-вашему, могут вызвать проблемы. Вы получите данные в миллисекундах, позволяющие судить о продолжительности прорисовки в текущем окне просмотра и принять более взвешенное решение о том, какие эффекты применять. Чем ниже показания на графике, тем быстрее будет выполняться страница (но при этом следует учитывать широкое разнообразие браузеров и платформ, поэтому, как всегда, по возможности проводите тестирование на реальных устройствах).
Для углубленного изучения данного вопроса я рекомендую следующий ресурс: /.
Замечание по поводу применения в CSS масок и обрезки. В ближайшем будущем CSS в качестве части спецификации CSS Masking Module Level 1 сможет предложить маски и обрезку. Эти свойства позволят обрезать изображения с применением формы или произвольной траектории, указанной посредством SVG или ряда точек многоугольника. К сожалению, несмотря на то, что спецификация находится на наиболее проработанной стадии CR, на момент написания этих строк в браузерных реализациях было слишком много ошибок, чтобы можно было рекомендовать применение этих свойств. Но все течет, все изменяется, поэтому есть все основания предполагать, что ко времени прочтения книги появятся вполне работоспособные реализации. Всех любопытных я отсылаю к спецификации, находящейся по адресу /.
Я также считаю, что Крис Койер (Chris Coyier) проделал большую работу, разъясняя разумность поддержки этих свойств, для чего написал следующую статью: /.
И в завершение, неплохой обзор и объяснения будущих возможностей предлагаются в статье Сары Сьюайден (Sara Soueidan) по адресу .
Резюме
В этой главе была рассмотрена подборка CSS-свойств, наиболее полезных для создания эстетически привлекательных элементов в адаптивных веб-конструкциях. Мы узнали, как можно преодолеть зависимость от изображений для получения фоновых эффектов с помощью градиентных фонов CSS3. Было рассмотрено даже их использование для создания бесконечно повторяющихся фоновых узоров. Мы также изучили порядок применения текстовых теней для простого повышения привлекательности текста, а также теней для блоков, которые можно добавлять снаружи и внутри элементов. Были рассмотрены CSS-фильтры, позволяющие получить еще более впечатляющие визуальные эффекты с применением только кода CSS и допускающие объединение для получения воистину ошеломляющих результатов.
В следующей главе я собираюсь привлечь внимание к созданию и использованию масштабируемой векторной графики, или, проще говоря, SVG-графики. Несмотря на то что это весьма развитая технология с большой предысторией, она приспособлена лишь к современной обстановке высокопроизводительных адаптивных сайтов, фактически вступающих в свое совершеннолетие.
