CSS Формы и фильтры. Красивые Эффекты для Изображений

Наклонные квадраты с прозрачным фоном и границей изображения.

CSS Формы и фильтры. Красивые Эффекты для Изображений

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

Конструкции

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

Вы можете просматривать проекты в демо. Полный исходный код плюс все эффекты polyscapes в HD можно загрузить в виде zip — архива нажав кнопку СКАЧАТЬ.

Демо | Скачать

Демонстрационные архивы используют экспериментальные свойства CSS, поэтому лучше, использовать Chrome.

Polyscape горы с CSS-формами и фильтрами.

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

CSS Формы

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

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

Одна из интересных форм CSS, — это квадрат, который прозрачный внутри, но имеет границы:

Наклонные квадраты с прозрачным фоном и границей из изображения.

Оказывается, есть CSS спецификации, которые принимают в качестве параметров путь к изображению, размер границы, и как разместить изображение.

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

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

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

Вывод

Мы надеемся, вы получили удовольствие от этого маленького CSS эксперимента. Демонстрационный код и весь код 100% бесплатен, и у вас есть все права на использование, обмен и изменить дизайн.

Aliexpress INTAliexpress INTAliexpress INT

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *