Quando si parla di web design, l’aspetto visivo dei contenuti gioca un ruolo fondamentale nel catturare e mantenere l’attenzione del pubblico. Un aspetto del design che può avere un impatto significativo sull’estetica generale e sulla leggibilità di un sito web è lo stile del testo.
Lo stile del testo va oltre la semplice scelta del font e del colore del carattere. Si tratta di combinare con cura varie proprietà CSS per ottenere l’effetto desiderato, come ad esempio l’utilizzo dei contorni del testo per renderlo visivamente accattivante.
In questo articolo approfondiamo l’arte di modellare i contorni dei testi utilizzando i CSS ed esploriamo il loro funzionamento e le varie opzioni da utilizzare.
Capire i testi web
Il testo web è il testo che viene visualizzato su una pagina web. I font svolgono un ruolo fondamentale nella visualizzazione del testo sul web. Questi font sono essenzialmente grafica vettoriale, il che significa che i dati dei pixel non li limitano e possono essere resi in varie dimensioni mantenendo la loro nitidezza e chiarezza.
Un aspetto affascinante della grafica vettoriale dei font è la possibilità di applicare tratti o contorni ai singoli caratteri. Così come è possibile disegnare un tratto intorno a una forma in programmi vettoriali come Adobe Illustrator, i CSS forniscono i mezzi per ottenere lo stesso effetto sul testo web.
2 metodi per aggiungere un contorno al testo con i CSS
Quando si tratta di aggiungere un effetto contorno al testo utilizzando i CSS, ci sono due metodi che si possono utilizzare. Vediamo i lati negativi di questi metodi e come utilizzarli.
1. Utilizzo della proprietà text-stroke
text-stroke è una proprietà CSS che si può utilizzare per aggiungere un contorno ai testi. Permette di specificare i contorni width e color. Questa proprietà è supportata solo dai browser basati su WebKit e per poterla utilizzare è necessario aggiungere il prefisso -webkit-.
Ad esempio, aggiungiamo il tratto a un testo di intestazione h1 – “Welcome to Kinsta”:
<h1>Welcome to Kinsta</h1>In questo modo la proprietà text-stroke verrà utilizzata con il prefisso -webkit-:
h1 {
-webkit-text-stroke-width: 3px;
-webkit-text-stroke-color: black;
}-webkit-text-stroke-width e -webkit-text-stroke-color specificano rispettivamente i prefissi width e color del tratto. Imposta width su 3px e color su black.
Queste due proprietà possono essere combinate con la proprietà stenografica -webkit-text-stroke, che specifica simultaneamente i tratti color e width.
h1 {
-webkit-text-stroke: 3px black;
}In questo modo si otterrà lo stesso risultato.
Supporto per la proprietà text-stroke
Secondo caniuse, il browser Internet Explorer non supporta la proprietà text-stroke.
Se utilizzate la proprietà text-stroke per impostare il contorno dei vostri testi e un utente utilizza un browser non supportato, il testo potrebbe non essere visibile se il suo colore corrisponde al colore dello sfondo.
Per ovviare a questo problema, potete utilizzare la proprietà -webkit-text-fill-color per impostare un color per il testo e impostare un colore di riserva con la proprietà color:
h1 {
color: black;
-webkit-text-fill-color: white; /* Will override color (regardless of order) */
-webkit-text-stroke: 3px black;
}Se un browser non supporta la proprietà text-stroke, utilizzerà il colore impostato dalla proprietà color.
Un’altra opzione consiste nel verificare che il browser supporti la proprietà -webkit-text-stroke prima di aggiungere lo stile.
@supports (-webkit-text-stroke: 3px black) {
h1 {
-webkit-text-fill-color: white;
-webkit-text-stroke: 3px black;
}
}2. Usare la proprietà text-shadow
Se non volete gestire le differenze di supporto, potete utilizzare la proprietà text-shadow, che supporta tutte le ultime versioni dei browser più diffusi.
Per la proprietà text-shadow, utilizzeremo quattro ombreggiature, ciascuna in alto a destra, in alto a sinistra, in basso a sinistra e in basso a destra.
h1 {
color: #fff;
text-shadow:
3px 3px 0 #000,
-3px 3px 0 #000,
-3px -3px 0 #000,
3px -3px 0 #000;
}In questo esempio, utilizziamo quattro ombreggiature per creare un effetto di contorno del testo. Ogni ombreggiatura ha un offset di 3 pixel dal testo e il colore è impostato sul nero (#000). Questo effetto è simile a quello generato dal primo metodo.
Applicando le ombreggiature a tutti e quattro gli angoli del testo, otteniamo un contorno ben definito. Sentitevi liberi di regolare gli offset dei pixel, i colori delle ombreggiature o i colori del testo per adattarli alle vostre preferenze di design specifiche.
Questo metodo offre un ulteriore vantaggio in quanto è possibile regolare le ombreggiature orizzontali e verticali in base alle esigenze del testo. Potete anche aggiungere un piccolo raggio di sfocatura:
h1 {
color: #fff;
text-shadow:
3px 3px 2px #000,
-3px 3px 2px #000,
-3px -3px 0 #000,
3px -3px 0 #000;
}
Un limite dell’utilizzo dell’ombreggiatura del testo è che potrebbe verificarsi un effetto di tratto discontinuo quando la lunghezza dell’ombra supera 1 pixel (lo vedrete confrontandolo con il metodo text-stroke ).
Combinare le proprietà text-stroke e text-shadow
È possibile combinare entrambe le proprietà per ottenere un effetto visivamente straordinario che combina un perfetto contorno del testo con una sottile sfocatura e gli effetti aggiuntivi offerti dalla proprietà text-shadow. Questa combinazione consente un approccio versatile e personalizzabile per migliorare l’aspetto del testo.
h1 {
-webkit-text-stroke: 1px black;
color: white;
text-shadow:
3px 3px 0 #000,
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
Potete anche evitare di aggiungere ombreggiature individuali a ogni angolo e applicare un’ombra generale con una sola linea:
#heading-1{
color: white;
-webkit-text-stroke: 1px #F8F8F8;
text-shadow: 0px 1px 4px #23430C;
}
#heading-2{
color: white;
-webkit-text-stroke: 1px #F8F8F8;
text-shadow: 0px 2px 4px red;
}
#heading-3{
color: #333;
-webkit-text-stroke: 1px #282828;
text-shadow: 0px 4px 4px #282828;
}
Riepilogo
Entrambe le proprietà text-stroke e text-shadow offrono valide opzioni per aggiungere contorni a un testo. La scelta dipende dalla compatibilità con il browser, dagli effetti desiderati e dal livello di controllo che desiderate per il vostro progetto.
Sperimentate diverse tecniche e trovate l’approccio migliore per creare contorni di testo di grande impatto visivo. Potete combinare le funzionalità di hosting di Kinsta con il vostro progetto completo per ottenere una presenza online accattivante.
Condividete la vostra esperienza! Avete utilizzato altri approcci non trattati in questo articolo? Fatecelo sapere nei commenti.
Lascia un commento