Advertisement
  1. Web Design
  2. CSS

Paano Bumuo ng Kalahating Bilog na Donut Tsart Gamit ang CSS

by
Read Time:7 minsLanguages:

Tagalog (Wikang Tagalog) translation by Anna Nelson (you can also view the original English article)

Bagaman ang HTML5 Canvas at SVG ay mas eleganteng mga solusyon sa paggawa ng mga tsart, sa tutoryal na ito ay matututunan kung paano bumuo ng sariling donut tsart nang gamit lamang ang CSS.

Upang magkaroon ng ideya ng ililikha, tiganan ang CodePen demo sa ibaba:

HTML Markup

Magsisimula sa simpleng mga markup; simple na listahang hindi nakaayos na may span element sa loob ng bawat aytem sa listahan:

Pagdagdag ng Estilo sa Listahan

Nang may markup nang handa, una ay gagamit ng mga estilo sa listahang hindi nakaayos:

Matapos ay bibigyan ang bawat isa ng ::after at ::before pseudo-element, at bibigyang estilo:

Bigyang atensyon ang mga estilo para sa ::before pseudo-element.  Ito ang magbibigay ng kalahating bilog.

pseudo elementspseudo elementspseudo elements
Mga pseudo element

Sa ngayon, ang mga nabanggit na mga tuntunin ay magbibigay ng ganitong resulta:  

Pagdagdag ng Estilo sa mga Aytem sa Listahan

Pag-usapan natin ang pag-estilo ng mga aytem sa listahan.

Pagposisyon

Pagdating sa posisyon ng aytem sa listahan, gagawin ang sumusunod:

  • Iposisyon ang mga ito sa ilalim ng parent at 
  • bigyan ng nararapat na estilo upang lumikha ng baliktan na kalahating bilog.

Higit pa, may ilang mga bagay na dapat bigyan pansin:

  • Nakatakda ang posisyon ng mga aytem sa listahan, kung kaya’t madaling ayusin ang z-index property.
  • Babaguhin ang nakatakdang transform-origin property value (i.e. transform-origin: 50% 50%) ng mga aytem sa listahan. Sa partikular, aayusin ang transform-origin: 50% 0. Sa ganitong paraan, kapag in-animeyt (inikot) ang mga aytem, ang gitnang taas na kanto ay magiging sentro ng rotasyon. 

Ito ang mga kaugnay na estilo ng CSS:

Tignan kung ano nang nabuo sa sunod na larawan:

mga span at aytem ng listahan

Sa ngayon, ang tanging aytem sa listahan na nakikita ay ang kulay berde (z-index:4;) ang iba ay nasa ilalim nito.

Animasyon

Bago tumungo sa mga hakbang para sa pag-animeyt ng mga aytem sa listahan, isa-isip ang nais na porsyento para sa bawat aytem (i.e. kung gaano karami ang masasakop ng bawat isa sa donut). I-konsidera ang sumusunod na talahanayan:

Lenggwahe Porsyento
CSS 12
HTML 32
PHP 34
Python 22

Sunod, kakalkulahin kung ilang degri kailangang i-animeyt (paikutin) ang bawat aytem. Sunod ay kakalkulahin kung ilang degri para sa bawat aytem. imumultiplika ang porsyento nang 180° (hindi 360° dahil gagamit ng kalahating bilog na donut tsart):

Lenggwahe Porsyento
Bilang ng Degri
CSS 12 12/100 * 180 = 21.6
HTML 32
32/100 * 180 = 57.6
PHP 34 34/100 * 180 = 61.2
Python 22 22/100 * 180 = 39.6

Sa puntong ito handa na nating ayusin ang animasyon Una, tutukuyin ang ilang estilo ng animasyon na mayroon sa lahat ng mga aytem, sa pagdagdag ng mga tuntunin sa .chart-skills li:

Matapos ay tutukuyin ang natatanging mga estilo ng animasyon:

Pansinin nanagdagdag ng pagpapaliban sa lahat ng mga aytem maliban sa nauna. Sa paraang ito, makalilikha ng magagandang sunod-sunod na mga animasyon. Halimbawa, kapag  natapos ang animasyon ng unang elemento, lilitaw ang pangalawang elemento, at iba pa.

Ang sunod na hakbang ay tukuyin ang aktwal na animasyon:

Pago tumuloy, titignan nang mabilis kung paano gumagana ang mga animasyon:

Ang unang elemento ay mula sa transform: none tungo sa transform: rotate(21.6deg).

Ang pangalawang elemento ay mula sa transform: rotate(21.6deg) (magsisimula sa huling posisyon ng unang elemento) tungo sa transform: rotate(79.2deg) (57.6deg + 21.6deg).

Ang ikatlong elemento ay mula sa transform: rotate(79.2deg) (magsisimula sa huling posisyon ng unang elemento) tungo sa transform: rotate(140.4deg) (61.2deg + 79.2deg).

Ang ika-apat na elemento ay mula sa transform: rotate(140.4deg) (magsisimula mula sa huling posisyon ng ikatlong elemento) tungo sa transform: rotate(180deg) (140.4deg + 39.6deg).

Magtago! 

Panghuli, upang itago ang babang kalahati ng tsart, kailangang idagdag ang sumusunod na tuntunin:

Ang overflow: hidden halaga ng properti ay sinisigurado na ang unang kalahating bilog lamang (ang linikha gamit ng ::before ang nakikita. Maaaring tanggalin ang properti kung nais subukin ang uangn posisyon ng mga aytem sa listahan. 

Ang transform-style: preserve-3d at backface-visibility: hidden na mga properti ay iniiwasan ang epekto ng pagkurap na maaaring mangyari sa ibang browser dahil sa mga animasyon. Kung may problema pa ring ganito sa iyong browser, maaaring gamitin ang mga solusyon na ito.

Kaunti na lang at handa na ang tsart! Ang natitra na lang ay  bigyang estilo ang mga tatak ng tsart, na gagawin sa sunod na bahagi.

Ito ang CodePen demo na pinapakita ang kasalukuyang itsura ng ating tsart:

Pagdagdag ng Estilo sa mga Label

Sa bahagi na ito, bibigyang estilo ang mga tatak ng tsart.

Pagposisyon

Pagdating sa posisyon, gagawin ang sumusunod:

  • Bigyan ng posisyon: tiyakin at gamitin ang mga properti na taas at kaliwa upang ayusin ang nais na posisyon.
  • Gumamit ng negatibong mga halaga upang paikutin. Siyempre hindi kung anu-anong mga halaga lamang tio. Sa katunayan, galing ito sa huling frame ng aytem na parent.  Halimbawa, ang huling frame ng pangalwang aytem sa listahan ay maryoong transform: rotate(79.2deg), kung kaya’t ang kaugnay na tatak ay magkakaroon ng transform: rotate(-79.2deg).

Nasa baba ang katumbas na estilo ng CSS:

Mga animasyon

Ngayon na naka-posisyon ang mga label, panahon na para i-animeyt ang mga ito. Dalawang bagay ang dapat banggitin:

  • Awtomatikong lahat ng tatak ay nakatago ang maging nakikita habang ina-animeyt ang parent na aytem.
  • Gaya ng mga parent na aytem, gagamitin ang animation-delay na properti upang lumikha ng sunod-sunod na animasyon.  Bilang dagdag, isasama ang backface-visibility: hidden na halaga ng properti para siguraduhin na walang epekto ng pagkurap dahil sa animasyon.

Ang mga tuntunin ng CSS patungkol sa animasyon ng mga tatak ng tsart ay pinapakita sa baba:

Heto ang pinal na tsart:

Suporta at Isyu sa Browser

Sa pangkalahatan, gumagana nang maayos ang demo sa lahat ng browser. Nais ko lang pag-usapan ang dalawang maliliit na isyu na kaugnay ng border-radius na properti.

Una, kung magbibigay ng iba’t ibang kulay sa mga aytem, magiging ganito ang itsura ng tsart:

Pansinin halimbawa ang taas at babang mga kanto ng ikatlong aytem. Mayroong dalawang pulang linya na mula sa kulay ng border ng ika-apat na aytem. Nakikita ang mga linya dahil ang ika-apat na aytem ay mayroong mas maitim na kulay ng border kumpara sa ikatlo. Bagaman maliit na issue lamang, Magandang maging malay dito upang makapili ng angkop na mga kulay  para sa sariling mga tsart. 

Pangalawa, lumalabas ang tsart sa Safari nang ganito: 

Tignan ang maliliit na puwag na lumilitaw sa ikalawa at ikatlo na mga aytem. Kung may alam patungkol sa isyu na ito, ipaalam sa amin sa pagkomento sa ibaba!

Konklusyon

Sa tutoryal na ito, dumaan tayo sa proseso ng paglikha ng kalahating-bilog na donut tsart gamit lamang ang CSS. Muli, tulad ng nabanggit sa introduksyon, mayroong iba pang maaaring mas magandang solusyon (e.g. HTML5 Canvas at SGV) para sa paglikha ng ganitong mga bagay. Gayumpaman, kung nais gumawa ng bagay na simple at magaan, at gustong hamunin ang sarili, CSS ang sagot!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.