Iscrtavanje nekonvencionalnih oblika uz pomoć CSS-a
U prethodnih nekoliko godina došlo je do značajnih unapređenja mogućnosti CSS-a. Međutim, nova svojstva često nemaju dovoljnu podršku na novim veb pregledačima, zbog čega se još uvek koriste razni trikovi pri stilizovanju atipičnih oblika.
Ovom prilikom, predstavljamo vam neke od najzanimljivijih trikova i jednostavnih koraka za iscrtavanje nekonvencionalnih oblika koji vam mogu biti od pomoći za neki od vaših sledećih projekata.
Iscrtavanje trougla pomoću CSS-a
Jedan od načešće primenjivanih trikova jeste korišćenje svojstva „granice“ (eng. border) za iscrtavanje trougaonih oblika. Ovaj trik često zbunjuje developere koji se po prvi put susreću sa njim. Istovremeno, bez boljeg poznavanja CSS-a ne mogu se ni primetiti prave mogućnosti ovog svojstva.
Za početak, potrebno je razumeti implementaciju svojstva granice. Naime, to svojstvo se sastoji iz četiri “stranice” (border-left, border-right, border-top i border-bottom) koje se mogu posebno podešavati. Postavljanjem jedne od strana, dobija se pravougaonik, što se jasno može videti korišćenjem preuveličanih dimenzija kao na sledećem primeru:
Međutim, ako se postavi jedna od susednih strana, prethodni oblik pravougaonika se pretvara u trapezast oblik, kako bi došlo do spajanja te dve strane. To se može jasnije primetiti kada je ta stranica druge boje. Naravno, moguće je i koristiti transparentnu pozadinu objekta čime bi se dobio efekat “sečenja” linije.
U slučaju da se širina elementa postavi na 0, dobija se pravougaoni trougao. Takođe je moguće podesiti i drugu susednu stranu da bude transparentna i kontrolom širine tih strana moguće je dobiti razne konfiguracije trouglova.
Ako se vratimo na korak kada smo širinu postavili na 0, možemo primetiti da je moguće povećati širinu i dobiti trapezaste oblike.
Na sledećem primeru je moguće prilagođavati odgovarajuća svojstva uz prikaz izmena:
Ovaj trik ima i svojih ograničenja, pre svega u tome što je praktično nemoguće kombinovati ga sa “overflow: hidden” svojstvom kako bi sadržaj bio skriven. Takođe ima dosta ograničenja u slučaju da trougaoni oblik treba da bude u obliku linije umesto popunjenog oblika, gde postoje ograničene mogućnosti primene ili je potrebno korišćenje alternativnih rešenja.
Zamena DOM elemenata dodavanjem senke
Postoje slučajevi kada se određeni vizuelni elementi primenjuju na strani. Kako bi se DOM struktura pojednostavila, često se koriste “pre” i “posle” pseudo-elementi, međutim to ograničava broj dodatnih elemenata na dva.
U slučaju kada je potreban veći broj vizuelnih elemenata istog oblika, moguće je korišćenje x svojstva dodavanja senki (eng. box-shadow). Dok je glavna namena ovog svojstva dodavanje senke elementima, treba uočiti da to svojstvo dozvoljava primenjivanje senke bez zamućivanja ivica (eng. blur). Takođe, moguće je menjati poziciju senke, tako da je uz kombinaciju sa relativnim jedinicama (“rem”, “em”...) moguće relativno pozicioniranje senke, koja praktično postaje kopija objekta.
Kada je potrebno više elemenata, dovoljno je dodati još jedan set vrednosti za senku i odvojiti je od prethodne zarezom. Treba napomenuti da je moguće i korišćenje negativnih vrednosti.
Pored manupulacije vertikalnih i horizontalnog pomeranja (engl. offset), odnosno prve dve vrednosti box-shadow svojstva, postoji mogućnost manipulacije širenja i skupljanja senke (engl. spread) odnosno četvrte vrednosti. Manipulacijom ove vrednosti moguće je menjati veličinu oblika, uz to da je moguće korišćenje negativnih jedinica za smanjivanje oblika.
Kombinacijom ovih osobina, ovaj trik može biti naročito koristan za animacije u kojima se određeni oblik ponavlja više puta.
Naravno, ova primena ima svojih mana. Pre svega, često zahteva više CSS koda i naročito kod animacija to može da bude problematično, mada je u nekim slučajevima moguće pojednostavljivanje upotrebom Sass petlji. Uz to, postoji i ograničenje oblika koji mogu da se koriste, a pre svega se svodi na pravougaone, romboidne i elipsoidne elemente.
Treba spomenuti i svojstvo pod nazivom “filter: drop-shadow”, koje se može koristiti do određene mere kao i “box-shadow”. Ipak, postoji velika razlika u tome kako funkcionišu ova dva svojstva, jer se “filter: drop-shadow” primenjuje i na prethodne senke, kada se koristi veći broj senki, tako da se sam broj objekata duplira svaki put kada se doda dodatna senka.
Nekoliko reči za kraj ovog tutorijala
Ovo su samo neki od mogućih trikova koji mogu da se koriste kao zamena za SVG i slike. Naročito su pogodni zbog toga što se mogu animirati i jednostavno ih je prilagoditi za potrebe responzivnosti sajta.
Naravno, ovi trikovi će uglavnom biti zamenjeni kada dođe do bolje podrške novih svojstava, poput svojstva “clip-path” koje bi omogućilo iscrtavanje praktično bilo kog objekta.
Do tada, nadamo se da će vam naš vodič za iscrtavanje neuobičajenih oblika uz pomoć CSS-a biti od koristi.
