Text dengan Round Corner + Shadow [ BLOGSPOT ]

Anonymous       1/22/2012 02:56:00 AM

>

Text dengan Round Corner

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 #000000;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.

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?

Text dengan Round Corner +Shadow

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 khan? 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.