Har du noen gang hatt en ubehagelig følelse når bildetekstene dine ikke stemte overens med fargene på knapper, paneler eller rett og slett teksten i dårlig kontrast til bakgrunnen på siden? Ved bruk av CSS-skygger Dette problemet kan enkelt løses ved å bruke egenskapen text-shadow for å forbedre tekstens lesbarhet og kontrast.

I eksemplene som er gitt bruker vi tekstskygger i ulike situasjoner, som vil gi deg det nødvendige grunnlaget slik at du kan studere denne problemstillingen videre på egenhånd.

1. Grunnleggende oppsett

Opprett en ny HTML-fil og legg til følgende kode til den HTML Og CSS:

Legg til en tag i HTML-delen

med tekstklassen:

Nettkode-nerder

For dette elementet vil vi legge til en CSS-tekstskygge. Jeg setter innledende egenskaper for dette elementet slik at det ser bra ut på skjermen:

La oss nå sette tekst-skygge-attributtet til teksten. Men først, la oss finne ut hvilke verdier dette attributtet har:

Tekstskygge: 4px 4px 4px #ccc;

1. 4px - X offset ( horisontal);
2. 3px - Y-akseforskyvning ( vertikal);
3. 2px - uskarphet verdi;
4. #ccc - farge.

Dette er satt som følger:

Tekst-skygge: horisontal-offset vertikal-offset uskarphet farge;

de color kan representeres med heksadesimal kode #ccc eller RGBA (0,0,0,0.3); . I CSS kan vi bruke en indre CSS-skygge på teksten vår slik:

.tekst(
skriftstørrelse: 5em; /* gjør teksten større */
tekst-skygge: 4px 3px 2px #ccc;
}

Nettleserrepresentasjonen av denne skyggelagte teksten vil se slik ut:

EKSEMPEL nettsted

Deretter vil vi endre bakgrunnsfargen til kroppselementet på forskjellige måter. Vi gjør dette fordi noen CSS-skygger krever en spesifikk bakgrunn, ellers vil de ikke bli merkbare. For å få teksten til å se vakrere ut, setter vi den med store bokstaver.

2. Avtrykkseffekt

Sett tekstfargen til en litt mørkere nyanse enn bakgrunnen. Påfør deretter en liten hvit tekstskygge med redusert opasitet:

Kropp (
bakgrunn: #222;
}
.tekst(
skriftstørrelse: 5em;
farge: rgba(0,0,0,0,6); /* tekstfarge */
tekstskygge: 2px 2px 3px rgba(255,255,255,0.1); /* legger til en skygge */
}

Ved å bruke RGBA-koden kan du angi opasiteten til fargen. Legg merke til at tekstfargen har en opasitet på 60 % (0,6) og div CSS-skyggene har en opasitet på 10 % (0,1).

EKSEMPEL nettsted

3. Retro skyggeeffekt

Retroskygger trenger ikke alltid å være uskarpe. Ta denne retroskyggen for eksempel:

Kropp (
}
.tekst(
skriftstørrelse: 5em;
farge: hvit; /* endre tekstfargen til hvit */
tekstskygge: 6px 6px 0px rgba(0,0,0,0.2); /* legger til retroskygge */
}

EKSEMPEL nettsted

4. Dobbel skyggeeffekt

Interessant nok kan du legge til mer enn én CSS-skriftskygge. Dette kan gjøres slik: text-shadow: shadow1, shadow2, shadow3; La oss legge til to skygger, en med bakgrunnsfargen og den andre litt mørkere:

Tekst (
skriftstørrelse: 5em;
text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15); /* gir to skygger */
}

Bakgrunnen vår er hvit, så vi trenger ikke en annen farge for den. I nettleseren vil effekten se slik ut:

EKSEMPEL nettsted

5. Ekstern skyggeeffekt

Denne effekten er basert på funksjonen til å definere flere vakre CSS-skygger. Nedenfor kan du se effekten med fire skygger kastet nedover med varierende grad av intensitet:

Kropp (
bakgrunn: #fff3cd; /* endre bakgrunnsfargen */
}
.tekst(
skriftstørrelse: 5em;
farge: hvit;
tekstskygge: 0px 3px 0px #b2a98f,
0px 14px 10px rgba(0,0,0,0.15),
0px 24px 2px rgba(0,0,0,0.1),
0px 34px 30px rgba(0,0,0,0.1);
}

EKSEMPEL nettsted

6. 3D-effekt av Mark Dotto

Kropp (
bakgrunn: #3495c0; /* endre bakgrunnsfargen */
}
.tekst(
skriftstørrelse: 5em;
farge: hvit;
tekstskygge: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}

Se nå hvordan disse indre CSS-tekstskyggene ser ut i nettleseren:

EKSEMPEL nettsted

7. Realistisk Gordon Hall Cut Text Effect

Gordon bruker litt avansert CSS-magi for å gi ikke bare en ytre skygge, men også en realistisk indre skygge:

Kropp (
bakgrunn: #cbcbcb; /* endre bakgrunnsfargen */
}
.tekst(
skriftstørrelse: 5em;
farge: gjennomsiktig;
bakgrunnsfarge: #666666;
-webkit-bakgrunnsklipp: tekst;
-moz-bakgrunnsklipp: tekst;
bakgrunnsklipp: tekst;
tekstskygge: rgba(255,255,255,0.5) 0px 3px 3px;
}

Og dette skaper effekten av kuttet tekst.

EKSEMPEL nettsted

8. Tekstglødeeffekt

kropp (
bakgrunn: #992d23; /* endre bakgrunnsfargen */
}
.tekst(
skriftstørrelse: 5em;
farge: hvit;
tekstskygge: 0px 0px 6px rgba(255,255,255,0.7);
}

Denne skyggen skaper en glødende effekt for teksten:

EKSEMPEL nettsted

9. Hevet teksteffekt

kropp (
bakgrunn: #629552; /* endre bakgrunnsfargen */
}
.tekst(
skriftstørrelse: 5em;
farge: rgba(0,0,0,0,6);
tekstskygge: 2px 8px 6px rgba(0,0,0,0.2),
0px -5px 35px rgba(255,255,255,0.3);
}

EKSEMPEL nettsted

10. Lang skyggeeffekt

Denne effekten kan gjøres ved hjelp av

Bakgrunnsfarge: rgb(147, 201, 67);
tekst-skygge: 1px 1px rgb(131, 179, 60), 2px 2px rgb(131, 179, 60), 3px 3px rgb(131, 179, 60), 4px 4px 3 1,x 1px 1,6px 9 rgb(5, 5 px 1,60) rgb(131, 179, 60), 6px 6px rgb(131, 179, 60), 7px 7px rgb(131, 179, 60), 8px 8px rgb(131, 179, x 60), 71px 60); 4px rgb (131, 179, 60), 15px 15px rgb(131, 179, 60), 16px 16px rgb(131, 179, 60), 17px 17px rgb(131, 179, 179, 179, 1, 9, 1, 9 60 ) x rgb( 131; 179 60) ;
farge: #eaeaea;

EKSEMPEL nettsted

Konklusjon

Som du kan se, er tekst-skygge-egenskapen veldig enkel å bruke, og du kan bruke den til å lage dine egne kreative CSS-skygger.

Typografi er favorittleken min når det kommer til webdesign. Selvfølgelig, med dens hjelp kan du tiltrekke en persons oppmerksomhet ved bare å endre stilen eller størrelsen på skriften. Veldig enkelt og veldig effektivt har blitt skrevet mange bøker om dette emnet, og mange eksemplarer har blitt brutt i tvister. I dag vil jeg ikke gi råd om typografi generelt - jeg har ikke nok kvalifikasjoner, men hvordan du kan designe teksten til nettstedet ditt er alltid velkommen. Så i dag skal jeg vise deg noen måter å bruke CSS3-egenskapen på. tekst-skygge, veldig enkelt, men i de riktige hendene kan det gjøre underverker.

Grunnleggende tekst-skygge-syntaks

Denne eiendommen CSS3 Fungerer i alle nyeste nettlesere, uten leverandørprefikser som -moz og -webkit. Selv IE kan læres å forstå denne egenskapen du må bruke Modernizr eller analoger.

Tekst-skygge: x-offset y-offset uskarphet farge;

Det er all den grunnleggende syntaksen. Den første verdien er den horisontale forskyvningen, den andre er den vertikale forskyvningen, skyggeuskarphet og skyggefarge. La oss se på et eksempel:

Tekstskygge: 2px 4px 3px rgba(0,0,0,0.3);

Vi flyttet skyggen, gjorde den uskarp med 3 piksler og tildelte fargen svart med en gjennomsiktighet på 30 %. Hvorfor bruker jeg alfakanal eller transparens? Dette gir deg mer frihet i handlingene dine, du kan gjøre det litt lysere eller mørkere ved å endre gjennomsiktighetsverdien, uten å måtte bekymre deg for å velge en farge. Det viser seg ganske raskt, jeg anbefaler det.

Deprimerte bokstaver

body ( bakgrunn: #222; ) #tekst h1 ( farge: rgba(0,0,0,0.6); tekstskygge: 2px 2px 3px rgba(255,255,255,0.1); )

Operasjonsprinsippet her er dette: bakgrunnen er litt lysere enn bokstavene, en lys skygge med en liten gjennomsiktighet. Resultatet er på bildet, prøv det.

Hard skygge

tekstskygge: 6px 6px 0px rgba(0,0,0,0.2);

I dag er retrostil på moten, og der bruker de skygge uten uskarphet. Vel, vi er klare for dette

Dobbel skygge

text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);

Og her brukes en annen kinkig funksjon ved eiendommen tekst-skygge, kan velgere vises atskilt med komma, og dermed skape så mange skygger som nødvendig. Den første skyggen kan tildeles en farge som ligner på bakgrunnen, da blir effekten som på bildet.

Ned og bort

tekstskygge: 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0,0,0,0.15), 0px 24px 2px rgba(0,0,0,0.1), 0px 34px 0,00, 0px 34px 0,00. );

Teksten er omfangsrik og ser ut til å henge over bakgrunnen, ikke sant? Her bruker vi 4 skygger med ulike nivåer av uskarphet og plassering. Generelt sett er det slik at jo flere skygger som brukes, desto mer realistisk blir effekten tatt i betraktning i prosjektene dine.

Liten 3D-tekst

tekstskygge: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);

I likhet med forrige eksempel, tre skygger, men plassert nærmere, derav effekten av tredimensjonalitet og tekstens vekt.

3D-tekst av Mark Dotto

tekstskygge: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(1), 0,0,. 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0 ,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);

Jeg kom over denne designerens arbeid på nettet og kunne ikke la det gå fra meg. Imponerende realisme.

Innrykket tekst av Gordon Hall

bakgrunnsfarge: #666666; -webkit-bakgrunnsklipp: tekst; -moz-bakgrunnsklipp: tekst; bakgrunnsklipp: tekst; farge: gjennomsiktig; tekstskygge: rgba(255,255,255,0.5) 0px 3px 3px;

Nok et eksempel på imponerende arbeid med eiendommen tekst-skygge. Men prinsippet er det samme som jeg sa ovenfor. Litt lysere bakgrunn, lys skygge under bokstavene og mørk over. Laget enkelt, men veldig kult.

Shine tekst

tekstskygge: 0px 0px 6px rgba(255,255,255,0.7);

Også her er alt enkelt - vi flytter ikke skyggen, vi slører den sterkere og gjør den hvit. Det er all glansen.

Retro stil

text-shadow: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;

Jeg snakket ovenfor om retrostilen, dette er fra samme opera. Det er så fasjonabelt nå, flere klare skygger. Bruk etter eget skjønn

Flere lyskilder

tekstskygge: 0px 15px 5px rgba(0,0,0,0.1), 10px 20px 5px rgba(0,0,0,0.05), -10px 20px 5px rgba(0,0,0,0.05);

Her er effekten av flere lyskilder som gir skygger i alle retninger.

Hevet tekst

farge: rgba(0,0,0,0,6); tekstskygge: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);

Den deprimerte teksten var der allerede, men nå er den hevet. En ganske enkel effekt, men den ser veldig fin ut i for eksempel overskrifter. Bruk det, prøv det

Avslutningsvis vil jeg si - CSS3 tekst-skygge-egenskap veldig enkelt, som du allerede kan se. Men riktig bruk, og med litt fantasi, kan gjøre underverker.
Eksperimenter, ha en fin dag

Beskrivelse

Legger til en skygge til teksten, og setter også dens parametere: skyggefarge, forskyvning i forhold til inskripsjonen og uskarphet. Text-shadow-egenskapen kan fungere sammen med :first-letter og :first-line pseudo-elementene.

Syntaks

tekst-skygge: ingen | shadow [,shadow]*
hvor er skyggen:
<сдвиг по x> <сдвиг по y> <радиус размытия> <цвет>

Verdier

Ingen Avbryter å legge til en skygge. farge Fargen på skyggen i et hvilket som helst tilgjengelig CSS-format. Som standard samsvarer skyggefargen med tekstfargen. Valgfri parameter. x-shift Den horisontale forskyvningen av skyggen i forhold til teksten. En positiv verdi av denne parameteren flytter skyggen til høyre, en negativ verdi flytter den til venstre. Nødvendig parameter. y offset Den vertikale forskyvningen av skyggen i forhold til teksten. Det er også akseptabelt å bruke en negativ verdi, som hever skyggen høyere enn teksten. Nødvendig parameter. radius Angir radiusen for skyggesløringen. Jo høyere denne verdien, jo mer jevnes skyggen ut, og blir bredere og lysere. Hvis dette alternativet ikke er spesifisert, er standard satt til 0. Vær oppmerksom på at antialiasing-algoritmen vanligvis er forskjellig mellom nettlesere, så utseendet til skyggen kan variere litt avhengig av antialiasing-innstillingene du angir.

Du kan spesifisere flere skyggeparametere, og skille dem med et komma. CSS3 tar hensyn til følgende rekkefølge: den første skyggen i listen er plassert helt øverst, den siste i listen er plassert helt nederst. I CSS2 er rekkefølgen omvendt: den første skyggen er plassert helt nederst, og den siste helt øverst.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Ville sitrus leve i krattene i sør? Ja, men en falsk kopi!

Resultatet av eksemplet er vist i fig. 1.

Ris. 1. Skyggevisning i nettleseren Safari

Nettlesere

Opera støtter maksimalt 6–9 skyggealternativer. Å øke denne verdien, samt å øke uskarphedsradiusen over 100 piksler, påvirker nettleserens ytelse. Opera-versjoner 9.5–10 bruker multi-shadow-skjerm som ligner på CSS2.

Safari før versjon 4.0 støtter bare ett skyggealternativ, resten ignoreres. Siden versjon 4.0 fungerer mange skygger allerede.

Internet Explorer forstår bare tekst-skygge-egenskapen siden versjon 10.0. I stedet brukes filteregenskapen: Shadow(parameters) . For eksempel spesifiserer følgende konstruksjon fargen på skyggen (#666666), dens retning (45° fra vertikal) og forskyvningsmengden (4 piksler).

filter: Shadow(Farge=#666666, Retning=45, Styrke=4);

Modulen inneholder CSS-funksjoner relatert til tekststil, for eksempel understreking, tekstskygger og østasiatiske tekstaksenter.

Egenskaper for tekststil

1. Linjedesign: understreking, strek og gjennomstreking

Understrekinger, streker og utstrekningslinjer vises bare for ikke-erstattede linjenivåblokker (visning: inline) og vises gjennom all tekst, inkludert mellomrom mellom tegn og ord, bortsett fra innrykk på begynnelsen og slutten av en linje.

Nettlesere kan bryte understreken og streken der linjen skjærer glyfen, og vises et stykke på hver side av glyfens omriss. Når nettleseren bryter understreken eller streken ved glyphgrenser, må formen på linjen på den grensen samsvare med formen på glyfen. Spesifikasjonen foreskriver imidlertid ikke en spesifikk metode for å "følge formen" til en glyph, og overlater dette til nettleseren.

Ris. 1. Bryte understreken

1.1. Dekorasjonslinjetype: tekst-dekorasjonslinje-egenskap

Nettleserstøtte

DVS: —
Kant: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -webkit-
Opera: 44
iOS Safari: 8 -webkit-
UC-nettleser for Android: 11.8
Chrome for Android: 73
Samsung Internett: 7.2

Tekst-dekorasjonslinje-egenskapen bestemmer hvilken type linje, om noen, som legges til elementet.

Eiendommen går ikke i arv.

Syntaks

Tekst-dekorasjonslinje: ingen; tekst-dekorasjonslinje: understreking; tekst-dekorasjonslinje: overlinje; tekst-dekorasjon-linje: linje-gjennom; tekst-dekorasjonslinje: blink; tekst-dekorasjonslinje: understreking overlinje; tekst-dekorasjon-linje: overline understreking linje-gjennom; tekst-dekorasjonslinje: arve; tekst-dekorasjonslinje: initial;

1.2. Dekorasjonslinjestil: tekst-dekorasjons-stil eiendom

Nettleserstøtte

DVS: —
Kant: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -webkit-
Opera: 44
iOS Safari: 8 -webkit-
UC-nettleser for Android: 11.8
Chrome for Android: 73
Samsung Internett: 7.2

Tekst-dekorasjonsstil-egenskapen spesifiserer stilen til linjene som er tegnet for å dekorere teksten som er spesifisert i elementet. Verdiene har samme betydning som for eiendommen i grensestil.

Eiendommen går ikke i arv.

Syntaks

Tekst-dekor-stil: solid; tekst-dekor-stil: dobbel; tekst-dekor-stil: prikkete; tekst-dekor-stil: stiplet; tekst-dekor-stil: bølget; tekst-dekor-stil: arve; tekst-dekorasjonsstil: initial;

1.3. Dekorasjonslinjefarge: tekst-dekorasjon-farge-egenskap

Nettleserstøtte

DVS: —
Kant: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -webkit-
Opera: 44
iOS Safari: 8 -webkit-
UC-nettleser for Android: 11.8
Chrome for Android: 73
Samsung Internett: 7.2

Egenskapen text-decoration-color spesifiserer fargesettet for tekstdecoration-linje for et element med tekst-decoration-line .

Eiendommen går ikke i arv.

Syntaks

Tekst-dekorasjon-farge: currentColor; tekst-dekorasjon-farge: laks; tekst-dekorasjonsfarge: #00ff00; tekst-dekorasjon-farge: rgba(255, 128, 128, 0,5); tekst-dekorasjon-farge: gjennomsiktig; tekst-dekorasjon-farge: arve; tekst-dekorasjon-farge: initial;

1.4. En rask oppsummering av dekorasjonslinjeegenskaper: tekstdekorasjonsegenskapen

Nettleserstøtte

DVS: —
Kant: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -webkit-
Opera: 44
iOS Safari: 8 -webkit-
UC-nettleser for Android: 11.8
Chrome for Android: 73
Samsung Internett: 7.2

Egenskapen tekst-dekorasjon er en kort form for å skrive egenskapene for tekst-dekorasjon-linje tekst-dekorasjon-stil tekst-dekorasjon-farge i en enkelt erklæring. Manglende verdier er satt til startverdiene. Standardverdi tekst-dekorasjon: ingen solid gjeldendeFarge; . Eiendommen går ikke i arv. Stilen på alle tekstlinjer må imidlertid være den samme for ett element.

1.5. Plassering av designlinjen: tekst-understrek-posisjon egenskap

Nettleserstøtte

DVS: —
Kant: 12
Firefox: —
Chrome: 71
Safari: —
Opera: —
iOS Safari: —
UC-nettleser for Android: ?
Chrome for Android: 71
Samsung Internett: —

Egenskapen text-underline-position angir posisjonen til understrekingen spesifisert i elementet.

Eiendommen går i arv.

Verdier:
auto	Nettleseren kan bruke hvilken som helst algoritme for å bestemme posisjonen til understrekingen, men linjen må plasseres på eller under grunnlinjen til teksten. Standardverdi.
under	Understrekingen er plassert under elementets tekstinnhold. I dette tilfellet skjærer understrekningen vanligvis ikke nedstigningen. Denne verdien kan kombineres med venstre eller høyre hvis en bestemt side er foretrukket i vertikale typografiske moduser.
venstre	I vertikale typografimoduser er understrekingen justert til venstre kant av teksten. Denne verdien tolkes imidlertid som under .
Ikke sant	I vertikale typografimoduser er understrekingen justert til høyre kant av teksten. Denne verdien tolkes imidlertid som under .
arve
første

Syntaks

Tekst-understreking-posisjon: auto; tekst-understrek-posisjon: under; tekst-understreking-posisjon: venstre; tekst-understreking-posisjon: høyre; tekst-understrek-posisjon: under venstre; tekst-understrek-posisjon: under høyre; tekst-understreking-posisjon: arve; tekst-understreking-posisjon: initial; Ris. 2. Understrek tekst på begge sider i vertikal typografimodus med venstre og høyre verdier

2. Text shadow: tekst-skygge egenskap

Nettleserstøtte

DVS: 10
Kant: 12
Firefox: 3.5
Chrome: 4
Safari: 4
Opera: 10
iOS Safari: 3.2
UC-nettleser for Android: 11.8
Chrome for Android: 73
Samsung Internett: 4

Egenskapen text-shadow brukes til å legge til en skygge til tekst. Tekstskygge er et interessant verktøy som lar deg lage fantastiske effekter. Skygger kan være enkelt- eller flerlags, uskarpe, fargede eller gjennomskinnelige. Når du spesifiserer en skygge for et element, kan du spesifisere kun én lengde og farge, og dermed lage en farget kopi av et enkelt tegn eller ord. Bruk av en skygge kan også gjøre teksten mer lesbar hvis kontrasten mellom fargen på teksten og bakgrunnen er lav.

Hver skygge påføres både på selve teksten og på dens designelementer (tekst-dekorasjonsegenskap). Du kan spesifisere flere skygger samtidig, spesifisere dem atskilt med komma. Skyggene overlapper hverandre, men overlapper ikke selve teksten. Den første skyggen er alltid plassert på toppen av de andre skyggene. Eiendommen går i arv.

Hver skygge er definert av to eller tre lengder og en valgfri farge. Tillatte lengder er 0 .

Eiendommen går ikke i arv.

Ris. 3. Syntaks for tekst-skygge-egenskap

tekst-skygge
Verdier:
x-offset	Stiller inn den horisontale forskyvningen av skyggen. En positiv verdi tegner en skyggeforskyvning til høyre for teksten, en negativ lengde trekker en skygge til venstre.
y-forskyvning	Angir den vertikale forskyvningen av skyggen. En positiv verdi flytter skyggen ned, en negativ verdi flytter skyggen opp.
uklarhet	Stiller inn uskarphet. Negative verdier er ikke tillatt. Hvis uskarphetverdien er null, er kanten av skyggen skarp. Ellers, jo høyere verdien er, desto mer uskarp er kanten av skyggen.
farge	Setter skygger. Hvis det ikke er noen farge, tas fargen som brukes fra fargeegenskapen.
ingen	Standardverdien betyr ingen tekstskygge. Fjerner skyggen av et element fra en gruppe elementer med den angitte egenskapen.
første	Setter egenskapsverdien til standardverdien.
arve	Arver egenskapsverdien fra det overordnede elementet.

I motsetning til box-shadow klippes ikke tekstskygger og kan vises hvis teksten er delvis gjennomsiktig. I likhet med box-shadow påvirker ikke tekstskygger oppsettet og forårsaker ikke det rullbare området til å rulle eller øke i størrelse.

Syntaks

Tekstskygge: 2px 2px 4px rosa; tekst-skygge: #fc0 1px 0 10px; tekst-skygge: 5px 5px #4D4644; tekst-skygge: blå 2px 5px; tekst-skygge: 5px 10px; tekst-skygge: arve; tekst-skygge: initial;

2.1. Eksempler på tekstskygge

Plakatskygge

Tekstskygge

Tekstskygge-1 ( bakgrunn: #77F7DE; farge: hvit; tekstskygge: -2px -2px 0 #4D4644, 2px -2px 0 #4D4644, -2px 2px 0 #4D4644, 2px 2px 0 #4D404 hvit, 5px 5px 0 hvit, 6px 6px 0 hvit bokstavavstand: 0,1em )

3D-skygge

Tekstskygge

Text-shadow-2 ( bakgrunn: linear-gradient(-45deg, #FEE864, #F5965E); farge: #f4f4f4; text-shadow: -1px -1px hvit, 1px 1px grå, 2px 2px #7a7a7a, 3px 575px , 4px 4px #707070, 5px 5px #6b6b6b, 6px 6px #666666, 7px 7px #616161, 8px 8px #5c5c5c, 9px 9px # 57575 # 57575 1px #4d4d4d, 18px 18px 30px rgba(0, 0, 0, .4), 18px 18px 10px rgba(0, 0, 0, .4 )

Skyggetekst

Tekstskygge

Text-shadow-3 ( bakgrunn: #FFE6DB; farge: #FFE6DB; bokstavavstand: .1em; tekst-skygge: 3px 0 rgba(250, 111, 142, .5), 6px 0 rgba(250, 111, 142 , .4), 9px 0 rgba(250, 111, 142, .3), 12px 0 rgba(250, 111, 142, .2), 15px 0 rgba(250, 111, 142, .1);

Retro skygge

Tekstskygge

Text-shadow-4 ( farge: #FB631E; bokstavavstand: .1em; tekst-skygge: 4px 4px hvit, 6px 6px #D7CC88; )

Lagdelt skygge

Tekstskygge

Text-shadow-5 ( bakgrunn: #f1f1f1; farge: #fcc105; bokstavavstand: .1em; text-shadow: 4px 4px #ff981d, 7px 7px rgba(200, 120, 22, .2); )

Denne opplæringen introduserer flere CSS-teknikker for å lage forskjellige effekter for omrisset av elementer.

En enkel lys skyggeeffekt kan oppnås ved å bruke grått på streken. CSS3 har muligheten til å lage en ekte skygge ved å bruke egenskapen boks-skygge, men den enkle måten vil fungere i alle nettlesere:

Shadow ( padding: 20px; kantlinje: 1px solid #f0f0f0; border-bottom: 2px solid #ccc; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; )

Den deprimerte blokkeffekten er også veldig enkel å oppnå. Å legge til CSS3 avrundede hjørner forbedrer effekten:

Trykket ( farge: #fff; polstring: 20px; bakgrunn: #111; kantlinje: 1px solid #000; kantlinje-høyre: 1px solid #353535; border-bottom: 1px solid #353535; -webkit-border-radius: 5px; -moz-border-radius: 5px;

Denne effekten er veldig lik et dobbeltslag, som ofte brukes til bilder. Innrykk- og strekinnstillingene brukes, noe som resulterer i en dobbel kanteffekt. Ytterligere arbeid med innstillingene og bruken av konturegenskapen lar deg oppnå effekten av skråkanter.

Img.light ( outline: 1px solid #ddd; border-top: 1px solid #fff; polstring: 10px; background: #f0f0f0; ) img.dark ( outline: 1px solid #111; border-top: 1px solid #555; polstring: 10px bakgrunn: #333;

Denne effekten kan brukes i menyer eller lister. Det er en enkel kombinasjon av topp- og bunnstrekene med forskjellige nyanser av bakgrunnsfargen. En ting å huske på er at CSS første- og siste-barn-velgerne ikke støttes av eldre nettlesere. For å komme rundt denne ubehagelige situasjonen kan du bruke jQuery.

#indented ul( margin: 20px 0; padding: 0; list-style: none; ) #indented ul li (border-top: 1px solid #333; border-bottom: 1px solid #111; ) #indented ul li:first -barn (border-top: none;) #indented ul li:last-child (border-bottom: none;) #indented ul li a (polstring: 10px; display: blokk; farge: #fff; tekstdekorering: ingen ; ) #indented ul li a:hover (bakgrunn: #111;)