IBX58B0693E37B6C

KONTAK SAYA

Facebook

TELUSURI

MULAI DARI SINI

Home Daftar Isi

Home » » Cara Membuat Border Image Dengan CSS3 Stylish Effect

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/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.


0 Saran Dan Kritik:

Posting Komentar

loading...
 
© 2010-2015 Harian Islam Agama Ku
Desain by OTIN | Islam Agamaku | Powered by Harian Islam