Satura rādītājs
Šī ir viena no gaidītākajām jaunā standarta iezīmēm CSS3 un tas kopā ar HTML5 izdodas piesaistīt daudz izskatu, mēs atsaucamies uz Box Shadow kas ļauj mums novietot ēnas uz mūsu dokumenta lodziņiem HTML, tādējādi radot efektu, it kā tas peldētu lapā.Box Shadow elements jāveido šādi:
box-shadow: hoffset voffset blur izplatīšanās krāsu ielaidums
Ja katrs no tā atribūtiem veic kādu funkciju, aplūkosim katru no tiem sīkāk:
- Hoffset: Tas ir horizontālais nobīde, kas ir garuma vērtība. Pozitīva vērtība izspiež Box Shadow no otras puses, negatīva vērtība novirza Box Shadow pa kreisi.
- Nobīde: Tā ir vertikālā nobīde, kas ir garuma vērtība. Pozitīva vērtība novieto lodziņa ēnu zem vienuma kastes, un negatīva vērtība novieto lodziņa ēnu virs vienuma lodziņa.
- Izplūšana: (Pēc izvēles) Norāda ēnas definīcijas rādiusu, kas ir garuma vērtība. Jo augstāka vērtība, jo izplūdušāka paliek preces kastes mala. Noklusējuma vērtībai 0 lodziņa ēnas robeža izskatās pilnībā definēta.
- Izplatība: (Pēc izvēles) Norādiet ēnas izkliedes rādiusu, tas ir garuma mērs. Pozitīva vērtība izraisa ēnas izplešanos visos ietvertā elementa kastes virzienos, un negatīvā vērtība izraisa saturošā elementa ēnas saraušanos.
- Krāsa: (Pēc izvēles) Tā ir ēnas krāsa. Ja tas tiek izlaists, pārlūkprogramma nosaka krāsu.
- Ieliktnis: (Neobligāti) Padara ēnu lietotu tā elementa kastē, uz kuras tā tiek lietota.
Kad mēs zinām atribūtus, ātri pāriesim pie koda piemēra, lai iemācīto izmantotu praksē.
PiemērsIr daudz dažādu augļu veidu - vien ir vairāk nekā 500 banānu šķirņu. Kad mēs pievienojam neskaitāmus ābolu, apelsīnu un citu plaši pazīstamu augļu veidus, mēs esam tūkstošiem izvēles priekšā.
Kā redzam, mēs varam piemērot Box Shadow CSS stila tagā šis kods ģenerē šādu rezultātu:
PiemērsIr daudz dažādu augļu veidu - vien ir vairāk nekā 500 banānu šķirņu. Kad mēs pievienojam neskaitāmus ābolu, apelsīnu un citu plaši pazīstamu augļu veidus, mēs esam tūkstošiem izvēles priekšā.
Tagad redzēsim, kā abas ēnas tiek parādītas mūsu elementā:
