Cześć, w tym wideo opowiem ci o conic-gradients.

Więc conic gradient jest to taki nowy rodzaj gradientów który w specyfikacji jest od stosunkowo niedawna i działa on podobnie do innych gradientów które już pewnie kojarzysz z samego css-a, natomiast niewielu front-end developerów faktycznie
z niego korzysta, ponieważ przez lata nie mieliśmy takich możliwości.

Więc to co zrobimy tutaj dzisiaj no to zaczniemy od stworzenia prostego diva o klasie container, no i stworzymy sobie nowego diva
o klasie graph będziemy tworzyli grafy, tutaj się nie przejmujemy semantyk - pracujemy na divach, jest to przykład css-owy.

Więc zacznijmy stylować naszą klasę graph. Tutaj w Bracketsie cmd+e otworzy nam quick edit, no i gdybyśmy zadeklarowali szerokość naszego boxa na czterysta i wysokość również na czterysta... Ustawimy mu kolor na biały - no to zobaczymy, że faktycznie nasz element pojawia się na stronie.

To co możemy zrobić z conic gradientem no to użyć go jako wartości dla backgroundu tak jak z innymi gradientami
czyli tutaj piszemy sobie conic gradient i jest to funkcja która przyjmuje różne parametry. Pierwszą wartością w pierwszym parametrze jest zawsze kolor - czyli powiedzmy, że tutaj będzie to kolor biały #fff, no i kolejne wartości to jest moment początkowy tego koloru w danym gradiencie i moment końcowy.

Czyli sobie ustawimy od zera stopni, powiedzmy do trzydziestu
stopni no to widzimy że pomimo tego że mamy tutaj jeden parametr no to już ten biały kolor zapełnił nam całego boxa tak jak miało to miejsce po prostu po podaniu koloru białego natomiast jeżeli dodamy tutaj drugi kolor powiedzmy czarny, to już nawet bez precyzowania momentu początkowego i końcowego. Widzimy tutaj taki rodzaj gradientu jest to gradient stożkowy, z angielskiego "cone" jest to stożek czyli conic - stożkowy.

Tutaj już on nam wykrył że chodzi nam po prostu o kolor biały od zera do trzydziestu stopni koło ma trzysta sześćdziesiąt stopni no i od trzydziestu
stopni do samego końca mamy po prostu gradient na kolorze czarnym.

Co ciekawe jeżeli zrobimy tutaj coś takiego że ustawimy sobie po prostu trzydzieści stopni to conic-gradient zrozumie że chodzi nam o zaaplikowanie koloru czarnego dopiero na trzydziestu stopniach czyli w tym momencie mamy nachylenie trzydzieści stopni, no i do samego końca ma być ten kolor czarny więc mamy tutaj taki ładny jednolity kolor który skokowo przechodzi po prostu z parametru pierwszego
do parametru drugiego no i co możemy z tym zrobić.

Możemy ustawić sobie tutaj border radius na pięćdziesiąt procent i widzimy, że mamy już ładny wykres kołowy. Jeżeli byśmy zmienili kolor tego wykresu kołowego, powiedzmy, że tutaj zrobimy sobie transparent, zmienimy na dziewięćdziesiąt stopni i tutaj zmienimy kolor
na żółty - no to widzimy że mamy takiego pac-mana którego
możemy sobie jeszcze obrócić... Transform rotate...
Czterdzieści pięć stopni - bo chodzi nam o połowę no i faktycznie widzimy że mamy pac mana.

Jeżeli byśmy zrobili tutaj sobie ponownie background
po prostu na yellow no to przy pomocy animacji możemy stworzyć taką oto wizualizację znanej postaci z gry komputerowej, natomiast
oczywiście możemy tego wykorzystywać też do po prostu prezentacji wykresów kołowych - gdzie w przeszłości konieczne było wykorzystywanie rozwiązań takich jak na przykład chart.js.
‍

Jest to biblioteka javascriptowa oparta
na canvasie gdzie faktycznie te kształty są rysowane i
często jest taka sytuacja że musimy stworzyć wykres kołowy - no i przez to że przez lata nie dało się tego zrobić inaczej no to właśnie zaciąga
się ciężkie biblioteki javascriptowe aby renderowały nam tego typu kształty.

‍
Jak widzimy w css-ie jest to zaledwie kilka linijek i mamy nasz wykres kołowy który w tym wypadku wygląda jak pac man ale oczywiście możemy zmienić kolor na dowolny, np. #34b399 w porządku i tutaj możemy kolor zmienić - na powiedzmy, z powrotem czarny i w momencie kiedy dodali byśmy tutaj po prostu legendę możemy spróbować to zrobić.

Czyli lista nienumerowana i pojedyncze elementy listy
no to powiedzmy że tutaj zrobimy sobie span którym będzie legenda
dla pierwszej wartości i tutaj mamy dziewięćdziesiąt stopni - jest
to kolor czarny czyli dwadzieścia pięć procent całości jest na
kolorze czarnym i tutaj możemy sobie ustawić klasę powiedzmy...

"value-1", ciężko powiedzieć. No i zrobimy sobie oczywiście drugi taki wpis
"value-2" no i zrobimy siedemdziesiąt pięć procent i teraz możemy nasze "value-1" i "value-2" po prostu ustawić jako background te dwa kolory tu które tutaj ustawiliśmy, czyli czarny i "value-2", background #34b399 no i oczywiście musielibyśmy je wypełnić jakimiś danymi bądź dać im konkretną wysokość czy szerokość więc możemy
to zrobić na szybko wstawiając "value-1" i "value-2"
i ustawiając im display na inline-block.
‍

No i powiedzmy width na dwadzieścia pikseli,
height na dziesięć pikseli, no i widzimy, że
mamy tutaj taką ładną legendę jeżeli byśmy jeszcze chcieli możemy ustawić container
na display flex i widzimy że nasze elementy są już do siebie równoległe moglibyśmy zmniejszyć tutaj rozmiar tego wykresu no i w tym momencie mamy faktyczny wykres kołowy na podstawie podanych wartości.

I o ile praca z kątami nie jest być może najwygodniejsza o tyle możemy wykorzystać inne właściwości css-owe aby troszkę to sobie ułatwić czyli na przykład jeżeli sobie ustawimy tutaj calc-a i powiemy że chcemy aby pierwsza wartość to było
faktycznie dwadzieścia pięć procent całości no to możemy zrobić po prostu trzysta sześćdziesiąt stopni
razy zero dwadzieścia pięć i tutaj mamy dokładnie taką
samą wartość tak no bo jedna czwarta trzystu sześćdziesięciu to jest właśnie dziewięćdziesiąt stopni i to była nasza wartość początkowa.

No i jeśli chcielibyśmy to zaaplikować
sobie do drugiej właściwości no to działa to analogicznie gdzie tutaj
po prostu podajemy drugi raz tą samą wartość startową no
i jeżeli byśmy chcieli podać też wartość końcową gdzie ona domyślnie jest już wypełniana do samego końca no to oczywiście możemy tutaj dać pozostałą wartość siedemdziesiąt pięć procent i to tam również zadziała tak naprawdę w tym momencie nie widzimy żadnej różnicy
między tymi dwoma podejściami ale gdybyśmy podali sobie na przykład trzecią wartość, powiedzmy że yellow no to w tym momencie możemy zrobić sobie tutaj pięćdziesiąt procent i w momencie gdy chcemy
aby trzeci parametr był do końca no to wklejamy po prostu miejsce zakończenia się poprzedniego koloru.

No i w tym momencie mamy już taką sytuację że nasz wykres
kołowy składa się z trzech wartości no i tutaj moglibyśmy dodać po prostu "value-3" ustawione na inne kolorki tak aby
pasować do tego żółtego no ale możemy to cofnąć i to jest jedno z potencjalnych, użyć conic gradientu
i w tym momencie chciałbym zaprosić cię na stronę koduje.pl gdzie znajdziesz uzupełnienia materiałów znajdziesz tutaj na przykład informacje na temat statystyk danego wideo.

Znajdziesz komentarze które wy umieściliście
pod tym video transkrypt tego wszystkiego o czym opowiadałem
w danym materiale oraz dodatkowe rzeczy takie jak na przykład możliwość sprawdzenia swojej wiedzy w quizach czy informacje o wsparciu z "can I use".
‍

Kod źródłowy strony w formie interaktywnego code sandbox
czy mój komentarz jako autora oglądający ten materiał
po pięciu latach.

Kolejnym ciekawym przykładem tego jak moglibyśmy wykorzystać sobie conic gradient jest zrobienie czegoś takiego jak koło fortuny jeżeli zamkniemy sobie ten plik i stworzymy sobie nowy kontener no to widzimy że mamy tutaj dwa elementy na naszej stronie no ale zamiast robić z tego graf to zrobimy po prostu wheel of fortune
i teraz tak w momencie gdy wyedytujemy ten
selektor ponownie możemy ustawić taką samą szerokość
i wysokość border radius na pięćdziesiąt procent ponieważ chcemy zaokrąglić nasze boki no i ponownie na background ustawimy sobie jakiś gradient czyli powiedzmy conic gradient zacznijmy od białego zero
stopni do trzydziestu stopni mamy biały następnie #34b399
od trzydziestu stopni do sześćdziesięciu stopni no
i trzeci krok to będzie #696e9e czyli fioletowy z palety barw koduję no i ponownie ustawiamy start na sześćdziesiąt stopni i jak widzimy domyślnie ten gradient nam się domknął że będzie miał stały kolor od tego momentu do samego końca ale możemy go w tym momencie domknąć czyli jeżeli sobie tutaj wpiszemy dziewięćdziesiąt
stopni czyli do mykamy nasz gradient i zmienimy
conic gradient na repeating conic gradient
no to widzimy że mamy taką planszę czy taki w tym momencie może
śmigło, które może służyć jako nasze koło fortuny
no i tutaj możemy użyć innej właściwości jaką jest po prostu border ustawić mu trzy piksele solid black no i widzimy
że mamy ładne odzwierciedlenie gdzie jest początek i koniec naszego
koła i w tym momencie wystarczy nam tylko dodać prostą
pseudo klasę na nasze wheel of fortune
na hoverze powiedzmy że chcemy aby nasze koło
obracało się o jakąś wysoką wartość jeden obrót koła jest o trzysta sześćdziesiąt stopni więc jeżeli
wydamy powiedzmy dwa tysiące czterdzieści stopni
no to w tym momencie tego obrotu koła nie będzie
widać bo oczywiście nie mamy tranzycji ale jeżeli sobie tutaj ustawimy
transition na powiedzmy trzy sekundy transform ease-in-out
out po zapisaniu i najechaniu myszką na ten element zobaczymy
że nasze koło się obraca tutaj robi się taka iluzja optyczna gdzie
widzimy takie cienie dookoła tego koła to nie jest żaden glitch
jest to po prostu iluzja optyczna która tak tak działa.

No i co moglibyśmy teraz zrobić to na przykład dodać sobie na naszym wheel of fortune jakiegoś aftera albo befora czyli generalnie
pseudo element o którym też może znaleźć materiał na kanale koduję
i tutaj ustawimy contentna pusty display inline-block width
powiedzmy na dziesięć pikseli najwyżej go zmniejszymy troszkę
height na trzydzieści pikseli.

Zobaczymy jak to będzie wyglądać background na yellow mamy tutaj naszego boxa musimy go tylko przenieść tutaj na ten element ja może ukryję tutaj ten pierwszy nasz kontener z grafem i skupimy
się tylko i wyłącznie na tym nie potrzebujemy tutaj także naszej
listy nie numerowanej no i tutaj przy pomocy pozycjonowania absolutnego.
‍

Możemy ustawić sobie ten żółty box na środek
tego koła czyli top ustawimy sobie na zero left ustawimy na
zero right ustawimy na zero marginesy wyzerujemy
no i w momencie gdy będziemy chcieli wypozycjonować go
absolutnie względem wheel of fortune czyli tutaj sobie ustawimy position
relative a tutaj position absolute
to ten element nam się wycentruje tylko tutaj zamiast margin zero musimy dać margin auto
i widzimy że ten element już się tutaj znajduje tylko że on się obraca
razem z całym naszym kołem więc musielibyśmy to rozdzielić na takiej zasadzie, że po prostu to nasze koło fortuny będzie innym pseudo elementem powiedzmy beforem i tutaj ponownie musielibyśmy ustawić content i display na inline-block powiedzmy i ponownie mu ustawić wysokość i szerokość tym razem możemy użyć nawet procentów width i height sto procent bo będziemy mieli po prostu
wartość z tego wheel of fortune naszego rodzica no i position relative
musimy przenieść na nasze wheel of fortune.

I w tym momencie gdy zrobimy selektor taki że
po najechaniu myszką na wheel of fortune chcemy zanimować nasz before no to zobaczymy że nasz element stoi w miejscu
no i akurat tak się wycelował że jesteśmy pomiędzy dwoma wartościami więc moglibyśmy tutaj tą wartość zmienić powiedzmy na dziewięćdziesiąt mam nadzieję, że to będzie w tym momencie troszkę lepiej wyglądało i że wylosujemy faktycznie
jakiś element i jest to kolor fioletowy więc to co moglibyśmy
sobie tutaj zrobić to jednak wrócić do tej listy, dodać tą listę ponownie.
‍

Ostylujmy może te trzy kolory czyli w"value-1" jest
to przechodząc sobie tutaj do styli kolor
po prostu biały "value-2" będzie zielony
i "value-3" będzie to #696e9e tutaj oczywiście musimy dodać nasze
"value-3" do naszego selektora no i w sytuacji gdybyśmy ustawili sobie może na ten container jakiś background czarny
z jakąś dozą przeźroczystości no to oczywiście
to by troszkę lepiej wyglądało możemy ustawić padding tak powiedzmy
trzydzieści pikseli jakiś border radius powiedzmy na pięć
pikseli i w tym momencie mamy nasze koło fortuny należy
tylko zmienić wartości które chcemy reprezentować czyli powiedzmy
że "value-1" czyli kolor biały będzie to daj
like'a "value-2" będzie to subskrybuj a "value-3" udostępnij
no i teraz oczywiście możemy się pobawić tutaj tą wartością
wydaje mi się że w tej grze każdy wygrywa więc ustawimy sobie tutaj wartość na czterysta trzy zero powiedzmy no i zobaczmy co się wylosuje.

Kręci się kręci... no i możesz udostępnić to wideo! Mam nadzieję że
podobał ci się ten materiał jest to mój pierwszy materiał nagrywany na youtuba od dłuższego czasu oczywiście css bardzo się zmienił przez te wszystkie lata w związku z czym mamy takie nowe właściwości jak conic gradient mamy css variables których moglibyśmy użyć na przykład w naszym przykładzie do tego aby ustalać
dynamicznie procenty jakie dana wartość którą chcemy
zaprezentować naszym wykresem kołowym powinna reprezentować czyli
zamiast tutaj pisać po prostu w stopniach moglibyśmy napisać sobie
w css variables po prostu tutaj "value-1" i powiedzmy dwadzieścia pięć procent i też da się oczywiście to zrobić w taki sposób aby to wszystko działało więc w zależności od tego jakie będzie zainteresowanie różnymi materiałami na koduję w przyszłości
będę przygotowywał różne materiały.

Będzie oczywiście więcej javascriptu
będzie więcej systemów operacyjnych czy rzeczy związanych z devopsem
dlatego koniecznie dajcie znać w komentarzu jakie tematy was interesują i kolejność publikacji będę w dużej mierze opierał o to
o co mnie będziecie prosili dzięki serdeczne za uwagę naprawdę
doceniam fakt że jesteś tutaj ze mną jeżeli podobało ci się to wideo
koniecznie daj znać w komentarzu dzięki i pamiętaj że skoro ja koduję
to ty też możesz

‍
ihahaha...

‍