Mulți oameni folosesc CSS pentru a regla textul, schimbând fontul, culoarea, dimensiunea și multe altele. Dar un lucru pe care mulți oameni îl uită adesea este că puteți utiliza și CSS cu imagini.
Schimbarea imaginii în sine
CSS vă permite să ajustați modul de afișare a imaginii pe pagină. Acest lucru poate fi foarte util pentru menținerea consecvenței paginilor. Setând stiluri pentru toate imaginile, creați un aspect standard pentru imaginile dvs. Unele dintre lucrurile pe care le puteți face:
- Adăugați o margine sau un contur în jurul imaginilor
- Eliminați marginea colorată din jurul imaginilor legate
- Reglarea lățimii și / sau înălțimii imaginilor
- Adăugați o umbră
- Rotiți imaginea
- Schimbați stilurile când imaginea este planată
Oferirea unei margini pentru imagine este un loc minunat pentru a începe. Dar ar trebui să luați în considerare mai mult decât simpla margine - gândiți-vă la întreaga margine a imaginii și reglați marginile și căptușeală de asemenea. O imagine cu o margine neagră subțire arată frumos, dar adăugarea unor umpluturi între margine și imagine poate arăta chiar mai bine.
Este o idee bună conectați întotdeauna imagini nedecorative, cand este posibil. Dar când faceți acest lucru, amintiți-vă că majoritatea browserelor adaugă o margine colorată în jurul imaginii. Chiar dacă utilizați codul de mai sus pentru a schimba chenarul, linkul îl va suprascrie, cu excepția cazului în care eliminați sau modificați chenarul de pe link. Pentru a face acest lucru, ar trebui să utilizați o regulă pentru copii CSS pentru a elimina sau schimba marginea din jurul imaginilor legate:
De asemenea, puteți utiliza CSS pentru a modifica sau seta înălțimea și lățimea imaginilor. Deși nu este o idee grozavă să utilizați browserul pentru a ajusta dimensiunile imaginilor din cauza vitezei de descărcare, acestea devin mult mai bune la redimensionarea imaginilor, astfel încât să arate în continuare bine. Și cu CSS puteți seta imaginile la o lățime sau înălțime standard sau chiar setați dimensiunile pentru a fi relative la container.
Nu uitați, când redimensionați imaginile, pentru cele mai bune rezultate, ar trebui să redimensionați doar o singură dimensiune - înălțimea sau lățimea. Acest lucru vă va asigura că imaginea își păstrează raportul de aspect și, prin urmare, nu pare ciudat. Setați cealaltă valoare la auto sau lăsați-o să spuneți browserului să păstreze raportul de aspect constant.
CSS3 oferă o soluție la această problemă cu noile proprietăți potrivire obiect și poziția obiectului. Cu aceste proprietăți, veți putea defini înălțimea și lățimea exactă a imaginii și modul în care trebuie tratat raportul de aspect. Acest lucru ar putea crea efecte de tip letterboxing în jurul imaginilor sau decuparea pentru a face ca imaginea să se potrivească cu dimensiunea necesară.
Există și alte proprietăți CSS3 care sunt bine acceptate în majoritatea browserelor pe care le puteți utiliza și pentru a vă modifica imaginile. Lucruri precum umbre, colțuri rotunjite și transformări pentru a se roti, înclina sau mișca imaginile funcționează chiar acum în majoritatea browserelor moderne. Puteți utiliza apoi tranziții CSS pentru a face ca imaginile să se schimbe atunci când sunt trecute deasupra sau când se face clic sau chiar după o perioadă de timp.
Utilizarea imaginilor ca fundaluri
CSS facilitează crearea de fundaluri fanteziste cu imaginile dvs. Poti adăugați fundaluri la întreaga pagină sau doar la un anumit element. Este ușor să creați o imagine de fundal pe pagină cu imagine de fundal proprietate:
Schimba corp selectați un anumit element de pe pagină pentru a pune fundalul pe un singur element.
Un alt lucru distractiv pe care îl puteți face cu imaginile este să creați o imagine de fundal care să nu deruleze cu restul paginii - ca un filigran. Pur și simplu folosiți stilul background-attachment: fix; împreună cu imaginea de fundal. Alte opțiuni pentru fundalurile dvs. includ transformarea lor în dale doar pe orizontală sau pe verticală folosind fundal-repetare proprietate. Scrie fundal-repetare: repetare-x; pentru a țiglă imaginea pe orizontală și fundal-repetare: repetare-y; a țiglă vertical. Și vă puteți poziționa imaginea de fundal cu fundal-poziție proprietate.
Și CSS3 adaugă mai multe stiluri și pentru fundalurile dvs. Puteți întinde imaginile pentru a se potrivi cu orice fundal de dimensiune sau puteți seta imaginea de fundal la scară cu dimensiunea ferestrei. Puteți schimba poziția și apoi tăia imaginea de fundal. Însă unul dintre cele mai bune lucruri despre CSS3 este că acum puteți stratifica mai multe imagini de fundal pentru a crea efecte și mai complicate.
HTML5 ajută imaginile de stil
FIGURA elementul în HTML5 ar trebui să fie plasat în jurul oricăror imagini care pot sta singure în document. O modalitate de a vă gândi la aceasta este dacă imaginea ar putea apărea într-un apendice, atunci ar trebui să se afle în interiorul FIGURA element. Puteți utiliza apoi acel element și FIGCAPTION element pentru a adăuga stiluri imaginilor dvs.