back to top

Applicare un bordo alle lettere di un testo con CSS

Con l’avvento di CCS3 il linguaggo di stilizzazione delle pagine web si è arricchito di diverse funzionalità interessanti. Tra queste, ad esempio, vi è la possibilità di modificare l’aspetto dei font mediante l’applicazione di un ombra. Tale possibilità, di fatto, consente anche di applicare dei bordi alle lettere di un testo.

In questo articolo vedremo, appunto, come creare scritte con lettere contornate senza dover ricorrere a nulla di più che a qualche riga di CSS. Per descrivere la procedura necessaria alla stilizzazione dei bordi dei font tramite CSS partiamo da un semplice esempio pratico.

Di seguito la stilizzazione di un tag <p> attraverso le più comuni proprietà CSS:

p {
  font-family: arial, verdana, tahona, sans-serif;
  font-size: 22px;
  line-height: 150%;
  color: #000;
}

Per definire un bordo da associare al font sarà sufficiente fare ricorso alla proprietà text-shadow di CSS 3 che, come detto, serve per applicare un effetto ombra al testo ma, se utilizzato nel giusto modo, può creare un effetto "bordato" alle lettere di un testo. Andiamo, quindi, a modificare la stilizzazione in questo modo:

p.testo-bordato {
  font-family: arial, verdana, tahona, sans-serif;
  font-size: 22px;
  line-height: 150%;
  color: #000;
  text-shadow: -1px 0 #FF0000, 0 1px #FF0000, 1px 0 #FF0000, 0 -1px #FF0000;
}

Prova il codice

Il risultato della modifica apportata al CSS dovrebbe produrre un output simile al seguente:

Sarà naturalmente possibile personalizzare vari aspetti della stilizzazione agendo sulla proprietà text-shadow in modo opportuno, cambiando colore e ampiezza del bordo.

Volendo possiamo anche crere un effetto particolare con il testo dello stesso colore dello sfondo, ad esempio possiamo scrivere in bianco su bianco, in quanto la leggibilità sarà garantita dal contorno del testo.

body {
  background-color: #FFF;
}
p.testo-bordato {
  font-family: arial, verdana, tahona, sans-serif;
  font-size: 22px;
  line-height: 150%;
  color: #FFF;
  text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}

Questo il risultato:

Come potete vedere, seppur non esista una proprietà ad hoc per creare per creare un bordo al testo, grazie alla proprietà text-shadow è possibile ottenere quanto desiderato senza troppa fatica.

Altri contenuti interessanti

Pubblicità
Claudio Garau
Claudio Garau
Web developer, programmatore, Database Administrator, Linux Admin, docente e copywriter specializzato in contenuti sulle tecnologie orientate a Web, mobile, Cybersecurity e Digital Marketing per sviluppatori, PA e imprese.

Leggi anche...

Stilizzare HR (linee orizzontali) in puro CSS

Il tag <hr> (Horizontal Rule) è un elemento HTML...

Immagini riflesse con CSS

Il Flipping è una tecnica utilizzata dai grafici per...

CSS: dimensioni relative alla viewport con vw, vh, vmin e vmax

Con l'avvento e la diffusione di CSS 3 e...

Rimuovere CSS inutilizzato

Soprattutto quando si gestiscono progetti Web based di grandi...

CSS: centrare orizzontalmente un elenco puntato

Il sistema migliore per scrivere un buon menu è...

Gestire i bordi delle tabelle con i CSS

In questo post vorrei ritornare su un concetto basilare...
Pubblicità