Afsnitsskyggestil lige ned farve grå. Eksempler på brug af CSS-tekstskygge
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; border: 1px solid #000; border-right: 1px solid #353535; border-bottom: 1px solid #353535; -webkit-border-radius: 5px; -moz-border-radius: 5px; 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 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; 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;)
En anden måde at dekorere en webside på er at lave tekst med skygge i CSS. Med korrekt brug af denne stil kan du med succes fremhæve en overskrift, et afsnit eller en del af teksten. Du kan justere skyggefarven, offset og sløring.
Du kan indstille en tekstskygge i CSS ved hjælp af egenskaben text-shadow, som understøttes af alle browsere undtagen Internet Explorer version 9 og tidligere. Der er også problemer med Opera Mini - denne browser understøtter kun delvist ejendommen. Nedenfor er et eksempel på skrivestil og egenskabsværdier:
H1 (tekstskygge: 3px 5px 6px #6C9; )
Som du kan se, specificerede vi så mange som fire værdier adskilt af et mellemrum. Lad os gennemgå det i rækkefølge:
- 3px – den første værdi er ansvarlig for forskydningen af skyggen langs X-aksen (højre, venstre). En positiv værdi flytter skyggen til højre, og en negativ værdi flytter skyggen til venstre.
- 5px – den anden værdi er ansvarlig for forskydningen af skyggen langs Y-aksen (ned, op). En positiv værdi flytter skyggen ned, og en negativ værdi flytter skyggen op.
- 6px – den tredje værdi er ansvarlig for skyggesløringsradius. Denne parameter er valgfri. Som standard er sløringen 0 pixels, hvilket gør skyggen klar og usløret.
- #6c9 – den fjerde værdi er ansvarlig for farven på skyggen. Denne parameter er valgfri. Som standard er skyggefarven indstillet til samme farve som den tekst, som stilen er anvendt på.
Sådan ser skyggen ud i browseren (skærmbillede):
Skærmbillede: tekst med skygge, CSS Flere CSS-skygger til tekst
Det er også muligt at bruge flere grupper af værdier til egenskaben text-shadow. Det betyder, at du kan indstille flere skygger for én tekst. For at gøre dette skal du skrive grupper af værdier adskilt af kommaer.
H1 (tekstskygge: 3px 5px 6px #6C9, -6px -7px 6px #D9FFA7; )
Resultatet af at anvende denne stil er synligt på skærmbilledet:
Skærmbillede: Flere skygger til CSS-tekst Du kan skabe nogle virkelig smukke ting med CSS text-shadow-egenskaben. Du kan eksperimentere: Indstil et stort antal forskellige skygger, indstil farven ikke kun i hexadecimal, men også i RGBA-format, ved hjælp af alfakanalen til at justere gennemsigtigheden. Dette er, hvad der kan ske, hvis du er tilstrækkelig opmærksom på denne ejendom:
Skærmbillede: 3D-tekstskygge i CSS 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. y offset Den lodrette forskydning af skyggen i forhold til teksten. Det er også acceptabelt at bruge en negativ værdi, som hæver skyggen højere end teksten. 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
Ville citrus leve i krattene i syd? Ja, men en falsk kopi!
Resultatet af eksemplet er vist i fig. 1.
Ris. 1. Skyggevisning i Safari-browseren
Browsere
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 den følgende konstruktion farven på skyggen (#666666), dens retning (45° fra lodret) og offsetværdien (4 pixels).
filter: Shadow(Farve=#666666, Retning=45, Styrke=4);
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; mange bøger er blevet skrevet om dette emne, og mange kopier er blevet ødelagt i tvister. I dag vil jeg ikke give råd om typografi generelt - jeg har ikke nok kvalifikationer, men hvordan man designer teksten på din hjemmeside 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, desto mere realistisk er effekten; tag dette 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. Imponerende realisme.
Indrykket tekst af Gordon Hall
baggrundsfarve: #666666; -webkit-baggrund-klip:tekst; -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 tekst-skygge. 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);
Også her er alt enkelt - vi flytter ikke skyggen, vi slører den stærkere og gør den hvid. Det er hele glansen.
Retro stil
text-shadow: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;
Jeg talte ovenfor om retrostilen, dette er fra den samme opera. Det er så moderigtigt nu, flere klare skygger. Brug efter eget skøn
Flere lyskilder
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
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 hjælp af CSS skygger Dette problem kan let løses ved at bruge egenskaben text-shadow til at forbedre tekstens læsbarhed og kontrast.
I de givne 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;
- 4px - X offset ( vandret);
- 3px - Y-akse offset ( lodret);
- 2px - sløringsværdi;
- #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-baggrund-klip: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;
tekst-skygge: 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 1b, 01px 13p, 13px 1b, 01px 14px rgb (131, 179, 60), 15px 15px rgb(131, 179, 60), 16px 16px rgb(131, 179, 60), 17px 17px rgb(131, 179, 81x, 7px, 179, 81x, 7p 60 ), 19px 19px rgb(131, 179, 60), 20px 20px rgb(131, 179, 60), 21px 21px rgb(131, 179, 60), 22px 22px 22px 1b1x 0b, 31px px 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.