CSS ēna: kā izdarīt

Bez tumsas nav gaismas, nav formas bez ēnas. Pat galvenais sieviešu aplauzums ir saukts par "ēnu". Ja jūs vēlaties, lai jūsu vietnes lapās parādītu skaistumu, jums vajadzētu sakārtot pareizos akcentus - vajadzības gadījumā pievienojiet CSS-ēnu.

Zemāk esošais materiāls palīdzēs jums uzzināt, kā iestatīt ēnu blokam vai attēlam, izmantojot CSS.

CSS-ēna. Sintakse

Patiesībā lodziņš ēna, kur lodziņš ir bloks, un ēna ir pati ēna.

Kods ir rakstīts uz cipariem:

{box-shadow: 11 pikseļi 22 pikseļi 33 pikseļi 44 pikseļi # 333333;}.

Stīgu stāsta mums, ka blokam tiek piešķirta standarta ēna ar pikseļa rādiusu. Dati tiek atšifrēti šādi:

• 11 pikseļi - Ēnu maiņa attiecībā pret bloku gar X asi (pozitīva vērtība (20 pikseļi) izraisīs ēnas pāreju uz labo pusi, negatīvu (-37 piksi) pa kreisi);
• 22 pikseļi - sēnu relatīvos nobīdēm uz Y ass vienības (pozitīva vērtība (5px) vadību nobīdei ēnā leju negatīvs (-17px) - līdz);
• 33 pikseļi - šis ir blur parametrs, jo lielāks skaits, jo spēcīgāks efekts;
• 44 pikseļi - ēnas rādiuss ir arī tieši proporcionāls;
• # 333333 - krāsa, kādā ēna ir nokrāsota.

Trīs pēdējie parametri nav obligāti un tos vienkārši nevar norādīt rindā, t.i., {box-shadow: 10 pikseļi 13 pikseļi;} - šāda līnija nav kļūdaina (ēnas krāsa būs identiska bloka teksta krāsai).

Tādējādi, veidojot ēnu jūsu lapasvietne neuzrāda sarežģītību, bet cik daudz akustisku efektu jūs varat radīt! Padariet savu bērnu vairāk unikālu, unikālu, jo dizainā ir svarīga katra maz detaļa, katra detaļa. Šķiet, ka šeit nav nekas īpašs, bet tas ir daudz interesantāks un pievilcīgāks.

Apskatīsim dažus bloku CSS-ēnas piemērus, atkarībā no koda:

1. {box-shadow: 25px 25px;} - CSS-ēna ar nobīdi 25 pikseļi.
2. {box-shadow: 25px 25px 10px;} - CSS-ēna ar 25 pikseli nobīdi un 10 pikseli izplūšanu.
3. {box-shadow: 25px 25px 10px 5px;} - CSS-ēna ar 25-pikseļu nobīdi, 10-pikseļu malu aizmugurums un noteiktais rādiuss 5 pikseļi
4. {Box-ēna: 25 pikseļi 25 pikseļi 10px 5px # 9e9e9e;} - CSS-ēna kompensēt asis 25 pikseļi, izplūšanu malas 10 pikseļi, noteikt rādiusu 5 pikseļi un krāsu.

Ēnu efekti

Lai radītu vairāk skaistu, elegantu,Sākotnējām ēnām ir dažādi efekti. Jūs varat izveidot iekšējo ēnu. Par to pietiek tikai norādīt "inset" pirms parametru pirms parametriem, tad parametru apraksts darbosies kā parasti:

{box-shadow: inset 4px 2px 6px # 9e9e9e;}.

Blokā ir iespējams ievietot vairākas ēnas ar pilnīgi atšķirīgiem parametriem, kodā, kuru tie (ēnas) ir uzskaitīti ar komatu:

{Box-ēna: -20px -10px 11px 15px # 800080, -50px -40px 5px 10px # daa520, 20px 10px 11px 15px # 0700f9, 50 pikseļu 40px 5px 10px # ffa500}.

Ēnas bildes

Papildus vietnes blokiem,bildes, fotoattēli, fonu - visi šie elementi izskatās arī daudz interesantāki ar ēnām. Grafiskos redaktoros jūs varat veikt attēlus jau iepriekš un ievietot tos lapā jau ar ēnām. Bet, pirmkārt, tas ne vienmēr ir iespējams dažādu iemeslu dēļ, tostarp grafisko prasmju trūkums, un, otrkārt, jebkura manipulācija ar attēlu padara to "svaru", un šāds attēls var arī traucēt lappušu ielādi. Šajā gadījumā jūs varat izveidot CSS-ēnu attēlu.

Visvienkāršākais un visvairāk sintezējoši pareizais šīs problēmas risinājums ir izveidot bloku, kura fons ir jūsu attēls. Tālāk jūs izveidojat vajadzīgās ēnas bloķēšanai, un tās tiek parādītas uz attēla fona.

• .block1 {box-shadow: inset 0 0 11px 9px # 9e9e9e; platums: 480 pikseļi; augstums: 360 pikseļi; background: url (images / charlize_theron_2.jpg) 0 0 no-repeat;}

Šajā piemērā mēs izveidojām iekšējo ēnu beznobīdes pa asīm, ar izplūdumu un rādiusu, nosaka bloka krāsu, augstumu un platumu, un fons tika piešķirts attēlam. Tā rezultātā mēs saņēmām attēlu ar iekšējo ēnu.

Piekrītu, lai radītu ēnas ar CSS koda palīdzību, ir diezgan vienkārša, tajā pašā laikā aizraujoša, un pats svarīgākais - noderīga nodarbība.