Når du designer et nettsted, må du sørge for at det generelle utseendet til nettstedet er estetisk behagelig for å forbedre brukeropplevelsen. For dette formålet kan du legge til bilder eller tekst på nettstedet ditt, men å legge til ren tekst kan bare ha en negativ innvirkning på brukeropplevelsen, for å forbedre skjønnheten i ren tekst kan du legge til en skyggeeffekt ved å bruke CSS Tekstskyggeegenskaper.

Vi har designet denne opplæringen for å få deg til å lære hvordan du kan gjøre din tekster interessant på forskjellige måter ved å legge til tekstskygger.

La oss begynne.

CSS Text Shadow

Du kan legge til en skygge på tekst som vises på websider ved hjelp av CSS Text-Shadow-egenskapen. Her skal vi demonstrere forskjellige måter du kan bruke til å legge til skygge i teksten din.

Tilsett horisontal og vertikal skygge

For å legge til en skygge på en tekst horisontalt og vertikalt bare gi verdier av både dimensjonene til tekstskyggeegenskapen. Følg eksemplet nedenfor.

Html

Hei Verden

Her har vi laget en

element og la til litt tekst i den.

CSS

H1
Tekstskygge: 2px 2px;
Farge: blå;

Ved hjelp av tekstskyggeegenskapen gir vi 2px til både horisontale og vertikale dimensjoner av teksten. I tillegg gir vi også blå farge på teksten.

Produksjon

En horisontal og vertikal skygge er lagt til teksten.

Legge til farge i skyggen

En annen morsom ting du kan gjøre er å legge til farge sammen med skyggen til teksten. Bruk følgende kodebit.

CSS

H1
Tekstskygge: 2px 2px blå;

Bortsett fra å gi en viss verdi til horisontale og vertikale dimensjoner av teksten, gir vi også fargen på skyggen. Denne fargen brukes ikke på skyggen, ikke teksten.

Produksjon

Skyggen har fått fargen blå.

Legg til en uskarphet i skyggen

For å legge til en uskarphetseffekt til skyggen, må du spesifisere uskarphetsintensiteten som den tredje verdien til tekstskygge-egenskapen. Følg koden nedenfor.

CSS

H1
Tekstskygge: 2px 2px 6px RGB (255,20,147);

I koden ovenfor representerer to verdier av tekstskyggeegenskapen lengden på horisontal og vertikal skygge, og den tredje verdien representerer intensiteten til uskarpheten. Vi har også gitt skyggen en dyp rosa farge.

Produksjon

Uskarphetseffekten er lagt til vellykket.

Legg til en glødeffekt til skyggen

Følg eksemplet nedenfor for å legge til en glødeeffekt rett bak teksten.

CSS

H1
Tekstskygge: 0 0 5px rød;

I ovennevnte kodebit, for å legge til en glødende effekt, tildeler vi 0px til de horisontale og vertikale dimensjonene til teksten, og gir dessuten en viss verdi til uskarphetsradius sammen med rød farge.

Produksjon

En glødende effekt ble lagt til teksten.

Legge til flere skygger

For å legge til mange skygger på teksten, kan du legge til en liste over skygger i tekstskyggeegenskapen atskilt med komma.

CSS

H1
Tekstskygge: 3px 3px 4px gul, 4px 4px 6px lilla;

I eksemplet ovenfor legger vi en gul og lilla skyggeeffekt til teksten.

Produksjon

Flere skygger er lagt til vellykket.

Legge til en oversikt til teksten

Følg eksemplet nedenfor:

CSS

H1
Farge: Bisque;
Tekstskygge: 1px 1px svart, -1px -1px svart;

I eksemplet ovenfor har vi tildelt en svart fargeskygge med 1px høyre og ned dimensjoner og -1px topp- og venstre dimensjoner.

Produksjon

En disposisjon er lagt til i teksten.

Konklusjon

For å gjøre den vanlige teksten din interessant kan du legge til en skyggeeffekt ved å bruke tekst-skyggeegenskapen. For dette formålet må du spesifisere lengden på den horisontale så vel som den vertikale dimensjonen til skyggen i tekst-skygge-egenskapen. I tillegg til å bare legge til en skygge, kan du også legge til farge, en uskarphetseffekt eller en glødeffekt til teksten. Det er også mulig å legge til flere skygger til samme tekst ved hjelp av tekst-skygge-egenskapen. I denne guiden har vi oppsummert forskjellige måter du kan legge til en skyggeeffekt til teksten.