Css3 lodziņa ēnu piemēri. Iekšējās ēnas CSS
Ē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
- ievietotais atslēgvārds iestata ēnu elementa iekšpusē;
- pārvietot ēnu horizontāli (5 pikseļi - pa labi, -5 pikseļi - pa kreisi);
- vertikālā nobīde (5 pikseļi - uz leju, -5 pikseļi - uz augšu);
- ēnas izplūšanas rādiuss (0 - asa ēna);
- shadow stretch (5px - stiept, -5px - sarauties);
- ē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.
| 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
Neejiet pret ienaidnieka baneriem, ja tie ir pilnīgā kārtībā; neuzbrūk ienaidnieka nometnei, ja tā ir neieņemama; tā ir pārmaiņu vadība.
Sun Tzu, tulk. Nikolajs Konrāds
Šī 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
Virsraksts
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.
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 ir viņu 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; lodziņa ēna: ielaidums 0 pikseļi 0 pikseļi 10 pikseļi rgba(0,0,0,0,9); ) 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; teksta ēna: 0 pikseļi 2 pikseļi 3 pikseļi rgba(255,255,255,0,5);)
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: 0px 2px 3px 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 padarām tekstu tumšāku (alfa), un rezultāts ir:
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 ir viņu 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.
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.
īsa informācija
Sintakse
Kastes ēna: nav |<тень> [,<тень>]*
Kur<тень>:
ielaidums<сдвиг по x> <сдвиг по y> <размытие> <растяжение> <цвет>
Apzīmējumi
| Apraksts | Piemērs | |
|---|---|---|
| <тип> | Norāda vērtības veidu. | <размер> |
| A && B | Vērtības ir jāizvada norādītajā secībā. | <размер> && <цвет> |
| A | B | Norāda, ka jums ir jāizvēlas tikai viena vērtība no piedāvātajām vērtībām (A vai B). | normāls | mazie burtiņi |
| A || B | Katru vērtību var izmantot neatkarīgi vai kopā ar citām jebkurā secībā. | platums || skaitīt |
| Grupu vērtības. | [ raža || krusts ] | |
| * | Atkārtojiet nulli vai vairākas reizes. | [,<время>]* |
| + | Atkārtojiet vienu vai vairākas reizes. | <число>+ |
| ? | Norādītais veids, vārds vai grupa nav obligāta. | ieliktnis? |
| (A, B) | Atkārtojiet vismaz A, bet ne vairāk kā B reizes. | <радиус>{1,4} |
| # | Atkārtojiet vienu vai vairākas reizes, atdalot tos ar komatiem. | <время># |
Vērtības
none Atceļ ēnas pievienošanu. ielaidums Ēna tiek ievilkta elementa iekšpusē.<сдвиг по x>Ēnas horizontālā nobīde attiecībā pret elementu. Pozitīva šī parametra vērtība iestata ēnas nobīdi pa labi, negatīva - pa kreisi.<сдвиг по y>Ēnas vertikālā nobīde attiecībā pret elementu. Pozitīva vērtība novirza ēnu uz leju, negatīva - uz augšu.<размытие>Iestata ēnu 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.<растяжение>Pozitīva vērtība izstiepj ēnu, negatīva, gluži pretēji, saspiež to. 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.<цвет>Ēnu krāsa jebkurā pieejamajā CSS formātā, noklusējuma ēna ir melna.
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šā.
Piemērs
Piemēra rezultāts ir parādīts attēlā. 1.
Rīsi. 1. Ēnas veids
Objekta modelis
Objekts.style.boxShadow
Piezīme
Safari pirms versijas 5.1, Chrome pirms versijas 10.0, Android pirms versijas 4.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 rekvizītu box-shadow, tā vietā varat izmantot 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.
Izmantojot ēnu filtru, iegūstat skaidru, asu ēnu, tāpēc varat izmantot ēnu filtru, lai iegūtu izplūšanas efektu.
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.
Specifikācija
Katra specifikācija iziet vairākus apstiprināšanas posmus.
- Ieteikums — specifikāciju ir apstiprinājusi W3C, un tā ir ieteicama kā standarts.
- Ieteikums kandidātam ( Iespējamais ieteikums) - par standartu atbildīgā grupa ir pārliecināta, ka tas atbilst saviem mērķiem, bet standarta ieviešanai nepieciešama izstrādes kopienas palīdzība.
- Ierosinātais ieteikums Ieteiktais ieteikums) - šajā posmā dokuments tiek iesniegts W3C konsultatīvajai padomei galīgai apstiprināšanai.
- Darba projekts — izstrādāta projekta versija, kas ir apspriesta un grozīta kopienas pārskatīšanai.
- Redaktora melnraksts ( Redakcijas melnraksts) - standarta uzmetuma versija pēc projekta redaktoru veiktajām izmaiņām.
- Melnraksts ( Specifikācijas projekts) - standarta pirmā uzmetuma versija.
