Kategori Random

Percantik Tombol dengan CSS3 Borders

Posted : 28 Januari 2014 | 17:51:51 , Dibaca 1473 kali

Kembali lagi dengan artikel saya kali saya akan membagikan sebuah artikel tentang CSS3 dimana pada kali ini saya akan membahas Borders

Dengan CSS3, kita dapat membuat border bulat, menambahkan bayangan ke kotak, dan menggunakan gambar sebagai border - tanpa menggunakan program desain, seperti Photoshop.

Dalam hal ini terdapat sifat-sifat border yaitu sebagai berikut :

  • border-radius
  • box-shadow
  • border-image

Dukungan browser terhadap penggunaan borders

  • Internet Explorer 9, dan versi yang lebih baru, mendukung border-radius dan box-shadow.
  • Internet Explorer 11 mendukung border-image.
  • Firefox, Chrome, dan Safari mendukung semua properti borders.
  • Safari 5, dan versi yang lebih tua, membutuhkan awalan -webkit-border- untuk border-image
  • Opera mendukung border-radius dan box-shadow, tetapi membutuhkan awalan -o- untuk border-image.

CSS3 Rounded Corners
Menambahkan sudut bulat di CSS2 rumit. Kita harus menggunakan gambar yang berbeda untuk setiap sudut. Di CSS3 itu sangat mudah.
Dalam CSS3, properti border-radius digunakan untuk membuat sudut dibulatkan.

Contoh :

.divBrad
{
 border:2px solid;
 border-radius:25px;
} 

CSS3 Box Shadow
Dalam CSS3, properti box-shadow digunakan untuk menambah bayangan pada kotak.

Contoh :

.divBdow
{
box-shadow: 10px 10px 5px #888888;
} 


CSS3 Border Image
Dengan properti border-image CSS3 kita dapat menggunakan gambar sebagai border.

Contoh :

.divBimg
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

Catatan : Image diletakkan dalam satu folder dengan file css nya

Sumber : w3schools

Postingan Terkait
» Modal Bootstrap tahap III: Membawa kode unik ke modal ( 05 Apr 2017 | 06:24:03 , 1281 hits )
» Modal Bootstrap tahap II : Membawa kode unik ke modal ( 04 Apr 2017 | 07:34:44 , 1137 hits )
» Membuat Template Bootstrap dengan Cepat dan Gampang ( 12 Feb 2016 | 09:00:29 , 5383 hits )
» Trik Zoom Image View pada postingan dengan CSS ( 23 Sep 2015 | 07:05:18 , 2691 hits )
» Membuat Modal Bootstrap PHP ( 19 Mar 2015 | 03:00:11 , 14623 hits )