Kako lahko s pomočjo CSSja ustvarjamo poljubne like – CSS oblike

S pomočjo Cascading Style Sheets-ov (kratica CSS) lahko oblikujemo tudi različne like. Vse kar potrebujemo je nekaj znanja iz CSSja in malo iznajdljivosti.

Do elementov, kot so kocka, pravokotnik, trikotnik in ostale variacije slednjih pridemo hitro. Tudi pravilno prikazovanje v različnih brskalnikih tu še ni problem. Problemi se začnejo pri oblikah, kot so krog, oval, zvezda, pentagon, heksagon, …, ki niso v celoti podprte v različnih brskalnikih, predvsem starejših.

Primer izrisa kocke
#kocka { width: 100px; height: 100px; background: black; }

Primer izrisa trikotnika
#trikotnik { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid black; }

Primer izrisa kroga
#krog { width: 100px; height: 100px; background: black; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }

Nekaj osnovnih primerov, ki vam bodo v pomoè so pripravili pri CSS Tricks – The Shapes of CSS.

Naprednejše CSS oblike

Da domišljija ne pozna meja nam je dokazal Nicolas Gallagher, ki je s svojim projektom “Pure CSS GUI icons“, kjer je ustvaril serijo zanimivih ikon. Pri slednjih je uporabljal tako imenovane CSS pseudo classes, ki nam omogočajo ogromno možnosti za ustvarjanje različnih oblik.

http://nicolasgallagher.com/pure-css-gui-icons/demo/

Komentiraj


*