MondoPc - il Pc usato seriamente

effetti con CSS3

Purtroppo i browsers, soprattutto IE, sono in ritardo sulle specifiche CSS3, che permettono un notevole miglioramento nella resa di effetti gradevoli delle pagine web:

abbiamo già detto dei bordi arrotondati, supportati (a tutt'oggi) da Firefox, da Safari (e gli altri browsers basati su webkit) e da Opera;
l'ombreggiatura del testo è da tempo supportata sia da FF sia da Opera e da altri browsers standard (non da IE!);
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;
utile anche la proprietà opacity, nel caso di elementi sovrapposti;
si può anche costruire una pagina multi-background
ed altro ancora: vedete qui sotto!

in dettaglio

l'ombreggiatura del testo

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

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.

il colore dell'ombreggiatura
la sua dimensione
la sua “sfocatura”

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

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.

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. 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;

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).

Contatti:

internet