2017 altex.ro

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

4 comentarios:

  1. Super! :))
    mi-a placut si meniul ala vertical cu culori din bara din dreapta a blogului de proba. e vreo postare despre tipul ala de meniu?
    multumesc.

    RăspundețiȘtergere
  2. Salut Tina, scriptul pentru acel meniu vertical nu mai este disponibil imi pare rau,daca eventual voi gasi altul il voi posta pe blog.

    RăspundețiȘtergere
  3. Pentru putin Tina si o sa te anunt in privita unui nou script pentru meniu vertical.

    RăspundețiȘtergere

Bine ai venit!
In continuare poti lasa mesajul tau.

Multumesc