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 box con bordi arrotondati

Esempio di utilizzo del codice:

<div style=”border-radius: VALORESCELTOpx;”>contenuto</div>


– Testo su colonne

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

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 ombre per gli oggetti

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 ombre per il testo

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.