Typografi er favorittleken til webdesignere. CSS har et veldig interessant verktøy - tekst-skygge(tekstskygge), som ved første øyekast virker ganske enkel, men med dens hjelp kan du lage minneverdige effekter hvis du bruker oppfinnsomhet og fantasi.

Grunnleggende om skygge

Eiendom tekst-skygge veldig enkel å bruke. Den støttes av alle moderne nettlesere og til og med uten bruk av prefikser. Men det er ingen støtte i IE (selv i IE9). Du kan bruke verktøy som Modernizr for å hjelpe til med å trekke ut CSS3-effekter selv på eldre versjoner av IE.

Syntaks

For å lage en tekstskygge, bruk egenskapssyntaksen tekst-skygge som er gitt nedenfor. Det er fire parametere å definere: de to første angir skyggens posisjon, den tredje angir uskarphetnivået, og den fjerde bestemmer fargen på skyggen.

Tekstskygge: horisontal_offset vertical_offset uskarphet farge;

Nedenfor er et eksempel på en tekstskygge som er forskjøvet to piksler ned og fire piksler til høyre, uskarpt med tre piksler og satt til svart ved 30 % opasitet.

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

Resultatet av å bruke denne egenskapen vil se slik ut:

Hvorfor brukes rgba?

Du trenger ikke bruke rgba for å spesifisere skyggefargen når du definerer en egenskap. Imidlertid legger rgba til en annen dimensjon når du definerer en skygge - nivået av gjennomsiktighet.

Denne metoden er mye enklere enn andre metoder for å bestemme farge. Du trenger ikke å fokusere på å bestemme nyansen til skyggefargen, som kanskje bare er litt mørkere eller lysere enn bakgrunnsfargen. Med rgba kan du ganske enkelt bruke hvit eller svart og øke deres opasitet for å oppnå ønsket bakgrunnsfarge når du blander farger.

Bruke eiendom tekst-skygge Du kan lage ulike effekter for tekst, ikke begrenset til enkle skygger. For eksempel, her er koden for å skape en illusjon av deprimert tekst.

Først må du sette tekstfargen litt mørkere enn bakgrunnsfargen. Og da må du bruke eiendommen tekst-skygge med hvit farge og økt gjennomsiktighet.

Bakgrunnsfargen er #222 og tekstfargen er satt til 60 % opasitet. Den hvite skyggen er plassert litt ned og til høyre med et opasitetsnivå på 10 %.

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

Det er ikke nødvendig å uskarpe skyggen i det hele tatt. En klar skygge kan passe godt med et nettsteddesign.

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

Den virkelige moroa begynner når du kaster bort begrensningen med å bare ha én skygge. Ved å bruke komma for å skille definisjoner, kan du bruke så mange skygger du trenger!

Tekst-skygge: shadow1, shadow2, shadow3;

Her er et eksempel på bruk av to skygger. Den første har samme farge som bakgrunnen.

Tekstskygge: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);

Langdistanse nedover

Når du først får taket på å bruke flere skygger, vil resultatene bli mer og mer dramatiske. Det er veldig enkelt å lage en 3D-effekt for tekst.

Eksemplet bruker fire skygger, alle forskjøvet ned i forskjellige avstander og uskarpe.

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,0px 0,0px 0,0px. );

Skift ned et lite stykke og uskarp kraftig

Her er en annen inkarnasjon av den samme ideen. De tre skyggene forskyves en mindre avstand og er mer uskarpe.

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);

3D-tekst av Mark Dotto

Effekten brukes på nettstedet MarkDotto.com. Den bruker 12 forskjellige skygger for å skape en flott 3D-effekt.

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,. 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);

Innrykket tekst av Gordon Hall

Legg merke til i eksemplet ovenfor at jeg kalte teknikken min "rask og skitten" boktrykkseffekt. Det er fordi det er en mye mer involvert måte å lage seriøst innfelt tekst som er mye mer troverdig.

Gordon bruker noe seriøst CSS-voodoo for å få frem ikke bare en ytre skygge, men også en ekte indre skygge. Sjekk ut blogginnlegget hans for en fullstendig forklaring av teknikken.

Bakgrunnsfarge: #666666;

-webkit-bakgrunnsklipp: tekst;

-moz-bakgrunnsklipp: tekst;

bakgrunnsklipp: tekst;

farge: gjennomsiktig;

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);

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);

Konklusjon

Som de fleste CSS-effekter er skygger veldig enkle å implementere. Men en kombinasjon av enkle handlinger kan resultere i fantastiske effekter.

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;)

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 å bruke 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:

Body (
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:

Body (
}
.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:

Body (
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

Body (
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:

Body (
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.

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.

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.

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);

Selv den grønneste designeren vet hvordan man lager skygger i Photoshop. Skygger gir dimensjon til designet og er nå veldig populære. Skygger for tekster, menyelementer og overskrifter er intet unntak. Det er nok å huske utformingen av grensesnitt fra Apple

Det vil være nyttig å ha ferdigheter i å jobbe med tekstskygger i ditt arsenal av teknikker.

Oppgave

Lag en skygge for tekst ved hjelp av CSS, uten å bruke bilder. Hva skal vi oppnå med dette?

• fleksibilitet - ingen bilder kreves, tekst er enkel å endre
• hastighet - færre bilder - mindre sidevekt, færre anrop til serveren
• SEO – tekst er optimalisert bedre enn bilder, og er mer pålitelig enn å bruke teknikken for å erstatte tekst med et bilde

Tekstskygger for vanlige nettlesere

Vanlige nettlesere inkluderer alle moderne nettlesere som holder seg mer eller mindre i takt med W3C-anbefalingene. I dette tilfellet forstår disse nettleserne CSS3 text-shadow-egenskapen, som ble anbefalt tilbake i 2003.

Så her er en liste over nettlesere som støtter tekst-skygge-egenskapen:

• Safari 3.1 (Mac/Win) - støtter, støtter ikke flere skygger
• Safari 4 (Mac/Win) - fullt støttet
• Opera 9.5+ (Mac/Win/Lin) - støtter fullt ut
• Firefox 3.1/3.5 (Mac/Win/Lin) - støtter fullt ut
• Google Chrome 2 (Win) - støtter fullt ut
• Shiira (Mac) - støtter, støtter ikke flere skygger
• Konqueror (Lin/Mac/Win) - støtter fullt ut
• iCab (Mac) - støtter, støtter ikke flere skygger
• Safari på iPhone - støttes, flere skygger støttes ikke
• Nokia Symbian-Smartphones (Series 60) - støtter
• Opera Mini 4.1 - støtter, støtter ikke skyggesløring

For disse nettleserne er én linje med CSS nok til å skygge tekst:

H1 (tekstskygge: 0px 1px 3px #000; )

Vi får denne fancy overskriften:

Du kan oppnå en rekke interessante effekter med tekst-skygge.

Uskarp tekst

H1 ( farge: #fff; bakgrunn: #666; tekstskygge: 0px 0px 3px #fff; )

Duplisert tekst

H1 (tekstskygge: 0px 20px #000; )

Flere skygger lar deg oppnå flere effekter:

Innfelt tekst

H1 ( bakgrunn: #ccc; farge: #ccc; text-shadow: -1px -1px #666, 1px 1px #FFF; font-family: serif; )

Hevet tekst

H1 ( bakgrunn: #999; farge: #999; tekstskygge: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF; font-family: serif; )

(IE vil ikke tillate deg å nyte skjønnheten her, fordi den ikke støtter tekst-skygge). Du kan komme opp med mange forskjellige effekter ved å bruke tekst-skygge, den eneste praktiske begrensningen er fantasien din.

Nå om det triste - hva skal jeg gjøre med alles "favoritt" IE?

Tekstskygger i IE

Selv om IE opp til versjon 8 ikke forstår tekst-skygge, har den nok av sine egne "bjeller og fløyter". Spesielt er det et dropShadow()-filter for å lage skygger. For at skygger skal vises, må elementet ha et layoutsett. Du kan installere på flere måter:

• ved å angi elementegenskapene: blokk + høyde() eller bredde())
• gir elementet: absolutt
• ved å spesifisere: venstre/høyre
• innstilling av zoom: 1

H1 (filter:progid:DXImageTransform.Microsoft.DropShadow(color="#666666",offX=2,offY=2,positive="true"); zoom: 1; )

Det så ut til at man kunne rope «Hurra!!!» og nyt livet, men se hvordan dette filteret fungerer i virkeligheten:

Slik vil teksten se ut hvis du bruker dropShadow-filteret på den

For de som ikke forstår, her er ulempene med dette filteret:

• skyggen ser forferdelig ut: kantete, ingen jevn overgang til bakgrunnen med gjennomskinnelig
• skriftstilen er forvrengt
• skyggen er praktisk talt umulig å justere (du kan bare kontrollere posisjonen til skyggen) - dette kan delvis omgås ved å bruke skyggefilteret i stedet for dropShadow, men de kritiske to første ulempene gjenstår
• den obligatoriske tilstedeværelsen av en layout begrenser utvikleren noe

Dette resultatet er ikke akseptabelt i reelle prosjekter. Det er uklart hvem og hvordan som overtok slikt arbeid fra utviklerne.

Kilian Valkhof foreslo å bruke skyggeemulering:

1. ikke bruk filteret direkte på teksten
2. bruk en kombinasjon av glød- og uskarphetfiltre i stedet for dropShadow og shadow

Dette vil unngå tekstforvrengning og gjøre skyggen mer fleksibel.

TestoverskriftТестовый заголовок

H1 ( tekst-skygge: 3px 3px 3px #cccccc; posisjon: relativ; zoom: 1; farge: #000; ) h1 span (posisjon: absolutt; venstre: -3px; topp: -3px; z-indeks: -1; filter: progid:DXImageTransform.Microsoft.Glow(Color=#cccccc,Strength=1) progid:DXImageTransform.Microsoft.blur(pixelradius=3, enabled="true" ; zoom: 1;

Men selv med denne tilnærmingen er det fortsatt en rekke ulemper:

• ikke-semantisk kode er et ekstra element, og selv med duplisering av tekst vil det ikke ha den beste effekten på den logiske strukturen til innholdet og SEO-optimalisering. Dette problemet kan løses ved hjelp av javascript, som vil sette inn et ekstra element for IE når siden lastes inn
• samsvarer ikke med visningen i andre nettlesere (som forstår tekst-skygge) - filtre lar deg emulere en skygge med minimale innstillinger. Det er ikke alltid mulig å oppnå skyggelikhet med andre nettlesere
• mindre fleksibilitet - filtre vil ikke gi alle mulighetene for tekst-skygge, for eksempel vil det ikke være mulig å implementere flere skygger

For å lage skygger for IE kan du bruke javascript (ikke første gang javascript har reddet dagen)

Tekstskygger ved hjelp av javascript

Fra skriptene jeg testet, valgte jeg "Drop Shadow" jquery-plugin. Dens fordeler:

• emulerer skygger ved å sette inn flere beholdere, dvs. uten å bruke filtre for IE. Dette gjør det mulig å gjøre skygger i IE så lik andre nettlesere som mulig + ingen grunn til å bekymre deg for layout for IE
• skaper skygger ikke bare for IE, noe som noen ganger kan være nyttig
• skriptet er lett - 4Kb (hvis du fjerner kommentarer fra koden), og hvis du bruker komprimering, blir det enda mindre. Det er krav til å skrive et skript - tilstedeværelsen av jquery.dimensions.js-skriptet, men jeg forstår fortsatt ikke hvorfor det er nødvendig. Skygger er opprettet, slettet, definert av id og uten den.
• enkel og oversiktlig å bruke
• Du kan emulere flere skygger med en viss suksess

Feil:

• du kan ikke initialisere et skript etter element-id
• hvis elementet får en bakgrunn, vil skyggen ikke lages for teksten, men for elementet som helhet
• Obligatorisk inkludering av jquery-biblioteket (som er mer enn 50Kb). Men populariteten til jquery eliminerer praktisk talt denne ulempen
• I følge skriptbeskrivelsen kreves det også tilkobling av jquery.dimensions.js (ytterligere 2Kb). Men jeg forstår ikke hvorfor dette biblioteket er nødvendig, alt ser ut til å fungere bra uten det

Bruke Drop Shadow-plugin

Syntaks:

JQuery(selektor).dropShadow(alternativer); // lage en skygge på elementet jQuery(selector).redrawShadow(); // omtegning av skyggen jQuery(selektor).fjernShadow(); // fjerning av skyggen jQuery(selektor).shadowId(); // returnerer ID-en til elementets skygge

Venstre: [heltall] (standard = 4) topp: [heltall] (standard = 4) uskarphet: [heltall] (standard = 2) opasitet: [brøktall] (standard = 0,5) farge: [streng] (standard = " svart") swap: [boolsk] (standard = usann)

De venstre og øverste parameterne er koordinatene til begynnelsen av skyggen i forhold til øvre venstre hjørne av etiketten (eller objektet). Positive verdier flytter skyggen til høyre og ned, negative verdier flytter skyggen til venstre og opp.