Tutorial CSS Box Shadow: Panduan Langkah-demi-Langkah (+ Contoh)

Mengapa properti CSS box-shadow layak mendapatkan tutorialnya sendiri? Karena, seperti yang akan Anda lihat di bawah, ini adalah salah satu properti yang lebih kompleks yang mengambil sejumlah nilai secara bersamaan. Ini mungkin sangat menantang bagi pemula.

Jika selama ini Anda kesulitan menggunakan box-shadow dengan benar, Anda telah datang ke tempat yang tepat. Dalam panduan di bawah ini, kita akan membahas semua yang perlu diketahui tentang properti CSS ini. Kita akan berbicara tentang apa fungsinya, bagaimana menggunakan sintaksnya dengan benar, beberapa contoh CSS box-shadow keren, dan akhirnya beberapa alat generator yang membuat bekerja dengannya lebih mudah.

Apa itu Bayangan Kotak CSS?

Bahkan jika Anda tidak mengetahui properti box-shadow CSS sampai sekarang, Anda mungkin pernah melihatnya beraksi di web.

Di atas adalah contoh yang bagus tentang apa yang tampak seperti di alam liar (bahkan jika saya telah meningkatkannya sedikit di sini untuk menegaskan). box-shadow pada dasarnya sesuai dengan namanya: memungkinkan Anda menambahkan bayangan jatuh ke bingkai hampir semua elemen. Bayangan juga akan mengikuti bentuk jangkarnya, apakah itu persegi, persegi panjang, bulat, atau oval. Ini bahkan berlaku ketika Anda telah menetapkan properti border-radius .

Di web, orang menggunakannya untuk membuat sejumlah efek berbeda dan kita akan melihat beberapa contoh box-shadow menarik di bawah ini. Untuk saat ini, mari kita bicara tentang cara kerjanya pada tingkat paling dasar.

Sintaks Bayangan Kotak Dasar

Saat Anda melihat elemen dengan bayangan kotak menggunakan alat pengembang browser, Anda akan menemukan markup seperti ini:

 box-shadow: inset 0 25px 40px 0 rgba(0, 0, 0, 0.3);

Terlihat agak rumit, bukan?

Tapi jangan khawatir, Anda tidak membutuhkan semua deklarasi ini setiap saat. Plus, setelah Anda memahami cara kerjanya, tampaknya tidak lagi membingungkan seperti di awal.

Seperti yang Anda lihat di atas, box-shadow dapat mengambil hingga enam nilai. Mari kita bahas satu per satu.

offset-x

Nilai pertama adalah jarak horizontal drop shadow dari sisi elemen jangkarnya. Nilai positif memindahkannya ke kanan, nilai negatif ke kiri.

Anda dapat menggunakan semua tipe data CSS umum yang menunjukkan panjang untuk nilai ini, seperti px , em , vh , dan lainnya. Yang paling umum digunakan adalah px dan em .

offset-y

Sama seperti di atas tetapi untuk sumbu vertikal. Nilai positif memindahkan bayangan di bawah elemen, yang negatif di atas.

radius kabur

Ini mendefinisikan kekaburan bayangan kotak. Semakin tinggi nilainya akan semakin kabur. blur-radius juga mengambil semua denominasi panjang CSS yang umum tetapi tidak ada nilai negatif.

penyebaran-radius

Yang ini mengontrol penyebaran bayangan di luar tinggi atau lebar elemennya. Semakin tinggi panjangnya, semakin besar spreadnya. Anda juga dapat menggunakan angka negatif untuk memperkenalkan penyusutan.

warna

Seperti yang mungkin bisa Anda tebak, ini memungkinkan Anda untuk menentukan warna bayangan kotak dengan semua cara yang biasa. Ini paling sering dilambangkan dalam heksadesimal (misalnya #ededed ) atau rgba (misalnya rgba(46, 182, 142, 0.9) ) nilai. Yang terakhir ini juga memungkinkan Anda untuk mengontrol opacity, yang biasanya digunakan untuk drop shadow.

Catatan, jika Anda tidak menyetel warna, browser akan menggunakan warna teks yang saat ini digunakan.

sisipan

Terakhir, Anda dapat menambahkan inset secara opsional di awal deklarasi. Ini mengubah bayangan dari bayangan jatuh ke bayangan di dalam elemen. Itu muncul di dalam batas, di atas latar belakang, tetapi di bawah konten elemen, jadi itu tidak akan menutupi teks apa pun misalnya.

Menggunakan Nilai dalam Urutan

Berikut urutan munculnya nilai properti box-shadow .

 box-shadow: offset-x offset-y blur-radius spread-radius color inset;

Untuk menetapkan bayangan kotak, Anda memerlukan setidaknya dua nilai panjang. Browser akan secara otomatis menggunakannya untuk offset-x dan offset-y . Jika Anda menambahkan sepertiga, itu akan ditafsirkan sebagai blur-radius , yang keempat sebagai spread-radius . inset dan color adalah opsional dan dapat muncul di akhir atau awal dan dalam urutan apa pun. CSS di bawah ini semua akan memiliki hasil yang sama.

 box-shadow: 20px 20px 10px 0 inset rgba(0, 0, 0, 0.5); box-shadow: 20px 20px 10px 0 rgba(0, 0, 0, 0.5) inset; box-shadow: inset 20px 20px 10px 0 rgba(0, 0, 0, 0.5); box-shadow: rgba(0, 0, 0, 0.5) 20px 20px 10px 0 inset; box-shadow: rgba(0, 0, 0, 0.5) inset 20px 20px 10px 0; box-shadow: inset rgba(0, 0, 0, 0.5) 20px 20px 10px 0;

Menetapkan Beberapa Bayangan Kotak

Sesuatu yang tidak semua orang sadari adalah Anda dapat mengatur beberapa bayangan kotak untuk elemen yang sama. Untuk itu, cukup berikan lebih dari satu kelompok nilai dan pisahkan dengan koma.

 box-shadow: 20px 20px 10px 0 rgba(0, 0, 0, 0.5), -20px -20px 10px 0 olive;

Kode di atas keluar terlihat seperti ini:

Anda juga dapat menggunakan ini untuk membuat garis di sekitar elemen. Untuk itu, Anda hanya perlu menambahkan beberapa bayangan dalam warna berbeda dan mengatur offset dan blur ke nol.

 box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.5), 0 0 0 10px olive;

Ini menghasilkan garis besar dengan warna berbeda:

Perhatikan bahwa ini tidak memengaruhi dimensi model kotak, jadi bayangan kotak tidak menambah ukuran keseluruhan elemen seperti yang akan dilakukan margin atau border .

Kompatibilitas Peramban

Kompatibilitas browser untuk box-shadow sebenarnya bukan sesuatu yang perlu Anda khawatirkan. Ini adalah properti CSS yang sangat mapan yang diterima oleh hampir semua browser, termasuk markup seperti inset dan banyak bayangan.

Untuk mendukung versi lama dari beberapa browser, biasanya menyertakan properti -webkit-box-shadow dan -moz-box-shadow dengan nilai yang sama. Namun, untuk versi terbaru dari browser paling umum ini tidak diperlukan lagi.

Contoh Bayangan Kotak CSS

Selanjutnya dalam tutorial box-shadow ini, kami ingin membahas beberapa contoh bayangan kotak CSS sehingga Anda dapat melihat apa yang mungkin dengan properti ini. Kami akan beralih dari aplikasi yang agak standar ke aplikasi yang lebih luar biasa karena, seperti yang akan Anda lihat, Anda dapat melakukan beberapa hal yang sangat menarik dengannya.

Tambahkan Bayangan ke Tombol

Tombol sering kali merupakan elemen yang memiliki bayangan kotak yang diterapkan padanya. Itu karena itu cara yang baik untuk membuat mereka menonjol di halaman. Lagi pula, jika Anda menyertakan sebuah tombol, Anda biasanya ingin orang mengkliknya. Untuk meminta mereka melakukannya, berikut adalah contoh sederhana bagaimana melakukannya dengan bayangan kotak.

Markup yang menyertainya terlihat seperti ini:

 box-shadow: 0px 11px 12px rgba(0, 0, 0, 0.2);

Bayangan Kotak Lembut

Jika Anda ingin membuat bayangan kotak CSS yang relatif lembut, Anda sebagian besar bekerja dengan blur dan menyebar saat mengatur offset ke 0 . Dengan cara ini, bayangan tidak mendapatkan bentuk yang berbeda tetapi hanya muncul dengan lembut di sekitar tepinya.

Untuk mencapai efek di atas, Anda dapat menggunakan markup berikut:

 box-shadow: 0 0 50px 10px #999;

Ini juga merupakan cara yang bagus untuk membuat bayangan kotak di semua sisi elemen. Jika Anda ingin membuatnya lebih berbeda, cukup naikkan spread, kurangi blur, dan gunakan warna yang lebih gelap.

Beberapa Bayangan Kotak

Contoh box-shadow terakhir adalah untuk menggunakan beberapa bayangan sekaligus. Ini menawarkan kemungkinan yang berbeda. Untuk satu, Anda dapat memperkenalkan bayangan kotak beberapa langkah yang memudar.

Ini sangat sederhana: Anda hanya perlu menumpuk bayangan kotak di atas satu sama lain dengan offset yang meningkat secara merata sambil menurunkan opacity pada saat yang sama. Omong-omong, saat menggunakan banyak bayangan kotak, akan membantu untuk menulis deklarasi dalam baris terpisah daripada sebagai satu deklarasi panjang. Membuatnya jauh lebih mudah untuk dipahami.

 box-shadow: 10px 10px rgba(0, 0, 0, 0.4), 20px 20px rgba(0, 0, 0, 0.3), 30px 30px rgba(0, 0, 0, 0.2), 40px 40px rgba(0, 0, 0, 0.1), 50px 50px rgba(0, 0, 0, 0.05);

Anda juga dapat mengambil ini lebih jauh dengan memperkenalkan bayangan kotak putih dengan nilai spread-radius negatif di antaranya, menghasilkan ilusi beberapa elemen di atas satu sama lain.

Mengapa nilai spread negatif? Karena jika tidak, bayangan kotak putih akan menutupi bayangan di bawahnya. Nilai negatif mengecilkannya sehingga warna di belakangnya bisa bersinar. Di bawah ini adalah markup yang Anda butuhkan jika Anda ingin memperkenalkan efek serupa di situs web Anda sendiri:

 box-shadow: 10px 10px 0px -3px rgba(255, 255, 255), 10px 10px rgba(0, 0, 0, 0.4), 20px 20px 0px -3px rgba(255, 255, 255), 20px 20px rgba(0, 0, 0, 0.3), 30px 30px 0px -3px rgba(255, 255, 255), 30px 30px rgba(0, 0, 0, 0.2), 40px 40px 0px -3px rgba(255, 255, 255), 40px 40px rgba(0, 0, 0, 0.1), 50px 50px 0px -3px rgba(255, 255, 255), 50px 50px rgba(0, 0, 0, 0.05);

Contoh terakhir untuk beberapa bayangan kotak CSS adalah metode pengaturan offset dan blur yang disebutkan di atas ke 0 . Seperti yang telah kita lihat di atas, itu menghasilkan elemen yang memiliki beberapa garis besar, yang berwarna-warni dalam hal ini. Namun, ini hanya berfungsi karena nilai spread-radius meningkat untuk setiap bayangan kotak.

Jika Anda ingin mencobanya sendiri, Anda bisa memulainya dengan ini:

 box-shadow: 0px 0px 0px 3px red, 0px 0px 0px 6px orange, 0px 0px 0px 9px yellow, 0px 0px 0px 12px green, 0px 0px 0px 15px blue, 0px 0px 0px 18px indigo, 0px 0px 0px 21px violet;

Generator Bayangan Kotak Terbaik

Seperti yang telah kita bahas, box-shadow membutuhkan banyak nilai. Oleh karena itu, perlu sedikit trial and error sampai Anda sampai pada jenis bayangan yang Anda inginkan.

Untuk membuatnya lebih mudah, ada banyak alat pembuat bayangan kotak di luar sana yang memungkinkan Anda untuk bermain dengan kontrol mereka, melihat hasilnya segera, dan kemudian cukup salin markup setelah puas.

Berikut adalah opsi terbaik untuk generator bayangan kotak:

• box-shadow.dev — Alat tujuan tunggal ini memiliki semua fungsi yang Anda butuhkan dan antarmuka pengguna terbaik. Anda dapat menggunakan inset , membuat beberapa bayangan kotak, mengontrol offset, mengaburkan, dan menyebar melalui bilah geser, dan memasukkan warna secara manual. Setelah puas, klik Tampilkan kode untuk menyalin markup CSS. Satu-satunya downside adalah bahwa ia tidak menyediakan kode untuk browser lama.
• CSSmatic Box Shadow CSS Generator — Mirip dengan di atas. Memungkinkan Anda mengontrol properti box-shadow melalui bilah geser dan juga memasukkan angka secara manual. Memiliki kontrol sendiri untuk opacity, yang bagus. Di sisi lain, tidak ada fungsionalitas untuk banyak bayangan. Markup kode yang Anda dapatkan termasuk browser lama.
• Box Shadow CSS Generator — Opsi solid yang juga memiliki kemampuan memilih warna dan memberi Anda kode untuk browser lama juga. Anda dapat menyalinnya dengan satu klik sederhana. Ini memiliki kontrol opacity tetapi hanya dapat membuat satu drop shadow.
• CSS3gen CSS3 Box Shadow Generator — Generator drop-shadow lainnya. Fitur keren di sini adalah, alih-alih offset x dan y, Anda dapat memilih sudut dan jarak bayangan dan alat akan melakukan sisanya secara otomatis. Untuk beberapa alasan spread-radius dan inset memiliki menu sendiri. CSS yang dapat Anda salin dan tempel juga menyertakan markup untuk generasi browser yang lebih lama.

Pikiran Terakhir: CSS Box Shadow

Properti box-shadow bisa menjadi luar biasa pada awalnya. Ini adalah salah satu properti yang membutuhkan banyak nilai sehingga mungkin terlihat lebih rumit daripada yang sebenarnya. Mudah-mudahan, tutorial box-shadow CSS ini telah menghilangkan perasaan itu.

Di atas, kita telah membahas apa itu box-shadow CSS dan bagaimana cara kerjanya. Kami telah menjelaskan sintaks, nilai, dan bagaimana mereka bekerja bersama. Selain itu, kami membahas sejumlah contoh tentang cara menggunakan bayangan kotak CSS dalam kehidupan nyata, termasuk markup yang dapat Anda gunakan segera. Terakhir, bagi mereka yang menginginkan sedikit bantuan, kami mencantumkan sejumlah generator box-shadow CSS yang dapat melakukan banyak pekerjaan berat untuk Anda.

Sekarang, Anda seharusnya sudah bisa menggunakan fitur CSS ini di situs web Anda. Kami berharap dapat melihat apa yang Anda lakukan dengannya.

Bagaimana Anda menggunakan bayangan kotak CSS di situs web Anda? Adakah kasus penggunaan menarik yang belum kami bahas di atas? Beri tahu kami di komentar di bawah!