Polyscape в CSS

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

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

Проекты

Polyscape (poly = many, scape = scenery) - это изображение, которое содержит несколько изображений, смешанных в одно, создавая очень приятные сюрреалистические визуальные эффекты. Обычно такой дизайн выполнен в Photoshop или другом программном обеспечении для редактирования изображений, но благодаря постоянно растущему арсеналу свойств CSS, polyscape’ы теперь можно создавать, используя только простые веб-технологии!

Вы можете просмотреть проекты в демонстрационном режиме. Полный исходный код плюс все polyscape’ы, экспортированные в HD-изображения, можно загрузить в виде ZIP-архива. В демо используются некоторые экспериментальные свойства, которые могут не работать во всех браузерах. Поэтому лучше всего открыть его в Chrome.

Автору было очень легко делать эти polyscape’ы, а сам процесс принес много веселья. Для фона были использованы изображения из Unsplash. Все остальное сделано через различные фигуры, трансформации и фильтры.

CSS фигуры

В проектах используются различные геометрические фигуры. Вот как это делается:

• Квадраты. Блоки HTML по умолчанию имеют прямоугольную форму. Просто выберите height и width. Чтобы повернуть их вбок, мы используем transform: rotate (45deg);
• Круги. Круговые фигуры в CSS можно создать, добавив border-radius: 50%; к квадратной форме.
• Треугольники и бриллианты - возможно благодаря clip-path. Автор писал об этом подробно в статье CSS Triangles Without Ugly Hacks.

Еще одна интересная фигура CSS, которую мы хотели сделать, это квадрат, он прозрачен внутри, но имеет изображение в качестве контура:

Оказывается, существует свойство, которое делает именно это - оно называется border-image и принимает в качестве параметров путь к изображению, размер границы и способ размещения изображения.

background: transparent;
border: 25px solid transparent;
border-image: url(clouds.jpg) 25 stretch;

Фильтры CSS

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

• grayscale (Конвертирование цвета в ч/б)
• hue-rotate (изменение цвета изображения в зависимости от заданного угла)
• invert (инвертирование цвета)
• contrast (контрастность изображения)
• blur (эффект размытости)
• brightness (яркость изображения)
• opacity (прозрачность элемента)
• saturate (насыщенность цвета)
• sepia (эффект сепии)
• drop-shadow (тень аналогично свойству box-shadow)

Мы можем комбинировать столько фильтров, сколько нам нужно, пока не получим желаемый результат:

filter: hue-rotate(60deg) contrast(200%) blur(2px);

Заключение

Автор надеется, что вам понравился этот маленький эксперимент. Демо и код абсолютно бесплатны, и вы можете свободно их использовать, делиться и менять.

Другие статьи по теме

Что нужно знать о CSS в языке JS: плюсы и минусы

Скрытые возможности CSS: 10 полезных советов