Испытание: комбинации фильтров

Курсы §33. Кекстаграм: Начало. CSS-фильтры
1

Почему-то не происходит изменения во вкладке “Результат”. Пробовал в разных браузерах.

filter.jpg1920×1080 385 KB

2

Кнопку “Проверить” нажимали?

3

Да. Пробовал в IE, Opera, Chrome, Firefox

4

Давайте код текстом тогда. Что-то по скрину я не могу сообразить, в чем дело.

5

.combo-1{
background-image: url(“img/spb-6.jpg”);

filter:drop-shadow(5px 5px 2px #000000) opacity(0.5);

}

.combo-2 {
background-image: url(“img/spb-1.jpg”);
filter:saturate(5);
}

.combo-3 {
background-image: url(“img/spb-3.jpg”);
filter:brightness(150%) hue-rotate(270deg) ;
}

1 лайк
6

У меня тоже не работает. Что-то не так с проверкой. Пусть модераторы разбираются.

7

Спасибо. Буду обращаться.

8

-webkit-filter: drop-shadow(5px 5px 5px #000000) opacity(0.5); в Хром работает.

На момент написания курса не все браузеры поддерживают CSS-фильтры. Для корректной работы фильтров в Chrome и Safari необходимо указывать префикс -webkit-. Но в этом курсе мы позаботились о префиксах — они подставляются в мини-браузере автоматически.

Забыли видимо подставить.

9

точно забыли

10

Поправил, спасибо, забыли включить.

11

У меня не работает без -webkit-

12

Исправил, проверьте, пожалуйста.

13

работает :+1:

1 лайк
14 
.combo-1 {
background-image: url("img/spb-6.jpg");
filter: drop-shadow(5px 5px 5px #000000) opacity(0.5);
}

.combo-2 {
background-image: url("img/spb-1.jpg");
filter: saturate(5) blur(1px);
}

.combo-3 {
background-image: url("img/spb-3.jpg");
filter: brightness(150%) hue-rotate(270deg);
}
15

image
image1920×1080 567 KB

-90deg тоже, что и 270degб но 99,9% при -90

2 лайка
16

.combo-1 {
background-image: url(“img/spb-6.jpg”);
filter:drop-shadow(5px 5px 5px #000000) opacity(0.5);
}

.combo-2 {
background-image: url(“img/spb-1.jpg”);
filter:saturate(5) blur(1px);
}

.combo-3 {
background-image: url(“img/spb-3.jpg”);
filter:brightness(150%) hue-rotate(270deg);
}
100%