Membuat ujung kotak bulat dan bayangan tulisan pada CSS3

11 November 2011

Apakah itu HTML5 atau CSS3, keduanya menjadi standar, ternyata ada banyak perdebatan dan pertentangan tentang kesederhanaan fitur.

Membuat sudut dibulatkan.

Dalam spec CSS3, sudut dibulatkan ditetapkan sebagai border-radius: meskipun itu diterapkan secara berbeda dalam keluarga Mozilla browser (termasuk Firefox) dibandingkan kelompok (Safari) WebKit.

Apakah ini berarti jika Anda menjalankan, katakanlah, Internet Explorer atau versi yang lebih tua dari salah satu browser, kemungkinan besar Anda tidak akan melihat sesuatu terjadi ketika Anda menentukan atribut CSS yang tepat.

Here's an example:

This should be a box with nicely rounded corners.

The code for this to work is:

<div style="background-color:#ccf;padding:8px;border:2px solid black;border-radius:10px;">This should be a box with nicely rounded corners.</div>

Tidak terlalu buruk untuk digunakan, tetapi mengapa mereka tidak bisa hanya menerima "border-radius", yah, itu bagian dari petualangan standar web, ungkap Hari Pratomo.

Sekarang, bagaimana dengan drop shadow? Itu dilakukan dengan atribut css box-shadow, yang mengambil tiga parameter: horisontal offset bayangan, offset vertikal faktor, bayangan kabur dan warna. Rumit, ya?

Berikut adalah bagaimana hal itu bisa digunakan dalam kerjasama dengan kotak sebelumnya yang telah dibulatkan:


Ini harus menjadi sebuah kotak dengan sudut dibulatkan dengan baik.

Ternyata ada perdebatan besar tentang bagaimana menerapkan bayangan kotak, sehingga pada kenyataannya Anda harus mencocokkan model CSS3 dari browser Anda untuk itu bahkan ada kemungkinan untuk tidak bekerja.

Like this:

This should be a box with nicely rounded corners and a drop shadow.

 

Jika pada browser modern mungkin tidak. Keren, kan? Ya, inilah CSS3 diperlukan untuk membuat karya ini:

Here's the code I'm using for this to work:

<div style="background-color:#ccf; padding:8px; border:2px solid black; border-radius:10px; box-shadow: 8px 8px 4px #666;-o-box-shadow: 10px 10px 5px #888;-icab-box-shadow: 10px 10px 5px #888;-khtml-box-shadow: 10px 10px 5px #888;-moz-box-shadow: 10px 10px 5px #888;-webkit-box-shadow: 10px 10px 5px #888;box-shadow: 10px 10px 5px #888;">This should be a box with nicely rounded corners and a drop shadow.</div>

Lebih dari sedikit pekerjaan, tapi setidaknya itu menjadi bekerja pada browser modern, dan itu sangat indah.

 


Sumber : Jasa Pembuatan Website dan Sistem Informasi http://klatenweb.com
Selengkapnya : http://klatenweb.com/read/2011/11/11/726/Membuat-ujung-kotak-bulat-dan-bayangan-tulisan-pada-CSS3.html