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 atauborder pada image/gambar tersebut. Pada tips membuat border image dengan menggunakan CSS ini kita sedikit memberikansentuhan stylish effect denganopacity sehingga efeknya bingkai gambar/image akan tampak seperti dibuatmenggunakan aplikasi Photoshop. Border gambar dengan CSS ini juga dapat sobat gunakan untuk photo profil di sidebar.

Cara membuatborder image dengan menggunakan CSS :

1.   Upload dulu gambar yang mau digunakan. Jikagambar yang mau digunakan sudah ada pada postingan, copy link gambar/imagetersebut dengan cara klik kanan dan pilih CopyImage Location.

2.   Dari dashboard blogger masuk ke menu Posting > Edit Entri dan pilih EditHTML disebelah tulisan Compose.

3.   Image yang diupload di blogger/blogspot biasanyakodenya akan terlihat seperti di bawah ini :

<divclass="separator" style="clear: both; text-align:center;">

<ahref="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBrawaydS0fNyvzWOOmn7zWfFxjZh5NlyV2AOcZiVYR1QHQTeypQ7gChIJmdviwFo7kyKTTXoa41fGmOswfMvEyvDtRGcWNBtqTk3mvGfT1QQUqveLg9dC2F8GNXISQms1GXFdXen9zk5H/s1600/AVATAR+KU.png"imageanchor="1" style="clear: left;

float:center; margin-bottom: 1em; margin-right: 1em;"><imgborder="0" height="200"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBrawaydS0fNyvzWOOmn7zWfFxjZh5NlyV2AOcZiVYR1QHQTeypQ7gChIJmdviwFo7kyKTTXoa41fGmOswfMvEyvDtRGcWNBtqTk3mvGfT1QQUqveLg9dC2F8GNXISQms1GXFdXen9zk5H/s200/AVATAR+KU.png"width="181"/></a></div>

Dan tampilan gambar aslinya akan terlihat seperti ini padapostingan :

4.   Nah kode membuat border untuk gambar/imagediatas adalah seperti dibawah ini :

<divstyle="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;">

<divstyle="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 yaituwidth=181px dan height=200px.

·        C dan D adalah lebar dan tinggi gambar setelah nantiditimpa atau dikurangi border. Pada contoh ini kita mengambil penguranganukuran 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 :

<divstyle="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/AVvXsEiBrawaydS0fNyvzWOOmn7zWfFxjZh5NlyV2AOcZiVYR1QHQTeypQ7gChIJmdviwFo7kyKTTXoa41fGmOswfMvEyvDtRGcWNBtqTk3mvGfT1QQUqveLg9dC2F8GNXISQms1GXFdXen9zk5H/s200/AVATAR+KU.png);margin: 0 auto;">

<divstyle="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 diberiborder dan opacity menjadi seperti dibawah ini :

Bagaimana sobat, setelah image/gambar kita berikanborder jadi kelihatan lebih bagus bukan. Tips ini sederhana namun saya berusahamenjelaskan langkah-langkahnya sedetil mungkin supaya juga mudah dipahami buatyang masih newbie :D sekali pun. Semoga trik cara membuat border image/gambar dengan menggunakan CSS ini bisa membantu anda berkreasi membuat gambar-gambar keren diblog sobat.