08 Februari 2012

Efek Dan Border Untuk Gambar

Tiada ulasan:
 
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.

Tiada ulasan:

Catat Ulasan

TERIMA KASIH UNTUK KOMENKOMEN TERBARU

 
© 1986. Aideal Fitri - fitri1986 Malaysian Blogger