Informasi Tips Blog Blogger | Seputar Kehidupan Blogger | Software | Games | Gadgets

Cara Membuat Border Image Dengan CSS3 Stylish Effect

Posted by Herly Deflin 0 komentar


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="http://1.bp.blogspot.com/-gMRVV9B6ALc/Td0ueBZq1aI/AAAAAAAAALU/O36mLpQNya0/s1600/AVATAR+KU.png" imageanchor="1" style="clear: left;
float: center; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="http://1.bp.blogspot.com/-gMRVV9B6ALc/Td0ueBZq1aI/AAAAAAAAALU/O36mLpQNya0/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=161px dan 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(http://1.bp.blogspot.com/-gMRVV9B6ALc/Td0ueBZq1aI/AAAAAAAAALU/O36mLpQNya0/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.

0 komentar:

Post a Comment