CSS: Conic Gradient

0:00Tej lekcji opowiem o konik gradient

0:02czyli czymś co my jako fenomen deweloperzy marzyliśmy jeszcze 5 lat temu czy 10 lat

0:08temu i musieliśmy tworzyć je za pomocą skryptu konik gradient jest

0:13to coś za czym walczyła Leave czyli autorka też tych narzędzi które już

0:18pokazywały w poprzednich lekcjach takich jak np.

0:21narzędzie do wizualizacji Time ING Bank czy Big Brothera.

0:24I zdecydowanie polecam.

0:27Jako źródło informacji w kontekście CSS.

0:30No i przechodząc do konkretnego konik gradient są to gradient.

0:34Tak jak każdy inny gradient możemy robić przejścia kolorów od A do B przez C D.

0:40Generalnie mamy bardzo dużą dowolność w

0:43kontekście ile kolorów ma tam być i koniec Gradient.

0:45Różnią się od innych gradient tym że idą wzdłuż koła to znaczy jeżeli mamy

0:50jakiś okrąg i na jego środku postawimy faktycznie piłeczkę no to dookoła tej

0:55Pilecki nasz gradient jest generowany czyli nie ma tutaj pojęcia do góry.

1:00Lewo prawo tylko faktycznie konik gradient wędruje.

1:03Kolejne kolory.

1:05Jeśli tutaj ustawiamy B Ground.

1:08Na konik gradient i podamy mu przynajmniej

1:12dwie wartości czyli powiedzmy pierwszą będzie red.

1:15I od zera stopni Drugą wartością będzie.

1:21Od zera stopni.

1:23Do powiedzmy dziesięciu stopni zobaczymy

1:26co się stanie wydaje mi się że może zamiast zera stopni powinniśmy dać

1:30tutaj jakąś większą wartość bo ta pierwszy parametr nam się niewiele oferuje

1:36no to widzimy że mamy w tym momencie taki

1:39stały gradient czyli nie ma tutaj przejścia między

1:42kolorami ponieważ dany kolor zaczyna się i kończy w tym samym miejscu.

1:46Jeśli byśmy nie dali powiedzmy siódemki czy wartości mniejszej tak naprawdę nie

1:50powinno być prawidłową składową przykładamy na przykład

1:558 stopni to tutaj już się zrobi taki delikatny gradient ja to może troszkę

1:59większe 60 stopni i tutaj powiedzmy 90 stopni do stu osiemdziesięciu.

2:07Jako że to jest faktycznie koło no to

2:09oferujemy między wartościami od zera do 360.

2:13No i faktycznie widzimy że tutaj ten kolor

2:15się tworzy no i możemy podawać kolejne wartości np.

2:18Wit od stu osiemdziesięciu albo od dwustu.

2:22Jeżeli zależy nam na bardziej.

2:25Rozmaitym efekcie No i powiedzmy do 360 stopni za piszemy.

2:32Mamy taki oto Gradient.

2:34Nie jest to.

2:35Częste użycie chyba że faktycznie

2:37pracujemy z odpadami no to wtedy fajnie mieć dostęp do takiego gradient

2:41żeby zobaczyć nasze zdjęcia dynamicznie za pomocą takich kredytów.

2:46Ale do czego gradient tego typu mogą być również wykorzystywane.

2:51To tak zwane karty czyli wykresy kołowe

2:54stworzenie wykresu kołowego co oczywiście było możliwe natomiast było

2:58dosyć problematyczne a teraz jesteśmy w stanie tak naprawdę

3:02stworzyć coś takiego że jeżeli wiemy że 50 proc.

3:07. Respondentów dało taką a nie inną

3:11odpowiedź no to możemy sobie wpisać połowę całości czyli 360 stopni

3:17jako wartość startową dla pierwszego koloru No i powiedzmy że Blu to będzie

3:22nasz drugi kolor no i ustawienie tutaj wartość startową 180 stopni do 360 stopni.

3:29Jak usłyszymy pozostałe parametry piszemy

3:32no to mamy proste tak naprawdę dwa proste kąty które możemy oczywiście tutaj sobie

3:38zaokrąglone za pomocą Border radiowóz i ustawić na połowę szerokości i wysokości.

3:44I w tym momencie mamy prosty wykres kołowy

3:46z dwoma wartościami ale jeśli chcielibyśmy podać tych wartości więcej bo wartości

3:51procentowe były inne no to oczywiście możemy to zrobić czyli jeśli damy

3:55do 10 stopni i niebieski od 10 stopni do powiedzmy stu dwudziestu.

4:02Następnie Inny respondent inni respondenci dali inne odpowiedzi na

4:07to możemy podać tutaj od 120 stopni do powiedzmy 220.

4:12No i pozostali którzy się niezdecydowani mogli dać np.

4:16jedną trzecią prawie odpowiedzi na to od 220 stopni.

4:21Do 360 stopni.

4:23No i faktycznie możemy sobie to zapisać i będziemy mieli ładnego miasta w samym CS a

4:27bez żadnych ciężkich bibliotek często sklepowych które liczyły nam te dane.

4:32No i możemy to nawet animowane takie jak. A nie mówiliśmy.

4:35Wszystkie inne właściwości jesteśmy w stanie stworzyć tranzycie danych wartości.

4:40Jeśli np.

4:40stworzymy sobie tranzystory powiedzmy 0 7 sekund Ground.

4:49Liniowy No to zobaczmy czy faktycznie to zadziała jako patcha.

4:53Teoretycznie powinno.

4:54Szczerze mówiąc nie testowałem ale będę

4:56zdziwiony jeśli to nie zadziała chociaż jest to dosyć wymagające zadanie.

5:02Dla CSS a jestem ciekawy co się stanie z gwarancji z mojej strony nie ma.

5:07Ale zostawmy powiedzmy to na takich warunkach czyli pozbędziemy się w ogóle

5:12koloru albo po prostu zmienimy jego wartości czyli

5:16tutaj zamiast dziesięciu będzie 50.

5:20I tutaj 50 zielonych będzie.

5:25160 czyli tutaj też do stu sześćdziesięciu podbić.

5:31A reszta zostanie bez zmian. Zobaczymy czy to w ogóle zadziała.

5:33Zapisujemy.

5:36I tutaj musimy zrobić.

5:39Wydaje mi się że zrobiłem jakiś błąd skład dniowy 1600 powinno być 160.

5:44Piszemy dobra no i teraz oczywiście

5:46powinniśmy aplikować na rowerze żeby transakcja mogła mieć miejsce.

5:51No i zobaczmy czy faktycznie transmisja

5:53tutaj zadziała wyjeżdżamy myszką i tranzycie niestety nie ma.

5:59Wydaje mi się że jestem ciekawy czy w

6:00ogóle przeglądarki będą próbowały zaimplementowane transakcje tego typu.

6:05Natomiast samo przejście widać jesteśmy w

6:08stanie dawać różne stany naszego pay Harta w zależności od sytuacji.

6:14Za animacją przejmie Firefox bo tutaj testuje Firefox

6:18tej animacji przy transakcji nie ma ale generalnie jesteśmy w stanie naprawdę

6:22jedną linii CSS a na dowolnym elemencie wręcz darować sobie taki żart

6:28i prezentować dane w ten sposób negatywną technologią dla przeglądarek a nie

6:34biblioteki które naprawdę mogą ważyć grube gabaryty.