Efek Dan Border Untuk Gambar

Lihat demo,mouse over ke gambar



Klik sini jika ingin lihat efek dan border untuk dipilih

Langkah pemasangan:

Pergi ke edit html,cari kod:

]]></b:skin>

Dan pastekan kod pilihan korang di atasnya


.rounded img {
padding:15px; /* Espacio entre la imagen y el borde */
background:#FFF; /* Color de fondo que se ve entre el espacio */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.rounded:hover {
border-radius: 0% 50%; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}



.rounded1 {
border-radius: 50% 0;
box-shadow: 0px 0px 15px #000;
padding:15px;
background:#FFF;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.rounded1:hover {
border-radius:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}



.rounded2 {
padding:0;
border:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.rounded2:hover {
border-radius: 50%;
box-shadow: 0px 0px 15px #000;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}



.rounded3 {
border-radius: 50%;
box-shadow: 0px 0px 15px #000;
padding:0;
border:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.rounded3:hover {
box-shadow: 0;
border-radius: 0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}



.rounded4 {
border-radius: 45% / 20%;
box-shadow: 0px 0px 15px #000;
padding:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.rounded4:hover {
border-radius: 0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}


Dan,untuk mengaktifkan efek tersebut,sila buat begini:


<img class="rounded" src="URL gambar" />


gantikan rounded dgn rounded1,2,3 atau 4 bergantung pada pilihan.

Jika ingin keseluruhan gambar di blog mempunyai efek tersebut,hanya perlu gantikan setiap perkataan rounded dengan perkataan post-body img .Begitu juga dengan rounded1,2,3,4.

Tetapi perlu diingat,hanya satu efek saja yang boleh dipilih jika ingin keseluruhan gambar di blog mempunyai salah satu efek tersebut.Efek akan diaktifkan secara automatik.

Ulasan

Catatan popular daripada blog ini

KOLONEL SANDERS-PENGASAS KFC

Blog Tutorial:Aneka Gambar Untuk Header Bertukar-Tukar