Rounded Corners And Shadows Untuk Images Menggunakan CSS

Berikut adalah beberapa gaya perbatasan yang unik yang dapat Anda terapkan untuk gambar blogger dengan menggunakan properti border-radius dan mendefinisikan baik keempat sudut secara bersamaan atau menerapkan perbatasan bulat hanya untuk beberapa dari mereka. 

Salah satu keuntungan dari CSS3 adalah bahwa kita dapat menerapkan batas bulat tanpa hal-hal rumit terlalu banyak dan salah satu pilihan akan menggunakan tepi ini atau perbatasan untuk gambar dalam posting blog, yang kita juga dapat menambahkan beberapa efek melayang-layang seperti shading dan bulat perbatasan disertai dengan transisi. 

Catatan: jika Anda membutuhkan informasi lebih lanjut tentang cara menambahkan sudut dibulatkan pada gambar, ikuti link ini: 
- Dasar-dasar CSS. Cara Mendaftar Rounded Corners On Images # 1 
- Dasar-dasar CSS. Cara Mendaftar Rounded Corners On Images # 2 

Berikut adalah beberapa contoh dari perbatasan ini dan bagaimana gambar berperilaku ketika Anda membawa atas mereka. 
Jika Anda ingin menggunakan salah satu dari gaya ini, hanya menyalin kode di bawah gambar, kemudian pergi keTemplate, klik pada tombol Edit HTML dan paste kode sebelum]]> </ b: skin> (CTRL + F untuk menemukannya ) 

 . Post-body img {
border: 0;
padding: 0;
-Moz-transition: all 1s;
-Webkit-transition: all 1s;
-O-transition: all 1s;
}
. Post-body img: hover {
box-shadow: 0px 0px 15px # 000; / * Shadow * /
border-radius: 50%; / * border Rounded * /
-Moz-transition: all 1s;
-Webkit-transition: all 1s;
-O-transition: all 1s;
kursor: pointer;
}

 . Post-body img {
background: # FFF; / * warna latar belakang di sekitar gambar * /
padding: 15px; / * ruang antara perbatasan dan gambar * /
-Moz-transition: all 1s;
-Webkit-transition: all 1s;
-O-transition: all 1s;
}
. Post-body img: hover {
box-shadow: 0px 0px 15px # 000; / * Shadow * /
border-radius: 0% 50%; / * border Rounded * /
-Moz-transition: all 1s;
-Webkit-transition: all 1s;
-O-transition: all 1s;
kursor: pointer;
}

 . Post-body img {
background: # FFF; / * warna latar belakang di sekitar gambar * /
padding: 15px; / * The Space Between Border dan Gambar * /
border-radius: 50% 0; / * border Rounded * /
box-shadow: 0px 0px 15px # 000; / * Shadow * /
-Moz-transition: all 1s;
-Webkit-transition: all 1s;
-O-transition: all 1s;
}
. Post-body img: hover {
border-radius: 0; / * ini menghilangkan kebulatan perbatasan (nilai 0) * /
-Moz-transition: all 1s;
-Webkit-transition: all 1s;
-O-transition: all 1s;
kursor: pointer;
}

 . Post-body img {
box-shadow: 0px 0px 15px # 000; / * Shadow * /
border-radius: 50%; / * border Rounded * /
border: 0;
padding: 0;
-Moz-transition: all 1s;
-Webkit-transition: all 1s;
-O-transition: all 1s;
}
. Post-body img: hover {
box-shadow: 0; / * Dengan ini kita menghapus bayangan (nilai 0) * /
border-radius: 0; / * ini menghilangkan kebulatan perbatasan (nilai 0) * /
-Moz-transition: all 1s;
-Webkit-transition: all 1s;
-O-transition: all 1s;
kursor: pointer;
}

 . Post-body img {
border-radius: 45% / 20%; / * border Rounded * /
box-shadow: 0px 0px 15px # 000; / * Shadow * /
padding: 0;
-Moz-transition: all 1s;
-Webkit-transition: all 1s;
-O-transition: all 1s;
}
. Post-body img: hover {
border-radius: 0; / * ini menghilangkan kebulatan perbatasan (nilai 0) * /
-Moz-transition: all 1s;
-Webkit-transition: all 1s;
-O-transition: all 1s;
kursor: pointer;
}

Jadi efek ini akan berlaku untuk semua gambar yang diunggah ke posting Blogger Anda. Tetapi jika Anda ingin menerapkannya hanya pada gambar tertentu kemudian mengubah img post-body dengan bulat dan img post-body:... Hover dengan bulat:. Membawa 
Kemudian tambahkan pemilih kelas bulat dalam kode gambar itu: 

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

Ini hanya beberapa contoh, namun Anda dapat memodifikasi mereka kapan saja dengan menambahkan atau menghapus gaya CSS lebih, itu tergantung pada selera atau kebutuhan setiap orang. Tapi seperti yang Anda lihat, kita dapat membuat foto terlihat jauh lebih menarik dan ini telah dilakukan hanya dengan CSS ;)