Mar
8
CSS e la proprietà “outline”
Come molti sapranno i CSS3 non sono ancora stati completamente implementati dai browser, non ce ne serviremo nella prima parte di questa breve guida. Già implementata dalla specifica CSS2 era la proprietà “outline”. Vediamone un esempio:
p.test {
border: 1px solid #000000;
outline: 3px solid #6374AB;
width: 20em;
}
Queste poche righe impongono la creazione di un bordo nero di un pixel attorno al paragrafo, e di un outline (esterno al bordo) di colore “#6374ab”di tre pixel. Inoltre specifica la larghezza del paragrafo. Il risultato è il seguente:
Ma cosa dovremmo fare se ci servisse un effetto outline applicato ai contorni delle parole? In questo caso dovremmo servirci dei CSS3, che come già detto sono lacunosi di implementazione e non sono ancora standard, ma visto che si tratta solo di un effetto grafico applicato al testo è sufficiente prestare un po’ di attenzione perché continui a leggersi il contenuto.
La tecnica di quì sotto forse non sarà delle più “ortodosse”, ma sicuramente risolve il problema. Con i CSS3 è possibile creare una o più ombreggiature al testo, e se ne creassimo otto differenti (tutti i punti cardinali e gli intermedi) avremmo risolto la questione. Un’ombra a nord, una a nord-est, una ad est, ecc. L’immagine seguente è una piccola spiegazione di ciò che voglio ottenere:
L’unica regola da applicare è “text-shadow”, disponibile solo nella terza versione CSS.
p.outlined_text {
font-size:20px;
text-shadow:
red 1px 1px 0px,
red -1px -1px 0px,
red 1px 0px 0px,
red -1px 0px 0px,
red 0px 1px 0px,
red 0px -1px 0px,
red 1px -1px 0px,
red -1px 1px 0px;
}
E questo è risultato:
