10 Teknik Kreatif Menggunakan CSS3 Box Shadow
Kami telah melihat banyak sekali kemajuan dalam pengembangan web CSS3 hanya dalam beberapa tahun terakhir. Situs web populer di seluruh Internet telah mulai memasukkan banyak gaya unik seperti sudut bundar dan kueri media responsif seluler. Tetapi yang lebih penting, ini telah membuka pintu bagi antarmuka kreatif untuk di-prototipe dalam hitungan menit.
Pada artikel ini saya ingin membagikan 10 cuplikan kode yang terkait dengan desain bayangan kotak CSS3 yang brilian. Saya akan menjelaskan bagaimana kode bekerja dan bagaimana Anda bisa menerapkan setiap bayangan kotak ke situs web Anda sendiri.
Semua gaya ini dikaitkan dengan pengaruh desain yang luar biasa dari situs web populer lainnya. Ini adalah contoh yang bagus tentang bagaimana pengembang web saat ini sedang membangun tren yang berdampak besar untuk masa depan desain web.
1. Memperbaiki Toolbar Teratas
Layanan media sosial Rumania Trilulilu menggunakan bilah alat atas mengambang di seluruh situs web mereka. Ini dapat dibuat dengan cepat menggunakan a posisi: tetap; properti pada elemen bar atas. Tapi bayangan kotak tambahan ini membawa efek ke tingkat yang sama sekali baru.
#banner position: fixed; tinggi: 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 melihat properti bayangan kotak sebenarnya diatur dengan kombinasi nilai yang cukup sederhana. Bayangan akan jatuh di bawah kotak, dan kabur 3px di kedua sisi.
Kita bisa menggunakan rgba () metode untuk menerapkan sedikit opacity ke bayangan, sehingga elemen tidak terlihat terlalu gelap. Ini tambahan halus yang pasti akan menarik perhatian pengunjung Anda.
- Demo
2. Dropdown Sub-Navigasi
Berikut ini adalah metode bayangan kotak kreatif lain yang diterapkan pada sub-menu drop-down skalar. Efek serupa dapat dilihat pada Pengusaha saat Anda mengarahkan kursor ke setiap tautan navigasi utama teratas. Ini jelas sedikit lebih sulit untuk dikonfigurasikan tetapi sepadan dengan kesabaran.
#bar display: block; tinggi: 45px; latar belakang: # 22385a; padding-top: 5px; margin-bottom: 150px; posisi: relatif; #bar ul margin: 0px 15px; font-family: Candara, Calibri, "Segoe UI", Segoe, Arial, sans-serif; #bar ul li background: # 22385a; display: blok; ukuran font: 1.2em; posisi: relatif; mengapung: kiri; #bar ul a a display: block; warna: # fffff7; garis-tinggi: 45px; font-weight: bold; padding: 0px 10px; teks-dekorasi: tidak ada; 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-index: -1; lebar: 500px; posisi: absolut; tinggi: 90px; perbatasan: 1px solid # edf0f3; border-top: 0; padding: 10px 0 10px 10px; overflow: disembunyikan; -moz-border-radius-bottomleft: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; -webkit-border-bottom-right-radius: 3px; batas-bawah-kanan-jari-jari: 3px; batas-bawah-kanan-jari-jari: 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 ")"; filter: progid: DXImageTransform.Microsoft.Shadow (Kekuatan = 3, Arah = 180, Warna = "# 333333");
Link nav dapat ditata untuk mengubah warna saat dipilih atau pada mouse. Saya juga menambahkan beberapa batas bulat ke tautan dan di atas kotak menu dropdown. Ini memberikan perasaan yang lebih baik daripada tepi keras di sekitar. Saya juga memanfaatkan -ms-filter dan filter properti yang hanya dimiliki oleh Internet Explorer.
Jika Anda mensetup sistem navigasi lengkap, Anda akan dapat mengubah tampilan yang tidak ada dan menyembunyikan menu begitu halaman dimuat. Kemudian menggunakan beberapa jQuery Anda dapat menargetkan acara .hover () dan menampilkan bilah subnav dengan konten yang diperbarui.
- Demo
3. Tombol Bayangan Glossy
Ini mungkin salah satu gaya favorit saya untuk dibuat hanya karena seberapa dinamis itu muncul pada halaman. Jika Anda tidak tahu, ini adalah tombol biru kecil yang ditemukan di beranda YouTube setelah Anda masuk pertama kali.
blues color: #fff; lebar: 190px; tinggi: 35px; kursor: pointer; font-family: Arial, Tahoma, sans-serif; ukuran font: 1.0em; font-weight: bold; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; lebar-perbatasan: 1px; warna batas: # 0053a6 # 0053a6 # 000; warna latar: # 6891e7; background-image: -moz-linear-gradient (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%); background-image: -webkit-gradient (linear, kiri atas, kiri bawah, color-stop (0, # 4495e7), color-stop (100%, # 0053a6)); background-image: -webkit-linear-gradient (atas, # 4495e7 0, # 0053a6 100%); background-image: linear-gradient (ke bawah, # 4495e7 0, # 0053a6 100%); text-shadow: 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); filter: 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); filter: 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%); background-image: -webkit-gradient (linear, kiri atas, kiri bawah, color-stop (0, # 3a8cdf), color-stop (100%, # 0053a6)); background-image: -webkit-linear-gradient (atas, # 3a8cdf 0, # 0053a6 100%); background-image: 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; filter: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 005ab4, EndColorStr = # 175ea6); background-image: -moz-linear-gradient (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, kiri bawah, color-stop (0, # 005ab4), color-stop (100%, # 175ea6)); background-image: -webkit-linear-gradient (atas, # 005ab4 0, # 175ea6 100%); background-image: linear-gradient (ke bawah, # 005ab4 0, # 175ea6 100%);
Seluruh kode tombol banyak untuk dilihat, tetapi kami berusaha untuk mendukung sebanyak mungkin browser. Ada bayangan teks dan bayangan kotak dengan dukungan yang menyertainya untuk MS Internet Explorer 7+. Kami juga sedang mengatur gambar latar belakang properti dengan gradien CSS3 atas sejumlah besar awalan khusus vendor.
Tetapi jika Anda menyukai gaya desain ini maka negara melayang dan aktif juga akan menarik perhatian Anda. Kami pada dasarnya memperbarui perbatasan untuk menyertakan beberapa bayangan di dalam saat Anda menekan ke bawah, sambil memperbarui gradien latar belakang untuk menampilkan sedikit lebih gelap.
Karena tidak ada gambar pada tombol Anda dapat memperbarui nilai hex dan mengubah ini untuk berbaur dengan hampir semua skema warna.
- Demo
4. Menu Pemberitahuan Flyout
Saya bukan pengguna besar Facebook tetapi saya perhatikan beberapa teknik UI dari desain ulang mereka. Menu flyout ini dapat dibandingkan dengan pemberitahuan Anda atau sembulan permintaan teman yang ditemukan di beranda.
.flyout width: 310px; margin-top: 10px; ukuran font: 11px; posisi: relatif; font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif; background-color: putih; padding: 9px 11px; latar belakang: rgba (255, 255, 255, 0.9); perbatasan: 1px solid # 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; batas-jari-jari: 3px; .flyout #tip background-image: url ('images / tip.png'); background-repeat: no-repeat; ukuran latar belakang: otomatis; tinggi: 11px; posisi: absolut; atas: -11px; kiri: 25px; lebar: 20px; .flyout h2 text-transform: huruf besar; warna: # 666; ukuran font: 1.2em; padding-bottom: 5px; margin-bottom: 12px; border-bottom: 1px solid #dcdbda; .flyout p padding-bottom: 25px; ukuran font: 1.1em; warna: # 222; Tidak ada banyak kode baru untuk ditampilkan di sini. Saya menggunakan yang kecil .tip kelas dengan elemen rentang internal untuk menambahkan segitiga tooltip. Dimungkinkan untuk membuat segitiga CSS3 murni tetapi metode ini tidak mudah, seperti yang Anda bayangkan. Jika Anda lebih suka metode ini, mungkin ada baiknya meretas sesuatu bersama-sama. Tetapi properti rotasi CSS3 tidak didukung di mana-mana; sementara itu gambar tidak memerlukan metode mundur.
- Demo
5. Apple Page Wrapper
Ada begitu banyak bayangan kotak CSS3 yang mengesankan yang dapat Anda temukan di situs web resmi Apple. Contoh di bawah ini adalah wadah kotak kecil dengan bentang kolom beberapa. Ketika melihat tata letak Apple Anda akan melihat banyak halaman mereka terdiri dari banyak kotak pembungkus.
.applewrap width: 100%; display: blok; tinggi: 150px; latar belakang: putih; perbatasan: 1px solid; warna perbatasan: # e5e5e5 #dbdbdb # d2d2d2; -webkit-border-radius: 4px; -moz-border-radius: 4px; batas-jari-jari: 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; ukuran kotak: kotak batas; lebar: 250px; tinggi: 150px; padding: 16px 7px 6px 22px; font: 12px / 18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; warna: # 343434; border-right: 1px solid #dadada;
Anda dapat mengumpulkan halaman serupa yang dipisah oleh kotak konten dengan berbagai lebar dan tinggi. Meskipun saya telah memasukkan beberapa kolom ke dalam demo ini, itu bukan teknik pemformatan yang diperlukan dengan cara apa pun. Bayangan kotak akan paling cocok pada latar belakang putih / abu-abu. Tapi saya pikir menampilkan lebih dari warna terang akan terlihat cukup bagus.
- Demo
6. Kotak Konten Apple
Kotak konten gaya lain di situs web Apple ini sebagian besar digunakan untuk desain kolom. Ini terutama di bagian bawah halaman yang menampilkan penawaran dan informasi terkait lainnya. Ini gaya desain yang sama sekali berbeda dengan bayangan kotak yang menampilkan bagian dalam dari atas ke bawah.
.applebox width: auto; tinggi: 85px; ukuran kotak: kotak batas; latar belakang: # f5f5f5; padding: 20px 20px 10px; margin: 10px 0 20px; perbatasan: 1px solid #ccc; batas-jari-jari: 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; mengapung: kiri; margin: 0 0 0 30px;
Saya tidak berpikir kode ini terlalu sulit untuk diikuti dan disalin ke wadah div lain. Satu-satunya bayangan kotak yang kami gunakan adalah menggunakan sisipan dengan kode warna rgba alpha-transparan. Jadi meskipun kami memiliki drop shadow yang diatur ke hitam murni, kami hanya menampilkan sekitar 30% opacity.
- Demo
7. Tautan Unggulan
Ini mungkin gaya bayangan kotak favorit saya dari situs web Apple saat ini. Anda harus menemukan gaya demo langsung dari teknik ini di halaman iCloud dengan serangkaian kotak tautan mengambang.
.kondisi tubuh tinggi: 150px; margin: 8px; vertical-align: top; display: inline-block; .applefeature a display: block; lebar: 168px; tinggi: 140px; perbatasan: 1px solid #ccc; warna: # 333; teks-dekorasi: tidak ada; font-weight: bold; garis-tinggi: 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; batas-jari-jari: 4px; .applefeature a: hover background: #fafafa; latar belakang: -webkit-gradient (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; batas-jari-jari: 4px; .applefeature a img display: block; margin: 26px otomatis 4px; .applefeature a h4 display: block; lebar: 160px; ukuran font: 1.3em; font-family: Arial, Tahoma, sans-serif; warna: # 646464; perataan teks: tengah;
Tautan berfitur ini diatur ke lebar tetap dan termasuk ikon berbeda dan teks tampilan. Contoh Apple menggunakan bayangan kotak yang sama seperti yang kita lihat di kotak konten sebelumnya. Namun seluruh kotak sekarang dapat diaktifkan sebagai tautan yang mencakup keduanya : melayang dan :aktif menyatakan. Ada banyak fleksibilitas dengan kotak tautan ini dan Anda harus mencoba bermain-main dengan kode sumber.
Dimungkinkan untuk mempersingkat tinggi / lebar dan membuat daftar tautan yang jauh lebih kecil. Ini bisa berupa serangkaian bab atau halaman dalam sebuah artikel, atau Anda dapat membuat sub-menu dibatasi dengan ikon tautan. Ini sejujurnya seperangkat teknik CSS3 baru yang menunjukkan seberapa besar kekuatan yang Anda miliki sebagai desainer web.
- Demo
8. Gambar Berbingkai
Saya telah menambahkan latar belakang abu-abu ke contoh ini sehingga Anda dapat melihat gaya bayangan kotak lebih jelas. Kotak ini mirip dengan gambar pratinjau unggulan di wordpress.com kecuali saya menambahkan sedikit lebih dalam ke kode sumber.
.wpframe background: #fff; border-radius: 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; bayangan kotak: 1px 2px 1px # d1d1d1;
Karena gambar diberi bantalan kecil di kedua sisi bingkai ini muncul sebagai perbatasan putih besar. Anda selalu dapat memperbarui warna latar belakang, atau bahkan menambahkan batas eksternal kecil untuk memisahkan gambar dari latar belakang. Tetapi rangkaian gaya yang cukup sederhana ini dapat digerakkan ke berbagai teknik bayangan kotak. Mainkan-main dengan kode dan lihat bagaimana Anda dapat meningkatkan desain gambar di situs web Anda sendiri.
- Demo
9. Glowing Bidang Input
Saya mendapat ide ini setelah mengunjungi halaman login Pinterest beberapa kali. Gaya animasi mereka benar-benar menampilkan beberapa contoh fasih dari beberapa bayangan kotak inline, baik di luar maupun di dalam.
.formwrap display: block; margin-bottom: 15px; .formwrap label display: inline-block; lebar: 80px; ukuran font: 11px; font-weight: bold; warna: # 444; font-family: Arial, Tahoma, sans-serif; .formwrap .shadowfield posisi: relatif; lebar: 250px; ukuran font: 17px; font-family: "Helvetica Neue", Arial, sans-serif; font-weight: normal; latar belakang: # f7f8f8; warna: # 7c7c7c; garis-tinggi: 1,4; padding: 6px 12px; garis besar: tidak ada; transisi: semua 0s 0s kemudahan masuk; -webkit-transition: semua 0s easy-in-out 0s; -moz-transition: semua 0s 0,2s kemudahan masuk; perbatasan: 1px solid # ad9c9c; border-radius: 6px 6px 6px 6px; box-shadow: 0 1px rgba (34, 25, 25, 0.2) inset, 0 1px #fff; .formwrap .shadowfield: focus 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);
Meskipun gaya awal sangat menarik saya tertarik pada efek transisi saat Anda fokus pada setiap bidang input. Anda dapat tab di antara mereka dan melihat perbedaan langsung di banyak properti. Bayangan kotak bercahaya eksternal diterapkan bersama dengan bayangan inset yang diperbarui. Juga warna teks menjadi lebih terang saat Anda fokus pada input tertentu, lalu menghilang saat Anda tidak fokus.
Bahkan menyalin salah satu efek ini akan sangat meningkatkan pengalaman pengguna bidang formulir Anda. Pastikan Anda tidak pergi terlalu jauh ke titik di mana formulir Anda hampir tidak dapat digunakan. Namun sebagian besar pengunjung akan menikmati efek estetika yang menyenangkan yang juga mendorong interaksi dan keterlibatan lebih lanjut dengan situs web Anda.
- Demo
10. Tombol Bayangan Elastis
Tombol-tombol bayangan unik ini ditata dengan transisi yang lambat selama hover dan status aktif. Anda dapat menemukan contoh serupa di beranda Mozilla dengan yang besar “Unduh Firefox” tombol. Beberapa bayangan kotak properti sebenarnya menggabungkan tiga bayangan berbeda menjadi satu perintah.
.blu-btn display: inline-block; -moz-border-radius: .25em; batas-jari-jari: .25em; -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), inset 0 -2px 0 0 rgba (0,0,0,0.2); -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), inset 0 -2px 0 0 rgba (0,0,0,0.2); box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), inset 0 -2px 0 0 rgba (0,0,0,0.2); warna latar: # 276195; background-image: -moz-linear-gradient (# 3c88cc, # 276195); background-image: -ms-linear-gradient (# 3c88cc, # 276195); background-image: -webkit-gradient (linear, kiri atas, kiri bawah, color-stop (0%, # 3c88cc), color-stop (100%, # 276195)); background-image: -webkit-linear-gradient (# 3c88cc, # 276195); background-image: -o-linear-gradient (# 3c88cc, # 276195); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3c88cc', endColorstr = '# 276195', GradientType = 0); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3c88cc', endColorstr =" # 276195 ", GradientType = 0)"; background-image: linear-gradient (# 3c88cc, # 276195); perbatasan: 0; kursor: pointer; warna: #fff; teks-dekorasi: tidak ada; perataan teks: tengah; ukuran font: 16px; padding: 0px 20px; tinggi: 40px; garis-tinggi: 40px; lebar minimum: 100px; text-shadow: 0 1px 0 rgba (0,0,0,0,35); font-family: Arial, Tahoma, sans-serif; -webkit-transition: semua linier .2s; -moz-transisi: semua linier .2s; -o-transisi: semua linier .2s; -ms-transisi: semua linier .2s; transisi: semua linier .2s .blu-btn: hover, .blu-btn: fokus -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), inset 0 -2px 0 0 rgba (0,0,0,0,3), inset 0 12px 20px 2px # 3089d8; -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), inset 0 -2px 0 0 rgba (0,0,0,0,3), inset 0 12px 20px 2px # 3089d8; box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), inset 0 -2px 0 0 rgba (0,0,0,0.3), inset 0 12px 20px 2px # 3089d8; .blu-btn: aktif -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), inset 0 12px 20px 6px rgba (0,0,0,0.2), inset 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: inline-block; -moz-border-radius: .25em; batas-jari-jari: .25em; -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), inset 0 -2px 0 0 rgba (0,0,0,0.2); -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), inset 0 -2px 0 0 rgba (0,0,0,0.2); box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), inset 0 -2px 0 0 rgba (0,0,0,0.2); warna latar: # 659324; background-image: -moz-linear-gradient (# 81bc2e, # 659324); background-image: -ms-linear-gradient (# 81bc2e, # 659324); background-image: -webkit-gradient (linear, kiri atas, kiri bawah, color-stop (0%, # 81bc2e), color-stop (100%, # 659324)); background-image: -webkit-linear-gradient (# 81bc2e, # 659324); background-image: -o-linear-gradient (# 81bc2e, # 659324); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 81bc2e', endColorstr = '# 659324', GradientType = 0); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 81bc2e', endColorstr =" # 659324 ", GradientType = 0)"; background-image: linear-gradient (# 81bc2e, # 659324); perbatasan: 0; kursor: pointer; warna: #fff; teks-dekorasi: tidak ada; perataan teks: tengah; ukuran font: 16px; padding: 0px 20px; tinggi: 40px; garis-tinggi: 40px; lebar minimum: 100px; text-shadow: 0 1px 0 rgba (0,0,0,0,35); font-family: Arial, Tahoma, sans-serif; -webkit-transition: semua linier .2s; -moz-transisi: semua linier .2s; -o-transisi: semua linier .2s; -ms-transisi: semua linier .2s; transisi: semua linier .2s; .grn-btn: hover, .grn-btn: fokus -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), inset 0 -2px 0 0 rgba (0,0,0 , 0,3), inset 0 12px 20px 2px # 85ca26; -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), inset 0 -2px 0 0 rgba (0,0,0,0,3), inset 0 12px 20px 2px # 85ca26; box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), inset 0 -2px 0 0 rgba (0,0,0,0.3), inset 0 12px 20px 2px # 85ca26; .grn-btn: aktif -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), inset 0 12px 20px 6px rgba (0,0,0,0.2), inset 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 transisi penuh selama 200 milidetik di hover dan status tombol aktif. Apa yang hebat tentang gaya ini adalah Anda dapat menerapkannya ke hampir semua elemen yang dapat diklik. Tombol, tautan jangkar, elemen bentuk, atau apa pun yang menurut Anda tepat - meskipun gaya ini harus digunakan secara jarang agar tidak membebani desain Anda.
Tombol-tombol seperti ini sering disimpan paling baik dengan cara yang sama seperti Mozilla menggunakannya. Lampirkan gaya ini ke blog Anda di mana Anda memiliki tombol untuk unduhan freebie, atau yang serupa. Pengguna suka berinteraksi dengan antarmuka unik dan ini sering diterjemahkan ke dalam persentase yang jauh lebih tinggi untuk peringkat klik-tayang Anda.
- Demo
Pikiran terakhir
Saya harap Anda dapat mengambil beberapa pelajaran hebat dari koleksi teknik bayangan kotak ini. Ada banyak bidang berbeda yang bisa Anda fokuskan termasuk formulir, kotak modal, tombol, bilah alat, dan bahkan tata letak situs web lengkap.
Jangan ragu untuk menerapkan efek bayangan ini ke bagian situs web Anda sendiri. Ada banyak teknik lain di luar sana, tetapi koleksi ini sangat cocok untuk pemula dan pengembang maju. Juga jika Anda memiliki saran atau pertanyaan tentang artikel Anda dapat berbagi dengan kami di area diskusi komentar di bawah ini.
