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/AVvXsEjDo7Mt1KzExfAT57O89cQuBCwZl9eIvYVVtGza1mj9qjqED4aRQz_-DyzXGkf-2pgLCqBCRWcFSiiCJyw6QnnxJtn10_e9VVbykNSoTc7pUKSkQ8ODsIPN3ogT8WggMzEHZRpsWN7Ztk-v/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/AVvXsEjDo7Mt1KzExfAT57O89cQuBCwZl9eIvYVVtGza1mj9qjqED4aRQz_-DyzXGkf-2pgLCqBCRWcFSiiCJyw6QnnxJtn10_e9VVbykNSoTc7pUKSkQ8ODsIPN3ogT8WggMzEHZRpsWN7Ztk-v/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDo7Mt1KzExfAT57O89cQuBCwZl9eIvYVVtGza1mj9qjqED4aRQz_-DyzXGkf-2pgLCqBCRWcFSiiCJyw6QnnxJtn10_e9VVbykNSoTc7pUKSkQ8ODsIPN3ogT8WggMzEHZRpsWN7Ztk-v/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.