Iso Web Id Tutorial Komputer
Related Articles
Sebelum dikeluarkannya CSS3 beberapa browser memberikan tambahan – tambahan fungsi untuk mempermudah kerja developer misalnya
untuk Radius kalau di firefox kita kenal -moz-border-radius, Chrome, opera dan safari -webkit-border-radius, itu hanya salah satu saja masih banyak lagi sebenarnya. CSS3 menyeragamkan beberapa fungsi tersebut agar setiap browser untuk mempercepat kerja para developer design websitem Ya mengapa? akan sangat menyita waktu bila harus menghafalkan fungsi – sungsi tambahan untuk tiap – tiap browser.
Pada artikel ini juga kita akan sedikit bermain – main dengan border-radius, bila kebanyakan border-radius digunakan seperti bentuk Frame (sudut melingkat pada kotak) untuk artikel ini kita akan membuat full circle alias Lingkaran untuk menampilkan gambar.
berikut sedikit contoh yang saya buat.
.circle {
display: block;
width: 150px;
height: 150px;
margin: 1em auto;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
border-radius: 99em;
border: 5px solid #eee;
box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);
border-radius: 99em;
-webkit-border-radius: 99em;
-moz-border-radius: 99em;
behavior: url(pie.htc); // saya ambil dari CSS3 Pie untuk browser IE
}
Tampilan imagenya akan seperti gambar dibawah ini.
Cantik bukan tampilannya, bentuk asli imagenya seperti dibawah ini
Gambar sampul buku diatas saya rounded agar terlihat membulat dan cantik, apah bisa digunakan untuk image lain? tentu saja. Memang seharusnya Design Rounded diatas khusus dibuat untuk menampilkan Avatar member berhubung saya tidak punya jadi gambar seadanya yang di tampilan.
Lalu bagaimana cara penerapannya? silahkan lihat detail codenya dibawah
<html>
<head>
<title>Rounded CSS</title>
<style>
.circle {
display: block;
width: 150px;
height: 150px;
margin: 1em auto;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
border-radius: 99em;
border: 5px solid #eee;
box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);
border-radius: 99em;
-webkit-border-radius: 99em;
-moz-border-radius: 99em;
behavior: url(pie.htc);
}
</style>
</head>
<body>
<img src=”sampul-buku.jpg” class=”circle” />
</body>
</html>
Cukup tambahkan Attribute class “circle” sesuai dengan nama class css yang dibuat, Sangat mudah sekali.
Semoga bermanfaat.
