використовувати кілька css-фільтрів одночасно?

Я експериментую з фільтрами css.

І я хотів би одночасно використовувати розмиття та відтінки сірого, але, здається, я не можу використовувати одночасно обидва на одному зображенні?

Дивіться скрипку тут ...

http://jsfiddle.net/joshmoto/fw0m9fzu/1/

.blur {
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
}

.grayscale {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -o-filter: grayscale(1);
    -ms-filter: grayscale(1);
}

.blur-grayscale {
    filter: blur(5px) grayscale(1);
    -webkit-filter: blur(5px) grayscale(1);
    -moz-filter: blur(5px) grayscale(1);
    -o-filter: blur(5px) grayscale(1);
    -ms-filter: blur(5px) grayscale(1);
}

Оскільки це одна властивість з іменем filter, кожного разу, коли ви хочете додати до неї стиль, ви його замінюєте.

Версія CSS 1

На щастя, ви можете додати кілька стилів у деяких властивостях, таких як фонове зображення та фільтр! Щоб це працювало, вам доведеться розмістити всі стилі фільтра в одному розділеному пробілом властивості фільтра.

.grayscale.blur {
    filter: blur(5px) grayscale(1);
}

Версія CSS 2

Альтернативним, гнучким рішенням було б створити спеціальний "div-суп" та встановити різні фільтри в стеці html. напр

<div class='demo__blurwrap' style='filter: blur(5px);'>
    <div class="demo__graywrap" style='filter: grayscale(1);'>
        <img src="awesome_image.jpeg" alt="">
    </div>
</div>

Версія CSS 3

редагувати : щойно зрозумів, що я щойно написав цю версію з перетвореннями, але застосовується та сама ідея.

Ще одне рішення - CSS vars. Я б не сказав, що це ідеально, але це приємний експеримент. Основним недоліком є ​​те, що вам потрібно оголосити багато змінних, мати довгі правила за замовчуванням для transformвкладених перетворень, безумовно, порушить.

// Added just for fun
setInterval(() => {
  yes_this_works_and_one_of_many_reasons_ids_are_bad.classList.toggle('translate');
}, 1000);
setInterval(() => {
  yes_this_works_and_one_of_many_reasons_ids_are_bad.classList.toggle('scale');
}, 1500);

:root {
  --scale: 1;
  --translate: 0px;
}
.box {
  background: blue;
  width: 20px;
  height: 20px;
  transform: 
    scale(var(--scale))
    translate(var(--translate), var(--translate));
  transition: transform .3s;
}
.box.translate {
  --translate: 20px;
}
.box.scale {
  --scale: 3;
}

<div 
  id='yes_this_works_and_one_of_many_reasons_ids_are_bad' 
  class='box scale translate'
></div>

Javascript

Нарешті, якщо ви використовували JavaScript для відтворення стилів, ви можете прочитати поточні застосовані фільтри за допомогою getComputedStyle та додати більше до суміші.

• Сучасні демонстраційні налаштування браузера приємно
• Сучасні демонстраційні налаштування браузера стилі без поваги і виправити це за допомогою спостерігачів

І відповідна стаття - це більше для анімації і поки що не підтримується багатьма браузерами: адитивні анімації

І ще одна відповідна стаття про css-трюки: Гудіні

Я намагаюся створити корисні класи у ванільному CSS, і це було б корисно, але, схоже, це не можна зробити таким чином.

<img class="brightness-20 image-grayscale-100">
.brightness-20 {
    filter:brightness(20%);
}
.image-grayscale-100 {
    filter: grayscale(100%);
}

Я не впевнений, чому вони не просто створили більш конкретну властивість, як-от:

filter-brightness: 20%; filter-grayscale: 100%

Після ще декількох робіт я придумав таке рішення:

/*Initalize Variables No Adjustments*/
:root {
    --blur:0px;
    --contrast:100%;
    --brightness:100%;
    --contrast:100%;
    --dropshadow:0px 0px 0px black;
    --grayscale:0%;
    --hue-rotate:0deg;
    --invert:0%;
    --opacity:100%;
    --saturate:100%;
    --sepia:0%;
}
/*Apply Defult Variables To Image*/
.filter {
    filter: blur(var(--blur)) contrast(var(--contrast)) brightness(var(--brightness)) contrast(var(--contrast)) drop-shadow(var(--dropshadow)) grayscale(var(--grayscale)) hue-rotate(var(--hue-rotate)) invert(var(--invert)) opacity(var(--opacity)) saturate(var(--saturate)) sepia(var(--sepia)); 
}
/*Override Defults*/
.brightness-20 {
    --brightness:20%;
}
.image-grayscale-100 {
    --grayscale: 100%;
}