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

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

Свойство box-shadow
Свойство box-shadow

Раньше, для того, чтобы какому нибудь объекту на сайте добавить тень приходилось прибегать к помощи Photoshop-а или другого графического редактора. Тень добавляли в изображение или использовали как фоновый слой.
Потом эти картинки вырезались и вставлялись на страницу сайта. Но чем больше различных картинок содержалось на сайте, тем медленный сайт работал.

Читать полностью
Оформление кнопок для сайта
Оформление кнопок для сайта

Практически на любом сайте Вы найдете хотя бы одну кнопку. Это может быть кнопка «Поиск», или «Скачать», или «Читать полностью», или какая то другая.
Ранее в качестве кнопок использовался ссылка-рисунок. При наведении на нее курсора одна картинка замещалась другой, чтобы создать иллюзию движения. В настоящее время с помощью CSS3 появилась возможность создавать всевозможные кнопки совершенно не используя картинки.

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

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

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

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

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

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

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