La proprietà outline in CSS viene utilizzata per disegnare una linea attorno all'esterno di un elemento. È simile alla proprietà border (che abbiamo visto nella lezione dei bordi), ma differisce dal fatto che l'outline non occupa spazio e non influisce sulla dimensione o la posizione dell'elemento.
Per capire in breve come funziona l'outline, prova a cliccare "Outline" qui sopra, poi "Rimuovi". Vedrai che la posizione dell'elemento grigio non è cambiata. Ora, prova a cliccare su "Bordo" e "Rimuovi": noterai la differenza, perché il testo si sarà spostato a causa di border.
In questa lezione, vediamo le proprietà outline-style, outline-width, outline-color, outline e outline-offset.
Lo stile dell'outline è definito tramite la proprietà outline-style. Questa proprietà accetta i seguenti valori:
none, non è visualizzato nessun outline.hidden, definisce un outline nascosto (invisibile).solid, definisce un outline costituito da una linea continua.dashed, definisce un outline costituito da trattini.dotted, definisce un outline costituito da punti.double, definisce un outline costituito da due linee continue. La larghezza dell'outline (che vedremo più avanti in questa lezione) deve essere almeno 3 pixel per mostrare due linee.groove, definisce un outline incassato, appare come se fosse intagliato nell'elemento.ridge, definisce un outline in rilievo.inset, definisce un outline che appare come se fosse inserito nell'elemento.outset, definisce un outline che appare come se fosse in rilievo rispetto all'elemento.Vediamo un esempio di un outline formato da linea continua:
<div>Ciao a tutti</div>
<style>
div {
width: 200px;
height: 200px;
outline-style: solid;
}
</style>Nell'esempio, abbiamo aggiunto height e width (che abbiamo visto nella lezione sulle dimensioni degli elementi) per rendere più visibile il <div>.
Nota: l'outline è un elemento essenziale per rendere accessibile una pagina, in quanto viene utilizzato dagli screen reader (programmi utilizzato dai non vedenti o ipovedenti) per la selezione degli elementi. Non rimuovere l'outline (che in alcune pseudo-classi, che vedremo nella lezione dedicata, sono preimpostate) se non necessario.
La proprietà outline-width in CSS specifica la larghezza/spessore della linea dell'outline di un elemento.
Puoi utilizzare questi valori con outline-width:
thick, specifica un outline spesso (solitamente corrisponde a circa 5-6 pixel).medium, specifica un outline di larghezza media (solitamente corrisponde a circa 3-4 pixel). È il valore di default.thin, specifica un outline sottile (solitamente corrisponde a circa 1 pixel).Nota: outline-style è una proprietà obbligatoria da definire per creare l'outline.
Vediamo come creare un outline di 3 px:
<div>Ciao a tutti</div>
<style>
div {
width: 200px;
height: 200px;
outline-style: solid;
outline-width: 3px;
}
</style>Per definire il colore dell'outline di un elemento, possiamo utilizzare outline-color.
Con questa proprietà, possiamo scegliere tra:
transparent, per rendere l'outline trasparente.Ecco come rendere l'outline rosso:
<div>Ciao a tutti</div>
<style>
div {
width: 200px;
height: 200px;
outline-style: solid;
outline-width: 3px;
outline-color: red;
}
</style>Con la proprietà outline, è possibile specificare tutte le diverse proprietà che abbiamo visto finora in un unico passaggio. Ecco la sintassi di outline:
outline: outline-width outline-style outline-color
Ricorda che outline-style è sempre obbligatorio, mentre lo spessore e il colore sono facoltativi.
Vediamo un esempio con un outline di 3px e rosso:
<div>Ciao a tutti</div>
<style>
div {
width: 200px;
height: 200px;
outline: 3px solid red;
}
</style>La proprietà outline-offset in CSS specifica la distanza tra l'outline e il bordo dell'elemento. Questa proprietà permette di spostare l'outline all'esterno dell'elemento (se usi valori positivi) o all'interno dell'elemento (se usi valori negativi).
La proprietà outline-offset accetta qualsiasi valore di lunghezza: px, em, ecc.
<div>Ciao a tutti</div>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid black;
outline: 3px solid red;
outline-offset: 10px;
}
</style>Nell'esempio, abbiamo inserito i bordi per evidenziare il confine dell'elemento.