Efect de margine rotunjita a unei imagini

Un avantaj utilizand CSS3 este, aplicarea pe imagini a efectului de rotunjire (sunt efecte foarte interesante pe care le gasesti mai jos), fara a ne complica prea mult, atata timp cat el se vedea atunci cand folosim un browser modern, pentru ca in browsere mai vechi aceste efecte nu sunt recunoscute.

Efectul de margine rotunjita o da linia border-radius, si se poate aplica la unele colturi.

In continuare veti vedea cateva exemple de margini, si cum se comporta atunci cand treci peste ele cu mouse-ul.

Poti utiliza efectul, prin simpla copiere a codului. Pentru adaugare in sablonul blogului tau mergi la Editati HTML si cauti linia de cod ]]></b:skin> si exact inainte ei adaugi unul din codurile de mai jos.

.post img {
padding:15px; /* spatiu intre imagine si margine */
background:#FFF; /* culoarea care se vede in spatiu */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post img:hover {
border-radius: 0% 50%; /* margine rotunda */
box-shadow: 0px 0px 15px #000; /* culoare umbra */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

Intr-o postare, adaugi imaginea care doresi sa apara sub acest efect folosint urmatorul link:

<img src="URL imagine" />

Vezi aici cum apare efectul Blog de proba