Minggu, 24 November 2013
Browse Manual »
Wiring »
border
»
cara
»
css3
»
dengan
»
effect
»
image
»
membuat
»
stylish
»
Cara Membuat Border Image Dengan CSS3 Stylish Effect
Cara Membuat Border Image Dengan CSS3 Stylish Effect
Cara Membuat Border Image Stylish Dengan CSS3 - Supaya gambar atau image pada postingan atau artikel terlihat bagus, kita dapat menambahkan bingkai atau border pada image/gambar tersebut. Pada tips membuat border image dengan menggunakan CSS ini kita sedikit memberikan sentuhan stylish effect dengan opacity sehingga efeknya bingkai gambar/image akan tampak seperti dibuat menggunakan aplikasi Photoshop. Border gambar dengan CSS ini juga dapat sobat gunakan untuk photo profil di sidebar.
Cara membuat border image dengan menggunakan CSS :
1. Upload dulu gambar yang mau digunakan. Jika gambar yang mau digunakan sudah ada pada postingan, copy link gambar/image tersebut dengan cara klik kanan dan pilih Copy Image Location.
2. Dari dashboard blogger masuk ke menu Posting > Edit Entri dan pilih Edit HTML disebelah tulisan Compose.
3. Image yang diupload di blogger/blogspot biasanya kodenya akan terlihat seperti di bawah ini :
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5SZhMTTW0mnR7XQZFdAk71CsKD0uf4NJeZDFdQsSELIHd1RQlGg8D5lYqvrcKGzffB9m11ypwUyo5bUy2otai38UCs9UzCeCHc5DyBynK6RYMWrI4x3_R-D1U2qL8fzajZD1nO_5SmwSJ/s1600/AVATAR+KU.png" imageanchor="1" style="clear: left;
float: center; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5SZhMTTW0mnR7XQZFdAk71CsKD0uf4NJeZDFdQsSELIHd1RQlGg8D5lYqvrcKGzffB9m11ypwUyo5bUy2otai38UCs9UzCeCHc5DyBynK6RYMWrI4x3_R-D1U2qL8fzajZD1nO_5SmwSJ/s200/AVATAR+KU.png" width="181"/></a></div>
Dan tampilan gambar aslinya akan terlihat seperti ini pada postingan :
4. Nah kode membuat border untuk gambar/image diatas adalah seperti dibawah ini :
<div style="width: Apx;height: Bpx;padding: 0px;border-width: 3px;border-style: solid;border-color: #555;background-image:
url(http://LINK-IMAGE-ATAU-GAMBAR); margin: 0 auto;">
<div style="border-right: 10px solid rgb(255, 255, 255);border-width: 10px;border-style: solid;border-color: rgb(255, 255, 255);opacity:
0.5;width: Cpx;height: Dpx;">
</div>
</div>
Keterangan :
· A dan B adalah lebar dan tinggi gambar aslinya yaitu width=181px dan height=200px.
· C dan D adalah lebar dan tinggi gambar setelah nanti ditimpa atau dikurangi border. Pada contoh ini kita mengambil pengurangan ukuran sebesar 20px, sehingga C=width=161pxdan D=height=180px.
· Untuk mengatur penempatan gambar di kiri , tengah atau kanan tinggal tambahkan pada CSS float: left; , float: center; atau float: right;
5. Ganti tulisan link warna biru dengan link warna merah, sehingga kode lengkap gambar menjadi :
<div style="width: 181px;height: 200px;padding: 0px; float: center;border-width: 3px;border-style: solid;border-color: #555;background-image:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5SZhMTTW0mnR7XQZFdAk71CsKD0uf4NJeZDFdQsSELIHd1RQlGg8D5lYqvrcKGzffB9m11ypwUyo5bUy2otai38UCs9UzCeCHc5DyBynK6RYMWrI4x3_R-D1U2qL8fzajZD1nO_5SmwSJ/s200/AVATAR+KU.png); margin: 0 auto;">
<div style="border-right: 10px solid rgb(255, 255, 255);border-width: 10px;border-style: solid;border-color: rgb(255, 255, 255);opacity:
0.5;width: 161px;height: 180px;">
</div>
</div>
6. Hasil akhir gambar/image yang sudah diberi border dan opacity menjadi seperti dibawah ini :
Bagaimana sobat, setelah image/gambar kita berikan border jadi kelihatan lebih bagus bukan. Tips ini sederhana namun saya berusaha menjelaskan langkah-langkahnya sedetil mungkin supaya juga mudah dipahami buat yang masih newbie :D sekali pun. Semoga trik cara membuat border image/gambar dengan menggunakan CSS ini bisa membantu anda berkreasi membuat gambar-gambar keren di blog sobat.
Langganan:
Posting Komentar (Atom)
Tidak ada komentar:
Posting Komentar