CSS3 ti consente di essere creativo e di sperimentare con il tuo design per creare pagine web belle e uniche. Un'area del design con cui i CSS ti permettono di lavorare è la tipografia.

Puoi usare il famiglia di font e testo-ombra proprietà per creare effetti semplici ma notevoli. Potresti già conoscere le applicazioni di base dell'ombra del testo nei CSS. Tuttavia, puoi creare un'ampia gamma di stili con queste proprietà.

In questo articolo imparerai un modo efficace per creare diversi effetti di ombreggiatura del testo utilizzando HTML e CSS.

Iniziare con HTML e CSS

Puoi copiare e incollare questi esempi di codice per ottenere l'effetto ombra del testo che preferisci. Inizia creando un index.html file e a stile.css file. Questi sono gli unici file di cui avrai bisogno per provare gli esempi, ma dovrai modificare entrambi i file per ogni esempio.

index.html

 ombra #01 


href=" https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap"
rel="foglio di stile"
/>
 ombra #02 


href=" https://fonts.googleapis.com/css2?family=Monoton&display=swap"
rel="foglio di stile"
/>
 ombra #03 


href=" https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap"
rel="foglio di stile"
/>
 ombra #04 


href=" https://fonts.googleapis.com/css2?family=Rampart+One&display=swap"
rel="foglio di stile"
/>
 ombra #05 


href=" https://fonts.googleapis.com/css2?family=Faster+One&display=swap"
rel="foglio di stile"
/>
 ombra #06 


href=" https://fonts.googleapis.com/css2?family=Eater&display=swap"
rel="foglio di stile"
/>
 ombra #07 


href=" https://fonts.googleapis.com/css2?family=Codystar&display=swap"
rel="foglio di stile"
/>

stile.css

corpo {
text-transform: maiuscolo;
altezza della linea: 1;
allineamento del testo: centro;
dimensione del carattere: 5rem;
visualizzazione: griglia;
distanza: 4rem;
}

Ora, esaminiamo 11 esempi di ombre di testo da provare.

Imparentato: Come modificare il testo del tuo sito Web con la proprietà della famiglia di caratteri CSS

Mistico

Mystic è uno stile vetroso che dona un fantastico effetto di transizione senza usare il trasformare proprietà. È un effetto super semplice, ma esteticamente gradevole, per un sito Web audace e orientato alla crescita.

Produzione

HTML

 Ombra #01 
Mistico

CSS

corpo {
colore di sfondo: #5e5555;
}
.mistico {
font-family: 'Bowlby One', corsivo;
colore: rgba (255, 255, 255, 0,596);
text-shadow: 20px 0px 10px rgb (0, 0, 0);
}

monotona

Questo è un effetto di testo giocoso che utilizza il carattere "Monoton". Puoi giocare con il testo e il colore dell'ombra per abbinare i colori primari del tuo sito web.

Produzione

HTML

 Ombra #02 
monotona

CSS

.monotone {
font-family: 'Monoton', corsivo;
dimensione del carattere: 15rem;
colore: rgb (255, 0, 0);
opacità: 0,5;
text-shadow: 0px -78px rgb (255, 196, 0);
}

Bungee

Questo è uno stile interessante che utilizza il carattere "Bungee Shade". Combinato con uno sfondo scuro, produce un effetto grezzo con un senso di sospetto.

Produzione

HTML

 ombra #03 
Bungee

CSS

corpo {
colore di sfondo: #222;
}
.bungee {
font-family: 'Bungee Shade', corsivo;
colore: rgb (160, 12, 12);
opacità: 0,9;
text-shadow: -18px 18px 0 rgb (66, 45, 45);
}

Radioattivo

È possibile utilizzare questo effetto per segnali di allerta o di pericolo. Utilizza il carattere "Rampart One".

Produzione

HTML

 ombra #04 
Radioattivo

CSS

corpo {
colore di sfondo: #27292d;
}
.radioattivo {
font-family: 'Rampart One', corsivo;
colore: rgb (97, 214, 43);
opacità: 0,6;
text-shadow: -18px -18px 20px rgb (87, 255, 9);
}

Sprint

Questo effetto di testo in esecuzione utilizza il carattere "Faster One", il testo-ombra proprietà, e an ::dopopseudo-elemento con lo stesso contenuto del testo. Questo crea un effetto di "raddoppio".

Produzione

HTML

 ombra #05 
Sprint

CSS

corpo {
colore di sfondo: #27292d;
}
.sprint {
font-family: 'Faster One', corsivo;
dimensione del carattere: 10rem;
colore: rgba (255, 0, 242, 0,322);
text-shadow: -20px -108px 0px rgba (255, 255, 255, 0.445);
spaziatura tra lettere: 1rem;
posizione: relativa;
}
.sprint:: dopo {
contenuto: 'sprint';
posizione: assoluta;
in alto: 215px;
a destra: 300 px;
}

spinoso

Questo orribile effetto di testo pungente utilizza il carattere "Eater". Puoi provare a spostare il testo-ombra invece verso il basso a destra.

Produzione

HTML

 ombra #06 
spinoso

CSS

.pungente {
font-family: 'Eater', corsivo;
text-shadow: -18px -18px 2px #777;
}

Codystar

L'ombra del testo può fungere da contorno sfocato ma visibile al testo. Questo effetto luminoso fa miracoli con il carattere "Codystar".

Produzione

HTML

 ombra #06 
Codystar

CSS

.codystar {
font-family: 'Codystar', corsivo;
font-weight: grassetto;
colore: rgb (55, 58, 255);
text-shadow: 1px 1px 10px rgb (16, 72, 255), 1px 1px 10px rgb (0, 195, 255);
}

Regno

Puoi ottenere una tipografia autorevole con questo effetto ombra. Usa il ::prima pseudo-elemento e il trasformare proprietà per inclinare l'ombra.

Produzione

HTML

 ombra #08 
Regno

CSS

corpo {
colore di sfondo: #5e5555;
}
.regno {
colore bianco;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
dimensione del carattere: 10rem;
altezza della linea: 1;
allineamento del testo: centro;
}
.kingdom--shadow:: prima di {
colore: #000;
contenuto: attr(dati-testo);
margine superiore: 0.7rem;
posizione: assoluta;
trasformazione: prospettiva (205px) ruotareX(38deg) scala (0,84);
indice z: -1;
}

Programmatore

Questo luminoso e positivo testo-ombra l'effetto trasmette una personalità del sito web consapevole e motivata. Puoi aggiungerlo al tuo sito Web per produrre un semplice aspetto fumoso.

Produzione

HTML

 ombra #09 


Mangiare 

Dormire 

Codice 

Ripetere

CSS

corpo {
colore di sfondo: #5e5555;
}
div {
font-family: Verdana, Geneva, Tahoma, sans-serif;
imbottitura: 40px;
margine: 0px automatico;
font-weight: grassetto;
altezza della linea: 5,8 rem;
allineamento del testo: a sinistra;
colore: rgb (94, 94, 94);
} 
.coder-life {
text-shadow: 5px 5px #ffff00;
filtro: ombra (-10px 10px 20px #fff000);
}

Elegante

Se ami il minimalismo, questo effetto ombra del testo è perfetto. Poiché utilizza una dimensione del carattere grande, abbiamo ridotto il spaziatura del carattere e applicato il testo-ombra proprietà per creare questo effetto.

Produzione

HTML

 ombra #10 


S
h
R
un
D
D
h
un

CSS

.elegante {
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
dimensione del carattere: 10rem;
spaziatura tra lettere: -1rem;
colore bianco;
text-shadow: -18px 8px 18px #b4bbbb;
}

Giocoso

Il contorno sottile e audace rende questo testo attraente e vivace. Puoi giocare con il testo-ombra proprietà senza raggio di sfocatura in posizioni diverse. Le ombre del testo si applicano a tutti i caratteri, incluse le entità HTML come ♥. Puoi usare un Tabella di riferimento delle entità di carattere per esplorare ulteriormente.

Produzione

HTML

 ombra #11 
La codifica è ♥

CSS

.giocoso {
font-family: 'Baloo Tamma', corsivo;
colore: #fff;
spaziatura tra lettere: 0.2rem;
text-shadow: -2px -2px 0px #888,
4px 4px 0px #888,
7px 7px 0px #888;
}

Continua a sperimentare con effetti ombra avanzati

Le ombre di testo sono un modo semplice ed efficace per migliorare il tuo web design e rendere il tuo sito visivamente accattivante. Puoi anche sperimentare diversi effetti ombra. Puoi saperne di più sugli effetti ombra esterna per continuare il tuo viaggio CSS.

Naincy Mourya (15 Articoli Pubblicati)

Naincy è specializzata nella creazione di siti Web altamente reattivi e in una strategia di contenuto efficiente insieme a copie Web. È una scrittrice di tecnologia freelance che tiene d'occhio le tecnologie di tendenza.

Altro da Naincy Mourya