» » Фильтры CSS и ховер эффекты

Фильтры CSS и ховер эффекты

В прошлой статье я показала несколько кодов с ховер эффектами на css для картинок. Сегодня немного расскажу о фильтрах. Фильтры css - это те же фильтры, что и в графических редакторах. Фотографии и рисунки с фильтрами можно добавить в статью в редакторе блога, в режиме хтмл или в гаджеты. Так же можно применить эффекты к оформлению внешнего вида блога. Фильтры можно применять как с ховер эффектом, так и без него. Применение фильтров сss притормаживает загрузку сайта.

Фильтры

blur - размытие по Гауссу. Чем больше значение радиуса, тем больше размытие.
brightness - яркость изображения. Чем больше значение, тем ярче изображение.
contrast - контрастность изображения. Значение задается в % или в десятичных дробях.
drop-shadow - тень.
grayscale - черно-белое изображение. Чем больше значение, тем сильнее эффект.
hue-rotate - меняет цвета изображения в зависимости от заданного угла поворота в цветовом круге.
invert - негатив изображения. Значение задается в %. 0% не применяет фильтр, 100% полностью преобразует цвета.
opacity -  добавляет прозрачность элементу. Значение задается только в %, 0% делает элемент полностью прозрачным, а 100% не оказывает никакого эффекта.
saturate - насыщенность цвета. Значение 0% убирает цветность, а 100% не оказывает никакого эффекта. Значения от 0% до 100% уменьшают насыщенность цвета, выше 100% — увеличивают насыщенность цвета. Значение может задаваться как в %, так и целым числом, 1 эквивалентно 100%.
sepia - эффект, имитирующий старину и «ретро». Значение 0% не изменяет внешний вид элемента, а 100% полностью воспроизводит эффект

Эффекты для картинок

Размытие картинки
Размытие картинки
<div class="blur pic">
<img alt="описание картинки" src="ваша картинка" /></div>
<style>.blur img {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
.blur img:hover {
  -webkit-filter: blur(5px);
}</style>
Чёрно-белый эффект 
Картинка после наведения курсора станет чёрно-белой.
Чёрно-белый эффект
<div class="bw pic">
<img alt="описание картинки" src="ваша картинка" /></div>
<style>.bw {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
.bw:hover {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}</style>
Фильтр смещение цвета
Фильтр смещение цвета
<img alt="описание картинки" class="hue-rotate" height="281" src="ваша картинка" width="400" />
<style>img.hue-rotate:hover {
    transition:0.7s all;
    filter: hue-rotate(270deg);
    -webkit-filter: hue-rotate(270deg);
}</style>
Размер картинки выделен фиолетовым.

Легкое поднятие картинки и тень
Это не фильтр, но мне понравился эффект.
Легкое поднятие картинки и тень
<img alt="описание картинки" class="drop-shadow" height="283" src="ваша картинка" width="400" />
<style>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;
}</style>
Размеры картинки выделены в коде салатовым, меняйте их на свои.

Эффект — фильтр сепия
фильтр сепия
<img src="адрес картинки" alt="описание" class="sepia">
<style>img.sepia:hover {
    transition:0.7s all;
    filter: sepia(0.5);
    -webkit-filter: sepia(0.5);
}</style>

Яркость 
При наведении курсора, картинка становится ярче.
Яркость
<img alt="описание картинки" class="brightness" height="270" src="ваша картинка" width="400" />
<style>img.brightness:hover {
    transition:0.7s all;
    filter: brightness(1.5);
    -webkit-filter: brightness(1.5);
}</style>
Ширина и высота картинки выделены в коде красным.

Контрастность картинки 
С помощью этого фильтра изменяется контрастность изображения.
Контрастность картинки
<img alt="описание" class="contrast" height="270" src="адрес картинки" width="400" />
<style>img.contrast:hover {
    transition:0.7s all;
    filter: contrast(1.5);
    -webkit-filter: contrast(1.5);
}</style>
Оранжевым в коде выделила размер.

Инверсия
Инверсия
<img alt="описание картинки" class="invert" height="283" src="ваша картинка" width="400" />
<style>img.invert:hover {
    transition:0.7s all;
    filter: invert(100%);
    -webkit-filter: invert(100%);
}</style>
Прозрачность картинки
Прозрачность картинки
<img alt="описание картинки" class="opacity" height="282" src="картинка" width="400" />
<style>
img.opacity:hover {
    transition:0.7s all;
    filter: opacity(0.2);
    -webkit-filter: opacity(0.2);
}
</style>
Ширину и высоту картинки в коде выделила красным.

Насыщенность цвета на картинке
<img alt="описание картинки" class="saturate" src="ваша картинка" />
<style>img.saturate:hover {
    transition:0.7s all;
    filter: saturate(200%);
    -webkit-filter: saturate(200%);
}</style>
Хотелось бы сказать, что эффекты и фильтры можно использовать вместе и по раздельности. На сайте https://codepen.io/SitePoint/pen/KrXybm нашла замечательную картинку, оформленную фильтрами. На картинке используется изменение яркости и контрастности, так же добавлен эффект сепия. Очень красиво смотрится! И сложно поверить что сделана картинка из фильтров, анимации на css.
картинка из фильтров, анимации на css
Не все эффекты показанные в статье работают на планшетах и телефонах.

Генераторы фильтров

  1. https://www.cssfilters.co/
  2. https://cssgenerator.org/filter-css-generator.html
  3. https://www.cssfiltergenerator.com/
  4. https://atlogex.com/css-online-filter-image-generate/
  5. https://cssportal.com/css-image-filter-generator/
  6. http://doodlenerd.com/css-effect/css-filter-generator
  7. https://webcode.tools/css-generator/blur (много генераторов на одном сайте)
  8. https://www.bestagencies.com/tools/filter-effects-css-generator/
  9. https://ilyashubin.github.io/FilterBlend/
  10. http://blog.mojtabaseyedi.com/css-filters/
  11. http://ds-overdesign.com/filter/

Ваши комментарии:

Комментарии со спамом удаляются.