Met CSS3 kunt u creatief zijn en experimenteren met uw ontwerp om prachtige en unieke webpagina's te bouwen. Een ontwerpgebied waarmee u met CSS kunt werken, is typografie.

U kunt de font-familie en schaduw tekst eigenschappen om eenvoudige maar opmerkelijke effecten te creëren. U kent misschien al de basistoepassingen van tekstschaduw in CSS. Met deze eigenschappen kunt u echter een breed scala aan stijlen maken.

In dit artikel leert u een effectieve manier om verschillende tekstschaduweffecten te creëren met HTML en CSS.

Aan de slag met HTML en CSS

U kunt deze codevoorbeelden kopiëren en plakken om het gewenste tekstschaduweffect te krijgen. Begin met het maken van een index.html bestand en een style.css het dossier. Dit zijn de enige bestanden die u nodig heeft om de voorbeelden uit te proberen, maar u moet beide bestanden voor elk voorbeeld wijzigen.

index.html

 schaduw #01 


href=" https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap"
rel="stylesheet"
/>
 schaduw #02 


href=" https://fonts.googleapis.com/css2?family=Monoton&display=swap"
rel="stylesheet"
/>
 schaduw #03 


href=" https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap"
rel="stylesheet"
/>
 schaduw #04 


href=" https://fonts.googleapis.com/css2?family=Rampart+One&display=swap"
rel="stylesheet"
/>
 schaduw #05 


href=" https://fonts.googleapis.com/css2?family=Faster+One&display=swap"
rel="stylesheet"
/>
 schaduw #06 


href=" https://fonts.googleapis.com/css2?family=Eater&display=swap"
rel="stylesheet"
/>
 schaduw #07 


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

style.css

lichaam {
teksttransformatie: hoofdletters;
lijnhoogte: 1;
tekst uitlijnen: midden;
lettergrootte: 5rem;
weergave: raster;
tussenruimte: 4rem;
}

Laten we nu 11 tekstschaduwvoorbeelden doornemen die u kunt uitproberen.

Verwant: Hoe u de tekst van uw website kunt wijzigen met de CSS-lettertypefamilie-eigenschap

Mysticus

Mystic is een glazig kapsel dat een cool overgangseffect geeft zonder de transformeren eigendom. Het is een supereenvoudig, maar esthetisch aantrekkelijk effect voor een gedurfde en op groei gerichte website.

Uitgang:

HTML

 Schaduw #01 
Mysticus

CSS

lichaam {
achtergrondkleur: #5e5555;
}
.mysticus {
font-familie: 'Bowlby One', cursief;
kleur: rgba (255, 255, 255, 0,596);
tekstschaduw: 20px 0px 10px rgb (0, 0, 0);
}

Monotoon

Dit is een speels teksteffect met het lettertype ‘Monoton’. U kunt spelen met de tekst- en schaduwkleur om deze aan te passen aan de primaire kleuren van uw website.

Uitgang:

HTML

 Schaduw #02 
Monotoon

CSS

.monoton {
font-familie: 'Monoton', cursief;
lettergrootte: 15rem;
kleur: rgb (255, 0, 0);
dekking: 0,5;
tekstschaduw: 0px -78px rgb (255, 196, 0);
}

bungee

Dit is een coole stijl met het lettertype 'Bungee Shade'. Gecombineerd met een donkere achtergrond geeft het een rauw effect met argwaan.

Uitgang:

HTML

 schaduw #03 
bungee

CSS

lichaam {
achtergrondkleur: #222;
}
.bungee {
font-familie: 'Bungee Shade', cursief;
kleur: RGB (160, 12, 12);
dekking: 0,9;
tekstschaduw: -18px 18px 0 rgb (66, 45, 45);
}

radioactief

U kunt dit effect gebruiken voor waarschuwings- of gevarenborden. Het gebruikt het lettertype 'Rampart One'.

Uitgang:

HTML

 schaduw #04 
radioactief

CSS

lichaam {
achtergrondkleur: #27292d;
}
.radioactief {
font-familie: 'Rampart One', cursief;
kleur: RGB (97, 214, 43);
dekking: 0,6;
tekstschaduw: -18px -18px 20px rgb (87, 255, 9);
}

Sprint

Dit lopende teksteffect gebruikt het lettertype 'Faster One', de schaduw tekst eigendom, en een ::napseudo-element met dezelfde inhoud als de tekst. Hierdoor ontstaat een ‘verdubbeling’ effect.

Uitgang:

HTML

 schaduw #05 
Sprint

CSS

lichaam {
achtergrondkleur: #27292d;
}
.sprint {
font-familie: 'Faster One', cursief;
lettergrootte: 10rem;
kleur: rgba (255, 0, 242, 0.322);
tekstschaduw: -20px -108px 0px rgba (255, 255, 255, 0.445);
letter-spatiëring: 1rem;
positie: relatief;
}
.sprint:: na {
inhoud: 'sprint';
positie: absoluut;
boven: 215px;
rechts: 300px;
}

Stekelig

Dit gruwelijke stekelige teksteffect maakt gebruik van het lettertype 'Eater'. U kunt proberen de schaduw tekst in plaats daarvan naar rechtsonder.

Uitgang:

HTML

 schaduw #06 
Stekelig

CSS

.stekelig {
font-familie: 'Eater', cursief;
tekstschaduw: -18px -18px 2px #777;
}

Codystar

De tekstschaduw kan fungeren als een vage maar zichtbare omtreklijn voor de tekst. Dit heldere effect doet wonderen met het lettertype 'Codystar'.

Uitgang:

HTML

 schaduw #06 
Codystar

CSS

.codystar {
font-familie: 'Codystar', cursief;
lettergewicht: vet;
kleur: rgb (55, 58, 255);
tekstschaduw: 1px 1px 10px rgb (16, 72, 255), 1px 1px 10px rgb (0, 195, 255);
}

Koninkrijk

Met dit schaduweffect kunt u gezaghebbende typografie bereiken. Het gebruikt de ::voordat pseudo-element en de transformeren eigenschap om de schaduw te laten hellen.

Uitgang:

HTML

 schaduw #08 
Koninkrijk

CSS

lichaam {
achtergrondkleur: #5e5555;
}
.koninkrijk {
kleur wit;
font-familie: Impact, Haettenschweiler, 'Arial Narrow Bold', schreefloos;
lettergrootte: 10rem;
lijnhoogte: 1;
tekst uitlijnen: midden;
}
.koninkrijk--schaduw:: voor {
kleur: #000;
inhoud: attr(data-tekst);
marge-top: 0.7rem;
positie: absoluut;
transformeren: perspectief (205px) roterenX(38deg) schaal (0,84);
z-index: -1;
}

Codeur

Deze heldere en positieve schaduw tekst effect brengt een zelfbewuste en gemotiveerde websitepersoonlijkheid over. Je kunt het aan je website toevoegen om een ​​simpele smokey look te creëren.

Uitgang:

HTML

 schaduw #09 


Eten 

Slaap 

Code 

Herhalen

CSS

lichaam {
achtergrondkleur: #5e5555;
}
div {
font-familie: Verdana, Genève, Tahoma, schreefloos;
opvulling: 40px;
marge: 0px automatisch;
lettergewicht: vet;
lijnhoogte: 5.8rem;
tekst uitlijnen: links;
kleur: RGB (94, 94, 94);
} 
.coder-leven {
tekstschaduw: 5px 5px #ffff00;
filter: slagschaduw(-10px 10px 20px #fff000);
}

Elegant

Als je van minimalisme houdt, dan past dit tekstschaduweffect perfect. Omdat het een grote lettergrootte gebruikt, hebben we de letterafstand en paste de toe schaduw tekst eigenschap om dit effect te creëren.

Uitgang:

HTML

 schaduw #10 


s
H
R
een
NS
NS
H
een

CSS

.elegant {
font-familie: Impact, Haettenschweiler, 'Arial Narrow Bold', schreefloos;
lettergrootte: 10rem;
letter-spatiëring: -1rem;
kleur wit;
tekstschaduw: -18px 8px 18px #b4bbbb;
}

Speels

De dunne en gedurfde omtreklijn maakt deze tekst aantrekkelijk en levendig. Je kunt spelen met de schaduw tekst eigenschap zonder vervagingsradius op verschillende posities. Tekstschaduwen zijn van toepassing op alle tekens, inclusief HTML-entiteiten zoals ♥. U kunt een Referentietabel karakterentiteit verder te verkennen.

Uitgang:

HTML

 schaduw #11 
Coderen is

CSS

.speels {
font-familie: 'Baloo Tamma', cursief;
kleur: #fff;
letter-spatiëring: 0.2rem;
tekstschaduw: -2px -2px 0px #888,
4px 4px 0px #888,
7px 7px 0px #888;
}

Blijf experimenteren met geavanceerde schaduweffecten

Tekstschaduwen zijn een gemakkelijke en effectieve manier om uw webdesign te verbeteren en uw website visueel aantrekkelijk te maken. Je kunt ook experimenteren met verschillende schaduweffecten. U kunt meer leren over slagschaduweffecten om uw CSS-reis voort te zetten.

Naincy Mourya (15 artikelen gepubliceerd)

Naincy is gespecialiseerd in het bouwen van zeer responsieve websites en een efficiënte inhoudsstrategie, samen met webkopieën. Ze is een freelance tech-schrijver die trending technologieën scherp in de gaten houdt.

Meer van Naincy Mourya