Hije imazhi css. Hijet e brendshme në CSS

Me ardhjen e standardit CSS 3 prezantoi vetinë box-shadow, e cila është bërë gjerësisht e përdorur midis zhvilluesve të uebit, pasi e bën të lehtë shtimin e një ose më shumë hijeve në kutinë e një elementi për të dhënë efektin e dëshiruar vizual.

Në artikullin e mëparshëm, ne shikuam pronën e rrezes kufitare, duke përdorur atë, mund të merrni një hije me qoshe të rrumbullakosura. Për analogji me një hije teksti (tekst-hije), ju mund të krijoni hije të shumta, ato aplikohen sipas boshti z para-mbrapa (me hijen e parë të dhënë sipër).

Le të hedhim një vështrim më të afërt në sintaksën e kësaj prone moderne:

Le të shqyrtojmë me radhë vlerat e mundshme të kësaj prone:

Kuptimi	Përshkrim
asnje	Hija nuk shfaqet. Kjo është vlera e paracaktuar.
futur	Vlera opsionale. Nëse kjo vlerë nuk është e specifikuar (e paracaktuar), hija do të jetë në pjesën e jashtme të elementit dhe do të krijojë efektin e elementit që po fryhet. Nëse futja e fjalës kyçe (vlera) është e pranishme, hija do të bjerë brenda elementit dhe do të krijojë një efekt të thyer. Me fjalë të tjera, është një ndryshim nga një hije e jashtme në një hije të brendshme.
h-hije	Vlera e kërkuar. Vendos vendndodhjen e hijes horizontale. Vlerat negative janë të lejuara.
v-hije	Vlera e kërkuar. Vendos vendndodhjen e hijes vertikale. Vlerat negative janë të lejuara.
turbullira-rreze	Vlera opsionale. Vendos rrezen e turbullimit. Sa më e lartë të jetë vlera, aq më e madhe është turbullimi, duke e bërë hijen më të madhe dhe më të lehtë. Nëse vlera nuk është e specifikuar, vlera do të jetë 0 (hije të mprehta - të dallueshme). Vlerat negative nuk lejohen.
përhapje-radius	Vlera opsionale. Madhësia e hijes (rrezja e shtrirjes së hijes). Me vlera pozitive hija do të zgjerohet, dhe me vlera negative do të tkurret. Nëse nuk specifikohet asnjë vlerë, vlera do të jetë 0 (hija korrespondon me madhësinë e elementit).
ngjyrë	Vlera opsionale. Përcakton ngjyrën e hijes (HEX, RGB, RGBA, HSL, HSLA, "Ngjyrat e paracaktuara"). Vlera e paracaktuar është e zezë.

Pikat kryesore që duhet të kuptoni për të krijuar hije për elementët janë:

Unë do të doja të tërhiqja vëmendjen tuaj për faktin se vetia box-shadow aktualisht mbështetet nga të gjithë shfletuesit modernë:

Pronës			Opera		IExplorer	Buzë
kuti-hije	10.0 4.0 -kit në internet-	4.0 3.5 -moz-	10.5	5.1 3.1 -kit në internet-	9.0	12.0

Nëse dëshironi të zgjeroni mbështetjen për disa shfletues, duke përfshirë celularin iOS 3.2 - 4.3 Dhe Android 2.1 - 3, atëherë rekomandohet të përdorni prefikset e prodhuesit dhe të përdorni sintaksën e mëposhtme (në shembujt në artikull, sintaksa do të përdoret vetëm për shfletuesit modernë):

-webkit-box-shadow : vlera ; /* Safari 3.1 - 4, IOS 3.2 - 4.3 dhe Android 2.1 - 3 */-moz-box-shadow : vlera ; /* Firefox 3.5 - 3.6 */ box-shadow : vlera ; /* tabela me siper */

Le të kalojmë në praktikë dhe të fillojmë me një shembull të thjeshtë në të cilin ne u shtojmë një hije elementeve:

Rezultati i shembullit tonë:

Përdorimi i hijeve të shumta

Në shembullin e mëposhtëm, unë propozoj të shqyrtojmë efektin interesant të përzierjes së ngjyrave që mund të arrihet kur përdorni hije të shumta:

• Dy blloqe me gjerësi dhe lartësi fikse (15em dhe 10em), shtuan mbushje në të gjitha anët (2em) dhe vendosini blloqet të jenë në vijë blloku që të mund t'i rreshtoni ato.
• Për së pari bllok me klasë .test ne treguam katër hije me vlera të ndryshme hije horizontale dhe vertikale në mënyrë që elementi të ketë hije të ndryshme në të gjitha anët. Rrezja e turbullimit për të gjitha hijet u vendos në të njëjtën. Ngjyra e secilës hije është e ndryshme dhe specifikohet duke përdorur ngjyra të paracaktuara.
• Për e dyta bllok me klasë .test2 ne treguam katër hije me vlera të ndryshme hije horizontale dhe vertikale. Rrezja e turbullimit për të gjitha hijet u vendos në të njëjtën, ndërsa shtrirja e hijes u vendos në negative, gjë që çoi në një ulje të vetë hijes. Ngjyra e secilës hije është e ndryshme dhe specifikohet duke përdorur sistemin RGBA.

Rezultati i shembullit tonë:

Përdorimi i hijeve për imazhe

Shembulli i fundit i këtij artikulli do të fokusohet në përdorimin e hijeve për imazhe. Unë do të doja të tërhiqja menjëherë vëmendjen tuaj për faktin se ju mund të specifikoni drejtpërdrejt hijen për elementin HTML Nuk do të funksionojë, por ne kemi mundësinë të specifikojmë një imazh si sfond për elementin që na intereson, dhe më pas t'i caktojmë hijen që na nevojitet këtij elementi.

Ne do të shikojmë punën me imazhet e sfondit në detaje në artikullin e librit shkollor "", dhe tani, për t'i dhënë fund studimit të përdorimit të hijeve, do ta prekim atë sipërfaqësisht dhe do ta përdorim imazhin si sfond për një element në vijim. shembull:

• Dy blloqe me gjerësi dhe lartësi fikse (237 px dhe 232 px), shtuan margjina për të gjitha anët (2em) dhe vendosini blloqet të jenë në vijën e bllokut për të mund t'i rreshtoni ato. Ne vendosëm madhësinë e bllokut prej 237 px me 232 px në madhësinë e imazhit, në mënyrë që në këtë fazë të trajnimit të mos kishim nevojë të shkallëzonim imazhin për t'iu përshtatur elementit dhe të ndikonim në ato veti CSS që janë planifikuar të studiohen në një fazë të mëvonshme (në artikullin e librit shkollor " ").
• Për së pari bllok me klasë .test Përcaktuam një vlerë zero për hijen horizontale dhe vertikale, por në të njëjtën kohë specifikuam një rreze turbullimi prej 50 px dhe e zgjeruam atë duke vendosur një rreze shtrirjeje prej 10 px. Ngjyra e hijes u tregua me një ngjyrë të paracaktuar (vjollcë). Përveç kësaj, ne specifikuam fjalën kyçe të futur në deklaratë, e cila bën që hija të bjerë brenda elementit. Me fjalë të tjera, ne kemi krijuar një hije të brendshme të elementit.
• Për e dyta bllok me klasë .test2 Përcaktuam një vlerë zero për hijen horizontale dhe vertikale, por në të njëjtën kohë specifikuam një rreze turbullimi prej 50 px dhe e zgjeruam atë duke vendosur një rreze shtrirjeje prej 10 px. Ngjyra e hijes specifikohet në modalitetin RGBA.

Rezultati i shembullit tonë:

Oriz. 98 Shembull i përdorimit të hijeve për imazhe në CSS (vetia kuti-hije)

Pyetje dhe detyra mbi temën

Përpara se të kaloni në temën tjetër, plotësoni detyrën praktike:

Nëse keni vështirësi në përfundimin e detyrës praktike, gjithmonë mund ta hapni shembullin në një dritare të veçantë dhe të inspektoni faqen për të kuptuar se cili kod CSS është përdorur.

2016-2019 Denis Bolshakov, mund të dërgoni komente dhe sugjerime në lidhje me punën e faqes në [email protected]

Një hije nën një element blloku në një faqe zakonisht përdoret për të krijuar një efekt tredimensional, për të tërhequr vëmendjen te elementi ose si pjesë e një dizajni. Një hije e vogël nën elementë i jep gjithashtu vëllimit dhe thellësisë së faqes.

Për të shtuar një hije, përdorni veçorinë box-shadow, e cila ka gjashtë vlera, vetëm dy prej të cilave kërkohen. Në Fig. Figura 1 tregon vetinë box-shadow me të gjitha vlerat e mundshme, të numëruara për t'i identifikuar ato.

Oriz. 1. Vlerat e vetive kuti-hije

1. fjala kyçe e futur vendos hijen brenda elementit;
2. zhvendosni hijen horizontalisht (5px - djathtas, -5px - majtas);
3. zhvendosje vertikale (5px - poshtë, -5px - lart);
4. rrezja e turbullimit të hijes (0 - hije e mprehtë);
5. shtrirje hije (5px - shtrirje, -5px - tkurrje);
6. ngjyra e hijes.

Është e nevojshme të specifikoni vetëm zhvendosjen horizontale dhe vertikale të gjitha parametrat e tjerë do të merren si parazgjedhje. Në këtë rast, hija do të jetë e mprehtë pa turbullim dhe ngjyrë të zezë.

Duke kombinuar parametra të ndryshëm dhe vlerat e tyre, mund të merrni një shumëllojshmëri të gjerë të llojeve të hijeve. Në tabelë 1 tregon kodin dhe rezultatin në të cilin ai çon.

Tabela 1. Kombinimet e parametrave të hijes

Kodi	Rezultati	Përshkrim
kuti-hije: 5px 5px;		Hije e mprehtë djathtas dhe poshtë.
kuti-hije: -5px -5px;		Hije e mprehtë në të majtë dhe lart.
kuti-hije: 0 0 5px;		Hije e paqartë rreth një elementi.
kuti-hije: 0 0 5px 2px;		Zgjero hijen me 2 piksel.
kuti-hije: 0 0 5px 2px e kuqe;		Shkëlqim i kuq rreth elementit.
kuti-hije: 0,4em 0,4em 5px rgba(122,122,122,0,5);		Hije e tejdukshme.
kuti-hije: inset 0 0 6px;		Hije brenda.

Siç mund të shihet nga tabela, zhvendosja e hijes nuk duhet të specifikohet në piksel, megjithëse kjo është e përshtatshme. Ngjyra e hijes mund të specifikohet në çdo format të disponueshëm, për shembull, për të marrë një hije të tejdukshme, formati RGBA do të duket i mirë në çdo sfond; Shembulli 1 tregon se si ta bëni këtë.

Shembulli 1: Hije në një foto në sfond

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Rezultati i këtij shembulli është paraqitur në Fig. 2. Hija ndjek rrumbullakimin e qosheve të bllokut.

Oriz. 2. Paraqitja e hijes në foton e sfondit

Kur shtoni një hije "të gjerë", kini parasysh se ajo mund të shtrihet përtej kufijve të dukshëm të dritares së shfletuesit dhe kështu të rezultojë në shfaqjen e një shiriti lëvizës horizontal.

Hijet gjithashtu mund t'u shtohen pseudo-elementeve, kjo kërkohet ndonjëherë për paraqitjet komplekse. Në Fig. Figura 3 tregon një bllok kokë me një hije të shtuar në të. Për të shmangur çdo vijë në kryqëzim, duhet të përdorni pseudoelementin ::after dhe t'i shtoni një hije.

Oriz. 3. Blloko me hije

Shembulli 2 tregon krijimin e një blloku të tillë.

Shembulli 2. Blloko me hije

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Një element mund të ketë më shumë se një hije, por disa parametra njëherësh renditen të ndara me presje në vlerën e vetive box-shadow. Shembulli 3 tregon se si të shtoni një hije të dyfishtë në të gjitha imazhet.

Shembulli 2. Blloko me hije

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Rezultati i këtij shembulli është paraqitur në Fig. 4.

Oriz. 4. Image Double Shadow

Hija e parë shfaqet në të majtë të figurës me një rreze turbullimi prej 20 px, madhësia e saj zvogëlohet me parametrin e katërt (-20 px). Parametrat e hijes së dytë tregohen pas pikës dhjetore, hija shfaqet në të djathtë të figurës dhe gjithashtu zvogëlohet për simetri.

Vetia box-shadow CSS shton një ose më shumë hije në një element. Për të specifikuar hije të shumta, duhet të shtoni vlerë(a) shtesë hije, të ndara me presje.

Mbështetja e shfletuesit

Pronës			Opera		IExplorer	Buzë
kuti-hije	10.0 4.0 -kit në internet-	4.0 3.5 -moz-	10.5	5.1 3.1 -kit në internet-	9.0	12.0

Sintaksa CSS:

kuti-hije: "asnjë| futur h-hije v-hije turbullimi-rrezja e përhapjes-rrezja e ngjyrës | fillestare | trashëgoj";

Sintaksa JavaScript:

Object.style.boxShadow = "10px 5px 5px e kuqe"

Vlerat e pasurisë

Kuptimi	Përshkrim
asnje	Hija nuk shfaqet. Kjo është vlera e paracaktuar.
futur	Vlera opsionale. Nëse kjo vlerë nuk është e specifikuar (e paracaktuar), hija do të jetë në pjesën e jashtme të elementit dhe do të krijojë efektin e elementit që po fryhet. Nëse fjala kyçe e futur (vlera) është e pranishme, hija do të bjerë brenda elementit dhe do të krijojë një efekt dhëmbëzimi. Me fjalë të tjera, është një ndryshim nga një hije e jashtme në një hije të brendshme.
h-hije	Vlera e kërkuar. Vendos vendndodhjen e hijes horizontale. Vlerat negative janë të lejuara.
v-hije	Vlera e kërkuar. Vendos vendndodhjen e hijes vertikale. Vlerat negative janë të lejuara.
turbullira-rreze	Vlera opsionale. Vendos rrezen e turbullimit. Sa më e lartë të jetë vlera, aq më e madhe është turbullimi, duke e bërë hijen më të madhe dhe më të lehtë. Nëse vlera nuk është e specifikuar, vlera do të jetë 0 (hije të mprehta - të dallueshme). Vlerat negative nuk lejohen.
përhapje-radius	Vlera opsionale. Madhësia e hijes (rrezja e shtrirjes së hijes). Me vlera pozitive hija do të zgjerohet, dhe me vlera negative do të tkurret. Nëse nuk specifikohet asnjë vlerë, vlera do të jetë 0 (hija korrespondon me madhësinë e elementit).
ngjyrë	Vlera opsionale. Përcakton ngjyrën e hijes (HEX, RGB, RGBA, HSL, HSLA, "Ngjyrat e paracaktuara"). Vlera e paracaktuar është e zezë.
	Vendos vetinë në vlerën e saj të paracaktuar.
	Tregon që vlera është trashëguar nga elementi prind.

Versioni CSS

CSS3

I trashëguar

Nr.

Të kafshëve

Po.

Shembull përdorimi

Hijet e rregullta janë të lehta për t'u zbatuar duke përdorur kuti-hije ose tekst-hije. Por, çka nëse keni nevojë të bëni hije të brendshme? Ky artikull përshkruan se si të bëhen këto hije me vetëm disa rreshta kodi.

Sintaksë

Së pari, le të shohim dy mënyrat kryesore për të zbatuar hijet në CSS.

kuti-hije

Dizajn kuti-hije përmban disa kuptime të ndryshme:

Kompensimi horizontal Dhe kompensim vertikal- zhvendosja horizontale dhe vertikale, përkatësisht. Këto vlera tregojnë se në cilin drejtim objekti do të hedhë hijen e tij:

Rrezja e turbullimit Dhe rreze e përhapjes pak më e komplikuar. Cili është ndryshimi? Le të shohim një shembull me dy elementë, ku vlerat rrezja e turbullimit ndryshojnë:

Skaji i hijes është thjesht i paqartë. Me vlera të ndryshme rreze e përhapjes ne shohim si më poshtë:

Në këtë rast, ne shohim se hija është e shpërndarë në një zonë të madhe. Nëse nuk specifikoni një vlerë rrezja e turbullimit Dhe rreze e përhapjes, atëherë ato do të jenë të barabarta me 0.

tekst-hije

Sintaksa është shumë e ngjashme me kuti-hije:

Kuptimet janë të ngjashme, por jo përhapje-hije. Shembull përdorimi:

Futur në kuti-hije

Për të "rrokullisur" hijen brenda objektit, duhet të shtoni futur në CSS:

Pasi të kuptoni sintaksën bazë të hijes së kutisë, është shumë e lehtë të kuptosh se si të zbatosh hijet e brendshme. Vlerat janë ende të njëjta, mund të shtoni ngjyrë (RGB në hex):

Ngjyra është në formatin RGB, vlera alfa është përgjegjëse për transparencën e hijes:

Imazhe me hije

Shtimi i një hije të brendshme në një imazh është pak më e vështirë sesa shtimi i një hije të rregullt div. Për të filluar, këtu është kodi i zakonshëm i imazhit:

Është logjike të supozohet se mund të shtoni një hije si kjo:

img (
box-hije: inset 0px 0px 10px rgba(0,0,0,0.5);
}

Por hija nuk është e dukshme:

Ka disa mënyra për të zgjidhur këtë problem, secila prej të cilave ka të mirat dhe të këqijat e veta. Le të shohim dy prej tyre. E para është të mbështillni imazhin në një të rregullt div:

Div (
lartësia: 200 px;
gjerësia: 400 px;
}

img (
lartësia: 200 px;
gjerësia: 400 px;
pozicioni: i afërm;
z-indeksi: -2;
}

Gjithçka funksionon, por ne duhet të shtojmë një shënim shtesë HTML dhe CSS. Mënyra e dytë është të vendosni imazhin si sfond të bllokut të dëshiruar:

Div (
lartësia: 200 px;
gjerësia: 400 px;
sfond: url (http://lorempixum.com/400/200/transport/2);
box-hije: inset 0px 0px 10px rgba(0,0,0,0.9);
}

Kjo është ajo që mund të ndodhë kur përdorni hijet e brendshme:

Futet në tekst-hije

Për të zbatuar një hije të brendshme të tekstit, thjesht shtoni kodit futur nuk punon:

Për të zgjidhur, së pari aplikoni në kokë h1 Vendosni një sfond të errët dhe një hije të lehtë:

H1 (
ngjyra e sfondit: #565656;
ngjyra: transparente;
}

Ja çfarë ndodh:

Shtimi i një përbërësi sekret sfond-klip i cili ndërpret çdo gjë që shtrihet përtej tekstit (në një sfond të errët):

H1 (
ngjyra e sfondit: #565656;
ngjyra: transparente;
tekst-hije: 0px 2px 3px rgba(255,255,255,0.5);
-webkit-background-clip: tekst;
-moz-background-clip: tekst;
sfond-klip: tekst;
}

Doli pothuajse saktësisht ajo që na duhej. Tani thjesht e errësojmë pak tekstin (alfa), dhe kaq.

informacion të shkurtër

Versionet CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Përshkrim

Shton një hije në një element. Është e mundur të përdoren disa hije, duke treguar parametrat e tyre të ndara me presje kur aplikoni hije, hija e parë në listë do të jetë më e lartë, e fundit më e ulët. Nëse një rreze rrumbullakimi specifikohet për një element nëpërmjet vetive kufi-radius, atëherë hija do të ketë gjithashtu qoshe të rrumbullakosura. Shtimi i një hije rrit gjerësinë e elementit, kështu që një shirit lëvizës horizontal mund të shfaqet në shfletues.

Sintaksë

kuti-hije: asnjë |<тень> [,<тень>]*
Ku<тень>:
futur<сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>

vlerat

asnjë Anulon shtimin e një hije. inset Hija vizatohet brenda elementit. Parametër opsional. x offset Kompensimi horizontal i hijes në lidhje me elementin. Një vlerë pozitive e këtij parametri e zhvendos hijen në të djathtë, një vlerë negative e zhvendos atë në të majtë. Parametri i kërkuar. y offset Kompensimi vertikal i hijes në lidhje me elementin. Një vlerë pozitive e zhvendos hijen poshtë, një vlerë negative e zhvendos atë lart. Parametri i kërkuar. blur Vendos rrezen e turbullimit të hijes. Sa më e lartë kjo vlerë, aq më shumë hija zbutet, duke u bërë më e gjerë dhe më e lehtë. Nëse ky parametër nuk specifikohet, parazgjedhja vendoset në 0, gjë që do ta bëjë hijen të mprehtë dhe jo të paqartë. shtrirje Një vlerë pozitive shtrin hijen, një vlerë negative, përkundrazi, e ngjesh atë. Nëse ky parametër nuk specifikohet, parazgjedhja është 0, gjë që do të bëjë që hije të ketë të njëjtën madhësi me elementin. ngjyra Ngjyra e hijes në çdo format CSS të disponueshëm, hija e parazgjedhur është e zezë. Parametër opsional.

Është e mundur të specifikohen disa hije, duke i ndarë parametrat e tyre me presje. Rendi i mëposhtëm merret parasysh: hija e parë në listë vendoset në krye, e fundit në listë është në fund.

HTML5 CSS3 IE Cr Op Sa Fx

Rezultati i shembullit është paraqitur në Fig. 1.

Oriz. 1. Pamje hije në shfletuesin Safari

Shfletuesit

Safari përpara versionit 5.1, Chrome përpara versionit 10.0, Android përpara versionit 4.0 dhe iOS Safari përpara versionit 5.0 mbështesin veçorinë -webkit-box-shadow.

Firefox para versionit 4.0 mbështet veçorinë -moz-box-shadow.

Internet Explorer para versionit 9.0 nuk e mbështet veçorinë e hijes së kutisë, në vend të kësaj mund të përdorni veçorinë e filtrit jo standard:

Filtri: progid:DXImageTransform.Microsoft.dropshadow(offX=5, offY=5, color=#000000);

Këtu: offX - zhvendosja horizontale e hijes; offY - zhvendosje vertikale e hijes; ngjyra - ngjyra e hijes.

Aplikimi i filtrit të hijes prodhon një hije të qartë dhe të mprehtë, kështu që mund të përdorni filtrin e hijes për një efekt turbullimi.

Filtri: progid:DXImageTransform.Microsoft.shadow(drejtimi=120, ngjyra=#000000, forca=10);

Këtu: drejtimi — këndi i drejtimit të hijes nga 0 në 360°; ngjyra - ngjyra e hijes; forca - zhvendosja e hijes në piksel.