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.
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.
Post a Comment:
Nota: Hanya ahli blog ini sahaja yang boleh mencatat ulasan.