test di CSS3

In questa pagina testiamo il progresso dei browsers verso le specifiche CSS3:l'approdo definitivo che dovrebbero raggiungere è quello di rendere effetti CSS3 senza prefissi.

border-radius, i bordi arrotondati

Questo paragrafo ha i bordi arrotondati con la semplice istruzione (senza prefisso) border-radius. Ormai tutti i principali browsers riconoscono border-radius, da FF a Chrome a Opera e IE9.

box-shadow, l'ombreggiatura del box

Questo paragrafo è ombreggiato con comando, senza prefissi, box-shadow. Si possono rispettivamente settare:

Tutti i principali browsers riconoscono il box-shadow, da FF a Opera alle ultime versioni dei webkit-browsers (Chrome, Safari) e IE >9.

È anche possibile una ombreggiatura “interna”, usando inset, come questo paragrafo mostra.

sfumature CSS3

I browsers stanno cominciando a supportare questa ottima possibilità delle sfumature: background-image: linear-gradient(white, gray): ormai non solo FF e Opera riconoscono questa sintassi, ma anche IE e i webkit browsers hanno abbandonato la loro sintassi proprietaria per seguire questa sintassi ormai standard.

E questo paragrafo dovrebbe avere una sfumatura di più colori.
Allunghiamolo un po':
così si vede meglio
Codice background: linear-gradient(to bottom, blue, white 80%, orange);.

Ecco un esempio di sfumato con radial gradient ellittico.

testo sfumato

È più difficile da rendere del box sfumato, per cui i browsers sono in ritardo con questa specifica (chiamiamola text-gradient). Solo i webkit-browsers sinora hanno una loro sintassi proprietaria per rendere, in qualche maniera, il testo sfumato.

Vediamo se tale sintassi diventerà uno standard, marcando questo testo (dovrebbe esserci un gradient non del box, ma del testo).

testo su più colonne

Questo paragrafo dovrebbe essere disposto su due colonne, è ottenuto con il comando column-count: 2; column-gap: 2em; column-rule: 1px dashed gray;.

allineamento dell'ultima riga

Il seguente paragrafo dovrebbe avere l'ultima riga allineata a destra, e non, come al solito, a sinistra.

Gallia est omnis divisa in partes tres, quarum unam incolunt Belgae, aliam Aquitani, tertiam qui ipsorum lingua Celtae, nostra Galli appellantur. Hi omnes lingua, institutis, legibus inter se differunt. Gallos ab Aquitanis Garumna flumen, a Belgis Matrona et Sequana dividit.

transform...

testo “ruotato”

“ruotato”

(di 90°, ad esempio). La proprietà da usare è transform:rotate(-90deg)

transform:scale

Questo testo dovrebbe apparire rovesciato verticalmente.


E questo testo rovesciato orizzontalmente.

border-image

Questo paragrafo dovrebbe avere un'immagine (un libro) ai bordi...

transition

Mettendo il mouse sull'immagine la si ingrandisce lentamente o sul quadrato rosso cambia dimensione e colore.

Giove

per approfondire

Maggiori dettagli li potete trovare su css3.info.