Cara Menggunakan CSS box-shadow: 13 Trik dan Contoh

CSS adalah bahasa yang digunakan pengembang untuk mendesain halaman web. Ini mengontrol bagaimana elemen HTML ditampilkan di layar, di atas kertas, atau dalam bentuk media lainnya. CSS memberikan kekuatan kustomisasi penuh untuk menata halaman web dengan gambar Anda sendiri.

Anda dapat mengubah warna latar belakang elemen, gaya font, warna font, box-shadow, margin, dan banyak properti lainnya menggunakan CSS. Kami akan memandu Anda melalui beberapa penggunaan box-shadow yang efektif dalam panduan ini.

Apa itu CSS box-shadow?

Itu box-shadow properti digunakan untuk menerapkan bayangan ke elemen HTML. Ini adalah salah satu properti CSS yang paling banyak digunakan untuk menata kotak atau gambar.

Sintaks CSS:

box-shadow: [offset horizontal] [offset vertikal] [radius blur] [radius sebaran opsional] [warna];

1. offset horizontal: Jika offset horizontal positif, bayangan akan berada di sebelah kanan kotak. Dan jika offset horizontal negatif, bayangan akan berada di sebelah kiri kotak.
2. offset vertikal:
   instagram viewer
    Jika offset vertikal positif, bayangan akan berada di bawah kotak. Dan jika offset vertikal negatif, bayangan akan berada di atas kotak.
3. radius blur: Semakin tinggi nilainya, semakin kabur bayangannya.
4. radius penyebaran: Ini menandakan seberapa banyak bayangan harus menyebar. Nilai positif meningkatkan penyebaran bayangan, nilai negatif mengurangi penyebaran.
5. Warna: Itu menandakan warna bayangan. Selain itu, ini mendukung format warna apa pun seperti rgba, hex, atau hsla.

Parameter blur, spread, dan warna adalah opsional. Bagian paling menarik dari box-shadow adalah Anda dapat menggunakan koma untuk memisahkan nilai box-shadow beberapa kali. Ini dapat digunakan untuk membuat banyak perbatasan dan bayangan pada elemen.

1. Tambahkan bayangan kotak Redup ke Kiri, Kanan, dan Bawah Kotak

Anda dapat menambahkan bayangan yang sangat redup ke tiga sisi (kiri, kanan dan bawah) kotak menggunakan CSS box-shadow berikut dengan elemen HTML target Anda:

box-shadow: rgba (149, 157, 165, 0.2) 0px 8px 24px;

Keluaran:

2. Tambahkan bayangan kotak Redup ke Semua Sisi

Anda dapat menambahkan bayangan terang ke semua sisi kotak menggunakan CSS box-shadow berikut dengan elemen HTML target Anda:

box-shadow: rgba (100, 100, 111, 0.2) 0px 7px 29px 0px;

Keluaran:

3. Tambahkan kotak-bayangan tipis ke Sisi Bawah dan Kanan

Anda dapat menambahkan bayangan ke sisi bawah dan kanan kotak menggunakan CSS box-shadow berikut dengan elemen HTML target Anda:

box-shadow: rgba (0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

Keluaran:

4. Tambahkan bayangan kotak Gelap ke Semua Sisi

Anda dapat menambahkan bayangan gelap ke semua sisi kotak menggunakan CSS box-shadow berikut dengan elemen HTML target Anda:

box-shadow: rgba (0, 0, 0, 0,35) 0px 5px 15px;

Keluaran:

5. Tambahkan Spread Shadow ke Semua Sisi

Anda dapat menambahkan bayangan menyebar ke semua sisi kotak menggunakan perintah berikut dengan elemen HTML target Anda:

box-shadow: rgba (0, 0, 0, 0.25) 0px 54px 55px, rgba (0, 0, 0, 0.12) 0px -12px 30px, rgba (0, 0, 0, 0.12) 0px 4px 6px, rgba (0, 0, 0, 0.17) 0px 12px 13px, rgba (0, 0, 0, 0.09) 0px -3px 5px;

Keluaran:

6. Tambahkan Bayangan Perbatasan Tipis ke Semua Sisi

Anda dapat menambahkan bayangan batas sederhana ke semua sisi kotak menggunakan CSS berikut dengan elemen HTML target Anda:

box-shadow: rgba (6, 24, 44, 0.4) 0px 0px 0px 2px, rgba (6, 24, 44, 0.65) 0px 4px 6px -1px, rgba (255, 255, 255, 0.08) 0px 1px 0px inset;

Keluaran:

7. Tambahkan bayangan kotak ke Sisi Bawah dan Kiri

Anda dapat menambahkan bayangan ke sisi bawah dan kiri kotak menggunakan CSS box-shadow berikut dengan elemen HTML target Anda:

box-shadow: rgba (0, 0, 0, 0.1) -4px 9px 25px -6px;

Keluaran:

8. Tambahkan bayangan kotak Redup ke Sisi Atas dan Kiri, Bayangan Gelap ke Sisi Bawah dan Kanan

Anda dapat menambahkan bayangan terang ke sisi atas dan kiri kotak serta bayangan gelap di sisi bawah dan kanan kotak menggunakan CSS berikut dengan elemen HTML target Anda:

box-shadow: rgba (136, 165, 191, 0.48) 6px 2px 16px 0px, rgba (255, 255, 255, 0.8) -6px -2px 16px 0px;

Keluaran:

9. Tambahkan Bayangan Perbatasan Tipis Berwarna ke Semua Sisi

Anda dapat menambahkan bayangan batas berwarna sederhana ke semua sisi kotak menggunakan CSS box-shadow berikut dengan elemen HTML target Anda:

box-shadow: rgba (3, 102, 214, 0,3) 0px 0px 0px 3px;

Keluaran:

10. Tambahkan Beberapa Bayangan Perbatasan Berwarna ke Sisi Bawah dan Kiri Kotak

Anda dapat menambahkan beberapa bayangan batas berwarna ke sisi bawah dan kiri kotak menggunakan CSS berikut dengan elemen HTML target Anda:

box-shadow: rgba (50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba (0, 0, 0, 0.3) 0px 18px 36px -18px inset;

Keluaran:

11. Tambahkan Beberapa Bayangan Perbatasan Berwarna ke Bawah

Anda dapat menambahkan beberapa bayangan batas berwarna ke bagian bawah kotak menggunakan CSS box-shadow berikut dengan elemen HTML target Anda:

box-shadow: rgba (240, 46, 170, 0.4) 0px 5px, rgba (240, 46, 170, 0.3) 0px 10px, rgba (240, 46, 170, 0.2) 0px 15px, rgba (240, 46, 170, 0.1) 0px 20px, rgba (240, 46, 170, 0.05) 0px 25px;

Keluaran:

12. Tambahkan Beberapa Bayangan Perbatasan Berwarna ke Sisi Bawah dan Kanan Kotak

Anda dapat menambahkan beberapa bayangan perbatasan berwarna ke sisi bawah dan kanan kotak menggunakan CSS berikut dengan elemen HTML target Anda:

box-shadow: rgba (240, 46, 170, 0.4) 5px 5px, rgba (240, 46, 170, 0.3) 10px 10px, rgba (240, 46, 170, 0.2) 15px 15px, rgba (240, 46, 170, 0.1) 20px 20px, rgba (240, 46, 170, 0.05) 25px 25px;

Keluaran:

13. Tambahkan Bayangan Cahaya ke Sisi Kiri dan Kanan, Sebarkan Bayangan ke Bawah

Anda dapat menambahkan bayangan terang ke sisi kiri dan kanan dan menyebarkan bayangan ke bagian bawah kotak menggunakan CSS box-shadow berikut dengan elemen HTML target Anda:

box-shadow: rgba (0, 0, 0, 0.09) 0px 2px 1px, rgba (0, 0, 0, 0.09) 0px 4px 2px, rgba (0, 0, 0, 0.09) 0px 8px 4px, rgba (0, 0, 0, 0.09) 0px 16px 8px, rgba (0, 0, 0, 0.09) 0px 32px 16px;

Keluaran:

Integrasikan CSS Dengan Halaman HTML

Sekarang Anda tahu cara menambahkan efek box-shadow keren menggunakan CSS, Anda dapat dengan mudah mengintegrasikannya dengan elemen HTML dalam berbagai cara.

Terkait: 11 Alat Berguna untuk Memeriksa, Membersihkan, dan Mengoptimalkan File CSS

Anda dapat menyematkannya di halaman HTML itu sendiri atau melampirkannya sebagai dokumen terpisah. Ada tiga cara untuk memasukkan CSS dalam dokumen HTML:

CSS internal

Embedded atau Internal Style Sheets disisipkan di dalam bagian dari dokumen HTML menggunakan elemen. Anda dapat membuat sejumlah elemen dalam dokumen HTML, tetapi harus diapit di antara dan tag. Berikut adalah contoh yang mendemonstrasikan cara menggunakan CSS Internal dengan dokumen HTML:

Gaya 4

CSS sebaris

CSS sebaris digunakan untuk menambahkan aturan gaya unik ke elemen HTML. Ini dapat digunakan dengan elemen HTML melalui gaya atribut. Atribut gaya berisi properti CSS dalam bentuk "nilai properti" dipisahkan dengan titik koma (;).

Terkait: Pelajari Cara Membangun Situs Web Dua Dimensi Dengan CSS Grid

Semua properti CSS harus berada dalam satu baris, yaitu tidak boleh ada jeda baris di antara properti CSS. Berikut adalah contoh yang mendemonstrasikan cara menggunakan CSS sebaris dengan dokumen HTML:

Gaya 4

CSS Eksternal

CSS eksternal adalah cara paling ideal untuk menerapkan gaya ke dokumen HTML. Lembar gaya eksternal berisi semua aturan gaya dalam dokumen terpisah (file .css), dokumen ini kemudian ditautkan ke dokumen HTML menggunakan menandai. Metode ini adalah metode terbaik untuk menentukan dan menerapkan gaya ke dokumen HTML karena file HTML yang terpengaruh memerlukan sedikit perubahan pada markup. Berikut adalah contoh yang mendemonstrasikan cara menggunakan CSS eksternal dengan dokumen HTML:

Buat file CSS baru dengan .css perpanjangan. Sekarang tambahkan kode CSS berikut di dalam file itu:

.heading {
text-align: center;
}
.image-box {
tampilan: blok;
margin kiri: otomatis;
margin kanan: otomatis;
box-shadow: rgba (0, 0, 0, 0,35) 0px 5px 15px;
}

Terakhir, buat dokumen HTML dan tambahkan kode berikut di dalam dokumen itu:

Gaya 4

Perhatikan bahwa file CSS ditautkan dengan dokumen HTML melalui tag dan href atribut.

Ketiga metode di atas (CSS Internal, CSS Inline, dan CSS Eksternal) akan menampilkan keluaran yang sama-

Jadikan Halaman Web Anda Elegan Dengan CSS

Dengan menggunakan CSS Anda memiliki kendali penuh atas gaya halaman web Anda. Anda dapat menyesuaikan setiap elemen HTML menggunakan berbagai properti CSS. Pengembang dari seluruh dunia berkontribusi pada pembaruan CSS, dan mereka telah melakukannya sejak dirilis pada tahun 1996. Karena itu, pemula harus banyak belajar!

Untungnya, CSS ramah bagi pemula. Anda bisa mendapatkan beberapa latihan yang sangat baik dengan memulai dengan beberapa perintah sederhana dan melihat ke mana kreativitas Anda membawa Anda.

10 Contoh Kode CSS Sederhana yang Dapat Anda Pelajari dalam 10 Menit

Ingin tahu lebih banyak tentang menggunakan CSS? Cobalah contoh kode CSS dasar ini untuk memulai, lalu terapkan ke halaman web Anda sendiri.

Baca Selanjutnya

Tentang Penulis