CSS3 Alcune delle nuove feature
23 March 2010, sezione Linux, Windows
Lo standard css3 è il elaborazione da circa 10 anni, tuttavia non essendo ancora stato approvato è tutt’ora poco usato, un peccato se si considerano le novità che porta e soprattutto il fatto che i browser attuali lo supportano già. Eh si, ovviamente non tutti e in diverso modo ma ad esempio Safari, Firefox e più di tutti Chrome supportano già adeguatamente molte delle feature più interessanti. In questo articolo vi presenterò un paio di queste feature con il relativo codice.
Un piccolo appunto: aggiungete “-moz-” e “-webkit-” come prefisso ad ogni opzione css3 per estendere il più possibile la compatibilità, esempio: se avete la proprietà “ombra-testo= 3px;” dovrete scrivere “ombra-testo= 3px;-moz-ombra-testo= 3px;-webkit-ombra-testo= 3px;”, negli esempi ho omesso questa cosa per rendere il codice più chiaro.
– Bordi arrotondati
Da sempre l’incubo dei web-designer, adesso basta una riga di codice.
Esempio di utilizzo del codice:
<div style=”border-radius: VALORESCELTOpx;”>contenuto</div>
– Testo su colonne
Esempio di utilizzo del codice:
<div style=”column-count: NUMEROCOLONNE;”>contenuto</div>
– Ombre per gli oggetti
Indispensabili per dare spessore ad una pagina.
Esempio di utilizzo del codice:
<div style=”cbox-shadow: DISCOSTAMENTOXpx DISCOSTAMENTOYpx AMPIEZZAOMBRApx #COLORE; “>contenuto</div>
– Ombre per il testo
…o sfumature a seconda del colore e della grandezza che scegliete.
Esempio di utilizzo del codice:
<div style=”text-shadow: DISCOSTAMENTOXpx DISCOSTAMENTOYpx AMPIEZZAOMBRApx #COLORE; “>contenuto</div>
Vi rimando a un paio di siti dove reperire e provare altre feature Css3 Please!, Css3info e l’utilissima guida di Html.it.