Cara Membuat Box dg Outline dan CSS3 Outline Offset Property

Pada postingan kali ini Education for all akan memposting artikel tentang Box dg Outline dan CSS3 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). 

Contoh Penulisan Box dg Outline dan CSS3 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;
    box-shadow:0 0 12px #000;
}
</style>

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

   

Keterangan/Catatan:

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; 
   
   Semoga bisa dipahami dan bermanfaat...

 

The Owner of Education For All Blog hanyalah seorang Blogger pemula namun bila sobat blogger mania berminat untuk melihat tutorial lainya bergaya magazine blog silahkan. Akses melalui link di bawah ini :

• 
• 

» Selamat Berkreasi - E F A «