Oversiktsvirkning til tekst - CSS

Cascading Style Sheet er et enkelt designspråk som gjør prosessen med å lage websider presentabel og tiltalende. I tillegg gjør det at vi kan legge til flere stiler i teksten, for eksempel farge, skygge og andre elementer. Å legge til en disposisjonseffekt er en av dem. Brukere endrer skriftstørrelse, dekorasjon og skriftvekt ved å bruke flere stylingegenskaper.

Dette innlegget vil beskrive:

• Hvordan legge til oversiktsvirkning til tekst ved å bruke "tekstslag”Eiendom?
• Hvordan legge til oversiktsvirkning til tekst ved å bruke "Tekstskygge”Eiendom?

Hvordan legge til oversiktlig effekt til tekst ved hjelp av "tekstslag" -egenskaper?

“tekstslag”Eiendom kan brukes til å legge til en oversiktlig effekt til teksten. Noen av typene av "tekstslag" -egenskaper er nevnt nedenfor:

• “-Webkit-tekst-slag”Eiendom gir et slag på teksten. Det kan spesifiseres som en korthåndsegenskap ved å sette bredde og fargeverdier.
• “-Webkit-tekst-slag-bredde”Bestemmer bredden på hjerneslaget.
• “-Webkit-tekst-taktsfarge”Bruker fargen på hjerneslaget.
• “-Webkit-Text-Fill-Color”Legger til farge i teksten.

Egenskapen for tekst slag må oppgis med "Webkit-”Prefiks. Det støttes bare av webkit-baserte nettlesere, for eksempel “Opera”,“Safari”,“Krom”, Og“Android”. Alternativt "Tekstskygge”Eiendom er kompatibel med nesten alle nettlesere.

For en bedre forståelse, sjekk ut eksemplene som er nevnt nedenfor.

Eksempel 1

Opprett en HTML -fil ved å følge instruksjonene:

• Først, legg til en "”Element og tilordne det“innhold”Klasse.
• Inne i dette "", legg til "

  ”Element med ID”tekst”For å spesifisere noen tekst til dokumentet. Dette “tekst”ID vil bli brukt med CSS -egenskaper for å legge til en disposisjonseffekt:

CSS- Oversiktsvirkning til tekst

Gå nå over til CSS -delen for å bruke omrissekrefter på teksten.

Stil "innhold" -klasse

.innhold
Bredde: 500px;
Margin: Auto;

“.innhold”Brukes for å få tilgang til“”Element som har klasse“innhold”. Følgende egenskaper brukes på det:

• “bredde”Eiendom setter elementets bredde.
• “margin”Angir plassen rundt elementet.

Stil “P” -element

Få tilgang til “p”Element av ID”tekst”Og bruk følgende egenskaper:

#Text
Farge: Hvit;
-Webkit-tekst-Stroke: 1px White;
Tekstskygge: 0px 1px 4px #46256d;
Font-størrelse: 45px;

Her:

• “farge”Angir elementets fontfarge.
• “skriftstørrelse”Eiendom setter elementets skriftstørrelse.
• “-Webkit-tekst-slag”Eiendom brukes til å anvende omrisseteffekten på teksten.

Produksjon

Eksempel 2

#Text
Farge: Hvit;
Font-størrelse: 42px;
-Webkit-tekst-slag-bredde: 1px;
-Webkit-text-Stroke-Color: Purple;

I det andre eksemplet har vi satt tekstoversikten bredde og farge ved å spesifisere “-Webkit-tekst-slag-bredde”Og“-Webkit-tekst-taktsfarge" egenskaper.

Produksjon

Eksempel 3

#Text
Font-family: Cursive;
Farge: Hvit;
Font-størrelse: 35px;
-Webkit-tekst-slag-bredde: 2px;
-Webkit-Text-Stroke-Color: Black;

I dette eksemplet "Font-familie”Eiendom spesifiserer stilen til elementets tekst.

Produksjon

Hvordan legge til oversiktlig effekt til tekst ved hjelp av "tekst-skygge" -egenskaper?

CSS “Tekstskygge”Eiendom brukes til å legge til en skyggeeffekt til tekst og støttes av alle nettlesere.

Her er den grafiske representasjonen av å legge til flere skygger til tekst:

Eksempel 1

#Text
Farge: Hvit;
Font-størrelse: 40px;
Tekstskygge: -1px 1px 2px #253f11, 1px 1px 2px #253f11, 1px -1px 0 #253f11,
-1px -1px 0 #253f11;

Beskrivelsen av de ekstra egenskapene er illustrert ovenfor.

Produksjon

Eksempel 2

#Text
Farge: Hvit;
Font-størrelse: 48px;
-Webkit-Text-Stroke: 1PX #F0ECEC;
Tekstskygge: 0px 1px 5px RGB (0, 0, 175);

I den ovennevnte koden har vi brukt begge “Tekstskygge”Og“-Webkit-tekst-slag”CSS -egenskaper.

Produksjon

Vi har gitt forskjellige eksempler for å anvende konturffekten på teksten.

Konklusjon

For å legge til en disposisjonseffekt til teksten, CSS “tekstslag”Eiendom kan brukes. Denne eiendommen inkluderer "Tekstslagbredde”,“Tekstslagsfarge”, Og“tekst-fyllingsfarge”. En annen egenskap for å legge til oversiktlige effekter til tekst i CSS er "Tekstskygge”. Denne bloggen har forklart hvordan du kan legge til en oversiktlig effekt til tekst med flere eksempler.