Programmazione.it

Ciao, per farti riconoscere devi fare il login. Non ti sei ancora iscritto? Che aspetti, registrati adesso!

Segnala un abuso

Hai riscontrato un abuso nel seguente intervento? E' presente in esso un'offesa, una parolaccia, una violazione di copyright? Non è necessario indicare il link al commento perché viene ricostruito in automatico dal sistema di abuse reporting. I tuoi dati verranno utilizzati esclusivamente per un eventuale contatto, nel caso il team di Programmazione.it non riesca a comprendere l'abuso. Eventualmente puoi inserire dettagli sull'abuso che ritieni sia stato commesso.

Intervento incriminato:
Argomento della discussione:	Primi passi con i CSS 3 (2/2)
Autore dell'intervento:	Fabio Lelli
Un'altra nuova possibilità è quella di inserire un gradiente nei bordi di un elemento. In questo caso si tratta di una specifica implementata solo in Firefox 3.1. - da cui il prefisso –moz - con la seguente sintassi, nella quale occorre inserire otto codici colore per descrivere tutte le sfumature del gradiente: <span style="font-size:1.0em">#bordo_gradiente { -moz-border-bottom-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2; -moz-border-top-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2; -moz-border-left-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2; -moz-border-right-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2; }</span> E' molto più semplice inserire delle ombre, sia per un testo che per un box: nel primo caso la proprietà è *text-shadow, supportata da Safari 3, Opera 9.5, Firefox 3.1: <span style="font-size:1.0em">p.testo_con_ombra {text-shadow: 2px 2px 2px #000;} </span> Nel secondo caso, la regola è stata implementata da Safari: <span style="font-size:1.0em">.box_con_ombra {-webkit-box-shadow: 10px 10px 5px #888;} </span> I primi due valori indicano l’offset dell’ombra, il primo in verticale - i valori positivi spostano l’ombra in basso - il secondo in orizzontale (valori positivi spostano l’ombra a destra), il terzo la larghezza dell’ombra, e il quarto il colore. Segnaliamo infine una interessante novità che in questo caso riguarda l’impaginazione, e cioè l’introduzione di proprietà per gestire colonne multiple: column-count* stabilisce il numero di colonne; *column-width* stabilisce la loro larghezza; *column-gap* stabilisce la loro distanza; *column-rule* pone un bordo fra le colonne, di cui si può stabilire la larghezza, lo stile e il colore. Possiamo vedere alcuni screenshot; nell'esempio che segue, i prefissi indicano la loro adozione da parte di Firefox e di Safari: <span style="font-size:1.0em">.colonne multiple { -moz-column-width: 130px;; -webkit-column-width: 130px; -moz-column-gap: 20px; -webkit-column-gap: 20px; -moz-column-rule: 1px solid #ddccb5; -webkit-column-rule: 1px solid #ddccb5; }</span> Nei CSS 3 vengono introdotti inoltre altri selettori, altre pseudo-classi, e altri effetti grafici come il mascheramento delle immagini, ma finché queste potenzialità non saranno finalizzate e adottate come standard non solo l’aspetto grafico di ogni sito dipenderà pesantemente dal browser in uso, ma per sfruttare le nuove caratteristiche nei browser più aggiornati saremo costretti ad allungare il codice e a renderlo quindi più pesante, come si può notare nell’ultimo esempio.
La tua segnalazione:
Il tuo nome:
Il tuo cognome:
La tua e-mail:
Descrizione dell'abuso:

Codice di sicurezza (Human Interactive Proof):
Il codice di sicurezza è la sequenza di sei lettere, che compare qui a fianco. Viene generato in maniera casuale dal sistema e cambia ogni volta che viene ricaricata la pagina.
Codice di sicurezza:

Copyright Programmazione.it™ 1999-2009. Alcuni diritti riservati. Testata giornalistica iscritta col n. 569 presso il Tribunale di Milano in data 14/10/2002. Pagina generata in 0.099 secondi. Sito ottimizzato per Mozilla Firefox. Powered by Kyron.