A face prin intermediul css umbra unitate caseta, drop-umbra

Vă urez bun venit pe blogul meu. Astăzi vă voi arăta modul în care lucrurile se fac în sintaxă bloc css umbră discutat în detaliu proprietățile box-umbra, și ce efecte le puteți crea cu ea. Spre sfârșitul articolului, vă voi arăta o altă proprietate - drop-umbra. care, în unele privințe chiar mai abruptă

Umbre în css

Deci, în primul rând să se ocupe cu proprietatea box-shadow. Ea are următoarea sintaxă:

Acum este timpul să se uite la câteva exemple de umbre și ce efecte o puteți realiza cu ea.

ușor tridimensionalitatea

Foarte des umbra folosit pentru a face unitate tridimensională. Toate operațiunile am efectua într-un document HTML gol, care este creat de un singur div bloc. Acestea sunt stilurile eu l-am definit:

Datorită astfel de ușor mutat și umbre ușor încețoșate pare un mic bloc de convexitate.

strălucire ușoară

Îmi place foarte mult efectul că există o impresie ca și în cazul în care unitățile de lumină. El a realizat foarte simplu:

Expune toate pe 0, cu excepția neclaritate. Culorile indică la fel ca ai nevoie. În consecință, neclarități, cu atât mai evident va străluci. De exemplu, atunci când 25 pixeli încețoșa:

cadru multiple

De obicei, blocurile de cadru este dat de proprietăți de frontieră. dar are câteva dezavantaje - un astfel de cadru adaugă dimensiunile blocului, și nu puteți pune câteva cadre doar unul.

Box-umbra vă permite să simuleze pe deplin cadru. Și vă reamintesc că umbrele pot adăuga un număr nelimitat, astfel încât să puteți face orice număr de cadre prin simpla adăugare de fiecare nouă umbră de virgulă, cu o întindere mare. Dacă se dorește, ele pot fi încă un pic neclară.
Aici este un cod pentru a adăuga la elementul de graniță triplă:

Rețineți că umbra este pe deplin corespunde elementului - în cazul în care este rotund, iar umbra rundă de sine.

Ia-aici este o astfel de formă ovală, cu o umbră. În cazul în care înălțimea și lățimea blocului sunt aceleași, unitatea ar fi rotundă, la fel ca umbra lui.

Drop-umbra

Ei au fost toate exemple foarte, foarte simple, umbre pentru blocuri. Ce-ar fi să adăugați o umbră la o imagine png? După cum vă amintiți, box-umbra poate face blocuri doar o umbră pătrat. Desigur, elemente pot fi transformat dintr-un pătrat sau dreptunghiular, dar toate aceleași oportunități box-shadow sunt limitate. Și aici vine la filtrul de ajutor css numit drop-umbră.

Am găsit pe imaginea netă în format png. Acum am să-l pun pe pagina folosind tag-ul img.

Pentru a prezenta la locul de muncă, este necesar să adăugați versiunea furnizor prefix -webkit (dacă lucrați în Google Chrome, sau Yandex Browser). Pentru alte browsere necesare, respectiv, alte prefixe.

Deci, iată ce sa întâmplat:

Umbra repetă conturul imaginii! Acest lucru nu este realizat cu cutie-umbra. Aș dori să se constate că, în meniul drop-umbra nu acceptă stretchingul, dar estompa suporturi.

EXEMPLU utilizarea avansată a umbrelor

Acum o oră analiza exemplu umbre mai complexe. O să-ți arăt cum puteți face unitatea ridicată pe colțuri css pur.

În HTML a crea o unitate cu clasa ugolki și UG clasa auxiliare, prin care umbrele vor fi adăugate la tot ce este omenesc românesc a fost clar.

Rețineți că culorile utilizate formatul de înregistrare RGBA. care vă permite să faceți umbre ascuțite, care sunt, în general, foarte bine percepută de ochi. Dar până acum ne-am ridicat peste, ci doar un bloc cu o strălucire mică. Cornere vom adăuga folosind pseudo.

Adăugarea tuturor această coadă la codul nostru css-fișier. Acum, totul ar trebui să funcționeze. Sunteți liberi să modifice rotația umbrelor și culoare.

Ou css pur

Am experimentat aici și urmăriți oul avansat Aici am să vă împărtășesc codul:

Prin urmare, există, de asemenea, a înregistrat o versiune prefixe furnizor de proprietate pentru a lucra în cele mai populare browsere.

Se pare ca un ou, nu?

Dar ce se întâmplă dacă nu doriți să scrie propriul lor cod pentru umbrele? Utilizați generatorul vizual! Pe una dintre ele am scris aici.

Ați putea fi, de asemenea, interesat în

Astăzi articol pe un astfel de subiect mic, dar poate cineva dintre voi va fi de ajutor. în

Astăzi, vă sugerez să fac un formular de căutare frumos pe CSS. Sunt de acord, formularele de înregistrare standard de

Buna ziua. Un foarte mult timp nu a scrie mesaje pe tema muncii html / css. Recent, abia a început

Toate binevenite. Astăzi, voi scrie un articol foarte interesant despre cum se face în css

Vă salut. Se pare că, pe paginile de blog-ul său, nu am descris modul de a face