CSS: Filter

0:00Część w tej lekcji opowiem krótko o

0:02właściwości filtr w lesie i do czego możemy ją wykorzystać.

0:06Filtr jest to pojedyncza właściwość nie ma tutaj żadnych dodatkowych filtr silnik

0:12czy cokolwiek.

0:14Jest to pojedyncza właściwość i generalnie przydaje się wtedy jeśli

0:18faktycznie chcemy zmodyfikować dany element HTML.

0:21Może to być obrazek może to być wideo.

0:23Może to być zwykły nagłówek i używamy go za pomocą filtr

0:28składany jest bardzo podobna do składni Transformer to znaczy podajemy po spacji

0:34różne funkcje które robią różne rzeczy z naszym elementem który obecnie

0:39przypuszczamy przez ten właśnie filtr i np.

0:42jednym z takich podstawowych filtrów jest Blair czyli możemy.

0:47Rozumieć dany element o podaną wartość pikseli.

0:51Jeśli np. wpisujemy 1 piksel.

0:54No to widzimy że to zdjęcie jest już mniej wyraźne.

0:58Czasami się to przydaje jeśli mamy naprawdę niskiej jakości zdjęcie i nie

1:03zależy nam na tym tak naprawdę aby ono było.

1:06Ostre ale bardziej żeby nie było jasne.

1:09No to możemy zrobić Blaira albo jeśli chcemy tak właśnie ładnie przeniknąć

1:13to możemy do tego użyć inną z właściwości jest na przykład.

1:20I możemy tutaj podać

1:22ilość stopni od zera do trzystu sześćdziesięciu

1:24o jaką chcemy obrócić koło kolorów tak aby ten obrazek miał inny odcień.

1:30Czyli jeśli np.

1:31wpisujemy sobie minus 45 stopni jak stopnie czyli Tygrys to faktycznie

1:36widzimy że teraz ten element ma taki różowy odcień gdzie wcześniej miał żółty.

1:42No i możemy tutaj oczywiście podać dowolną wartość.

1:46Jak piszemy sobie minus 180 stopni to

1:49będzie to odwrócony kolor no i jesteśmy w stanie na przykład odwracać nasze kolory.

1:56Filtr przydaje się jeżeli robimy dark mode i np.

2:00nasza strona byłaby domyślnie.

2:04Taka że mamy grunt biały i kolor

2:07czarny czyli wpisujemy sobie domyślne Style który gdzieś tam stworzyłem.

2:11Jeśli chcielibyśmy aby.

2:14Na tej stronie zaimplementowane bardzo proste.

2:17Dark mod jedną linię CSS to możemy zrobić oczywiście filtr Inwest.

2:22I tutaj podajemy po prostu wartość 01.

2:25Czy chcemy tego inwestora zrobić czy nie.

2:29Tutaj jestem zdziwiony troszkę że

2:32zniknął ten.

2:34Kolor tekstu a to pewnie dlatego że tutaj H1 ma osobno ustawione kolor.

2:40Jeżeli spróbujemy zrobić może H1 jawnie na kolor lakier.

2:50Nie jestem do końca pewien czemu ten

2:52H1 nam się nie odwrócił ponieważ wszystko znajduje się w.

2:56Ale generalnie widzimy że np.

2:57obrazek się zrobił więc możemy zrobić

2:59sobie regułę że na obrazkach robimy jeszcze raz filtr.

3:06Invest no i faktycznie wtedy wszystko się

3:10odwróci poza tym konkretnym obrazkiem wydaje mi się.

3:15że moglibyśmy ustawić na HTML u filtr Inferno zobaczymy czy to zadziała.

3:24W tym momencie to zadziałało.

3:26Czyli generalnie tło całej naszej strony się zmieniło i tutaj możemy ten kolor

3:33usunąć i wrócić go na nasze barwy i to jest np.

3:37inne zastosowanie filtrów żeby po prostu zrobić prosty Dark Out

3:42jedną linię CSS a czy tak naprawdę dwoma.

3:44Jeżeli chcemy zrobić folwark dla tych obrazków

3:47to co możemy jeszcze zrobić to tutaj zrobić.

3:50Jeżeli robimy takiego

3:52inwestora i obrócić to o 180 stopni tak aby te kolory wróciły na swoje miejsce.

4:00Jeżeli faktycznie zależy nam na tym aby

4:02zdjęcie było o odwróconej kolorystyce ale miało dalej tą samą barwę czyli

4:09rejon mało odbite czy pozostałe wartości z Chelsea a sam chciał.

4:16Miałby pozostać bez zmian.

4:18No i oczywiście tych funkcji jest tutaj bardzo dużo.

4:20Saturn SEPA czyli możemy np.

4:23podać czy ten element ma mieć efekt sepsy czy nie filtr.

4:29Jest naprawdę dużą właściwością.

4:32Możemy też na przykład ustawić na nim Drop Shadow.

4:35I tu jest składnia naprawdę podobna do box Shadow.

4:37Jeżeli na chwilę włączymy ten filtr odwracania koloru

4:43to możemy zrobić za aplikować cień na kilka sposobów CSS Box Shadow.

4:50Ma taką składnia że jesteśmy w stanie np.

4:52zrobić 0:0.

4:54To są offsetu w osi X i osi Y.

4:57Tutaj mamy wartość rozmycia no i tutaj powiedzmy jakiś kolor.

5:02Powiedzmy czarne i faktycznie.

5:05Ten box Shadow się nam tutaj pojawił i taką samą składni jesteśmy w stanie użyć.

5:12Z tym że droższa będzie na przykład

5:14działał też w widełkach i będziemy w stanie nieregularne kształty.

5:19Tworzyć im cienie albo jeżeli bok zdradą jest zajęte na jakiejś Auckland no to

5:24możemy użyć filtra żeby ten cień dodatkowo aplikować.

5:28Jedyną różnicą filtr Drop Shadow od Box Shadow jest to że w box Shadow możemy

5:34podać wartość zerową na rozmycie tego naszego cienia

5:38i wartość stałą na jego grubość powiedzmy czy jeśli komentujemy i piszemy

5:45to widzimy że tutaj nam się zrobiło takie obramowanie tego elementu.

5:49No i niestety nie mamy takiej możliwości po prostu ta składnia nie działa.

5:53Czyli Box Shadow działa tak samo jak drop Shadow.

5:57Jeżeli korzystamy z tej uproszczonej składni niestety ta składnia

6:01która nam tutaj dała to konkretne obramowanie nie zadziała.

6:05I o tym warto wiedzieć.

6:08Ostatnią rzeczą którą chciałbym tutaj pokazać jest to że możemy faktycznie

6:11reanimować filtry czyli jeśli usunięte to tło i usunięte.

6:18Te deklaracje z zabawy.

6:20Piszemy nasze style

6:23jesteśmy w stanie stworzyć taką animację

6:25która będzie nam zmieniała kolor tego zdjęcia.

6:28Wzdłuż tego jak czas faktycznie leci czyli

6:31jeśli ustawiamy sobie sił na powiedzmy zarodek domyślnie

6:35no i możemy teraz aplikować o których już mówiliśmy w poprzednich kolekcjach.

6:40Czyli jeśli tutaj zrobimy

6:43kolor Will jako nazwę naszej animacji no

6:47to możemy ją sobie aplikować Animation nam.

6:51Kolor.

6:53Animation Training Fiction liniowa Animation Creation.

7:00Powiedzmy 5 sekund.

7:02Animation Nation Can't Infinity ponieważ

7:05chcemy żeby to się nam zapaliło no i tutaj ustawiamy sobie że na 0 proc.

7:12Nasz filtr powinien mieć wartość 0.

7:16A na 100 procent powinien mieć wartość 360.

7:19W związku z czym będzie zapewne lał się do wartości początkowej.

7:25I faktycznie widzimy teraz że nasz.

7:27Obrazek zmienia odcień

7:31wzdłuż czasu i cała interakcja od zera do 360 zajmuje 5 sekund.

7:35Moglibyśmy to oczywiście troszkę zmniejszyć żeby to było takie delikatnie

7:38przejście i taki efekt na naszych stronach WWW na przykład na blogu może być naprawdę

7:44ciekawe zwłaszcza jeżeli ustawiamy naprawdę długi czas tej animacji

7:47no to wtedy to będzie takie bardzo delikatne przejście

7:51a będzie powiew świeżości na naszej stronie internetowej.