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

CSS vă permite să modelați paginile web ușor, foarte 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ți diferite efecte de umbră la 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, jos dreapta, sus dreapta și stânga jos sau în colțurile diagonale.

Înainte de a începe; verificați dimensiunea imaginii dvs. (cea în care doriți să adăugați efectul). Generatorul de cod are limitele predefinite superioare și inferioare 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 efect de umbră 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ă. Utilizaț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.

După ce totul este setat, copiați codul CSS într-un fișier CSS și denumiți-l pentru pagina dvs. web (sau tema). Codul HTML care intră pe 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 imaginii (img src = ”„) unde scrie „codul dvs. aici'.

Cel mai bun lucru despre acest generator de cod este că funcț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