Effetto del profilo sul testo - CSS

Il foglio di stile a cascata è un semplice linguaggio di design che rende presentabile e attraente il processo di creazione di pagine web. Inoltre, ci consente di aggiungere diversi stili al testo, come colore, ombra e altri elementi. L'aggiunta di un effetto di contorno è uno di questi. Gli utenti cambiano le dimensioni del carattere, la decorazione e il peso del carattere applicando più proprietà di styling.

Questo post descriverà:

• Come aggiungere l'effetto di contorno al testo usando "timore di testo" Proprietà?
• Come aggiungere l'effetto di contorno al testo usando "text-shadow" Proprietà?

Come aggiungere l'effetto di contorno al testo usando la proprietà "testo-troke"?

IL "timore di testo"La proprietà può essere utilizzata per aggiungere un effetto di schema al testo. Alcuni dei tipi di proprietà "text broke" sono menzionati di seguito:

• "-WebKit-text-Stroke"La proprietà dà un ictus al testo. Può essere specificato come proprietà stenografia impostando i valori di larghezza e colore.
• "-WebKit-text-stroke-width"Determina la larghezza della corsa.
• "-WebKit-text-stroke-color"Applica il colore alla corsa.
• "-WebKit-text-riempimento"Aggiunge colore al testo.

La proprietà della corsa di testo deve essere dichiarata con "webkit-"Prefisso. È supportato solo da browser basati su webkit, come "musica lirica","Safari","Cromo", E "Android". In alternativa, il "text-shadow"La proprietà è compatibile con quasi tutti i browser.

Per una migliore comprensione, dai un'occhiata agli esempi di seguito.

Esempio 1

Crea un file HTML seguendo le istruzioni:

• Innanzitutto, aggiungi un ""Elemento e assegnarlo il"contenuto" classe.
• All'interno di questo "", aggiungi il "

  "Elemento con l'ID"testo"Per specificare un po 'di testo al documento. Questo "testo"L'ID verrà applicato con le proprietà CSS per aggiungere un effetto di schema:

CSS- Effetto del profilo al testo

Ora, vai alla sezione CSS per applicare gli effetti di contorno al testo.

Classe di "contenuto" di stile

.contenuto
larghezza: 500px;
Margine: auto;

IL ".contenuto"È utilizzato per accedere al""Elemento con classe"contenuto". Le seguenti proprietà sono applicate ad esso:

• "larghezza"La proprietà imposta la larghezza dell'elemento.
• "margine"Specifica lo spazio attorno all'elemento.

Elemento "P" di stile

Ora, accedi al "P"Elemento di ID"testo"E applica le seguenti proprietà:

#testo
colore bianco;
-WebKit-text-Stroke: 1px White;
text-shadow: 0px 1px 4px #46256d;
Font-size: 45px;

Qui:

• "colore"Specifica il colore del carattere dell'elemento.
• "dimensione del font"La proprietà imposta la dimensione del carattere dell'elemento.
• "-WebKit-text-Stroke"La proprietà viene utilizzata per applicare l'effetto di schema al testo.

Produzione

Esempio 2

#testo
colore bianco;
Font-size: 42px;
-WebKit-text-stroke-width: 1px;
-WebKit-text-Stroke-color: Purple;

Nel secondo esempio, abbiamo impostato la larghezza e il colore del profilo del testo specificando il "-WebKit-text-stroke-width" E "-WebKit-text-stroke-color" proprietà.

Produzione

Esempio 3

#testo
Font-Family: corsivo;
colore bianco;
Font-size: 35px;
-WebKit-text-stroke-width: 2px;
-WebKit-text-Stroke-color: Black;

In questo esempio, il "famiglia di font"La proprietà specifica lo stile del testo dell'elemento.

Produzione

Come aggiungere l'effetto di contorno al testo usando la proprietà "text-shadow"?

Il CSS "text-shadow"La proprietà viene utilizzata per aggiungere un effetto ombra al testo ed è supportata da tutti i browser.

Ecco la rappresentazione grafica dell'aggiunta di più ombre al testo:

Esempio 1

#testo
colore bianco;
Font-size: 40px;
text -shadow: -1px 1px 2px #253f11, 1px 1px 2px #253f11, 1px -1px 0 #253f11,
-1px -1px 0 #253f11;

La descrizione delle proprietà aggiunte è illustrata sopra.

Produzione

Esempio 2

#testo
colore bianco;
Font-size: 48px;
-WebKit-text-Stroke: 1px #f0ecec;
text-shadow: 0px 1px 5px rgb (0, 0, 175);

Nel codice sopra indicato, abbiamo applicato entrambi "text-shadow" E "-WebKit-text-Stroke"Proprietà CSS.

Produzione

Abbiamo fornito esempi diversi per applicare l'effetto di schema al testo.

Conclusione

Per aggiungere un effetto di contorno al testo, il CSS "timore di testo"La proprietà può essere utilizzata. Questa proprietà include "larghezza di text-broke","text-toch-color", E "Testo-riempimento". Un'altra proprietà per aggiungere effetti di contorno al testo nel CSS è "text-shadow". Questo blog ha spiegato come aggiungere un effetto di schema al testo con più esempi.