CSS Shadow: cum să atragă

Fără întuneric, nu există lumină, nu există formă fără o umbră. Chiar și principalul instrument de machiaj pentru femei se numește "umbra". Dacă doriți să aduceți frumusețe pe paginile site-ului dvs., trebuie să aranjați accentele corecte - adăugați o umbre CSS acolo unde este necesar.

Materialul de mai jos vă va ajuta să învățați cum să setați umbra pentru un bloc sau o imagine utilizând CSS.

CSS-umbră. sintaxă

De fapt, umbra cutie, unde caseta este un bloc, iar umbra este umbra in sine.

Codul este scris în paranteze curbate:

{Box-umbra: 11px 22px 33px 44px # 333333-}.

Șirul ne spune că blocul are o umbră standard cu o rază de pixeli. Datele sunt descifrate după cum urmează:

• 11px - Deplasarea în umbră în raport cu blocul de-a lungul axei X (o valoare pozitivă (20px) va determina trecerea umbrei la dreapta, negativă (-37px) spre stânga);
• 22px - sUmbrirea în raport cu blocul de-a lungul axei Y (o valoare pozitivă (5px) va determina umbra să se deplaseze în jos, negativ (-17px) - în sus);
• 33px - acesta este parametrul blur, cu cât este mai mare numărul, cu atât efectul este mai puternic;
• 44px - raza umbrei este, de asemenea, direct proporțională;
• # 333333 - culoarea în care este pictată umbra.

Ultimii trei parametri sunt opționali și pur și simplu nu pot fi indicați pe linie, adică {box-shadow: 10px 13px-} - această linie nu este greșită (culoarea umbrei va fi identică cu culoarea textului din bloc).

Astfel, crearea unei umbră pe paginile site-ului dvs. nu este dificilă, dar câte efecte pot fi create de ochiul dvs.! Asigurați-vă copilului mai unic, unic, deoarece fiecare detaliu mic, fiecare detaliu este important în design. Aici, se pare, nimic deosebit, dar este mult mai interesant și atractiv.

Să aruncăm o privire la câteva exemple despre modul în care arată umbra blocului CSS, în funcție de cod:

1. {box-shadow: 25px 25px;} - CSS-shadow cu un decalaj de 25 de pixeli.
2. {box-shadow: 25px 25px 10px;} - CSS-shadow cu decalare de 25 de pixeli și neclaritate de 10 pixeli.
3. {Box-umbra: 25px 25px 10px 5px;} - CSS-umbră de offset axele 25 pixeli, estompa muchiile 10 pixeli și o rază predeterminată de 5 pixeli
4. {Box-umbra: 25px 25px 10px 5px # 9e9e9e-} - CSS-umbră de offset axele 25 pixeli, încețoșarea margini 10 pixeli, specificați o rază de 5 pixeli și culoare.

Efecte de umbre

Pentru a crea umbre mai frumoase, elegante, originale, există efecte diferite. Poți să faci o umbră interioară. Pentru aceasta este suficient să specificați "inset" înainte de parametri înaintea parametrilor, atunci descrierea parametrilor va merge ca de obicei:

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

Este posibil să se pună mai multe umbre sub bloc cu parametri absolut diferiți, în codul pe care ei (umbrele) sunt enumerați printr-o virgulă:

{Box-umbra: -20px -10px 11px 15px # 800080, -50px -40px 5px 10px # daa520, 20px 10px 11px 15px # 0700f9, 50px 40px 5px 10px # ffa500}.

Imagini umbrite

În plus față de blocuri pe site cu siguranta va fi poze, fotografii, fundaluri - toate aceste elemente, de asemenea, arata mult mai interesant cu umbre. Puteți desena imagini în editorii de pre-imagine și pentru a le lipi pe o pagină deja cu umbre. Dar, în primul rând, nu este întotdeauna posibil, din diverse motive, inclusiv din cauza lipsei de competențe în lucrul cu grafica, în al doilea rând, se adaugă orice manipulare a imaginii lui, „greutate“, și o astfel de imagine ar putea încetini pagină se încarcă. În acest caz, puteți face o imagine CSS-umbră.

Soluția cea mai simplă și cea mai corectă din punct de vedere sintactic pentru această problemă este crearea unui bloc, fundalul în care este imaginea. Apoi, faceți umbrele necesare pentru bloc și acestea sunt afișate pe fundalul imaginii:

• .bloc1 {box-shadow: inset 0 0 11px 9px # 9e9e9e- lățime: 480px; înălțime: 360px; fundal: url (imagini / charlize_theron_2.jpg) 0 0 nu-repeta-}

În acest exemplu, vom crea o umbră interior fără decalaj axelor, cu raza de neclaritate, culoare definită, înălțimea și lățimea blocului, și fundal (background) numit kuartinku. Ca rezultat, am obținut o imagine cu o umbră interioară.

Sunt de acord, pentru a crea umbre cu ajutorul codului CSS este destul de simplu, în același timp fascinant, și cel mai important - o lecție utilă.