10 Teknik Kreatif Menggunakan Shadow Box CSS3

Kami telah melihat banyak kemajuan dalam pembangunan web CSS3 sejak beberapa tahun yang lalu. Laman web popular di seluruh Internet telah mula menggabungkan pelbagai gaya unik seperti sudut bulat dan pertanyaan media mudah alih yang responsif. Tetapi lebih penting lagi ini telah membuka pintu bagi antara muka kreatif untuk diprototype dalam masa beberapa minit.

Dalam artikel ini saya ingin berkongsi Coretan kod 10 yang berkaitan dengan reka bentuk bayang kotak CSS3 yang cemerlang. Saya akan menerangkan bagaimana kod berfungsi dan bagaimana anda boleh melaksanakan setiap bayangan kotak ke laman web anda sendiri.

Gaya ini semua dikaitkan dengan pengaruh reka bentuk yang hebat dari laman web popular yang lain. Ini adalah contoh yang baik tentang bagaimana pemaju web semasa membina trend yang berdampak pada masa depan reka bentuk web.

1. Tetapkan Top Toolbar

Perkhidmatan media sosial Romania Trilulilu menggunakan toolbar atas terapung di seluruh laman web mereka. Ini boleh dibuat dengan cepat menggunakan a kedudukan: tetap; harta pada mana-mana unsur bar atas. Tetapi bayangan kotak tambahan ini memberi kesan ke tahap yang baru.

#banner kedudukan: tetap; ketinggian: 60px; lebar: 100%; atas: 0; kiri: 0; border-top: 5px solid # a1cb2f; latar belakang: #fff; -moz-box-shadow: 0 2px 3px 0px rgba (0, 0, 0, 0.16); -webkit-box-shadow: 0 2px 3px 0px rgba (0, 0, 0, 0.16); box-shadow: 0 2px 3px 0px rgba (0, 0, 0, 0.16); z-index: 999999;  #banner h1 line-height: 60px;  

Anda akan menyedari bahawa sifat kotak-bayangan sebenarnya ditubuhkan dengan kombinasi nilai yang agak sederhana. Bayang-bayang akan jatuh di bawah kotak, dan kabur dengan 3px di kedua-dua sisi.

Kita boleh menggunakannya rgba () kaedah untuk menggunakan kelegapan sedikit ke bayang-bayang, jadi unsur itu tidak kelihatan terlalu gelap. Ia tambahan tambahan yang pasti akan menarik perhatian pengunjung anda.

• Demo

2. Dropdown Sub-Navigation

Berikut adalah satu lagi kaedah bayang kotak kreatif yang digunakan pada sub-menu dropdown skalar. Kesan yang sama boleh dilihat pada Usahawan seperti yang anda tuding pada setiap pautan navigasi utama. Ini sememangnya agak sukar untuk dikonfigurasikan tetapi juga bernilai kesabaran.

#bar display: block; ketinggian: 45px; latar belakang: # 22385a; padding-top: 5px; margin-bottom: 150px; kedudukan: relatif;  #bar ul margin: 0px 15px; font-family: Candara, Calibri, "Segoe UI", Segoe, Arial, sans-serif;  #bar ul li background: # 22385a; paparan: blok; saiz fon: 1.2em; kedudukan: relatif; terapung: kiri;  #bar ul li a display: block; warna: # fffff7; garis ketinggian: 45px; font-weight: bold; padding: 0px 10px; teks-hiasan: tiada; z-index: 9999;  #bar ul li a: hover, #bar ul li a.selected color: # 365977; latar belakang: #fff; border-top-left-radius: 3px; border-top-right-radius: 3px; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px;  #bar ul .subnav display: block; kiri: 14px; atas: 48px; z-indeks: -1; lebar: 500px; kedudukan: mutlak; ketinggian: 90px; sempadan: 1px pepejal # edf0f3; border-top: 0; padding: 10px 0 10px 10px; limpahan: tersembunyi; -moz-border-radius-bottomleft: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; -webkit-border-bottom-right-radius: 3px; jejari bawah-kanan-jejari: 3px; jejari bawah-kanan-jejari: 3px; -moz-box-shadow: 0px 2px 7px rgba (0,0,0,0.25); -webkit-box-shadow: 0px 2px 7px rgba (0,0,0,0.25); box-shadow: 0px 2px 7px rgba (0,0,0,0.25); -ms-filter: "progid: DXImageTransform.Microsoft.Shadow (Kekuatan = 3, Arah = 180, Warna =" # 333333 ")"; penapis: progid: DXImageTransform.Microsoft.Shadow (Kekuatan = 3, Arah = 180, Warna = "# 333333");  

Pautan nav boleh digubah untuk menukar warna apabila dipilih atau pada tetikus berlegar. Saya juga menambah beberapa sempadan bulat ke pautan dan di atas kotak menu jatuh turun. Ini memberikan rasa yang lebih baik daripada tepi keras di sekelilingnya. Saya juga menggunakannya dengan baik -ms-penapis dan penapis sifat yang semata-mata milik Internet Explorer.

Sekiranya anda menyediakan sistem navigasi lengkap, anda boleh menukar tetapan paparan kepada sesiapa sahaja dan menyembunyikan menu sebaik sahaja halaman dimuatkan. Kemudian menggunakan beberapa jQuery anda boleh menyasarkan acara .hover () dan memaparkan bar subnav dengan kandungan yang dikemas kini.

• Demo

3. Butang Shadow Berkilat

Ini mungkin salah satu gaya kegemaran saya untuk dibuat hanya kerana bagaimana ia dinamik muncul di halaman. Jika anda tidak dapat memberitahu, ini adalah butang biru kecil yang ditemui di halaman rumah YouTube selepas anda log masuk pertama.

blues color: #fff; lebar: 190px; ketinggian: 35px; kursor: penunjuk; font-family: Arial, Tahoma, sans-serif; saiz fon: 1.0em; font-weight: bold; -moz-border-radius: 2px; -webkit-border-radius: 2px; jejari sempadan: 2px; lebar sempadan: 1px; border color: # 0053a6 # 0053a6 # 000; warna latar belakang: # 6891e7; latar belakang-imej: -moz-linear-kecerunan (atas, # 4495e7 0, # 0053a6 100%); background-image: -ms-linear-gradient (atas, # 4495e7 0, # 0053a6 100%); background-image: -o-linear-gradient (atas, # 4495e7 0, # 0053a6 100%); imej latar belakang: -webkit-gradien (linear, kiri atas, bahagian bawah kiri, warna berhenti (0, # 4495e7), warna-stop (100%, # 0053a6)); background-image: -webkit-linear-gradient (atas, # 4495e7 0, # 0053a6 100%); latar belakang-imej: linear-gradient (ke bawah, # 4495e7 0, # 0053a6 100%); teks-bayangan: 1px 1px 0 rgba (0, 0, 0, .6); -moz-box-shadow: inset 0 1px 0 rgba (256, 256, 256, .35); -ms-box-shadow: inset 0 1px 0 rgba (256, 256, 256, .35); -webkit-box-shadow: inset 0 1px 0 rgba (256, 256, 256, .35); box-shadow: inset 0 1px 0 rgba (256, 256, 256, .35); penapis: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 4495e7, EndColorStr = # 0053a6);  .blues: hover border color: # 002d59 # 002d59 # 000; -moz-box-shadow: inset 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, 0.25); -ms-box-shadow: inset 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, 0.25); -webkit-box-shadow: inset 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, 0.25); box-shadow: inset 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, .25); penapis: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 3a8cdf, EndColorStr = # 0053a6); background-image: -moz-linear-gradient (atas, # 3a8cdf 0, # 0053a6 100%); background-image: -ms-linear-gradient (atas, # 3a8cdf 0, # 0053a6 100%); background-image: -o-linear-gradient (atas, # 3a8cdf 0, # 0053a6 100%); imej latar belakang: -webkit-gradien (linear, kiri atas, bahagian bawah kiri, warna berhenti (0, # 3a8cdf), warna-stop (100%, # 0053a6)); background-image: -webkit-linear-gradient (atas, # 3a8cdf 0, # 0053a6 100%); latar belakang-imej: linear-gradient (ke bawah, # 3a8cdf 0, # 0053a6 100%);  .blues: active border-color: # 000 # 002d59 # 002d59; -moz-box-shadow: inset 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; -ms-box-shadow: inset 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; -webkit-box-shadow: inset 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; box-shadow: inset 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; penapis: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 005ab4, EndColorStr = # 175ea6); latar belakang-imej: -moz-linear-kecerunan (atas, # 005ab4 0, # 175ea6 100%); background-image: -ms-linear-gradient (atas, # 005ab4 0, # 175ea6 100%); background-image: -o-linear-gradient (atas, # 005ab4 0, # 175ea6 100%); background-image: -webkit-gradient (linear, kiri atas, bawah kiri, warna berhenti (0, # 005ab4), warna-stop (100%, # 175ea6)); background-image: -webkit-linear-gradient (atas, # 005ab4 0, # 175ea6 100%); latar belakang-imej: linear-gradient (ke bawah, # 005ab4 0, # 175ea6 100%);  

Kod butang keseluruhan adalah banyak untuk melihat, tetapi kami cuba untuk menyokong pelayar sebanyak mungkin. Terdapat bayang-bayang teks dan bayang-bayang kotak dengan sokongan yang disertakan untuk MS Internet Explorer 7+. Juga kami menetapkan imej latar belakang harta dengan kecerunan CSS3 ke atas sejumlah besar prefiks khusus vendor.

Tetapi jika anda suka gaya reka bentuk ini maka hover dan negara aktif juga akan menarik perhatian anda. Pada dasarnya, kami mengemas kini sempadan untuk memasukkan beberapa bayang-bayang di dalam ketika anda menolak, semasa mengemas kini kecerunan latar belakang untuk menunjukkan sedikit lebih gelap.

Oleh kerana tidak ada imej pada butang anda boleh mengemas kini nilai hex dan morph ini untuk menggabungkan hampir mana-mana skema warna.

• Demo

4. Pemberitahuan Menu Flyout

Saya bukan pengguna Facebook yang besar tetapi saya dapati beberapa teknik UI dari reka bentuk semula mereka. Menu flyout ini boleh dibandingkan dengan pemberitahuan anda atau permintaan rakan pop timbul yang terdapat pada halaman utama.

.flyout lebar: 310px; margin-top: 10px; saiz fon: 11px; kedudukan: relatif; font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif; warna latar belakang: putih; padding: 9px 11px; latar belakang: rgba (255, 255, 255, 0.9); sempadan: 1px pepejal # c5c5c5; -webkit-box-shadow: 0 3px 8px rgba (0, 0, 0, .25); -moz-box-shadow: 0 3px 8px rgba (0, 0, 0, .25); box-shadow: 0 3px 8px rgba (0, 0, 0, .25); -webkit-border-radius: 3px; -moz-border-radius: 3px; jejari sempadan: 3px;  .flyout #tip background-image: url ('images / tip.png'); ulangi latar belakang: tidak ulangi; saiz latar belakang: auto; ketinggian: 11px; kedudukan: mutlak; atas: -11px; kiri: 25px; lebar: 20px;  .flyout h2 text-transform: uppercase; warna: # 666; saiz fon: 1.2em; padding-bottom: 5px; margin-bottom: 12px; border-bottom: 1px solid #dcdbda;  .flyout p padding-bottom: 25px; saiz fon: 1.1em; warna: # 222;  

Tidak banyak kod minda lentur yang baru dipamerkan di sini. Saya menggunakan yang kecil .tip kelas dengan unsur span dalaman untuk menambah segi tiga tooltip. Ia adalah mungkin untuk mencipta segitiga CSS3 tulen tetapi kaedah ini tidak mudah, seperti yang anda bayangkan. Jika anda lebih suka kaedah ini, ia mungkin bernilai menggodam sesuatu bersama-sama. Tetapi sifat putaran CSS3 tidak disokong di mana-mana; Sementara itu, imej tidak memerlukan sebarang kaedah mundur.

• Demo

5. Apple Wrapper Page

Terdapat banyak bayang kotak CSS3 yang menarik yang boleh anda dapati di laman web rasmi Apple. Contoh di bawah ini adalah bekas kotak kecil dengan beberapa ruang lajur. Apabila melihat ke atas susun atur Apple, anda akan melihat banyak halaman mereka yang terdiri daripada banyak kotak pembalut.

.epal lebar: 100%; paparan: blok; ketinggian: 150px; latar belakang: putih; sempadan: pepejal 1px; warna sempadan: # e5e5e5 #dbdbdb # d2d2d2; -webkit-border-radius: 4px; -moz-border-radius: 4px; jejari sempadan: 4px; -webkit-box-shadow: rgba (0, 0, 0, 0.3) 0 1px 3px; -moz-box-shadow: rgba (0,0,0,0.3) 0 1px 3px; box-shadow: rgba (0, 0, 0, 0.3) 0 1px 3px;  .applewrap .col float: left; box-sizing: border-box; lebar: 250px; ketinggian: 150px; padding: 16px 7px 6px 22px; fon: 12px / 18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; warna: # 343434; border-right: 1px solid #dadada;  

Anda boleh menyusun halaman serupa yang berpecah oleh kotak kandungan pelbagai lebar dan ketinggian. Walaupun saya meletakkan beberapa lajur ke dalam demo ini, ia bukanlah teknik pemformatan yang perlu dengan cara apa pun. Kotak bayangan akan sesuai dengan latar belakang putih / kelabu. Tetapi saya fikir memaparkan mana-mana warna cahaya akan kelihatan cantik.

• Demo

6. Kotak Kandungan Apple

Kotak kandungan gaya lain ini di laman web Apple digunakan kebanyakannya untuk reka bentuk lajur. Ini adalah di bahagian bawah halaman mempamerkan tawaran dan maklumat lain yang berkaitan. Ia adalah gaya reka bentuk yang sangat berbeza dengan bayangan kotak yang memaparkan di dalam dari atas ke bawah.

.applebox width: auto; ketinggian: 85px; box-sizing: border-box; latar belakang: # f5f5f5; padding: 20px 20px 10px; margin: 10px 0 20px; sempadan: 1px padat #ccc; jejari sempadan: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -webkit-box-shadow: inset 0px 1px 1px rgba (0, 0, 0, .3); -moz-box-shadow: inset 0px 1px 1px rgba (0, 0, 0, .3); box-shadow: inset 0px 1px 1px rgba (0, 0, 0, .3);  .applebox .col width: 140px; terapung: kiri; margin: 0 0 0 30px;  

Saya tidak fikir kod ini harus terlalu sukar untuk diikuti dan disalin ke bekas div lain. Satu-satunya bayang-bayang yang kami gunakan sedang menggunakan inset dengan kod berwarna rgba alpha-transparan. Jadi walaupun kita mempunyai bayang drop set untuk hitam tulen kita hanya memaparkan kira-kira kelegapan 30%.

• Demo

7. Pautan Pilihan

Ini mungkin gaya bayangan kegemaran saya dari laman web semasa Apple. Anda harus mencari gaya demo langsung teknik ini di halaman iCloud dengan satu siri kotak pautan terapung.

.applefeature ketinggian: 150px; margin: 8px; menegak-align: atas; paparan: blok dalam talian;  .applefeature a display: block; lebar: 168px; ketinggian: 140px; sempadan: 1px padat #ccc; warna: # 333; teks-hiasan: tiada; font-weight: bold; garis ketinggian: 1.3em; latar belakang: # f7f7f7; -webkit-box-shadow: inset 0 1px 2px rgba (0, 0, 0, .3); -moz-box-shadow: inset 0 1px 2px rgba (0, 0, 0, .3); box-shadow: inset 0 1px 2px rgba (0, 0, 0, .3); -webkit-border-radius: 4px; -moz-border-radius: 4px; jejari sempadan: 4px;  .applefeature a: hover background: #fafafa; latar belakang: -webkit-gradien (linear, 0% 0%, 0% 100%, dari (#fff), hingga (# f7f7f7)); latar belakang: -moz-linear-gradient (100% 100% 90deg, # f7f7f7, #fff); -webkit-box-shadow: inset 0 1px 2px rgba (0,0,0, .3); -moz-box-shadow: inset 0 1px 2px rgba (0,0,0, .3); box-shadow: inset 0 1px 2px rgba (0,0,0, .3); -webkit-border-radius: 4px; -moz-border-radius: 4px; jejari sempadan: 4px;  .applefeature a img display: block; margin: 26px auto 4px;  .applefeature h4 display: block; lebar: 160px; saiz fon: 1.3em; font-family: Arial, Tahoma, sans-serif; warna: # 646464; teks-align: center;  

Pautan yang dipaparkan ini ditetapkan pada lebar tetap dan termasuk ikon dan teks paparan yang berbeza. Contoh Apple menggunakan bayang kotak yang serupa seperti yang kita lihat dalam kotak kandungan sebelumnya. Walau bagaimanapun kotak keseluruhan kini boleh diaktifkan sebagai pautan yang merangkumi kedua-duanya : berlegar dan : aktif negeri. Terdapat banyak kelonggaran dengan kotak pautan ini dan anda harus cuba bermain dengan kod sumber.

Ia mungkin untuk memendekkan ketinggian / lebar dan membuat senarai pautan yang lebih kecil. Ini boleh menjadi satu set bab atau halaman dalam artikel, atau anda boleh membuat sub-menu terhad dengan ikon pautan. Ini jujurnya satu set teknik CSS3 yang lebih hebat yang menunjukkan berapa banyak kuasa yang anda miliki sebagai pereka web.

• Demo

8. Imej berbingkai

Saya telah menambah latar belakang kelabu ke contoh ini supaya anda dapat melihat gaya bayang kotak dengan lebih jelas. Kotak ini mirip dengan gambar pratonton yang dipaparkan pada wordpress.com kecuali saya telah menambahkan sedikit lebih mendalam kepada kod sumber.

.wpframe latar belakang: #fff; jejari sempadan: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; padding: 8px; -webkit-box-shadow: 1px 2px 1px # d1d1d1; -moz-box-shadow: 1px 2px 1px # d1d1d1; box-shadow: 1px 2px 1px # d1d1d1;  

Oleh kerana imej diberi padding kecil di kedua-dua belah bingkai ini muncul sebagai sempadan putih besar. Anda sentiasa boleh mengemas kini warna latar belakang, atau menambah sempadan luaran yang kecil untuk memisahkan imej dari latar belakang. Tetapi set gaya yang agak mudah ini boleh dialihkan ke dalam pelbagai teknik bayangan kotak. Main dengan kod dan lihat bagaimana anda boleh meningkatkan reka bentuk imej di laman web anda sendiri.

• Demo

9. Bidang Input Berliang

Saya mendapat idea ini selepas melawat laman log masuk Pinterest beberapa kali. Gaya animasi mereka benar-benar memaparkan beberapa contoh yang jelas dalam bayang kotak inline berbilang, di luar dan di dalamnya.

.formwrap display: block; margin-bottom: 15px;  .formwrap label display: block-inline; lebar: 80px; saiz fon: 11px; font-weight: bold; warna: # 444; font-family: Arial, Tahoma, sans-serif;  .formwrap .shadowfield kedudukan: relatif; lebar: 250px; saiz fon: 17px; font-family: "Helvetica Neue", Arial, sans-serif; font-weight: normal; latar belakang: # f7f8f8; warna: # 7c7c7c; garis ketinggian: 1.4; padding: 6px 12px; garis besar: tiada; peralihan: semua 0.2s mudah-keluar-0s; -webkit-transition: semua 0.2s kemudahan-dalam-keluar 0s; -moz-transisi: semua 0.2s mudah-keluar-0s; sempadan: 1px pepejal # ad9c9c; jejari sempadan: 6px 6px 6px 6px; box-shadow: 0 1px rgba (34, 25, 25, 0.2) inset, 0 1px #fff;  .formwrap .shadowfield: fokus border color: # 930; latar belakang: #fff; warna: # 5d5d5d; box-shadow: inset 0 1px rgba (34, 25, 25, 0.2), 0 1px rgba (255, 255, 255, 0.6), 0 0 7px rgba (235, 82, 82, 0.5); -moz-box-shadow: inset 0 1px rgba (34, 25, 25, 0.2), 0 1px rgba (255, 255, 255, 0.6), 0 0 7px rgba (235, 82, 82, 0.5); -webkit-box-shadow: inset 0 1px rgba (34, 25, 25, 0.2), 0 1px rgba (255, 255, 255, 0.6), 0 0 7px rgba (235, 82, 82, 0.5);  

Walaupun gaya permulaan sangat menarik, saya tertarik dengan kesan peralihan apabila anda memberi tumpuan pada setiap medan input. Anda boleh tab di antara mereka dan melihat perbezaan serta-merta dalam banyak hartanah. Shadow box bersinar luaran digunakan bersama bayangan inset terkini. Juga warna teks menjadi lebih ringan kerana anda memberi tumpuan kepada input tertentu, kemudian memudaratkan apabila anda menumpukan perhatian.

Walaupun menyalin lebih daripada satu kesan ini akan meningkatkan pengalaman pengguna medan borang anda. Pastikan anda tidak terlalu jauh ke laut di mana bentuk anda hampir tidak boleh digunakan. Walau bagaimanapun kebanyakan pengunjung akan menikmati kesan estetik yang menyenangkan yang juga menggalakkan interaksi dan penglibatan lebih lanjut dengan laman web anda.

• Demo

10. Butang Bayangan Elastik

Butang bayangan unik ini digayakan dengan peralihan yang perlahan semasa keadaan hover dan aktif. Anda boleh mencari contoh yang serupa di laman utama Mozilla dengan saiznya yang besar “Muat turun Firefox” butang. Sesetengah kotak-bayang Ciri-ciri sebenarnya menggabungkan tiga bayang yang berbeza bersama-sama ke dalam satu perintah.

.blu-btn display: block-inline; -moz-border-radius: .25em; sempadan-radius: .25em; -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), masukkan 0 -2px 0 0 rgba (0,0,0,0.2); -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), masukkan 0 -2px 0 0 rgba (0,0,0,0.2); box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), masukkan 0 -2px 0 0 rgba (0,0,0,0.2); warna latar belakang: # 276195; background-image: -moz-linear-gradient (# 3c88cc, # 276195); background-image: -ms-linear-gradient (# 3c88cc, # 276195); background-image: -webkit-gradien (linear, kiri atas, bawah kiri, warna berhenti (0%, # 3c88cc), warna-stop (100%, # 276195)); background-image: -webkit-linear-gradient (# 3c88cc, # 276195); background-image: -o-linear-gradient (# 3c88cc, # 276195); penapis: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3c88cc', endColorstr = '# 276195', GradientType = 0); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3c88cc', endColorstr =" # 276195 ", GradientType = 0)"; latar belakang-imej: linear-gradient (# 3c88cc, # 276195); sempadan: 0; kursor: penunjuk; warna: #fff; teks-hiasan: tiada; teks-align: center; saiz fon: 16px; padding: 0px 20px; ketinggian: 40px; garis ketinggian: 40px; min-lebar: 100px; teks-bayangan: 0 1px 0 rgba (0,0,0,0.35); font-family: Arial, Tahoma, sans-serif; -webkit-peralihan: semua .2s linear; -moz-transisi: semua linear .2s; -o-peralihan: semua linear .2s; -ms-peralihan: semua .2s linear; peralihan: semua linear .2s .blu-btn: hover, .blu-btn: focus -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), inset 0 -2px 0 0 rgba (0,0,0,0.3), masukkan 0 12px 20px 2px # 3089d8; -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), masukkan 0 -2px 0 0 rgba (0,0,0,0.3), masukkan 0 12px 20px 2px # 3089d8; kotak-bayang: 0 2px 0 0 rgba (0,0,0,0.1), masukkan 0 -2px 0 0 rgba (0,0,0,0.3), masukkan 0 12px 20px 2px # 3089d8;  .blu-btn: active -webkit-box-shadow: inset 0 2px 0 0 rgba (0,0,0,0.2), inset 0 12px 20px 6px rgba (0,0,0,0.2), inset 0 0 2px 2px rgba (0,0,0,0.3); -moz-box-shadow: inset 0 2px 0 0 rgba (0,0,0,0.2), masukkan 0 12px 20px 6px rgba (0,0,0,0.2), masukkan 0 0 2px 2px rgba (0,0, 0,0.3); box-shadow: inset 0 2px 0 0 rgba (0,0,0,0.2), inset 0 12px 20px 6px rgba (0,0,0,0.2), inset 0 0 2px 2px rgba (0,0,0,0.3 );  .grn-btn display: block-inline; -moz-border-radius: .25em; sempadan-radius: .25em; -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), masukkan 0 -2px 0 0 rgba (0,0,0,0.2); -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), masukkan 0 -2px 0 0 rgba (0,0,0,0.2); box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), masukkan 0 -2px 0 0 rgba (0,0,0,0.2); warna latar belakang: # 659324; background-image: -moz-linear-gradient (# 81bc2e, # 659324); background-image: -ms-linear-gradient (# 81bc2e, # 659324); background-image: -webkit-gradien (linear, kiri atas, bawah kiri, warna berhenti (0%, # 81bc2e), warna-stop (100%, # 659324)); background-image: -webkit-linear-gradient (# 81bc2e, # 659324); background-image: -o-linear-gradient (# 81bc2e, # 659324); penapis: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 81bc2e', endColorstr = '# 659324', GradientType = 0); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 81bc2e', endColorstr =" # 659324 ", GradientType = 0)"; latar belakang-imej: linear-gradient (# 81bc2e, # 659324); sempadan: 0; kursor: penunjuk; warna: #fff; teks-hiasan: tiada; teks-align: center; saiz fon: 16px; padding: 0px 20px; ketinggian: 40px; garis ketinggian: 40px; min-lebar: 100px; teks-bayangan: 0 1px 0 rgba (0,0,0,0.35); font-family: Arial, Tahoma, sans-serif; -webkit-peralihan: semua .2s linear; -moz-transisi: semua linear .2s; -o-peralihan: semua linear .2s; -ms-peralihan: semua .2s linear; peralihan: semua .2s linear;  .grn-btn: hover, .grn-btn: focus -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), inset 0 -2px 0 0 rgba (0,0,0 , 0.3), masukkan 0 12px 20px 2px # 85ca26; -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), masukkan 0 -2px 0 0 rgba (0,0,0,0.3), masukkan 0 12px 20px 2px # 85ca26; kotak-bayang: 0 2px 0 0 rgba (0,0,0,0.1), masukkan 0 -2px 0 0 rgba (0,0,0,0.3), masukkan 0 12px 20px 2px # 85ca26;  .grn-btn: active -webkit-box-shadow: inset 0 2px 0 0 rgba (0,0,0,0.2), inset 0 12px 20px 6px rgba (0,0,0,0.2), inset 0 0 2px 2px rgba (0,0,0,0.3); -moz-box-shadow: inset 0 2px 0 0 rgba (0,0,0,0.2), masukkan 0 12px 20px 6px rgba (0,0,0,0.2), masukkan 0 0 2px 2px rgba (0,0, 0,0.3); box-shadow: inset 0 2px 0 0 rgba (0,0,0,0.2), inset 0 12px 20px 6px rgba (0,0,0,0.2), inset 0 0 2px 2px rgba (0,0,0,0.3 );  

Saya menggunakan peralihan penuh untuk 200 milisaat pada keadaan hover dan butang aktif. Apa yang begitu hebat tentang gaya ini ialah anda boleh memohon kepada hampir semua elemen yang boleh diklik. Butang, sambungan anchor, elemen bentuk, atau apa sahaja yang anda fikir sesuai - walaupun gaya ini sepatutnya digunakan jarang supaya tidak membebankan reka bentuk anda.

Butang seperti ini sering diselamatkan dengan cara yang sama seperti Mozilla menggunakannya. Lampirkan gaya ini ke dalam blog anda di mana anda mempunyai butang untuk memuat turun freebie, atau sesuatu yang serupa. Pengguna suka berinteraksi dengan antara muka yang unik dan ini sering diterjemahkan ke dalam peratusan yang lebih tinggi untuk penarafan klik anda.

• Demo

Pemikiran Akhir

Saya harap anda boleh mengambil beberapa pengajaran hebat dari koleksi teknik kotak bayangan ini. Terdapat banyak bidang yang berbeza yang boleh anda fokuskan termasuk borang, kotak modal, butang, bar alat, dan juga susun atur laman web penuh.

Jangan ragu untuk melaksanakan apa-apa kesan bayangan ke dalam bahagian laman web anda sendiri. Terdapat banyak teknik lain di luar sana, tetapi koleksi ini sesuai untuk kedua-dua pemula dan pemaju lanjutan. Juga jika anda mempunyai sebarang cadangan atau soalan tentang artikel yang anda boleh berkongsi dengan kami di kawasan perbincangan komen di bawah.