Attēla ēnu css. Iekšējās ēnas CSS

Līdz ar standarta parādīšanos CSS 3 ieviesa box-shadow rekvizītu, kas ir kļuvis plaši izmantots tīmekļa izstrādātāju vidū, jo tas ļauj viegli pievienot vienu vai vairākas ēnas elementa lodziņā, lai iegūtu vēlamo vizuālo efektu.

Iepriekšējā rakstā mēs apskatījām robežu rādiusu, izmantojot to, jūs varat iegūt ēnu ar noapaļotiem stūriem. Pēc analoģijas ar teksta ēnu (teksta ēna) varat izveidot vairākas ēnas, tās tiek piemērotas saskaņā ar z-ass no priekšpuses uz aizmuguri (ar pirmo doto ēnu uz augšu).

Sīkāk apskatīsim šī modernā īpašuma sintaksi:

Apskatīsim secībā iespējamās šī īpašuma vērtības:

Nozīme	Apraksts
neviens	Ēna netiek rādīta. Šī ir noklusējuma vērtība.
ielaidums	Izvēles vērtība. Ja šī vērtība nav norādīta (noklusējums), ēna atradīsies elementa ārpusē un radīs elementa izliekuma efektu. Ja ir atslēgvārda (vērtības) ieliktnis, ēna iekritīs elementā un radīs iespiedumu. Citiem vārdiem sakot, tā ir maiņa no ārējās ēnas uz iekšējo.
h-ēna	Nepieciešamā vērtība. Iestata horizontālās ēnas atrašanās vietu. Ir atļautas negatīvas vērtības.
v-ēna	Nepieciešamā vērtība. Iestata vertikālās ēnas atrašanās vietu. Ir atļautas negatīvas vērtības.
izplūduma rādiuss	Izvēles vērtība. Iestata izplūšanas rādiusu. Jo lielāka vērtība, jo lielāks ir izplūdums, padarot ēnu lielāku un gaišāku. Ja vērtība nav norādīta, vērtība būs 0 (asas - izteiktas ēnas). Negatīvās vērtības nav atļautas.
izplatības rādiuss	Izvēles vērtība.Ēnas izmērs (ēnas stiepes rādiuss). Ar pozitīvām vērtībām ēna paplašināsies, bet ar negatīvām vērtībām tā samazināsies. Ja vērtība nav norādīta, vērtība būs 0 (ēna atbilst elementa izmēram).
krāsa	Izvēles vērtība. Definē ēnas krāsu (HEX, RGB, RGBA, HSL, HSLA, "Iepriekš definētas krāsas"). Noklusējuma vērtība ir melna.

Galvenie punkti, kas jums jāsaprot, lai izveidotu elementu ēnas, ir:

Vēlos vērst jūsu uzmanību uz to, ka rekvizītu box-shadow pašlaik atbalsta visas mūsdienu pārlūkprogrammas:

Īpašums			Opera		IExplorer	Mala
kaste-ēna	10.0 4.0 -tīmekļa komplekts-	4.0 3.5 -moz-	10.5	5.1 3.1 -tīmekļa komplekts-	9.0	12.0

Ja vēlaties paplašināt atbalstu dažām pārlūkprogrammām, tostarp mobilajām ierīcēm iOS 3.2–4.3 Un Android 2.1–3, tad ieteicams izmantot ražotāja prefiksus un izmantot šādu sintaksi (raksta piemēros sintakse tiks izmantota tikai mūsdienu pārlūkprogrammām):

-webkit-box-shadow: vērtība ; /* Safari 3.1–4, IOS 3.2–4.3 un Android 2.1–3 */-moz-box-shadow : vērtība ; /* Firefox 3.5–3.6 */ box-shadow : value ; /* tabula augstāk */

Pāriesim pie prakses un sāksim ar vienkāršu piemēru, kurā elementiem pievienojam vienu ēnu:

Mūsu piemēra rezultāts:

Vairāku ēnu izmantošana

Nākamajā piemērā es ierosinu apsvērt interesanto krāsu sajaukšanas efektu, ko var panākt, izmantojot vairākas ēnas:

• Divas fiksēta platuma un augstuma bloki (15em un 10em), pievienots polsterējums uz visām pusēm (2em) un iestatiet blokus uz bloku līniju, lai varētu tos sakārtot.
• Priekš vispirms bloks ar klasi .pārbaude mēs norādījām četriēnas ar dažādām horizontālām un vertikālām ēnu vērtībām, lai elementam būtu dažādas ēnas no visām pusēm. Visu ēnu izplūšanas rādiuss tika iestatīts uz vienādu. Katras ēnas krāsa ir atšķirīga un tiek norādīta, izmantojot iepriekš noteiktas krāsas.
• Priekš otrais bloks ar klasi .test2 mēs norādījām četriēnas ar dažādām horizontālām un vertikālām ēnu vērtībām. Visu ēnu izplūšanas rādiuss tika iestatīts uz vienādu, savukārt ēnas stiepums tika iestatīts uz negatīvu, kas izraisīja pašas ēnas samazināšanos. Katras ēnas krāsa ir atšķirīga un tiek noteikta, izmantojot RGBA sistēmu.

Mūsu piemēra rezultāts:

Ēnu izmantošana attēliem

Šī raksta pēdējā piemērā galvenā uzmanība tiks pievērsta ēnu izmantošanai attēliem. Es nekavējoties vēlos vērst jūsu uzmanību uz to, ka varat tieši norādīt ēnu HTML elementam Tas nedarbosies, taču mums ir iespēja norādīt attēlu kā fonu mūs interesējošajam elementam un pēc tam piešķirt šim elementam vajadzīgo ēnu.

Mēs detalizēti apskatīsim darbu ar fona attēliem mācību grāmatas rakstā "", un tagad, lai izbeigtu ēnu izmantošanas izpēti, mēs tam pieskarsimies virspusēji un izmantosim attēlu kā fonu kādam elementam tālāk. piemērs:

• Divas fiksēta platuma un augstuma blokus (237 pikseļi un 232 pikseļi), visām pusēm ir pievienotas piemales (2 em) un iestatiet blokus uz bloku līniju, lai varētu tos sakārtot. Mēs iestatījām bloka izmēru 237 x 232 pikseļi atbilstoši attēla izmēram, lai šajā apmācības posmā mums nebūtu jāmēro attēls, lai tas atbilstu elementam un ietekmētu tās CSS īpašības, kuras plānots izpētīt vēlāk. (mācību grāmatas rakstā " ").
• Priekš vispirms bloks ar klasi .pārbaude Mēs norādījām nulles vērtību horizontālajai un vertikālajai ēnai, taču tajā pašā laikā mēs norādījām izplūšanas rādiusu 50 pikseļus un paplašinājām to, iestatot stiepes rādiusu — 10 pikseļi. Ēnu krāsa tika norādīta ar iepriekš noteiktu krāsu (violetu). Turklāt deklarācijā norādījām ielikto atslēgvārdu, kas izraisa ēnas iekrišanu elementā. Citiem vārdiem sakot, mēs esam radījuši elementa iekšējo ēnu.
• Priekš otrais bloks ar klasi .test2 Mēs norādījām nulles vērtību horizontālajai un vertikālajai ēnai, taču tajā pašā laikā mēs norādījām izplūšanas rādiusu 50 pikseļus un paplašinājām to, iestatot stiepes rādiusu — 10 pikseļi. Ēnu krāsa ir norādīta RGBA režīmā.

Mūsu piemēra rezultāts:

Rīsi. 98 Piemērs ēnu izmantošanai attēliem CSS (box-shadow rekvizīts)

Jautājumi un uzdevumi par tēmu

Pirms pāriet pie nākamās tēmas, izpildiet prakses uzdevumu:

Ja jums ir grūtības izpildīt prakses uzdevumu, jūs vienmēr varat atvērt piemēru atsevišķā logā un pārbaudīt lapu, lai saprastu, kāds CSS kods tika izmantots.

2016-2019 Deniss Boļšakovs, komentārus un ieteikumus par vietni varat sūtīt uz [email protected]

Ēnu zem bloka elementa lapā parasti izmanto, lai radītu trīsdimensiju efektu, pievērstu uzmanību elementam vai kā daļa no dizaina. Neliela ēna zem elementiem arī piešķir lapas apjomu un dziļumu.

Lai pievienotu ēnu, izmantojiet rekvizītu box-shadow, kuram ir sešas vērtības, no kurām ir nepieciešamas tikai divas. Attēlā 1. attēlā parādīts lodziņa ēnas rekvizīts ar visām iespējamām vērtībām, kas numurētas, lai tās identificētu.

Rīsi. 1. Box-shadow īpašību vērtības

1. ievietotais atslēgvārds iestata ēnu elementa iekšpusē;
2. pārvietot ēnu horizontāli (5 pikseļi - pa labi, -5 pikseļi - pa kreisi);
3. vertikālā nobīde (5 pikseļi - uz leju, -5 pikseļi - uz augšu);
4. ēnas izplūšanas rādiuss (0 - asa ēna);
5. shadow stretch (5px - stiept, -5px - sarauties);
6. ēnu krāsa.

Nepieciešams norādīt tikai horizontālo un vertikālo nobīdi, pēc noklusējuma tiks ņemti visi pārējie parametri. Šajā gadījumā ēna būs asa bez izplūduma un melnas krāsas.

Apvienojot dažādus parametrus un to vērtības, var iegūt visdažādākos ēnu veidus. Tabulā 1 parāda kodu un rezultātu, uz kuru tas noved.

Tabula 1. Ēnu parametru kombinācijas

Kods	Rezultāts	Apraksts
lodziņa ēna: 5 pikseļi 5 pikseļi;		Asa ēna labajā pusē un apakšā.
lodziņa ēna: -5px -5px;		Asa ēna pa kreisi un uz augšu.
box-shadow: 0 0 5px;		Izplūdusi ēna ap elementu.
box-shadow: 0 0 5px 2px;		Paplašiniet ēnu par 2 pikseļiem.
box-shadow: 0 0 5px 2px sarkans;		Sarkans mirdzums ap elementu.
box-shadow: 0,4em 0,4em 5px rgba(122,122,122,0,5);		Caurspīdīga ēna.
box-shadow: ielaidums 0 0 6px;		Ēna iekšā.

Kā redzams tabulā, ēnu nobīde nav jānorāda pikseļos, lai gan tas ir ērti. Ēnas krāsu var norādīt jebkurā pieejamajā formātā, piemēram, lai iegūtu caurspīdīgu ēnu, šāda ēna izskatīsies labi uz jebkura fona; 1. piemērs parāda, kā to izdarīt.

1. piemērs: ēna uz fona attēla

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Šī piemēra rezultāts ir parādīts attēlā. 2. Ēna seko bloka stūru noapaļošanai.

Rīsi. 2. Ēnu parādīšanās uz fona attēla

Pievienojot "plašu" ēnu, ņemiet vērā, ka tā var pārsniegt pārlūkprogrammas loga redzamās robežas un tādējādi parādīties horizontāla ritjosla.

Ēnas var pievienot arī pseidoelementiem, tas dažreiz ir nepieciešams sarežģītiem izkārtojumiem. Attēlā 3. attēlā parādīts galvenes bloks ar pievienotu ēnu. Lai krustojumā izvairītos no līnijām, jāizmanto ::after pseidoelements un jāpievieno tam ēna.

Rīsi. 3. Bloķēt ar ēnu

2. piemērs parāda šāda bloka izveidi.

Piemērs 2. Bloks ar ēnu

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Elementam var būt vairāk nekā viena ēna, bet vairāki to parametri ir uzskaitīti, atdalot tos ar komatiem rekvizīta box-shadow vērtībā. 3. piemērā parādīts, kā visiem attēliem pievienot dubultu ēnu.

Piemērs 2. Bloks ar ēnu

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Šī piemēra rezultāts ir parādīts attēlā. 4.

Rīsi. 4. Dubultās ēnas attēls

Pirmā ēna tiek parādīta attēla kreisajā pusē ar izplūšanas rādiusu 20 pikseļi, tās izmērs ir samazināts ceturtā parametra dēļ (-20 pikseļi). Otrās ēnas parametri tiek norādīti aiz komata, ēna tiek parādīta attēla labajā pusē, kā arī tiek samazināta simetrija.

CSS rekvizīts box-shadow pievieno elementam vienu vai vairākas ēnas. Lai norādītu vairākas ēnas, jāpievieno papildu ēnas vērtība(-as), atdalot tās ar komatiem.

Pārlūka atbalsts

Īpašums			Opera		IExplorer	Mala
kaste-ēna	10.0 4.0 -tīmekļa komplekts-	4.0 3.5 -moz-	10.5	5.1 3.1 -tīmekļa komplekts-	9.0	12.0

CSS sintakse:

kastes ēna: "nav| ielikts h-ēna v-ēna izplūšanas rādiuss izkliedes rādiuss krāsa | sākotnējais | mantot";

JavaScript sintakse:

Object.style.boxShadow = "10px 5px 5px sarkans"

Īpašumu vērtības

Nozīme	Apraksts
neviens	Ēna netiek rādīta. Šī ir noklusējuma vērtība.
ielaidums	Izvēles vērtība. Ja šī vērtība nav norādīta (noklusējums), ēna atradīsies elementa ārpusē un radīs elementa izliekuma efektu. Ja ir iekļauts atslēgvārds (vērtība), ēna iekritīs elementā un radīs atkāpes efektu. Citiem vārdiem sakot, tā ir maiņa no ārējās ēnas uz iekšējo.
h-ēna	Nepieciešamā vērtība. Iestata horizontālās ēnas atrašanās vietu. Ir atļautas negatīvas vērtības.
v-ēna	Nepieciešamā vērtība. Iestata vertikālās ēnas atrašanās vietu. Ir atļautas negatīvas vērtības.
izplūduma rādiuss	Izvēles vērtība. Iestata izplūšanas rādiusu. Jo lielāka vērtība, jo lielāks ir izplūdums, padarot ēnu lielāku un gaišāku. Ja vērtība nav norādīta, vērtība būs 0 (asas - izteiktas ēnas). Negatīvās vērtības nav atļautas.
izplatības rādiuss	Izvēles vērtība.Ēnas izmērs (ēnas stiepes rādiuss). Ar pozitīvām vērtībām ēna paplašināsies, bet ar negatīvām vērtībām tā samazināsies. Ja vērtība nav norādīta, vērtība būs 0 (ēna atbilst elementa izmēram).
krāsa	Izvēles vērtība. Definē ēnas krāsu (HEX, RGB, RGBA, HSL, HSLA, "Iepriekš definētas krāsas"). Noklusējuma vērtība ir melna.
	Iestata īpašuma noklusējuma vērtību.
	Norāda, ka vērtība ir mantota no vecākelementa.

CSS versija

CSS3

Iedzimts

Nē.

Animējams

Jā.

Lietošanas piemērs

Parastās ēnas ir viegli ieviest, izmantojot box-shadow vai teksta ēnu. Bet ko darīt, ja jums ir jāveido iekšējās ēnas? Šajā rakstā ir aprakstīts, kā izveidot šīs ēnas, izmantojot tikai dažas koda rindiņas.

Sintakse

Vispirms apskatīsim divus galvenos veidus, kā ieviest ēnas CSS.

kaste-ēna

Dizains kaste-ēna satur vairākas dažādas nozīmes:

Horizontālā nobīde Un vertikālā nobīde— attiecīgi horizontālā un vertikālā nobīde. Šīs vērtības norāda, kādā virzienā objekts metīs ēnu:

Aizmiglošanas rādiuss Un izplatības rādiuss nedaudz sarežģītāk. Kāda atšķirība? Apskatīsim piemēru ar diviem elementiem, kur vērtības izplūduma rādiuss atšķiras:

Ēnas mala ir vienkārši izplūdusi. Ar dažādām vērtībām izplatības rādiuss mēs redzam sekojošo:

Šajā gadījumā mēs redzam, ka ēna ir izkliedēta lielā platībā. Ja nenorādīsiet vērtību izplūduma rādiuss Un izplatības rādiuss, tad tie būs vienādi ar 0.

teksts-ēna

Sintakse ir ļoti līdzīga kaste-ēna:

Nozīmes ir līdzīgas, bet ne izplatība-ēna. Lietošanas piemērs:

Ielaidums kastes ēnā

Lai “apvērstu” ēnu objekta iekšpusē, jums jāpievieno ielaidums CSS formātā:

Kad esat izpratis lodziņa ēnu pamata sintaksi, ir ļoti viegli saprast, kā ieviest iekšējās ēnas. Vērtības joprojām ir tādas pašas, varat pievienot krāsu (RGB heksadecimā):

Krāsa ir RGB formātā, alfa vērtība ir atbildīga par ēnas caurspīdīgumu:

Attēli ar ēnām

Iekšējas ēnas pievienošana attēlam ir nedaudz grūtāka nekā parastas ēnas pievienošana div. Sākumā šeit ir parastais attēla kods:

Ir loģiski pieņemt, ka varat pievienot šādu ēnu:

Img (
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);
}

Bet ēna nav redzama:

Ir vairāki veidi, kā atrisināt šo problēmu, un katram no tiem ir savi plusi un mīnusi. Apskatīsim divus no tiem. Pirmais ir ietīt attēlu parastā div:

Div(
augstums: 200 pikseļi;
platums: 400 pikseļi;
}

img (
augstums: 200 pikseļi;
platums: 400 pikseļi;
pozīcija: relatīvs;
z-indekss: -2;
}

Viss darbojas, taču mums ir jāpievieno nedaudz papildu HTML un CSS marķējuma. Otrais veids ir iestatīt attēlu kā vēlamā bloka fonu:

Div(
augstums: 200 pikseļi;
platums: 400 pikseļi;
fons: url (http://lorempixum.com/400/200/transport/2);
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9);
}

Lūk, kas var notikt, izmantojot iekšējās ēnas:

Ievietots uz teksta ēnu

Lai ieviestu iekšējo teksta ēnu, vienkārši pievienojiet kodu ielaidums nestrādā:

Lai atrisinātu, vispirms piesakieties galvenē h1 Iestatiet tumšu fonu un gaišu ēnu:

H1 (
fona krāsa: #565656;
krāsa: caurspīdīga;
}

Lūk, kas notiek:

Slepenās sastāvdaļas pievienošana fona klips kas nogriež visu, kas pārsniedz tekstu (uz tumša fona):

H1 (
fona krāsa: #565656;
krāsa: caurspīdīga;
teksta ēna: 0 pikseļi 2 pikseļi 3 pikseļi rgba(255,255,255,0,5);
-webkit-background-clip: teksts;
-moz-background-clip: teksts;
fona klips: teksts;
}

Izrādījās gandrīz tieši tas, kas mums bija vajadzīgs. Tagad mēs tikai nedaudz aptumšojam tekstu (alfa), un viss.

īsa informācija

CSS versijas

CSS 1	CSS 2	CSS 2.1	CSS 3

Apraksts

Pievieno elementam ēnu. Var izmantot vairākas ēnas, norādot to parametrus atdalot ar komatiem, pirmā ēna sarakstā būs augstāka, pēdējā zemāka; Ja elementam ir norādīts noapaļošanas rādiuss, izmantojot īpašību border-radius, tad ēnai būs arī noapaļoti stūri. Ēnas pievienošana palielina elementa platumu, tāpēc pārlūkprogrammā var parādīties horizontāla ritjosla.

Sintakse

kastes ēna: nav |<тень> [,<тень>]*
Kur<тень>:
ielaidums<сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>

Vērtības

none Atceļ ēnas pievienošanu. ielaidums Ēna tiek ievilkta elementa iekšpusē. Izvēles parametrs. x offset Ēnas horizontālā nobīde attiecībā pret elementu. Pozitīva šī parametra vērtība pārvieto ēnu pa labi, negatīva – pa kreisi. Nepieciešamais parametrs. y offset Ēnas vertikālā nobīde attiecībā pret elementu. Pozitīva vērtība novirza ēnu uz leju, negatīva - uz augšu. Nepieciešamais parametrs. blur Iestata ēnas izplūšanas rādiusu. Jo augstāka šī vērtība, jo vairāk ēna tiek izlīdzināta, kļūstot plašāka un gaišāka. Ja šis parametrs nav norādīts, noklusējuma vērtība ir iestatīta uz 0, kas padarīs ēnu asu, nevis izplūdušu. stiept Pozitīva vērtība izstiepj ēnu, negatīva vērtība, gluži pretēji, to saspiež. Ja šis parametrs nav norādīts, noklusējuma vērtība ir 0, kā rezultātā ēna būs tāda paša izmēra kā elementam. krāsa Ēnas krāsa jebkurā pieejamajā CSS formātā, noklusējuma ēna ir melna. Izvēles parametrs.

Ir iespējams norādīt vairākas ēnas, to parametrus atdalot ar komatu. Tiek ņemta vērā šāda secība: pirmā ēna sarakstā atrodas pašā augšā, pēdējā sarakstā ir pašā apakšā.

HTML5 CSS3 IE Cr Op Sa Fx

Piemēra rezultāts ir parādīts attēlā. 1.

Rīsi. 1. Ēnu skats pārlūkprogrammā Safari

Pārlūkprogrammas

Safari pirms versijas 5.1, Chrome pirms versijas 10.0, Android pirms versijas 4.0 un iOS Safari pirms versijas 5.0 atbalsta rekvizītu -webkit-box-shadow.

Firefox pirms versijas 4.0 atbalsta rekvizītu -moz-box-shadow.

Internet Explorer pirms versijas 9.0 neatbalsta box-shadow rekvizītu, tā vietā varat izmantot nestandarta filtra rekvizītu:

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

Šeit: offX - horizontāla ēnas nobīde; offY — vertikālās ēnas nobīde; krāsa — ēnu krāsa.

Lietojot ēnu filtru, tiek iegūta skaidra, asa ēna, tāpēc varat izmantot ēnu filtru izplūšanas efektam.

Filtrs: progid:DXImageTransform.Microsoft.shadow(virziens=120, krāsa=#000000, stiprums=10);

Šeit: virziens — ēnas virziena leņķis no 0 līdz 360°; color — ēnu krāsa; stiprums — ēnu nobīde pikseļos.