Dalam artikel kali ini saya akan menerangkan cara membuat foto
atau gambar melingkar di web dengan css. Dalam social media kalian pasti pernah
melihat foto atau gambar yang berbentuk tidak biasa, biasanya foto akan
berbentuk kotak atau persegi panjang tetapi sekarang ada juga foto yang
berbentuk lingkarang seperti di aplikasi social media seperti BBM, Whatsapp,
Path. Dan juga websitus seperti google email. Nah sekarang saya akan
menerangkan cara memebuat nya berbasis web.
Langsung saja saya beritahu caranya ya…
Pertama-tama, Buka aplikasi untuk membuat websitus atau
coding. Disini saya menggunakan Adobe Dreamweaver.
Kedua, Tulis kode css nya di <head>…..</head> Seperti berikut :
Penjelasan :
* .backgr = css untuk mengatur background dari gambar/foto.
* .circular-img = css untuk membuat gambar menjadi bulat.
- width:158px;
height:150px; = Untuk mengatur ukuran gamabar.
- border-radius:99em;
= Untuk mengatur lebar/radius lingkarang foto.
- border:1px
solid #089975; = Untuk membuat garis tepi di lingkaran.
- box-shadow:1px 1px 1px 4px
rgb(255,255,255); = Untuk membuat effect cahaya di samping foto.
- padding:4px;
= Untuk mengatur lebar bawah dan atas background dengan foto.
Selanjutnya, tulis code program di <body>….</body>
Dan hasilnya seperti berikut:
Jika anda tidak ingin menggunakan pencahayaan disamping
tinggal hapus “box-shadow:1px 1px 1px 4px rgb(255,255,255);” di cssnya. Maka jadi
nya seperti ini.
Terimakasih semoga bermanfaat…
