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 bulkede 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; 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 outline-egenskapen 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 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;)

En annen måte å dekorere en nettside på er å lage tekst med skygge i CSS. Med riktig bruk av denne stilen kan du fremheve en overskrift, et avsnitt eller en del av teksten. Du kan justere skyggefarge, offset og uskarphet.

Du kan angi en tekstskygge i CSS ved å bruke egenskapen text-shadow, som støttes av alle nettlesere unntatt Internet Explorer versjon 9 og tidligere. Det er også problemer med Opera Mini - denne nettleseren støtter bare delvis eiendommen. Nedenfor er et eksempel på skrivestil og egenskapsverdier:

H1 (tekstskygge: 3px 5px 6px #6C9; )

Som du kan se, spesifiserte vi så mange som fire verdier atskilt med et mellomrom. La oss gå gjennom det i rekkefølge:

• 3px – den første verdien er ansvarlig for forskyvningen av skyggen langs X-aksen (høyre, venstre). En positiv verdi flytter skyggen til høyre, og en negativ verdi flytter skyggen til venstre.
• 5px – den andre verdien er ansvarlig for forskyvningen av skyggen langs Y-aksen (ned, opp). En positiv verdi flytter skyggen ned, og en negativ verdi flytter skyggen opp.
• 6px – den tredje verdien er ansvarlig for skyggesløringsradiusen. Denne parameteren er valgfri. Som standard er uskarphet 0 piksler, noe som gjør skyggen klar og uskarp.
• #6c9 – den fjerde verdien er ansvarlig for fargen på skyggen. Denne parameteren er valgfri. Som standard er skyggefargen satt til samme farge som teksten som stilen er brukt på.

Slik ser skyggen ut i nettleseren (skjermbilde):

Skjermbilde: tekst med skygge, CSS

Flere CSS-skygger for tekst

Det er også mulig å bruke flere grupper med verdier for tekst-skygge-egenskapen. Dette betyr at du kan angi flere skygger for én tekst. For å gjøre dette må du skrive grupper med verdier atskilt med komma.

H1 (tekstskygge: 3px 5px 6px #6C9, -6px -7px 6px #D9FFA7; )

Resultatet av å bruke denne stilen er synlig på skjermbildet:

Skjermbilde: Flere skygger for CSS-tekst

Du kan lage noen virkelig vakre ting med CSS text-shadow-egenskapen. Du kan eksperimentere: angi et stort antall forskjellige skygger, angi fargen ikke bare i heksadesimal, men også i RGBA-format, ved å bruke alfakanalen for å justere gjennomsiktighet. Dette er hva som kan skje hvis du tar nok hensyn til denne egenskapen:

Skjermbilde: 3D-tekstskygge i CSS

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 forskyvningsverdien (4 piksler).

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

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; mange bøker har blitt skrevet om dette emnet og mange eksemplarer har blitt ødelagt i tvister. I dag vil jeg ikke gi råd om typografi generelt - jeg har ikke nok kvalifikasjoner, men hvordan du utformer 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 transparensverdien, 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); )

Driftsprinsippet 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, jo flere skygger som brukes, desto mer realistisk er effekten; ta hensyn til dette 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.

Glans 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

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;
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,.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), 10px 10px rgb(131, 179, 60), 11px 11px rgb(131, 179, 60), 12px 12px rgb(131, 179, 60), 13px 13px 1b 01p, 13px 1b 1b 14px rgb (131, 179, 60), 15px 15px rgb(131, 179, 60), 16px 16px rgb(131, 179, 60), 17px 17px rgb(131, 179, 179, 81x, 7px, 7px 60 ), 19px 19px rgb(131, 179, 60), 20px 20px rgb(131, 179, 60), 21px 21px rgb(131, 179, 60), 22px 22px 22px 32x 31px, 0b px 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.