CSS-ēna: kā padarīt

Bez tumsas nav gaismas bez ēnas nav formā. Pat pamata make-up līdzeklis sievietēm sauc par "ēnu". Ja jūs vēlaties, lai skaistumu uz jūsu lapu, jums ir nepieciešams izvietot pareizo uzsvaru - Add CSS-ēna, kur tas ir nepieciešams.

Turpmāk iesniegts materiāls palīdzēs jums uzzināt, kā uzstādīt ēnā vai bloķēt attēlus, izmantojot CSS kodu.

CSS-ēna. sintakse

Patiesībā box-ēna, kur kaste - bloks un ēna - tas ir pats par sevi ēna.

Kods rakstīts figūriekavās:

{Box-ēna: 11px 22px 33px 44px # 333333;}.

Line stāsta mums, ka vienība ir iestatīta standarta ar ēnu pikseļu rādiusu. Dati tiek atšifrēti šādi:

• 11px - ēnu nobīde attiecībā pret bloku par X asi (pozitīvo vērtību (20 pikseļi) mainīs uz labo ēnu, negatīvs (-37px) - pa kreisi);
• 22px - ēnu nobīdes attiecībā uz Y ass bloks (pozitīva vērtība (5px) izmainīs no ēnā leju negatīvs (-17px) - līdz);
• 33px - tas aizmiglot parametrs, jo lielāks skaitlis, jo lielāks efekts;
• 44px - rādiuss ēnas, un ir tieši proporcionāls;
• # 333333 - krāsa, kas ir krāsotas ēnā.

Pēdējie trīs parametri ir obligāti, un var vienkārši izlaist virknē, ti {box-ēna: 10px 13px; } - .. Šāda līnija nav pareizs (ēnu krāsa ir identiska krāsu tekstam blokā).

Tādējādi, radot ēnas uz jūsu vietnes lapas nav grūtības, taču daudz jauku meklē sekas var izveidot! Padariet jūsu bērns unikālu, neatkārtojamu, jo dizains ir svarīgs, katrs sīkums, katra detaļa. Te, šķiet, nekas īpašs, bet tas ir daudz interesantu un pievilcīgu.

Apsveriet dažus ilustratīvus piemērus, tas izskatās ēnu CSS-bloku saskaņā ar kodēšanu:

1. {Box-ēna: 25 pikseļi 25 pikseļi;} - CSS-ēna ofseta asis, 25 pikseļi.
2. {Box-ēna: 25 pikseļi 25 pikseļi 10px;} - CSS-ēna ofseta asīm 25 pikseļi un izplūšanai malām 10 pikseļi.
3. {Box-ēna: 25 pikseļi 25 pikseļi 10px 5px;} - CSS-ēna ofseta asis, 25 pikseļiem, izplūšanu malas 10 pikseļi un iepriekš noteiktu rādiusu 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.

piliens ēnu

Lai radītu skaistas, elegantas un oriģinālas nianses ir dažādas sekas. Jūs varat veikt iekšējo ēnu. Tas ir pietiekami, kods, lai norādītu parametrus "ielīmes", Sīkāku informāciju par parametru dosies kā parasti:

{Box-ēna: ieliktņa 4 pikseļi 2 pikseļi 6px # 9e9e9e;}.

Tas ir iespējams ievietot zem bloka dažas ēnas ar pilnīgi dažādiem parametriem kodā, viņi (ēnas) ir uzskaitītas atdalītas ar komatiem:

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

ēnu bildes

Papildus vienības uz vietas noteikti būs attēli, fotogrāfijas, fonu - visi šie elementi arī izskatās daudz interesantu ar ēnām. Varat zīmēt attēlus ar iepriekš attēlu redaktoriem un ielīmēt tos lapā jau ar ēnām. Bet, pirmkārt, tas ne vienmēr ir iespējams dažādu iemeslu dēļ, ieskaitot, jo trūkst prasmju darbā ar grafiku, otrkārt, jebkādas manipulācijas attēla pievieno viņam, "svaru", un šāds attēls var arī palēnināt lapu ielādi. Tādā gadījumā jūs varat veikt CSS-ēnu attēlus.

Visvienkāršākā un sintaktiski pareizs risinājums šai problēmai - izveidot vienības, fona jūsu attēlu būs Kotormo. Tālāk, jūs veicat nepieciešamo toni vienības, un tie tiek parādīti uz fona-attēlu:

• .block1 {box-ēna: ieliktņa 0 0 11 px 9px # 9e9e9e; platums: 480px; augstums: 360 pikseļi; background: url (images / charlize_theron_2.jpg) 0 0 ne-atkārtot;}

Šajā piemērā, mēs izveidojam iekšējo ēnu ar nekāda kompensēt no asīm, ar aizmiglot rādiusu, kas definēts krāsas, augstuma un platuma bloku, un fona (fona) iecelts kuartinku. Tā rezultātā, mēs iegūstam priekšstatu par iekšējo ēnu.

Piekrītu radīt ēnas, izmantojot CSS kodu - tas ir diezgan vienkāršs, bet aizraujoša, un vissvarīgāk - noderīga izmantot.