CSS3 : Box Shadow dan Box Rounded

445

Kembali belajar CSS3, sekarang giliran box shadow dan box rounded yang jadi sasaran. Ternyata bukan hanya text yang bisa diberi efek bayangan, box atau kotak pun bisa kita buat berbayang. Struktur penulisannya pun sama dengan text-shadow. Hanya diganti kata ‘text’ diganti sama ‘box’ (namanya juga box shadow … hehe)

Supaya lebih jelas bisa langsung dilihat digambar dibawah.

css3 box shadow

Kita bisa memberi lebih dari satu bayangan untuk sebuah box dan tentu saja bisa menggunakan format rgba untuk warna. Untuk contohnya sabar dulu ya… ntar dikasih diakhir postingan. Sekarang kita belajar bagaimana membuat box/kotak dengan sudut melengkung (rounded).

Box rounded dengan border-radius

Dengan CSS3 pula kita bisa membuat lengkungan pada setiap sudut box yang kita buat dengan sangat mudah. Karena sebelum era CSS3 ini, untuk membuat sebuah kotak/box dengan sudut melengkung (rounded) kita menggunakan bantuan gambar. Tentu saja lebih ribet dan sedikit menambah beban loading.

Caranya dengan menambahkan property border-radius. Struktur penulisannya seperti ini.

css3 box rounded

Untuk membuat nilai lengkung yang berbeda pada setiap sudut maka masing – masing sudut harus diberi nilai. Contoh penulisannya seperti dibawah ini, ( Perhatikan bahwa cara penulisan masing-masing sudut untuk Mozilla dan Webkit berbeda)

css3 box rounded different

Karena penulisan seperti itu, sangat panjang dan cukup merepotkan. Border-radius ini bisa disingkat (Shorthand). Caranya sama dengan cara menyingkat penulisan untuk margin dan padding.

css3 box border radius shorthand

Contoh Box Shadow dan Box Rounded

Sekarang baru kita masuk ke contoh, silahkan copy paste dan lihat dibrowser masing – masing. Untuk contoh ini hanya support untuk Mozilla saja. Supaya bisa dilihat di browser webkit, tinggal mengganti -moz dengan –webkit pada masing-masing class dan id.

Selamat mencoba

SHARE
Previous articleAJAX Post dan Get dalam jQuery
Next articleMemahami SEO dasar untuk Google
Seorang desainer sekaligus blogger dengan hobi tidur siang. Hanya belajar, belajar dan belajar.... Seperti kata naruto "Tak ada jalan pintas untuk menjadi seorang Hokage".
  • nice info. ini info yang saya cari bro. pertama saya sedikit bingung dengan apa itu px dan guna letak px itu. ternyata ada sudut letaknya. thanks

  • tomy

    Maturnuwun kang. Informasiny berharga sekali buat saya