CSS3 effects
ottenere molto con pocobeautiful effects with little code
Table of Contents
🍹 Introduzione
una carrellata di diversi effetti css3several examples of css3 effects
Da tempo i browsers sanno rendere le specifiche CSS3, che permettono un notevole miglioramento nella resa di effetti gradevoli delle pagine web:
- una possibilità interessante sono i bordi arrotondati con css, supportati ormai da quasi tutti i browsers;
- l'ombreggiatura del testo è da tempo supportata sia da FF sia da Opera e da altri browsers standard (adesso anche da IE10);
- simpatica è anche l'ombreggiatura del box;
- utile anche la possibilità di alternare gli stili di elementi contenuti in un medesimo elemento contenitore, ad esempio diverse righe di una medesima tabella;
- molto utile la possibilità di ottenere sfumature senza ricorrere a immagini;
- ed altro ancora: vedete qui sotto!
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.
perspective
another perspective.
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..
box-shadow
È 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.
- il colore dell'ombreggiatura
- la sua dimensione
- la sua “sfocatura”
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;}.
CSS gradient
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:
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.
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 immagini /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. |
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.
per approfondire
Maggiori dettagli li potete trovare su css3.info.