Kategori Random

Percantik Tombol dengan CSS3 Borders

Posted : 28 Januari 2014 | 17:51:51 , Dibaca 1380 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 , 862 hits )
» Modal Bootstrap tahap II : Membawa kode unik ke modal ( 04 Apr 2017 | 07:34:44 , 744 hits )
» Membuat Template Bootstrap dengan Cepat dan Gampang ( 12 Feb 2016 | 09:00:29 , 5029 hits )
» Trik Zoom Image View pada postingan dengan CSS ( 23 Sep 2015 | 07:05:18 , 2384 hits )
» Membuat Modal Bootstrap PHP ( 19 Mar 2015 | 03:00:11 , 13878 hits )