Corsi on-line

Stilizzare i bordi dei font con CSS

Per parlare della procedura necessaria alla stilizzazione dei bordi dei font tramite CSS è possibile partire da un semplice esempio pratico. Nello specifico realizzeremo un comune divbox centrato orizzontalmente e verticalmente all’interno del quale andremo ad inserire una semplice sequenza di caratteri; per far questo, la nostra prima operazione sarà quella di definire le regole di stile associate al “div” che fungerà da contenitore e al paragrafo che delimiterà la stringa:

.divBox{
width:500px;
height:100px;
position:absolute;
left:50%;
top:50%;
margin:-50px 0 0 -250px;
background-color:#338BC7;
border: #000 solid 1px;
}

.divBox p{
font-size:21px;
margin:20px 15px 5px;
color:white;
text-align:center;
}

Fatto questo sarà possibile richiamare all’interno dell’HTML le regole definite:

<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean tincidunt justo odio, at tincidunt leo vehicula.</p>
</div>

Il risultato di tali operazioni dovrebbe essere simile al seguente:

Font senza bordo

Ora per definire un bordo da associare al font sarà possibile fare ricorso all’elemento “text-shadow” che è supportato da tutte le versioni più aggiornate dei browser per la navigazione Web (ma non da Internet Explorer 9); un esempio sull’utilizzo di tale proprietà potrebbe essere il seguente:

.divBox p{
font-size:21px;
margin:20px 15px 5px;
color:white;
text-align:center;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

Il risultato della modifica apportata al CSS per la paragrafazione dovrebbe essere ora simile al seguente:

Font con bordo stilizzato

Sarà naturalmente possibile personalizzare vari aspetti della stilizzazione, come per esempio il colore e la dimensione dei bordi, ma per approfondimenti sulla proprietà “text-shadow” è disponibile un’apposita sezione nel manuale ufficiale del W3C.

Post correlati
I più letti del mese
Tematiche