Reflexie Imagine folosind CSS

In cazul in care doriti sa mai experimentati cate ceva din capabilitatile browserelor WebKit-based va propunem sa incercati -webkit-box-reflect, este o clasa CSS cu ajutorul careia puteti obtine reflexii ale imaginilor folosind doar cateva linii de cod CSS.
Pentru a putea vizualiza efectul obtinut este nevoie de un WebKit-based browsers cum ar fi Safari sau Chrome.

Am adaugat mai jos doua exemple cu codul CSS folosit pentru a obtine reflexia imaginilor:

Reflexie sub imagine folosind CSS

Code block

.reflexie_jos
        {
	-webkit-box-reflect:below 0px
	-webkit-gradient(linear, left top, left bottom, from(transparent),
	color-stop(0.5, transparent), to(white));
	}

Reflexie in dreapta imagini folosind CSS

Code block

.reflexie_dreapta
	{
	-webkit-box-reflect:right 0px
	-webkit-gradient(linear, left top, right bottom, from(transparent),
	color-stop(0.3, transparent), to(white));
	}

Daca vreti sa vedeti un exemplu functional inainte de a incerca sa creati propriile voastre “CSS Image reflection” gasiti aici un demo complet!

Tags: CSS, efecte css, WebKit