Memperindah Box dengan Outline dan Outline CSS3 Offset Property

Outline-offset Property kini juga sudah terdukung dengan baik oleh Opera, Mozilla Firefox, Safari, Google Chrome dan SeaMonkey. Banyak desain box akan menjadi lebih indah dengan tingkat kompabilitas browser yang semakin baik terhadap CSS3 khususnya outline dan outline offset property. Secara sederhana bisa digambarkan bahwa outline adalah garis terluar sebuah box. Jadi outline ini posisinya di sebelah luar border, sedang outline offset merupakan jarak (bidang) antara border dan garis terluar (outline). Anda bisa melihatnya melalui D E M O yang ada di bawah.

D E M O - Outline-offset Property

<style type="text/css">
.box_outline{
width:400px;
height:200px;
background:#eee;
margin:20px auto;
padding:10px;
border:2px solid #999;
border-radius:10px;
outline:2px solid #555;
outline-offset:8px;
-moz-outline-radius:15px; /* outline-radius sementara ini baru mozilla yang kompatible */
box-shadow:0 0 12px #000;
}
</style>

<div class="box_outline"></div>

1. Outline dituliskan seperti halnya ketika menuliskan border.
   - Outline-style terdiri atas : solid, inset, outset, dashed, dotted … dst.
   - Tebal Outline (outline-width) biasa dituliskan dalam px (pixel)
   - Warna outline (outline-color) bisa dalam bentuk teks (seperti : black, red … dst) atau kode warna seperti halnya #000 (untuk warna hitam) dan rgba color (contoh: rgba(0,0,0,0.5)).
2. Penulisan dasar outline sbb: outline:[outline-style] [outline-color] [outline-width];
   outline-offset : dituliskan dalam satuan px (pixel) (semakin besar maka jarak border dan outline akan semakin lebar).
3. Outline-radius sementara ini hanya kompatibel di Mozilla Firefox dan dituliskan dengan kode sbb: -moz-outline-radius:…px;

Please rate this article: