CSS3 Outline: contornare gli elementi
martedì 23 Agosto 2011
Anche questo mese siamo giunti al momento della rubrica mensile Proprietà CSS3, dedicata alle proprietà CSS3.
La proprietà CSS3 di oggi è: Outline, introdotta nella versione 2 e perfezionata in quest’ultima versione.
In precedenza avevamo visto come utilizzare la proprietà CSS3 text-shadow per contornare il testo, questa volta vedremo come grazie alla proprietà Outline è possibile creare contorni ai box.
Vediamo subito come si presenta:
La sintassi:
border: 1px solid #000000; outline: 10px solid #FFFF99; outline-offset: 2px; width: 300px; padding: 10px; |
A questo normalissimo box di 300px in larghezza e un bordo nero di 1px è stata aggiunta la proprietà outline che contorna l’elemento come si trattasse di un’ulteriore bordo esterno e outline-offset che setta lo spazio in pixel tra il bordo o l’outline.
Il contorno generato con la proprietà outline verrà posizionato sopra l’eventuale testo esterno al box.
Alcuni esempi di Outline
padding: 10px;
border: 2px solid black;
outline: 2px solid #3399CC;
outline-offset: 15px;
padding: 10px;
outline: 20px dotted #3399CC;
outline-offset: 10px;