effetti con CSS3

effetti con CSS3

Ormai quasi tutti i browsers, compreso IE (>9), sono aggiornati sulle specifiche CSS3, che permettono un notevole miglioramento nella resa di effetti gradevoli delle pagine web:

in dettaglio

bordi arrotondati

Sono ottenuti con la proprietà border-radius, prefissata (con -moz-, o -webkit-, ad esempio) o, nelle versioni più recenti dei browsers, non prefissata.

Questo paragrafo è circondato da un bordo con gli angoli arrotondati, con la proprietà border-radius non prefissata. Questo è il codice: <p style="border: solid blue 3px; border-radius: 20px 10px 20px 10px">


Si può anche arrotondare molto: eh?: cerchio ottenuto con border-radius!



Certo facendolo più grosso occorre modificare il padding!



trasformazioni

Skew: effetto distorsione.

prospettiva. Senza prefisso finora lo riconosce solo FF.

giove

prospettiva. Senza prefisso finora lo riconosce solo FF.
Così è interessante: si può simulare la scritta iniziale di Star Wars...
A Long Time Ago In A Galaxy Far Far Away (qui puoi vederla davvero in atto)

l'ombreggiatura del testo

Si può ottenere un effetto rilievo, o incassato, o propriamente ombreggiato, con la proprietà text-shadow.

Ecco un'idea interessante (se avete un browser css3-compliant).

Rieccola con una variante.

Ed un'altra variante (vedi codice sorgente).

Vediamo di ottenere un'outline: così o così (con meno codice), o anche così, più sottile..

l'ombreggiatura del box

È ottenuta con la proprietà box-shadow, che disegna una ombreggiatura non alle lettere di una parola, come la proprietà text-shadow, ma a una certa area (come una parola, o un paragrafo, o una sezione di testo con più paragrafi, o una tabella, o una immagine) permettendo di stabilirne la profondità e il colore. Se avete Firefox, o Safari, o Opera, o IE (>9) questo paragrafo lo potete vedere ombreggiato.

Qualche altro esempio. Questo paragrafo è ombreggiato dall'alto.


Questo invece è ombreggiato dal basso.


E questo invece è ombreggiato da tutti i lati.


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

Questo è ombreggiato internamente da tutti i lati.

Questo è ombreggiato con effetto incassato.

alternare stili per elementi contigui

La leggibilità di una tabella ad esempio è notevolmente aumentata se si alternano righe di colore più chiaro e righe di colore più scuro.

Anche questa è una cosa che si può fare con CSS3, con la pseudo-classe :nth-child.

  • così si può alternare una riga di un colore
  • e un'altra di un altro colore!
  • Una di un colore
  • e un'altra di un altro!
  • senza agire sulle singole righe,
  • ma con un comando dato una volta per tutte

Guardate il codice: .alternato li:nth-child(2n+1) {background-color: #FFEABD;}.

sfumature CSS3

Firefox, i webkit-brosers (come Safari) e Opera supportano anche questa ottima possibilità delle sfumature, o gradient.

Questo paragrafo è sfumato con un gradient “lineare” (abbiamo scelto di rendere il gradient anche per IE, usando il suo tipico codice proprietario, scelta che a noi stessi appare discutibile, ma così, giusto per dare un'idea).

Il w3c nella sua ipotesi di CSS3 sta pensando a una sintassi del tipo: linear-gradient(white, gray);.

Qui si vede un altro esempio di sfumato con radial gradient circolare.

Qui si vede un altro esempio di sfumato con radial gradient ellittico.

l'opacità (trasparenza)

Può essere utile determinare il grado di opacità di un elemento su un altro, a cui si sovrappone. Poniamo il caso di una testo sovrapposto a una immagine:

deserto

Questo testo va a sovrapporsi all'immagine: può essere utile che la sua opacità non sia totale.

Abbiamo dato una opacity: 0.5 all'interno della proprietà style. La sintassi è riconosciuta da FF, Opera e webkit-browsers.

multi-colonne

Ci sono, è vero, altri modi per disporre il testo di una pagina web su più colonne: tipicamente quello di creare una tabella e di inserivi dentro il testo, oppure usare la proprietà “float”. In questi modi però si giunge a una soluzione - come dire? - rigida: il testo (e/o le immegini /gli oggetti) che devono stare a sinistra saranno rigorosamente ed esclusivamente quelli, quale che sia la risoluzione o le dimensioni dello schermo (/della finestra sotto cui si vede quella pagina).

Se invece vogliamo ottenere un effetto più liquido, di adattabilità indefinita a come la pagina viene visualizzata, possiamo ricorrere alla proprietà CSS3 column.

Ne diamo un esempio nella sezione che state leggendo, che genera due colonne, il testo delle quali varia a seconda della dimensione della finestra.

Come si vede dal codice sorgente solo Opera non usa il prefisso, mentre FF e i webkit-browsers usano i loro -moz e -webkit.

web fonts

Nel titolo di questo paragrafo ne diamo un esempio: lo potete vedere se avete un browser compatibile con CSS3.

La sintassi da usare è la seguente:

@font-face {
font-family: '[nome del font: potete anche modificarlo]';
src: url('http://[URL (assoluto)]/[nome del file del font].ttf');
}

testo “ruotato”

“ruotato”

(di 90°, ad esempio). Con Firefox e Safari è facile. La proprietà da usare è -moz (o -webkit, per Safari, -o, per Opera) transform:rotate(-90deg)

Se avete Firefox o safari potete vedere, a sinistra di questo box, un testo verticale.

border-image

Abbiamo scelto come immagine, per il bordo, un libro, che abbiamo “svuotato”. Affinché il bordo sia esterno al testo, e non sovrapposto ad esso, come un background, occorre impostare il padding.

Decisamente da perfezionare!

l'allineamento dell'ultima riga

Invece del solito Lorem ipsum mettiamo qualcosa di vero, Cesare. Si vede come l'ultima riga di questi paragrafi siano allineate a destra (non sono nuovi paragrafi), diversamente dal resto del paragrafo, che è giustificato. Lo si ottiene con il codice text-align-last: right; -moz-text-align-last: right;. Funziona con FF 12.

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. Horum omnium fortissimi sunt Belgae, propterea quod a cultu atque humanitate provinciae longissime absunt, minimeque ad eos mercatores saepe commeant atque ea quae ad effeminandos animos pertinent important, proximique sunt Germanis, qui trans Rhenum incolunt, quibuscum continenter bellum gerunt.

text-decoration

Questo testo è decorato con una linea rossa ondeggiata (se usate Firefox).

Sintassi: -moz-text-decoration-line: underline; -moz-text-decoration-style: wavy; -moz-text-decoration-color: red;

divertimenti

Esperimenti vari, a tempo perso :)

per approfondire

Maggiori dettagli li potete trovare su css3.info.

Potete vedere anche la nostra pagina di test CSS3 (che verifica quanto i browsers supportino le specifiche CSS3 senza prefisso).