5 Proprietăți CSS pe care trebuie să le cunoașteți

Există proprietăți CSS, cum ar fi imagini de fundal, imagini de frontieră, mascare și tăiere proprietăți, cu care puteți adăugați direct imagini la paginile web și controlul comportamentului acestora. Cu toate acestea, există, de asemenea, mai puțin de menționat proprietățile CSS legate de imagine lucrează la imaginile adăugate cu Etichetă HTML, care modul preferat de a adăuga imagini la paginile web.

Descrierea postului pentru aceste ultime proprietăți variază de la controlul umbrei imaginii la stabilind claritatea, ne ajuta sa controlam mai bine aspectul si pozitia imaginilor adaugate cu etichetă. Să le vedem unul câte unul.

1. Ascuțiți imaginile cu image-redare

Atunci când o imagine este suprascrisă, browser-ul netezeste imaginea, așa că nu arată pixelat. Dar, în funcție de rezoluția imaginii și a ecranului, aceasta ar putea să nu fie cea mai bună în orice moment. Puteți controla acest comportament al browserului cu image-redare proprietate.

Această proprietate bine susținută controlează algoritmul utilizat pentru a scala o imagine. Cele două valori principale sunt clare-margini și pixelat.

clare-margini valoare menține contrastul de culoare între pixeli. Cu alte cuvinte, nu se face nici o umplere a imaginilor, care excelent pentru opera de arta pixel.

Cand pixelat este folosit, pixelii din apropiere ai unui pixel s-ar putea ia în considerare aspectul, făcându-le să pară ca împreună formând un pixel mare, excelent pentru ecrane cu rezoluție ridicată.

Dacă continuați să vă uitați atent la marginile de flori din GIF de mai jos, puteți vedea diferența dintre un obișnuit și un a pixelat imagine.

 img redarea imaginilor: pixelate;  

2. Întindeți imaginile cu obiect-fit

conține, acoperi, completati valorile sunt toate cunoscute, le folosim pentru background-size proprietate care controlează modul în care o imagine de fundal umple elementul de care aparține. obiect-fit proprietatea este destul de asemănătoare cu ea, așa cum determină și ea modul în care dimensiunile imaginii se află în interiorul containerului.

conține valoare conține imaginea din containerul său. acoperi face același lucru, dar dacă raportul de aspect al imaginii și al containerului nu se potrivește, imaginea este tăiată. completati determină imaginea întinde și umple recipientul. scară jos alege cea mai mică versiune a imaginii a afișa.

 
  #container width: 300px; înălțime: 300px;  img lățime: 100%; înălțime: 100%; obiect: conține;  

3. Schimbați imaginile cu obiect poziția

În mod similar cu completarea background-position proprietatea background-size, există un obiect poziția proprietate pentru obiect-fit, de asemenea.

obiect-fit proprietate mișcă o imagine în interiorul unui container de imagine la coordonatele date. Coordonatele pot fi definite ca unități de lungime absolută, unități de lungime relativă, Cuvinte cheie (top, stânga, centru, fund, și dreapta), sau a o combinație validă a acestora (top 20px dreapta 5px, centru dreapta 80px).

 
  #container width: 300px; înălțime: 300px;  img lățime: 100%; înălțime: 100%; obiect-poziție: 150px 0;  

4. Poziționați imaginile cu vertical-align

Adăugăm uneori (care sunt în linie prin natura), lângă șiruri de text pentru informații suplimentare sau decorațiuni. În acest caz, alinierea textului și a imaginii în poziția dorită poate fi un pic dificil - dacă nu știți ce proprietate să utilizați.

vertical-align proprietatea este nu exclusiv la celulele de masă singure. De asemenea, poate alinia un element in linie într-o cutie inline și, astfel, poate fi utilizat pentru aliniați o imagine într-o linie de text. Este nevoie de un număr corect de valori care pot fi aplicate unui element inline, deci aveți mai multe opțiuni de alegere.

 
 PDF  
 

5. Imagini umbrite cu filtru: drop-shadow ()

Atunci când este folosit în texte și cutii, umbrele pot adăuga viață unei pagini web. Același lucru este valabil și pentru imagini. Imagini cu forme de bază și fundaluri transparente pot beneficia de umbra Filtrul CSS.

Argumentele sale sunt similar cu valorile proprietăților CSS legate de umbră (text-shadow, box-shadow). Primele două reprezintă distanta verticala si orizontala între umbre și imagine, al treilea și al patrulea sunt estompa si raza de raspandire a umbrei, iar ultima este culoarea umbrei.

Doar ca text-shadow, umbra creează, de asemenea, o umbră care este modelate obiectului care aparține. Deci, când este aplicată unei imagini, umbra are forma porțiunii vizibile a imaginii.

 img filtru: drop-shadow (albastru 0 0 5px);  

Citiți și: Reflecția imaginii CSS3 [Sfaturi pentru CSS3]