Accessibility: Wskaźnik z użyciem cienia

0:00Cześć w tej lekcji kończąc już temat wskaźnika focusu opowiem

0:04o według mnie najfajniejszej właściwości css-owej która może służyć jako alternatywa

0:09dla outlineu i jest to box-shadow więc mamy tutaj przykład w którym

0:13mamy usunięty outline no i musimy go zaimplementować samodzielnie więc co możemy

0:17zrobić no to na początku możemy stworzyć ten box-shadow i

0:21ustawić go na 00 to są jakby offsety czyli z

0:25lewej i z góry offset jest zerowy powiedzmy że 0,2

0:29rem to jest szerokość naszego box-shadowu no

0:34i tutaj ustawiamy color na niebieski zobaczmy co się wtedy stanie

0:38zapisujemy no i mamy

0:42tutaj taki bardzo mały niewyraźny box-shadow prawdopodobnie

0:46musimy jeszcze tutaj trzeci parametr to jest blur i ten blur możemy

0:50wyłączyć i teraz jest to o wiele jaśniejsze i generalnie no wygląda

0:55to identycznie jak outline w tym momencie więc nie jest to jakoś o wiele fajniejsze ale co

0:59można zrobić fajnego z box-shadowem to jest to że box-shadow przyjmie

1:03dokładnie taki sam kształt jaki jest na elemencie na którym on jest

1:07narzucony czy jeżeli tutaj zaokrąglijmy sobie rogi no to ten box-shadow też

1:11będzie zaokrąglony jeżeli przytniemy ten element innymi właściwościami css-owymi no

1:15to ten box-shadow również będzie się zgadzał z tym jak to jest przycięte możemy

1:19to sprawdzić w jeden prosty sposób ustawimy sobie tutaj border-radius na

1:25powiedzmy 10 pikseli i zrobimy overflow

1:29hidden w tym

1:33momencie tego nie widać ale jeżeli wejdziemy na taba no to faktycznie

1:37widzimy że ten shadow się już nam zaokrąglił no bo faktycznie cały

1:41ten box ma taki oto zaokrąglenie możemy to oczywiście zwiększyć

1:45na 25% 25 pikseli i wtedy mamy już bardzo

1:49ładny outline stworzony z box-shadow generalnie

1:54takiego kształtu outlinem nie możemy osiągnąć nie ma takiej możliwości w css-esie więc

1:58box-shadow jest fajny pod tym względem i jeszcze ciekawą rzeczą jest to że możemy

2:02box-shadow jakby stackować po przecinku jeżeli po przecinku

2:06damy inne właściwości jak na przykład tutaj

2:10będzie niebieskiego na 2 remy pierwszy

2:14to jest box-shadow drugi box-shadow to będzie czarny

2:19i on będzie miał już 4 remy no

2:23i trzeci box-shadow to znowu będzie niebieski 2 remy i

2:27mamy taki podwójny podkreślenie danego elementu nie

2:31ma takich możliwości żeby zrobić to samym outlinem a tutaj już faktycznie możemy

2:35robić dużo innych rzeczy tak naprawdę ten element mógłby mieć normalny

2:40faktyczny cień i my bylibyśmy w stanie tutaj zaaplikować outline

2:44na bazie box-shadow co w przypadku borderu na przykład nie byłoby

2:48możliwe ponieważ jeśli spróbowali byśmy nadać outline przez border

2:52ale na tym elemencie już by był zadeklarowany border no to niestety byśmy go nadpisali

2:56z box-shadowem nie ma tego problemu możemy to zrobić w ten sposób

3:00i efekty są naprawdę bardzo bardzo fajne możemy to uzupełnić

3:05oczywiście o to żeby sam element który jest fokusowany

3:09ustawiał na labelce

3:13color na niebieski sam

3:20swój color wybierał z tej zmiennej więc

3:26po najechaniu oczywiście wszystko będzie niebieskie więc mam już taki

3:30fajny neonowy tutaj efekt ale po zaznaczeniu też to zmienimy czyli input

3:34checked plus

3:39label i zmieniamy color na

3:43zielony jest

3:49ok tylko jeszcze musimy zmienić obramowanie więc jeżeli tutaj zrobimy też

3:53color zapiszemy to faktycznie widzimy

3:57że elementy które są wybrane świecą się na zielono te

4:01które jeszcze możemy wybrać na niebiesko szczerze mówiąc box-shadow

4:05tak jak już wspomniałem jest moim ulubionym sposobem na stylowanie

4:09outlineu to prawda że dalej może zostać on ucięty natomiast po prostu staram

4:13się unikać sytuacji żeby rodzic ucinał box-model

4:17danego elementu na którym ustawiam wskaźnik focusu jeżeli nie da się tego

4:21zrobić inaczej no to wtedy faktycznie korzystam z technik takie jak tło elementu

4:26czy border natomiast zaletą box-shadow jest jeszcze to że nie jest

4:30on domyślnie zablokowany na przykład przez css resety jeżeli pracujecie

4:34z jakimiś agencjami interaktywnymi one mogą faktycznie dawać taki outline none

4:38na wszystko i jeżeli jeszcze nie daj boże jest to z importantem no

4:42to później jest to ciężko nadpisać to zamiast walczyć ze specificity możecie ustawić

4:46na każdym elemencie który ma mieć focus taką regułę box-shadow i

4:50box-shadow jest o wiele mniej używane a nawet jeżeli będzie używane to możecie po przecinku

4:54to dać więc to jest bardzo fajne jeżeli chodzi o po prostu zarządzanie css-em i

4:59dostarczaniem dostępnego rozwiązania dla użytkownika końcowego