blog

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:

Lorem ipsum elementum urna mauris! Sed ultrices, cursus rhoncus eros odio sed pellentesque mus.

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

 

width: 200px;
padding: 10px;
border: 2px solid black;
outline: 2px solid #3399CC;
outline-offset: 15px;

 

 

 

width: 250px;
padding: 10px;
outline: 20px dotted #3399CC;
outline-offset: 10px;

 

 

Categorie: CSS
Tag:

Scrivi un commento

© 2010-2014 SimoneDesign.it    C.F. FRTSMN87P18F844X    P.I 01478670555  -  Licenza Creative Commons
Partner: SeoWebbs  |  Privacy - Mappa