BORDI ED OMBRE CON I CSS3

Per ottenere alcuni effetti che fino a qualche anno fa si raggiungevano solo con l’uso delle immagini, oggi è possibile utilizzare alcune caratteristiche dei CSS3.
Purtroppo queste caratteristiche non sono tutte completamente supportate dai Browser e non tutte sono implementate nella stesso modo.

Alcuni li accettano cosi come sono, altri richiedono un prefisso, solitamente viene utilizzato il prefisso ‘moz’ per Mozilla   , il prefisso ‘webkit’ per Chrome  e per Safari 
Internet Explorer  non accetta proprio il text-shadow, mentre Opera  è il browser che si comporta meglio di tutti accettando tutte le caratteristiche.

Text-shadow: ombre ai testi

L’ombreggiatura dei testi come indicato dal w3School è accettato da tutti i browser tranne che Internet Explorer.

Il codice da utilizzare è:
h1{ text-shadow: 3px 3px 5px #000; }
ed i valori stanno ad indicare:

• lo scostamento a destra dell’ombra
• lo scostamento in basso dell’ombra
• il margine di sfumatura dell’ombra
• il colore da utilizzare dell’ombra

L’esempio: Testo ombreggiato

Box-shadow: le ombre ai box

E per box si intendono tutti quegli elementi che hanno un box model fisso: leggasi con display block

il codice da utilizzare è praticamente identico a quello per l’ombreggiatura dei testi, anche se in questo caso bisogna tener conto dei prefissi per i singoli browser.

Ipotizzando un semplice titolo:

Il titolo ombreggiato

<h4 class="ombra">Il titolo ombreggiato</h4>

.ombra{
-webkit-box-shadow: 10px 10px 5px #888888; /*Safari*/
-moz-box-shadow: 10px 10px 5px #888888; /*Mozilla*/
box-shadow: 10px 10px 5px #888888;
}

anche in questo caso i valori stanno ad indicare:

• lo scostamento a destra dell’ombra
• lo scostamento in basso dell’ombra
• il margine di sfumatura dell’ombra
• il colore da utilizzare dell’ombra

Border-radius: angoli arrotondati senza javascript

Un interessante sistema per creare dei box con angoli arrotondati. Più che la box in se, l’effetto viene applicato al bordo del box anche se questo, non è dichiarato

Il codice da utilizzare in questo caso è semplice ed applicato ad un paragrafo avremo il risultato seguente:

Arrotondato

Arrotondato ad angoli

<p class="radius">Arrotondato</p>
<p class="radiusangle">Arrotondato ad angoli</p>

p.radius{
border:2px solid #f00;
background:#fcc;
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
}
p.radiusangle{
border:2px solid #f00;
background:#fcc;
border-radius:15px 0px 15px 0px;
-moz-border-radius:15px 0px 15px 0px;
-webkit-border-radius:15px 0px 15px 0px;
}

Leggi il contenuto originale su KREATORE.IT