Будущее CSS3: взгляд на перспективные техники

С новым годом приходит и надежда на всё большую поддержку новыx web-стандартов браузерами. Только в ноябре прошлого года была опубликована новая спецификация: The CSS Mask Specification (CSS маски). Браузеры на движках webkit уже давно поддерживали технологию css масок, сейчас же данная спецификация означает, что механизм масок будет реализован во всех браузерах.

CSS маски

Маски уже достаточно давно были реализованы и первоначально имели поддержку браузерами webkit, хотя в реальных проектах эту возможность никто не использовал, так как свойство относилось к нестандартным. И вот, спустя продолжительный отрезок времени, опубликована официальная спецификация CSS масок. Поддержку свойства скорее всего получат все новые браузеры в ближайшее время.

Итак, что же представляют из себя маски? Проще говоря, в маске должен быть элемент или изображение, а также изображение, представляющее из себя чёрную или белую фигуру с прозрачным фоном. Если применить маску к изображению или элементу, то они будут отображаться в маскированном виде. Это значит, что чёрные или белые области на изображении-маске будут заменяться изображением, по отношению к которому применяется маска. Пример:

Применение масок

Маски можно использовать уже сейчас, но к сожалению без раскрытия их полного потенциала. В настоящее время единственными браузерами поддерживающими маски являются webkit. Webkit поддерживают только альфа-маски, это значит, что содержимое будет применяться к маске независимо от её формы.

Другой тип масок относится к маскам яркости. Если маски чёрного или белого цвета, то белые области будут показывать изображение, а чёрные будут его скрывать. Серые области будут показывать изображение частично, в зависимости от степени насыщенности белого. По сути, чем насыщеннее серый (больше черного), тем ниже прозрачность маскировочной области (изображение будет видно хуже).

Применение масок браузерами webkit

Маски легко использовать в webkit, достаточно использовать свойство mask.

Рассмотрим пример. Маска-изображение (будем использовать альфа-маску, поэтому лучший вариант – чёрная фигура на прозрачном фоне):

Изображение-маска

.element {
     -webkit-mask: url('mask.png');
}

Допустим есть изображение:

 .element {
   width: 500px;
   overflow: hidden;
}
.element img {
    -webkit-mask: url(mask-image.png);
}

Итак, в браузерах семейства webkit получаем:

Стоит отметить, что можно использовать все значения, которые распространяются на стандартное свойство background. Например, можно задать позицию:

.element img {
     /* URL маски, позиция маски, повтор маски, режим отображение блочной модели маски (content-box, padding-box или border-box) */
    -webkit-mask: url(mask-image.png) 30% 30% repeat-x border-box;
     
    /* .. и тоже самое.. */
    -webkit-mask-image: url(mask-image.png);
    -webkit-mask-position: 30% 30%;
    -webkit-mask-repeat: repeat-x;
    -webkit-mask-box-clip: border-box;
     
    /* также можно задать размер! */
    -webkit-mask-size: 30% 30%;
}

CSS-исключения

Css-исключения имеют слабую поддержку, но это свойство поможет улучшить дизайн содержимого сайтов. Используя всего одно свойство, можно изменить всю структуру документа, аналогично редактированию документа в редакторе WYSIWYG. Как же работают css исключения? Наиболее интересным свойством является wrap-flow.

wrap-flow

wrap-flow определяет какое влияние будет оказывать блок на другие блоки. Обычно, когда вы перемещаете один элемент на другой (используя position relative), блоки будут перекрываться. Однако, используя wrap-flow, другие элементы будут вынуждены адаптироваться, чтобы соответсвовать элементу расположенному выше.

wrap-flow может иметь достаточно много настроек. Значения могут быть установлены в аuto, start, end, both, minimum, maximum или clear.

• auto: обычное поведение, ни один элемент не будет менять свое поведение
• start: все что находится после элемента удаляется
• end: все что находится до элемента удаляется
• both: удаляется только содержимое расположенное под объектом
• minimum: сторона с наибольшим содержимым удаляется
• maximum: сторона с наименьшим содержимым удаляется
• clear: всё содержимое удаляется c двух сторон от объекта

Всё это достаточно сложно опиcать. Рассмотрим пример:

Содержимым часто является обычный текст, именно он будет располагаться вокрут перекрывающихся частей. Любое перемещение перекрывающихся элементов соответственно будет менять форму содержимого.

Компоновка и смешивания

Режимы смешивания стали составляющей официальной спецификации. Это значит, что такие эффекты, как затемнение цвета теперь можно делать с помощью CSS. Как и следовало ожидать, поддержки данного свойства пока нет в браузерах, поскольку оно совсем новое, но уже сейчас оно достойно внимания. Спецификация свойства опубликована совсем недавно, поэтому ещё предстоят изменения, перед тем как оно будет поддерживаться браузерами. Принцип работы такой: допустим, есть 2 изображения, одно накладывается на другое с помощью абсолютного позиционирования. Выглядит это так:

Получаем:

​

Можно уже сейчас попробовать режимы смешивания CSS в действии. Для этого нужно скачать Adobe’s experimental webkit browser. Затем посетить эту страницу с помощью экспериментального браузера чтобы посмотреть всё это в действии!