Giocare con i CSS3

Pubblicato il 11 Ottobre 2010 Categoria: Tutorials - Commenti (1)

Vi siete mai chiesti come è stato ottenuto un particolare effetto in un web design come alcune sottili ombre, bordi, sfumature, ecc? In un passato non cosi lontato questo risultato si poteva ottenere semplicemente utilizzando un′immagine come sfondo di qualche elemento.
Fortunatamente, con CSS3, ci si può permettere una maggiore flessibilità.

Vi andremo a mostrare come creare un div con angoli stondati, uno sfondo gradiente ed un′ombreggiatura esterna semplicemente con l′uso del CSS3. Potrete riutilizza questo codice in molti casi e potrete divertirvi modificandone i parametri.

1. Cominciamo con il creare il Mark-up

Creare un nuovo file index.html ed incollate il seguente codice:

  1. <body>
  2.      <div id="box">
  3.  
  4.     </div>
  5. </body>

2 Creare il Canvas

Aggiungiamo qualche stile di base per l′elemento body. Per farlo potete scegliere di creare un CSS esterno o creare lo stile direttamente all′interno della nostra pagina:

  1. body {
  2. width: auto;
  3. height: auto;
  4. margin: 0;
  5. padding: 20px 0;
  6. background: #666;
  7. }

3. Lo stile del Box

Adesso creiamo il nostro Box impostando altezza e larghezza:

  1. #box {
  2. /* Impostazioni di base */
  3. width: 500px;
  4. height: 500px;
  5. }

4. Angoli Stondati

Implementiamo lo stile per la stondatura degli angoli del nostro Box:

  1. /* Angoli Stondati */
  2. -moz-border-radius: 5px; /* FF1+ */
  3. -webkit-border-radius: 5px; /* Saf3-4 */
  4. border-radius: 5px; /* Opera 10.5, IE 9, Saf5, Chrome */

Notate che stiamo fornendo anche la specifica finale di "border-radius," in aggiunta alle versioni di Mozilla e WebKit.

5. Colore dei Bordi

Mozilla offre una proprietà apposita chiamata "-moz-border-*-colors". Questo ci permette di impostare un numero infinito di colori i bordi. Per ottenere un leggero effetto "double-border", cerchiamo di attuare questa proprietà.

  1. /* Bordi e Colori di base */
  2. border: 2px solid white;
  3.  
  4. /* Colore del bordo multiplo FF3.5+ */
  5. -moz-border-top-colors: #292929 white;
  6. -moz-border-right-colors: #292929 white;
  7. -moz-border-bottom-colors: #292929 white;
  8. -moz-border-left-colors: #292929 white;

Si noti che la dimensione e lo stile del bordo non sono stati alterati, siamo intervenuti esclusivamente sul colore.
N.B. Non mettere una virgola dopo ogni valore esadecimale!

6. Compensazione per Webkit

Attualmente Webkit non supporta il border-colors, useremo quindi box-shadow per simulare questo effetto:

  1. * Compensazione per Webkit */
  2. -webkit-box-shadow: 0px -1px 2px #292929; /* Saf3.0+, Chrome */

Si noti che i valori forniti si riferiscono rispettivamente alla X offset, Y offset, sfocatura, ombra e colore. Passando -1px a Y, si può spingere l′ombra verso l′alto.

7. Sfondo Gradiente

Il passo finale è quello di fornire una leggera sfumatura di sfondo per il nostro box. Dobbiamo essere sicuri pero′ di fornire un colore web safe per i browser che non supportano gradienti CSS.

  1. /* Gradiente e colore sostitutivo web safe */
  2. background-color: #a4a4a4;
  3. background-image: -moz-linear-gradient(top, #a4a4a4, #e3e3e3); /* FF3.6 */
  4. background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #a4a4a4),color-stop(1, #e3e3e3)); /* Saf4+, Chrome */
  5. filter: progid:DXImageTransform.Microsoft.gradient( startColorStr=′#a4a4a4′, EndColorStr=′#e3e3e3′); /* IE6,IE7 */
  6. -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorStr=′#a4a4a4′, EndColorStr=′#e3e3e3′)"; /* IE8

Sfortunatamente Mozilla e WebKit non sono abbastanza d′accordo sulla sintassi per i gradienti...

Ecco il nostro codice finale:

  1. body {
  2. width: auto;
  3. height: auto;
  4. margin: 0;
  5. padding: 20px 0;
  6. background: #666;
  7. }
  8. /* Stile box */
  9. #box {
  10. /* Impostazioni di base */
  11. width: 500px;
  12. height: 500px;
  13.  
  14. /* Angoli Stondati */
  15. -moz-border-radius: 5px; /* FF1+ */
  16. -webkit-border-radius: 5px; /* Saf3-4 */
  17. border-radius: 5px; /* Opera 10.5, IE 9, Saf5, Chrome */
  18.  
  19. /* Bordi e Colori di base */
  20. border: 2px solid white;
  21.  
  22. /* Colore del bordo multiplo FF3.5+ */
  23. -moz-border-top-colors: #292929 white;
  24. -moz-border-right-colors: #292929 white;
  25. -moz-border-bottom-colors: #292929 white;
  26. -moz-border-left-colors: #292929 white;
  27.  
  28. /* Compensazione per Webkit */
  29. -webkit-box-shadow: 0px -1px 2px #292929; /* Saf3.0+, Chrome */
  30.  
  31. * Gradiente e colore sostitutivo web safe */
  32. background-color: #a4a4a4;
  33. background-image: -moz-linear-gradient(top, #a4a4a4, #e3e3e3); /* FF3.6 */
  34. background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #a4a4a4),color-stop(1, #e3e3e3)); /* Saf4+, Chrome */
  35. filter: progid:DXImageTransform.Microsoft.gradient( startColorStr=′#a4a4a4′, EndColorStr=′#e3e3e3′); /* IE6,IE7 */
  36. -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorStr=′#a4a4a4′, EndColorStr=′#e3e3e3′)"; /* IE8 */
  37. }

Inserisci il tuo commento

Commenta questo articolo:  
   
 

Archivio

Categorie