Сегодня мы приготовили для вас пять отличных трюков с изображениями, которы демонстрируют всю мощь современного CSS.
Они могут быть использованы как обои вашего компьютера, привлекающие внимание, страницы захвата (landing page), и даже в печатной продукции. В статье мы так же рассмотрим ключевые CSS техники, поэтому вы сможете изменять так как вам нравится, или создать свои собственные.
Дизайн
Polyscape (poly = много, scape = пейзаж, изображения) — является наложением нескольких изображений на одно — основное, такой подход создает приятный сюрреалистичный эффект. Обычно его создают при помощи Photoshop или других программ для обработки изображений, но благодаря постоянно растущему набору CSS свойств, потрясающие многослойные изображения теперь могут создаваться при помощи простых web-технологий!
Вы можете посмотреть пример изображения, созданного нами. Полный код примера и изображение в HD вы можете скачать в zip архиве в нижней части страницы.
Многослойное изображение горы с использованием CSS shapes and filters.
Создавать подобные многослойные изображения очень просто и мы получили много удовольствия в процессе работы. Для поиска фоновых фотографий мы использовали Unsplash, все остальное сделано при помощи CSS shapes, transforms и filters.
CSS формы
В дизайне используются различные геометрические фигуры созданные с помощью CSS. Это очень легко сделать:
- Прямоугольник — в HTML блочные элементы по умолчанию являются прямоугольными. Просто задайте им ширину и высоту, а затем поверните, используя css свойство
transform: rotate(45deg);
- Круг можно так же создать из любого блочного элемента задав ему одинаковую ширину и высоту и добавив скругление улов:
border-radius: 50%;
- Треугольники можно создать при помощи свойства clip-path. Недавно я писал статью об этом.
Ещё одна интересная фигура — квадрат, который прозрачен внутри, но использует в качестве border изображение, а не просто цвет:
Квадрат с прозрачным фоном и изображением вместо цвета в border
Для этого есть специальное CSS свойство — border-image, ему следует задать путь к изображению, размер обводки и как будет располагаться изображение:
|
|
background: transparent; border: 25px solid transparent; border-image: url(clouds.jpg) 25 stretch; |
Поскольку мы добавляем новые блоки поверх фона, нам нужно добавить фильтр для того, чтобы видеть фоновое изображение. Большинство современных браузеров поддерживают свойство filter.
Это позволяет нам при помощи CSS изменить оттенок цвета с одного на другой, добавить контрастность, сделать изображение черно-белым и много другого. Вот список доступных CSS фильтров:
- grayscale
- hue-rotate
- invert
- contrast
- blur
- brightness
- opacity
- saturate
- sepia
- drop-shadow
Мы можем комбинировать разные фильтры пока не получим желаемый результат:
|
|
filter: hue-rotate(60deg) contrast(200%) blur(2px); |
Заключение
Мы надеемся вам понравился наш небольшой CSS эксперимент. Попробуйте использовать различные комбинации этих приёмов и вы получите интересный и красивый результат! Enjoy!
comments powered by HyperComments