Izmanto ēnu (bieži sauc par “Drop Shadows”, piemēram, Photoshop) liešanā no elementiem. Šeit ir piemērs ar visdziļāko iespējamo pārlūka atbalstu:
.shadow ( -webkit-box-shadow: 3px 3px 5px 6px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */ -moz-box-shadow: 3px 3px 5px 6px #ccc; /* Firefox 3.5 - 3.6 */ box-shadow: 3px 3px 5px 6px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */ )Tas ir:
box-shadow: (horizontal offset) (vertical offset) (blur radius) (optional spread radius) (color);- Ēnas horizontālais nobīde (nepieciešama), pozitīvs nozīmē, ka ēna būs lodziņa labajā pusē, negatīvā nobīde - ēnu lodziņa kreisajā pusē.
- Ēnas vertikālais nobīde (nepieciešama), negatīva nozīmē, ka lodziņa ēna būs virs lodziņa, pozitīva - ēna būs zem lodziņa.
- Izplūšanas rādiuss (nepieciešams), ja iestatīts uz 0, ēna būs asa, jo lielāks skaitlis, jo izplūdušāks tas būs, un jo tālāk ēna izstiepsies. Piemēram, ēna ar 5 pikseļu horizontālu nobīdi, kurai ir arī 5 pikseļu izplūduma rādiuss, būs 10 pikseļi no kopējās ēnas.
- Izkliedēšanas rādiuss (pēc izvēles), pozitīvās vērtības palielina ēnas lielumu, negatīvās vērtības samazina. Noklusējums ir 0 (ēna ir tāda paša izmēra kā aizmiglojums).
- Krāsa (obligāta) - ņem jebkuru krāsu vērtību, piemēram, sešstūra, nosaukta, rgba vai hsla. Ja krāsas vērtība tiek izlaista, lodziņa ēnas tiek uzzīmētas priekšplāna krāsā (tekstā
color). Bet ņemiet vērā, ka vecākas WebKit pārlūkprogrammas (pirms pārlūka Chrome 20 un Safari 6) ignorē kārtulu, ja krāsa tiek izlaista.
rgba(0, 0, 0, 0.4)Puse caurspīdīgas krāsas, piemēram, izmantošana ir visizplatītākā, un tas ir jauks efekts, jo tas pilnībā / necaurspīdīgi neaptver to, kas ir beidzies, bet ļauj mazliet parādīt to, kas atrodas zem tā, piemēram, īsta ēna.
Piemērs
Iekšējā ēna
.shadow ( -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; )Piemērs
Internet Explorer (8 un mazāk) rūtiņu ēna
Jums ir nepieciešams papildu elements, taču tas ir iespējams filter.
Box-shadowed element .shadow1 ( margin: 40px; background-color: rgb(68,68,68); /* Needed for IEs */ -moz-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); -webkit-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30); -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)"; zoom: 1; ) .shadow1 .content ( position: relative; /* This protects the inner element from being blurred */ padding: 100px; background-color: #DDD; )Tikai no vienas puses
Izmantojot negatīvo izkliedes rādiusu, jūs varat saspiest lodziņa ēnu un nogrūst to tikai no kastes vienas malas.
.one-edge-shadow ( box-shadow: 0 8px 6px -6px black; )Vairākas robežas un vairāk
Atdalīt lodziņu-ēnu jūs varat komatēt vairākas reizes, cik vēlaties. Piemēram, tajā pašā elementā ir redzamas divas ēnas ar dažādām pozīcijām un dažādām krāsām:
box-shadow: inset 5px 5px 10px #000000, inset -5px -5px 10px blue;Piemērā parādīts, kā to var izmantot, lai izveidotu vairākas robežas:
Skatiet vēsumu Pen Multiple box-shadow! autors Kriss Koijers (@chriscoyier) vietnē CodePen.
Pielietojot ēnas pseido elementiem, ar kuriem jūs pēc tam manipulējat, varat iegūt diezgan iedomātas 3D izskata lodziņu ēnas:
Skatiet Halil İbrahim Nuroğlu (@haibnu) Pen CSS3 Box Shadows Effects vietnē CodePen.
Ļoti gludas ēnas, izmantojot vairākas komatiem atdalītas vērtības:
Skatiet
Krāsa Koijera (@chriscoyier) Pen smooth box-shadow
vietnē CodePen.
Pārlūka atbalsts
Skatiet fragmentu lapas augšdaļā, lai uzzinātu vairāk par piegādātāja prefiksa pārklājumu. Šī ir viena no tām īpašībām, kur prefiksu nomešana šajā brīdī ir diezgan pamatota.