Tinju Shadow: Imej-bebas, CSS3, Butang Berkilat

Gaya butang CSS3: Gunakan kotak bayang-bayang untuk membuat kesan butang sejuk

Artikel ini meneroka dua cara untuk membuat butang menggunakan kecerunan CSS3: CSS3 dan kotak bayang-bayang. Walaupun kecerunan CSS3 menjadi lebih popular dalam gaya butang, mudah dikonfigurasikan dan boleh skala dengan kawasan butang, sokongan penyemak imbas mereka adalah terhad (terutamanya Firefox, Chrome, dan Safari), dan sintaks tidak konsisten di kalangan pelayar yang berbeza.

Sebaliknya, menggunakan atribut kotak bayang-bayang ke lapisan warna overlay, sama seperti pelukis pelukis pigmen, anda boleh membuat butang lancar bebas, zoomable, boleh dikonfigurasikan sepenuhnya. Walaupun kaedah ini mungkin kelihatan rumit untuk lapisan warna bayang-bayang pada pandangan pertama, ia lebih fleksibel.

Memandangkan sokongan kecerunan CSS3 tulen tidak sesuai untuk unsur-unsur UI yang penting dan kekurangan fleksibiliti butang berasaskan imej, adalah penting bagi pereka web untuk menguasai cara untuk membuat butang menggunakan kecerunan CSS3 dan sifat bayang-bayang.

Kaedah 1: Box-shadow mencipta kesan berbilang lapisan

mari kita mulakan dengan butang oren rata asas. Langkah-langkah berikut akan menunjukkan langkah demi langkah bagaimana untuk membuat kesan butang berkilat menggunakan kotak bayang-bayang.

Langkah 1: Tambah Bayang -bayang Standard

Sintaks asas kotak bayang-bayang adalah seperti berikut:

box-shadow: X偏移量 Y偏移量 模糊半径 颜色

kita boleh melapisi pelbagai bayang -bayang, dipisahkan oleh koma. Contohnya:

Bayang -bayang pertama mencipta bayangan hitam dengan ketelusan 20%, diimbangi oleh 3 piksel ke kanan bawah, dengan radius kabur 6 piksel. Bayang -bayang kedua tidak mengimbangi, memberikan cahaya gelap yang halus yang menjadikan butang lebih bertekstur.

-webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, .20), 0px 0px 3px rgba(0, 0, 0, .40);

Langkah 2: Tambahkan warna yang mendasari

Kata kunci boleh membalikkan bayang -bayang untuk muncul di dalam butang. Kita boleh menggunakannya untuk mencipta warna yang mendasari:

inset Ini meninggalkan kawasan oren cahaya lembut di bahagian bawah butang, meniru refleksi cahaya pada permukaan kaca.

inset 0px 25px 25px #930;

Langkah 3: Tambah Warna Sorotan

Tambahkan bayangan oren yang lebih ringan di bahagian atas butang dengan radius kabur yang lebih kecil untuk membuat kemuncak kelebihan keras:

Perhatikan bahawa bayang-bayang kotak baru akan ditumpukan di bawah bayang-bayang sebelumnya, jadi warna sorotan perlu diletakkan di hadapan warna yang lebih gelap.

inset 0px 20px 2px rgba(240, 150, 69, .5)

Langkah 4: Laraskan refleksi

Untuk menjadikan sorotan lebih semula jadi, bayangan oren gelap kabur boleh ditumpangkan di bahagian atas butang:

Langkah 5: Tambah status hover

inset 0px 5px 12px #930

Apabila tetikus melayang, parameter bayangan boleh diselaraskan untuk menjadikan butang kelihatan lebih tiga dimensi:

-webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, .20), 0px 0px 3px rgba(0, 0, 0, .40);

Keserasian penyemak imbas

Kaedah ini berfungsi dengan sempurna di Safari dan Chrome. Sintaks CSS Firefox hampir sama, hanya menggantikan

dengan -webkit-box-shadow. Opera dan IE9 juga menyokong bayang-bayang kotak, tetapi awalan -moz-box-shadow perlu dikeluarkan. IE yang lebih tua tidak menyokong bayang-bayang kotak. -webkit-

Ringkasan

Walaupun butang oren yang digunakan dalam contoh mungkin sedikit cheesy, kaedah ini menggunakan bayang-bayang kotak untuk lapisan warna lapisan sangat praktikal dan boleh membuat pelbagai kesan butang sejuk. Pendekatan ini menawarkan keserasian dan fleksibiliti pelayar yang lebih baik berbanding kecerunan CSS3. Saya harap artikel ini dapat memberikan idea baru untuk reka bentuk UI anda.

(penulisan langkah 1-5 harus dimasukkan di sini, tetapi kerana gambar tidak dapat dimasukkan secara langsung, sila tambahkan gambar mengikut keterangan. Sila ganti pautan gambar dengan pautan gambar sebenar)

Atas ialah kandungan terperinci Tinju Shadow: Imej-bebas, CSS3, Butang Berkilat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!