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

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

Ссылки, события при наведении и клике

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

Читать полностью
Эффекты при оформлении текста
Свойство -webkit-text-stroke

Мы запросто можем задать границу блоку, рисунку, таблице, тексту. Именно тексту, но не каждой букве этого текста. Хотя стоит попробовать.

В спецификации CSS3 есть свойство -webkit-text-stroke, которое позволяет это сделать.

Читать полностью
Библиотека Animate.css
animate.css

CSS3 поддерживает покадровую анимацию, которая позволяет создавать сложные анимации объекта. Существует возможность задавать множество параметров работы анимации при помощи свойства animation и правила @keyframen.

Но лучше воспользоваться готовыми решениями, которые позволяют анимировать любой объект. Для этого воспользуемся библиотекой Animate it.

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

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

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

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