Har du nogensinde haft en ubehagelig følelse, når dine billedtekster ikke matchede farverne på knapper, paneler eller blot teksten stod i dårlig kontrast til sidens baggrund? Ved at bruge CSS skygger Dette problem kan let løses ved at bruge egenskaben text-shadow til at forbedre tekstens læsbarhed og kontrast.

I de angivne eksempler bruger vi tekstskygger i forskellige situationer, som giver dig det nødvendige grundlag, så du på egen hånd kan studere denne problemstilling yderligere.

1. Grundlæggende opsætning

Opret en ny HTML-fil og tilføje følgende kode til det HTML Og CSS:

Tilføj et tag i HTML-sektionen

med tekstklassen:

Webkode-nørder

Til dette element vil vi tilføje en CSS-tekstskygge. Jeg indstillede startegenskaber for dette element, så det ser pænt ud på skærmen:

Lad os nu indstille tekst-skygge-attributten til teksten. Men lad os først finde ud af, hvilke værdier denne egenskab har:

Tekstskygge: 4px 4px 4px #ccc;

1. 4px - X offset ( vandret);
2. 3px - Y-akse offset ( lodret);
3. 2px - sløringsværdi;
4. #ccc - farve.

Dette er indstillet som følger:

Tekst-skygge: vandret-offset lodret-offset sløring farve;

de farve kan repræsenteres med hexadecimal kode #ccc eller RGBA (0,0,0,0.3); . I CSS kan vi anvende en indre CSS-skygge på vores tekst som denne:

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

Browserrepræsentationen af ​​denne skyggede tekst ville se sådan ud:

EKSEMPEL hjemmeside

Dernæst vil vi ændre baggrundsfarven på kropselementet på forskellige måder. Vi gør dette, fordi nogle CSS-skygger kræver en specifik baggrund, ellers vil de ikke være mærkbare. For at få teksten til at se smukkere ud, vil vi sætte den med store bogstaver.

2. Aftrykseffekt

Indstil tekstfarven til en lidt mørkere nuance end baggrunden. Påfør derefter en lille hvid tekstskygge med reduceret opacitet:

Krop (
baggrund: #222;
}
.tekst(
skriftstørrelse: 5em;
farve: rgba(0,0,0,0,6); /* tekstfarve */
tekst-skygge: 2px 2px 3px rgba(255,255,255,0.1); /* tilføjer en skygge */
}

Ved hjælp af RGBA-koden kan du indstille farvens opacitet. Bemærk, at tekstfarven har en opacitet på 60 % (0,6) og div CSS-skyggerne har en opacitet på 10 % (0,1).

EKSEMPEL hjemmeside

3. Retro skyggeeffekt

Retro skygger behøver ikke altid at være slørede. Tag denne retro skygge for eksempel:

Krop (
}
.tekst(
skriftstørrelse: 5em;
farve: hvid; /* ændre tekstfarven til hvid */
tekst-skygge: 6px 6px 0px rgba(0,0,0,0.2); /* tilføjer retro skygge */
}

EKSEMPEL hjemmeside

4. Dobbelt skyggeeffekt

Interessant nok kan du tilføje mere end én CSS-skrifttypeskygge. Dette kan gøres sådan: tekst-skygge: skygge1, skygge2, skygge3; Lad os tilføje to skygger, en med baggrundsfarven og den anden lidt mørkere:

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

Vores baggrund er hvid, så vi behøver ikke en anden farve til den. I browseren ser effekten således ud:

EKSEMPEL hjemmeside

5. Fjernskyggeeffekt

Denne effekt er baseret på funktionen til at definere flere smukke CSS-skygger. Nedenfor kan du se effekten med fire skygger kastet nedad i varierende grad af intensitet:

Krop (
baggrund: #fff3cd; /* ændre baggrundsfarven */
}
.tekst(
skriftstørrelse: 5em;
farve: hvid;
tekst-skygge: 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 hjemmeside

6. 3D-effekt af Mark Dotto

Krop (
baggrund: #3495c0; /* ændre baggrundsfarven */
}
.tekst(
skriftstørrelse: 5em;
farve: hvid;
tekst-skygge: 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 nu, hvordan disse indre CSS-tekstskygger ser ud i browseren:

EKSEMPEL hjemmeside

7. Realistisk Gordon Hall Cut Text Effect

Gordon bruger noget avanceret CSS-magi til at give ikke kun en ydre skygge, men også en realistisk indre skygge:

Krop (
baggrund: #cbcbcb; /* ændre baggrundsfarven */
}
.tekst(
skriftstørrelse: 5em;
farve: gennemsigtig;
baggrundsfarve: #666666;
-webkit-baggrundsklip: tekst;
-moz-baggrundsklip: tekst;
baggrundsklip: tekst;
tekst-skygge: rgba(255,255,255,0.5) 0px 3px 3px;
}

Og dette skaber effekten af ​​klippet tekst.

EKSEMPEL hjemmeside

8. Tekstglødeffekt

krop (
baggrund: #992d23; /* ændre baggrundsfarven */
}
.tekst(
skriftstørrelse: 5em;
farve: hvid;
text-shadow: 0px 0px 6px rgba(255,255,255,0.7);
}

Denne skygge skaber en glødende effekt for teksten:

EKSEMPEL hjemmeside

9. Forhøjet teksteffekt

krop (
baggrund: #629552; /* ændre baggrundsfarven */
}
.tekst(
skriftstørrelse: 5em;
farve: rgba(0,0,0,0,6);
tekst-skygge: 2px 8px 6px rgba(0,0,0,0.2),
0px -5px 35px rgba(255.255.255,0.3);
}

EKSEMPEL hjemmeside

10. Lang skyggeeffekt

Denne effekt kan udføres ved hjælp af

Baggrundsfarve: 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 31,6px 9, 5 px 1, 5 px 5, 5 px 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), 10px 10px rgb(131, 179, 60), 11px 11px rgb(131, 179, 60), 12px 12px rgb(131, 179, 60), 13px 13px 1b, 1b 4px rgb (131, 179, 60), 15px 15px rgb(131, 179, 60), 16px 16px rgb(131, 179, 60), 17px 17px rgb(131, 179, 8px, 8p 60 ), 19px 19px rgb(131, 179, 60), 20px 20px rgb(131, 179, 60), 21px 21px rgb(131, 179, 60), 22px 22px 22px 0b x rgb( 131; 179 60) ;
farve: #eaeaea;

EKSEMPEL hjemmeside

Konklusion

Som du kan se, er egenskaben text-shadow meget nem at bruge, og du kan bruge den til at skabe dine egne kreative CSS-skygger.

Typografi er mit yndlingslegetøj, når det kommer til webdesign. Selvfølgelig kan du med dens hjælp tiltrække en persons opmærksomhed ved blot at ændre skrifttypens stil eller størrelse lidt. Meget enkel og meget effektiv er skrevet mange bøger om dette emne, og mange eksemplarer er blevet brudt i tvister. I dag vil jeg ikke give råd om typografi generelt - jeg har ikke nok kvalifikationer, men hvordan man formaterer teksten på dit websted er altid velkommen. Så i dag vil jeg vise dig et par måder at bruge CSS3-egenskaben på. tekst-skygge, meget simpelt, men i de rigtige hænder kan det gøre underværker.

Grundlæggende tekst-skygge syntaks

Denne ejendom CSS3 Virker i alle nyeste browsere uden leverandørpræfikser som -moz og -webkit. Selv IE kan læres at forstå denne egenskab, du skal bruge Modernizr eller analoger.

Tekst-skygge: x-offset y-offset sløringsfarve;

Det er hele den grundlæggende syntaks. Den første værdi er den vandrette offset, den anden er den lodrette offset, skyggesløring og skyggefarve. Lad os se på et eksempel:

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

Vi flyttede skyggen, slørede den med 3 pixels og tildelte farven sort med en gennemsigtighed på 30 %. Hvorfor bruger jeg alfakanal eller gennemsigtighed? Dette giver dig mere frihed i dine handlinger, du kan gøre det lidt lysere eller mørkere blot ved at ændre gennemsigtighedsværdien, uden at skulle bekymre dig om at vælge en farve. Det viser sig ret hurtigt, jeg anbefaler det.

Deprimerede bogstaver

body (baggrund: #222; ) #tekst h1 (farve: rgba(0,0,0,0.6); text-shadow: 2px 2px 3px rgba(255,255,255,0.1); )

Funktionsprincippet her er dette: baggrunden er lidt lysere end bogstaverne, en lys skygge med en lille gennemsigtighed. Resultatet er på billedet, prøv det.

Hård skygge

tekst-skygge: 6px 6px 0px rgba(0,0,0,0.2);

I dag er retro stil på mode, og der bruger de skygge uden sløring. Nå, vi er klar til det her

Dobbelt skygge

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

Og her bruges endnu et tricky træk ved ejendommen tekst-skygge, kan vælgere opstilles adskilt af kommaer og dermed skabe så mange skygger, som det er nødvendigt. Den første skygge kan tildeles en farve svarende til baggrunden, så bliver effekten som på billedet.

Ned og væk

text-shadow: 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,0b. );

Teksten er omfangsrig og ser ud til at hænge over baggrunden, ikke? Her bruger vi 4 skygger med forskellige niveauer af sløring og placering. Generelt gælder det, at jo flere skygger der bruges, jo mere realistisk er effekten med i dine projekter.

Lille 3D tekst

tekst-skygge: 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 lighed med det foregående eksempel, tre skygger, men placeret tættere på, derfor effekten af ​​tredimensionalitet og tekstens vægt.

3D-tekst af Mark Dotto

text-shadow: 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,. 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 stødte på denne designers arbejde online og kunne ikke lade være med det. Imponerende realisme.

Indrykket tekst af Gordon Hall

baggrundsfarve: #666666;

-webkit-baggrundsklip: tekst; tekst-skygge-moz-baggrundsklip: tekst;

baggrundsklip: tekst;

farve: gennemsigtig;

tekst-skygge: rgba(255,255,255,0.5) 0px 3px 3px;

Endnu et eksempel på imponerende arbejde med ejendommen

. Men princippet er det samme som jeg sagde ovenfor. Lidt lysere baggrund, lys skygge under bogstaverne og mørk over. Lavet enkelt, men meget cool.

Shine tekst

tekst-skygge: 0px 0px 6px rgba(255,255,255,0.7);

tekst-skygge: 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 af ​​flere lyskilder, der giver skygger i alle retninger.

Hævet tekst

farve: rgba(0,0,0,0,6); tekst-skygge: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);

Den deprimerede tekst var der allerede, men nu er den rejst. En ret simpel effekt, men den ser f.eks meget flot ud i overskrifter. Brug det, prøv det

Afslutningsvis vil jeg sige - CSS3 tekst-skygge egenskab meget enkelt, som du allerede kan se. Men dens korrekte brug, og med lidt fantasi, kan gøre underværker.
Eksperimenter, hav en god dag

Beskrivelse

Tilføjer en skygge til teksten og indstiller også dens parametre: skyggefarve, offset i forhold til inskriptionen og sløringsradius. Egenskaben text-shadow kan fungere sammen med pseudoelementerne :første bogstav og :første linje.

Syntaks

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

Værdier

Ingen Annullerer tilføjelse af en skygge.

farve Farven på skyggen i ethvert tilgængeligt CSS-format. Som standard svarer skyggefarven til tekstfarven. Valgfri parameter.

x-shift Den vandrette forskydning af skyggen i forhold til teksten. En positiv værdi af denne parameter flytter skyggen til højre, en negativ værdi flytter den til venstre. Påkrævet parameter.

radius Indstiller radius for skyggesløringen. Jo højere denne værdi er, jo mere udjævnes skyggen og bliver bredere og lysere. Hvis denne mulighed ikke er angivet, er standarden sat til 0. Bemærk venligst, at antialiasing-algoritmen typisk adskiller sig mellem browsere, så skyggens udseende kan variere lidt afhængigt af de antialiasing-indstillinger, du angiver.

Du kan angive flere skyggeparametre og adskille dem med et komma. CSS3 tager højde for følgende rækkefølge: den første skygge på listen er placeret helt øverst, den sidste på listen er placeret helt nederst. I CSS2 er rækkefølgen omvendt: den første skygge er placeret helt nederst og den sidste helt øverst.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

tekst-skygge

Opera understøtter maksimalt 6-9 skyggeindstillinger. Forøgelse af denne værdi samt forøgelse af sløringsradius over 100px påvirker browserens ydeevne. Opera-versioner 9.5-10 bruger multi-shadow display svarende til CSS2.

Safari før version 4.0 understøtter kun én skyggemulighed, resten ignoreres. Siden version 4.0 arbejder mange skygger allerede.

Internet Explorer forstår kun egenskaben text-shadow siden version 10.0. I stedet bruges filteregenskaben: Shadow(parameters) . For eksempel angiver følgende konstruktion farven på skyggen (#666666), dens retning (45° fra lodret) og forskydningsmængden (4 pixels).

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

Modulet indeholder CSS-funktioner relateret til tekststil, såsom understregning, tekstskygger og østasiatiske tekstaccenter.

Egenskaber for tekststil

1. Linjedesign: understregning, streg og gennemstregning

Understregninger, streger og overstregningslinjer vises kun for ikke-erstattede blokke på linjeniveau (visning: inline) og vises i hele teksten, inklusive mellemrum mellem tegn og ord, undtagen indrykning i begyndelsen og slutningen af ​​en linje.

Browsere kan bryde understregningen og streg, hvor linjen skærer glyfen, og vises et stykke på hver side af glyfens omrids. Når browseren bryder understregningen eller stregen ved glyfgrænser, skal formen af ​​linjen på den grænse matche formen på glyfen. Specifikationen foreskriver dog ikke en specifik metode til at "følge formen" af en glyf, hvilket overlader dette til browseren.

Ris. 1. Bryde understregningen

1.1. Dekorationslinjetype: tekst-decoration-line egenskab

Browser support

IE: —
Kant: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -webkit-
Opera: 44
iOS Safari: 8 -webkit-
UC Browser til Android: 11.8
Chrome til Android: 73
Samsung internet: 7.2

Egenskaben text-decoration-line bestemmer hvilken type linje, hvis nogen, der føjes til elementet.

Ejendommen er ikke arvet.

Syntaks

Tekst-dekorationslinje: ingen; tekst-dekoration-linje: understregning; tekst-decoration-line: overline; tekst-decoration-line: line-through; tekst-dekoration-linje: blink; tekst-decoration-line: understregning overline; tekst-decoration-line: overline understregning line-through; tekst-dekoration-linje: arve; tekst-dekoration-linje: initial;

1.2. Dekorationslinjestil: egenskab i tekst-dekorationsstil

Browser support

IE: —
Kant: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -webkit-
Opera: 44
iOS Safari: 8 -webkit-
UC Browser til Android: 11.8
Chrome til Android: 73
Samsung internet: 7.2

Egenskaben text-decoration-style specificerer stilen på linjer tegnet for at dekorere den tekst, der er angivet i elementet. Værdierne har samme betydning som for egenskaben i grænsestil.

Ejendommen er ikke arvet.

Syntaks

Tekst-dekorations-stil: solid; tekst-dekoration-stil: dobbelt; tekst-dekoration-stil: prikket; tekst-dekoration-stil: stiplet; tekst-dekoration-stil: bølget; tekst-dekoration-stil: arve; tekst-dekorations-stil: initial;

1.3. Dekorationslinjefarve: tekst-dekoration-farve egenskab

Browser support

IE: —
Kant: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -webkit-
Opera: 44
iOS Safari: 8 -webkit-
UC Browser til Android: 11.8
Chrome til Android: 73
Samsung internet: 7.2

Egenskaben text-decoration-color specificerer tekstdekorationslinjefarvesættet for et element med tekst-decoration-line .

Ejendommen er ikke arvet.

Syntaks

Tekst-dekorations-farve: nuværende Farve; tekst-dekoration-farve: laks; tekst-dekoration-farve: #00ff00; tekst-dekoration-farve: rgba(255, 128, 128, 0,5); tekst-dekoration-farve: gennemsigtig; tekst-dekoration-farve: arve; tekst-dekoration-farve: initial;

1.4. En hurtig oversigt over egenskaber for dekorationslinje: egenskaben tekst-dekoration

Browser support

IE: —
Kant: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -webkit-
Opera: 44
iOS Safari: 8 -webkit-
UC Browser til Android: 11.8
Chrome til Android: 73
Samsung internet: 7.2

Egenskaben tekst-dekoration er en kort form for at skrive egenskaberne for tekst-dekoration-linje tekst-dekoration-stil tekst-dekoration-farve i en enkelt erklæring. Manglende værdier er indstillet til deres begyndelsesværdier. Standardværdi tekst-dekoration: ingen fast nuværendeFarve; . Ejendommen er ikke arvet. Stilen på alle tekstlinjer skal dog være den samme for ét element.

1.5. Designlinjens placering: egenskaben tekst-understregning-position

Browser support

IE: —
Kant: 12
Firefox: —
Chrome: 71
Safari: —
Opera: —
iOS Safari: —
UC Browser til Android: ?
Chrome til Android: 71
Samsung internet: —

Egenskaben text-underline-position angiver placeringen af ​​den understregning, der er angivet i elementet.

Ejendommen går i arv.

Værdier:
auto	Browseren kan bruge enhver algoritme til at bestemme positionen af ​​understregningen, dog skal linjen placeres på eller under tekstens grundlinje. Standardværdi.
under	Understregningen er placeret under elementets tekstindhold. I dette tilfælde skærer understregningen normalt ikke nedstigningen. Denne værdi kan kombineres med venstre eller højre, hvis en bestemt side foretrækkes i lodrette typografiske tilstande.
venstre	I lodrette typografitilstande er understregningen justeret til venstre kant af teksten. Denne værdi fortolkes dog som under .
højre	I lodrette typografitilstande er understregningen justeret til højre kant af teksten. Denne værdi fortolkes dog som under .
arve
initial

Syntaks

Tekst-understreget-position: auto; tekst-understreget-position: under; tekst-understreget-position: venstre; tekst-understreget-position: højre; tekst-understreget-position: under venstre; tekst-understreget-position: under højre; tekst-understreget-position: arve; tekst-understreget-position: initial; Ris. 2. Understreg tekst på begge sider i lodrette typografitilstande med venstre og højre værdier

2. Text shadow: tekst-skygge egenskab

Browser support

IE: 10
Kant: 12
Firefox: 3.5
Chrome: 4
Safari: 4
Opera: 10
iOS Safari: 3.2
UC Browser til Android: 11.8
Chrome til Android: 73
Samsung internet: 4

Egenskaben text-shadow bruges til at tilføje en skygge til tekst. Tekstskygge er et interessant værktøj, der giver dig mulighed for at skabe fantastiske effekter. Skygger kan være enkelt- eller flerlags, slørede, farvede eller gennemskinnelige. Når du angiver en skygge for et element, kan du kun angive én længde og farve, og derved skabe en farvet kopi af et enkelt tegn eller ord. Brug af en skygge kan også gøre teksten mere læsbar, hvis kontrasten mellem tekstens farve og baggrunden er lav.

Hver skygge påføres både på selve teksten og på dens designelementer (tekst-dekorationsegenskab). Du kan angive flere skygger på samme tid ved at angive dem adskilt af kommaer. Skyggerne overlapper hinanden, men overlapper ikke selve teksten. Den første skygge er altid placeret oven på de andre skygger. Ejendommen går i arv.

Hver skygge er defineret af to eller tre længder og en valgfri farve. Tilladte længder er 0 .

Ejendommen er ikke arvet.

Ris. 3. Tekst-skygge egenskabssyntaks

tekst-skygge
Værdier:
x-offset	Indstiller den vandrette forskydning af skyggen. En positiv værdi tegner en skyggeforskydning til højre for teksten, en negativ længde tegner en skygge til venstre.
y-forskydning	Indstiller den lodrette forskydning af skyggen. En positiv værdi flytter skyggen ned, en negativ værdi flytter skyggen op.
sløring	Indstiller sløringsradius. Negative værdier er ikke tilladt. Hvis sløringsværdien er nul, er kanten af ​​skyggen skarp. Ellers, jo højere værdien er, desto mere sløret er skyggens kant.
farve	Sætter skygger. Hvis der ikke er nogen farve, tages den anvendte farve fra farveegenskaben.
ingen	Standardværdien betyder ingen tekstskygge. Fjerner skyggen af ​​et element fra en gruppe af elementer med den angivne egenskab.
initial	Indstiller egenskabsværdien til standardværdien.
arve	Arver egenskabsværdien fra det overordnede element.

I modsætning til box-shadow klippes tekstskygger ikke og kan forekomme, hvis teksten er delvist gennemsigtig. Ligesom box-shadow påvirker tekstskygger ikke layoutet og får ikke det rulbare område til at rulle eller øges i størrelse.

Syntaks

Tekst-skygge: 2px 2px 4px pink; 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

Plakat skygge

Tekstskygge

Tekst-skygge-1 ( baggrund: #77F7DE; farve: hvid; tekst-skygge: -2px -2px 0 #4D4644, 2px -2px 0 #4D4644, -2px 2px 0 #4D4644, 2px 2px 0 #4D404 hvid, 5px 5px 0 hvid, 6px 6px 0 hvid bogstavafstand: 0,1em )

3D skygge

Tekstskygge

Text-shadow-2 (baggrund: linear-gradient(-45deg, #FEE864, #F5965E); farve: #f4f4f4; text-shadow: -1px -1px hvid, 1px 1px grå, 2px 2px #7a7a7a, 3px 75px , 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 )

Skygge-tekst

Tekstskygge

Text-shadow-3 ( baggrund: #FFE6DB; farve: #FFE6DB; bogstavmellemrum: .1em; text-shadow: 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 ( farve: #FB631E; bogstavmellemrum: .1em; text-shadow: 4px 4px hvid, 6px 6px #D7CC88; )

Lagdelt skygge

Tekstskygge

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

Denne vejledning introducerer flere CSS-teknikker til at skabe forskellige effekter til omridset af elementer.

En simpel lys skyggeeffekt kan opnås ved at bruge grå på stregen. CSS3 har evnen til at skabe en ægte skygge ved hjælp af egenskaben kasse-skygge, men den enkle måde vil fungere i alle browsere:

Shadow (polstring: 20px; kant: 1px fast #f0f0f0; kant-bund: 2px fast #ccc; -webkit-border-radius: 5px; -moz-border-radius: 5px; kant-radius: 5px;)

Den bulede blokeffekt er også meget nem at opnå. Tilføjelse af CSS3 afrundede hjørner forbedrer effekten:

Trykt ( farve: #fff; polstring: 20px; baggrund: #111; kant: 1px fast #000; kant-højre: 1px fast #353535; kant-bund: 1px fast #353535; -webkit-border-radius: 5px; -moz-border-radius: 5px;

Denne effekt minder meget om et dobbelt streg, som ofte bruges til billeder. Indryknings- og stregindstillingerne bruges, hvilket resulterer i en dobbelt kanteffekt. Yderligere arbejde med indstillingerne og brugen af ​​konturegenskaben giver dig mulighed for at opnå effekten af ​​affasede 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 baggrund: #333;

Denne effekt kan bruges i menuer eller lister. Det er en simpel kombination af de øverste og nederste streger med forskellige nuancer af baggrundsfarven. En ting at huske på er, at CSS-første-barn- og sidste-barn-vælgerne ikke understøttes af ældre browsere. For at komme uden om denne ubehagelige situation kan du bruge 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 -child (border-top: none;) #indented ul li:sidste-child (border-bottom: none;) #indented ul li a (polstring: 10px; display: blok; farve: #fff; tekst-dekoration: ingen ; ) #indented ul li a:hover (baggrund: #111;)