• 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 (являющийся той частью, которая находится за скобками), не имеет смысла. Доказательства я поместил в статье по адресу http://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/.
Но есть то, что действительно может довести страницу до остановки, — это использование в CSS затратных свойств (той части, которая находится внутри скобок). Когда в отношении конкретных стилей используется понятие «затратные», под этим подразумевается, что они заставляют браузер претерпевать массу издержек. Это то, что браузер считает чрезмерно обременительным для выполнения.
Чтобы догадаться о том, что, скорее всего, вызовет перегрузку браузера, можно обратиться к здравому смыслу. В основном это все, что заставит его производить предварительные вычисления, прежде чем заняться прорисовкой на экране. Сравним, к примеру, стандартный div-контейнер со сплошным однотонным фоном с полупрозрачным изображением в самом верхнем слое фона, составленного из нескольких градиентов, имеющего скругленные углы и отбрасываемую тень, полученную с применением фильтра drop-shadow. Последний из сравниваемых вариантов будет намного затратнее, вызовет существенно больший объем вычислительной работы для браузера и, соответственно, станет причиной более серьезных издержек.
Поэтому при применении таких эффектов, как фильтры, нужно проявлять расчетливость и по возможности проверять, где падает скорость работы страницы на самых маломощных устройствах, для которых вы надеетесь сохранить поддержку. В качестве крайней меры включите такие свойства средств разработки, как постоянная перерисовка страницы в Chrome, и выключите те эффекты, которые, по-вашему, могут вызвать проблемы. Вы получите данные в миллисекундах, позволяющие судить о продолжительности прорисовки в текущем окне просмотра и принять более взвешенное решение о том, какие эффекты применять. Чем ниже показания на графике, тем быстрее будет выполняться страница (но при этом следует учитывать широкое разнообразие браузеров и платформ, поэтому, как всегда, по возможности проводите тестирование на реальных устройствах).
Для углубленного изучения данного вопроса я рекомендую следующий ресурс: https://developers.google.com/web/fundamentals/performance/rendering/.
Замечание по поводу применения в CSS масок и обрезки. В ближайшем будущем CSS в качестве части спецификации CSS Masking Module Level 1 сможет предложить маски и обрезку. Эти свойства позволят обрезать изображения с применением формы или произвольной траектории, указанной посредством SVG или ряда точек многоугольника. К сожалению, несмотря на то, что спецификация находится на наиболее проработанной стадии CR, на момент написания этих строк в браузерных реализациях было слишком много ошибок, чтобы можно было рекомендовать применение этих свойств. Но все течет, все изменяется, поэтому есть все основания предполагать, что ко времени прочтения книги появятся вполне работоспособные реализации. Всех любопытных я отсылаю к спецификации, находящейся по адресу http://www.w3.org/TR/css-masking/.
Я также считаю, что Крис Койер (Chris Coyier) проделал большую работу, разъясняя разумность поддержки этих свойств, для чего написал следующую статью: http://css-tricks.com/clipping-masking-css/.
И в завершение, неплохой обзор и объяснения будущих возможностей предлагаются в статье Сары Сьюайден (Sara Soueidan) по адресу http://alistapart.com/article/css-shapes-101.
Резюме
В этой главе была рассмотрена подборка CSS-свойств, наиболее полезных для создания эстетически привлекательных элементов в адаптивных веб-конструкциях. Мы узнали, как можно преодолеть зависимость от изображений для получения фоновых эффектов с помощью градиентных фонов CSS3. Было рассмотрено даже их использование для создания бесконечно повторяющихся фоновых узоров. Мы также изучили порядок применения текстовых теней для простого повышения привлекательности текста, а также теней для блоков, которые можно добавлять снаружи и внутри элементов. Были рассмотрены CSS-фильтры, позволяющие получить еще более впечатляющие визуальные эффекты с применением только кода CSS и допускающие объединение для получения воистину ошеломляющих результатов.
В следующей главе я собираюсь привлечь внимание к созданию и использованию масштабируемой векторной графики, или, проще говоря, SVG-графики. Несмотря на то что это весьма развитая технология с большой предысторией, она приспособлена лишь к современной обстановке высокопроизводительных адаптивных сайтов, фактически вступающих в свое совершеннолетие.
7. Использование SVG для достижения независимости от разрешения
Об SVG (сокращение от «масштабируемая векторная графика») написаны, пишутся и будут написаны целые книги. Важность технологии SVG для адаптивного веб-дизайна заключается в том, что она предоставляет опробованные графические ресурсы с четкой поточечной прорисовкой для экранов всех разрешений.
У используемых в Интернете изображений форматов JPEG, GIF или PNG визуальные данные сохраняются в виде набора пикселов. Если сохранить графику в любом из этих форматов с установкой ширины и высоты и увеличить изображение так, чтобы его исходные размеры были превышены в два и более раза, то тут же проявятся присущие этим форматам ограничения.
Копия экрана с фрагментом изображения в формате PNG, увеличенного на экране браузера, имеет следующий вид.
Заметили, что в изображении явно присутствует мозаичность? А вот в точности такая же картинка, сохраненная как векторное изображение в SVG-формате и выведенная на экран с той же степенью увеличения.
Надеюсь, разница очевидна.
Если исключить наименьшие из возможных графические ресурсы, то при использовании SVG вместо JPEG, GIF или PNG мы получим графику, независимую от разрешения и, в отличие от растровых изображений, требующую файлов намного меньших размеров.
В данной главе мы коснемся множества аспектов, присущих SVG-графике, но основное внимание будет уделено способам интеграции ее использования в ваш рабочий процесс. Кроме того, будут рассмотрены возможности, предоставляемые SVG-технологией.