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

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

Трансформация «Дверной глазок»
трансформация Дверной глазок

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

Читать полностью
Как изменить цвет изображения
как изменить цвет изображения

Как! Во многих интернет магазинах присутствует такая штука: цвет товара меняет свой цвет. Т.е. при клике на один из представленных цветов товар, как правило, это одежда, автомашина, чехлы для телефона или сам телефон меняет свою цветовую окраску. Со стороны кажется, что товар как бы заливается выбранным цветом, или приобретает тот орнамент ( часто представлены при […]

Читать полностью
Градиент в качестве фона
Градиент в качестве фона

Ранее в качестве фона для сайта использовали либо просто заливку цветом, либо какую-то картинку, которая «весила» достаточно много . Затем стали использовать маленький «кусочек» — картинку малого размера, которую множили на весь экран.
Уже сейчас в современных браузерах можно сделать градиентный фон любой сложности при помощи CSS, и при этом совершенно не используя картинки.

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

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

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

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