5 красивых image эффектов с использованием CSS фигур и фильтров

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

Дизайн

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

Посмотреть пример можно по ссылке demo app. Исходный код, а также все polyscape’ы экспортированые в HD изображения можно скачать как zip архив, нажав на кнопку Download вверху страницы.

В демо используются CSS технологии, которые могут быть доступны не во всех браузерах. Поэтому, советуем вам использовать их в браузере Chrome.

CSS фигуры

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

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

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

Для данного эффекта используется CSS spec border-image и в качестве параметров он принимает путь к изображению, border size и каким образом разместить изображение.

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

CSS фильтры

Так как мы добавляем изображения сверху фона, во многих сценариях придется применить некоторые фильтры, чтобы выделить то, что нам нужно. Большинство современных браузеров поддерживают такие фичи, как фильтры.

Таким образом мы можем изменять цвета, увеличивать контраст, применять черно-белый фильтр и т.д. Список доступных фильтров:

• grayscale
• hue-rotate
• invert
• contrast
• blur
• brightness
• opacity
• saturate
• sepia
• drop-shadow

Можно комбинировать сколько угодно фильтров для получения желаемого эффекта:

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

Заключение

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

Статью перевел timurziev. Оригинал на Tutorialzine.com доступен по ссылке.