logo

Фильтры CSS3

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

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

Рассмотрим поподробней каждый из фильтров, эффект будет присутствовать при наведении на картинку

В качестве «подопытного» элемента будем использовать одну и ту же картинку, чтобы было возможно сравнить изменения при применении фильтров.

Размытие — blur

С помощью этого фильтра создается эффект размытости изображения. Измеряется в пикселях


<img src="img.png" alt="" class="blur">
img.blur:hover {
    transition:0.7s all;
    filter: blur(2px);
    -webkit-filter: blur(2px);
}

Машинка

Поворот цвета — hue-rotate

Для этого фильтра задается смещение цвета по кругу, задается в градусах.


<img src="img.png" alt="" class="hue-rotate">
img.hue-rotate:hover {
    transition:0.7s all;
    filter: hue-rotate(270deg); 
    -webkit-filter: hue-rotate(270deg);
}

Машинка

Тень — drop-shadow

Значения это фильтра задаются также, как и для text-shadow, для более красивого эффекта зададим небольшое смещение картинке


<img src="img.png" alt="" class="drop-shadow">
img.drop-shadow {
    position: relative;
    top: 0; 
    left: 0; 
    transition: 0.25s all;
}
img.drop-shadow:hover {
    transition:0.7s all;
    filter: drop-shadow(5px 5px 10px #111);
    -webkit-filter: drop-shadow(5px 5px 10px #111);
    top: -3px;
    left: -3px;
}

Машинка

Следующие 3 фильтра могут задаваться либо в процентном отношении, либо любым целым или дробным числом.

Яркость — brightness

С помощью этого фильтра изменяется яркость элемента.

Значение «0» яркость равна нулю — черный цвет, в диапазоне от «0» до «1» — от черного до нормального. Значение больше «1» элемент становится ярче до полной засветки(белый цвет).

Также значение может выражаться в процентах. 100% — норма, меньше — затемнение, больше — увеличивается яркость.


<img src="img.png" alt="" class="brightness">
img.brightness:hover {
    transition:0.7s all;
    filter: brightness(1.5); 
    -webkit-filter: brightness(1.5);
}

Машинка

Контрастность — contrast

С помощью этого фильтра изменяется контрастность элемента.


<img src="img.png" alt="" class="contrast">
img.contrast:hover {
    transition:0.7s all;
    filter: contrast(1.5); 
    -webkit-filter: contrast(1.5);
}

Машинка

Насыщенность — saturate

При значении «0» — получается черо-белый вариант, при «1» и соответственно 100% — натуральные цвета, а при значениях выше — увеличение насыщенности.


<img src="img.png" alt="" class="saturate">
img.saturate:hover {
    transition:0.7s all;
    filter: saturate(200%); 
    -webkit-filter: saturate(200%);
}

Машинка

4 фильтра, значения которых ограничиваются.
Диапазон значений от «0» до «1» или 0-100%

Прозрачность — opacity


<img src="img.png" alt="" class="opacity">}
img.opacity:hover {
    transition:0.7s all;
    filter: opacity(0.2); 
    -webkit-filter: opacity(0.2);
}

Машинка

Инверсия — invert

При значении 50% — серый фон.


<img src="img.png" alt="" class="invert">
img.invert:hover {
    transition:0.7s all;
    filter: invert(100%); 
    -webkit-filter: invert(100%);
}

Машинка

Сепия — sepia

Цвет, присущий старым чёрно-белым фотографиям; имитация такой фотографии. Оттенок коричневого цвета.


<img src="img.png" alt="" class="sepia">
img.sepia:hover {
    transition:0.7s all;
    filter: sepia(0.5); 
    -webkit-filter: sepia(0.5);
}

Машинка

Градации серого — grayscale

Преобразовывает цветной элемент в черно-белый


<img src="img.png" alt="" class="grayscale">
img.grayscale:hover {
    transition:0.7s all;
    filter: grayscale(0.7);
    -webkit-filter: grayscale(0.7);
}

Машинка

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

Наведи на меня курсор, и получи результат работы фильтров

<p>Наведи на меня курсор, и получи результат работы фильтров </p>
p {
    font-size: 22px;
    color:#00FFFF; 
    border: 1px dotted #999;
    padding: 15px;
    margin-bottom: 15px;
    text-shadow: 0px 0px 1px #111;
    position: relative;
    top: 0; 
    left: 0; 
    transition: 0.7s all;
}
p:hover {
    filter: hue-rotate(190deg) drop-shadow(1px 0px 10px #900101);
    -webkit-filter: hue-rotate(190deg) drop-shadow(1px 0px 10px #900101);
    top: 5px;
    left: 8px; 
    background: #ddd;
}

Применение фильтров значительно расширяет возможности веб-разработчиков при оформления сайта. Всем творческих успехов!


Практические примеры 0

Рекомендую прочитать...

Lightbox на чистом CSS3 без JavaScript
Lightbox на чистом CSS3 без использования JavaScript

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

Читать полностью
Коллекция Hover.css
Коллекция Hover.css

Hover.css это коллекция CSS3 эффектов, которые можно использовать для анимации при наведении на них курсора. Содержит более 100 эффектов: 2D-трансформации, тени, границы, использование библиотеки иконок.
Пользоваться данной коллекцией очень просто: скачиваем архив ZIP, в папке css находим файл hover.css и загружаем его на сайт. Лучше конечно воспользоваться его минимизированной копией hover-min.css

Читать полностью
Свойство border-radius
Свойство border-radius

В CSS3 появилось замечательное свойство border-radius. Это свойство позволяет задать для элемента скругление углов. Ранее для этого использовались картинки ( сколько трудов стоило вырезать каждый скругленный уголок из шаблона, а затем «распихивать» их по нужным местам при верстке).

Читать полностью

Всего комментариев: 0

Оставить комментарий

Ваш email не будет опубликован.