- - Adăugați efectul de umbră la imagini cu generator de coduri automate CSS3

Adăugați efectul de umbră la imagini cu generator de coduri automate CSS3

CSS vă permite să vă stilati paginile web cu ușurințăuşor. Puteți defini peste o sută de stiluri de text într-o singură pagină (bineînțeles că pagina dvs. va apărea ca un cort de circ), însă este vorba despre ușurința și flexibilitatea oferită de utilizarea CSS în paginile web.ThemeShock are un generator de codificatori CSS care vă va ajuta să adăugațiefecte de umbră diferite pentru imaginile dvs. în câteva clicuri simple. Alegeți efectul și scrie codul; efectele pot fi adăugate în partea inferioară, laterală, sus și jos, stânga jos, dreapta jos, dreapta sus și stânga jos sau în colțurile diagonale.

css-shadow-generator_HQ

Înainte de a începe; verificați dimensiunea dvs.imagine (cea la care doriți să adăugați efectul). Generatorul de cod are o limită superioară și inferioară predefinită de 130 - 347px pentru lățimea și înălțimea imaginii. Dacă dimensiunile imaginii dvs. depășesc acest lucru, puteți edita întotdeauna lățimea și înălțimea mai târziu. Codul vă permite, de asemenea, să determinați opacitatea și estomparea umbrei. Nu puteți încărca imaginea dvs. în generatorul de cod, o imagine implicită va fi utilizată, astfel încât să puteți previzualiza efectul.

Din meniul derulant, alegeți ce umbrăefectul care vă place, de fiecare dată când schimbați oricare dintre selectori, este generat un nou cod, astfel încât să vă asigurați că îl utilizați pe cel mai recent. După ce ați ales efectul care vă place, setați lățimea și înălțimea imaginii cu ajutorul barei de defilare orizontală. Folosiți tastele săgeată dreapta și stânga atunci când doriți să butonați puțin butonul. Setați estomparea și opacitatea, iar codul va fi generat. Creșterea sau micșorarea oricăruia dintre acești parametri va crea un cod nou.

Css3 Drop Shadow

După ce totul este setat, copiați codul CSS într-unFișier CSS și numește-l pentru pagina ta web (sau tema). Codul HTML care intră în pagina dvs. web este, de asemenea, generat (este unic pentru fiecare efect pe care îl alegeți din meniul derulant), copiați-l și plasați codul de imagine (img src = "") unde scrie "codul dvs. aici".

Cel mai bun lucru despre acest generator de cod este acelafuncționează și este gratuit. Are restricții de dimensiune pentru imagini, dar pot fi editate din cod. Dacă utilizați o imagine transparentă (precum cea de mai sus), aceasta va oferi un fundal gri plictisitor. Puteți edita culoarea de fundal mai târziu din cod. (Editați linia de fundal a codului: #ccc). Codul oferă, de asemenea, un cadru de 5px tuturor imaginilor, puteți edita și cadrul, dar creșterea și scăderea lățimii va ascunde sau va dezvălui umbra mai mult decât este necesar, astfel încât să rămână cel mai bine.

Accesați ThemeShock CSS Drop Shadow Generator

Comentarii