08 Februari 2012

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.

0 ulasan:

Catat Ulasan

Follow by Email