Cara Menggunakan kotak bayangan CSS: 13 Trik dan Contohnya

Cara Menggunakan kotak bayangan CSS: 13 Trik dan Contohnya

CSS adalah bahasa yang digunakan pembangun untuk menggayakan laman web. Ini mengawal bagaimana elemen HTML ditampilkan di layar, di atas kertas, atau dalam bentuk media lain. CSS memberikan kekuatan penyesuaian sepenuhnya untuk menggayakan laman web dalam gambar anda sendiri.





Anda boleh mengubah warna latar belakang elemen, gaya font, warna font, bayangan kotak, margin, dan banyak sifat lain menggunakan CSS. Kami akan memandu anda melalui beberapa penggunaan bayang-bayang yang berkesan dalam panduan ini.



Apakah kotak bayangan CSS?

The bayangan kotak properti digunakan untuk menerapkan bayangan pada elemen HTML. Ini adalah salah satu sifat CSS yang paling banyak digunakan untuk menggayakan kotak atau gambar.





Sintaks CSS:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
  1. mengimbangi mendatar: Sekiranya ofset mendatar positif, bayangan akan berada di sebelah kanan kotak. Dan jika ofset mendatar negatif, bayangan akan berada di sebelah kiri kotak.
  2. mengimbangi menegak: Sekiranya ofset menegak positif, bayangan akan berada di bawah kotak. Dan jika ofset menegak negatif, bayangan akan berada di atas kotak.
  3. jejari kabur: Semakin tinggi nilainya, bayangan akan semakin kabur.
  4. jejari penyebaran: Ini menandakan berapa banyak bayangan yang harus disebarkan. Nilai positif meningkatkan penyebaran bayangan, nilai negatif mengurangkan penyebaran.
  5. Warna: Ini menandakan warna bayangan. Ia juga menyokong format warna seperti rgba, hex, atau hsla.

Parameter kabur, penyebaran, dan warna adalah pilihan. Bahagian bayangan kotak yang paling menarik ialah anda boleh menggunakan koma untuk memisahkan nilai bayangan kotak berkali-kali. Ini boleh digunakan untuk membuat pelbagai sempadan dan bayangan pada elemen.



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

Anda boleh menambahkan bayangan yang sangat redup ke tiga sisi (kiri, kanan dan bawah) kotak menggunakan CSS bayangan kotak berikut dengan elemen HTML sasaran anda:

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

Pengeluaran:



2. Tambahkan kotak bayangan Dim ke Semua Sisi

Anda boleh menambahkan bayang-bayang cahaya ke semua sisi kotak menggunakan CSS kotak bayangan berikut dengan elemen HTML sasaran anda:



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

Pengeluaran:

3. Tambahkan bayangan kotak tipis ke Bahagian Bawah dan Kanan

Anda boleh menambahkan bayangan ke bahagian bawah dan kanan kotak menggunakan CSS kotak bayangan berikut dengan elemen HTML sasaran anda:

cara menukar kembali ke gmail klasik
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

Pengeluaran:

4. Tambahkan bayangan kotak Gelap ke Semua Sisi

Anda boleh menambahkan bayangan gelap ke semua sisi kotak menggunakan CSS bayangan kotak berikut dengan elemen HTML sasaran anda:

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

Pengeluaran:

5. Tambahkan Spread Shadow ke Semua Sisi

Anda boleh menambahkan bayangan penyebaran ke semua sisi kotak menggunakan perintah berikut dengan elemen HTML sasaran 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;

Pengeluaran:

6. Tambahkan Bayangan Sempadan Tipis ke Semua Sisi

Anda boleh menambahkan bayangan sempadan sederhana ke semua sisi kotak menggunakan CSS berikut dengan elemen HTML sasaran 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;

Pengeluaran:

7. Tambahkan bayangan kotak ke Bahagian Bawah dan Kiri

Anda boleh menambahkan bayangan ke bahagian bawah dan kiri kotak menggunakan CSS kotak-bayangan berikut dengan elemen HTML sasaran anda:

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

Pengeluaran:

8. Tambahkan bayangan kotak Dim ke Bahagian Atas dan Kiri, Bayangan Gelap ke Bahagian Bawah dan Kanan

Anda boleh menambahkan bayangan cahaya ke bahagian atas dan kiri kotak serta bayangan gelap ke sisi bawah dan kanan kotak menggunakan CSS berikut dengan elemen HTML sasaran anda:

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

Pengeluaran:

9. Tambahkan Bayangan Sempadan yang Tipis dan Berwarna ke Semua Sisi

Anda boleh menambah bayangan sempadan berwarna sederhana ke semua sisi kotak menggunakan CSS bayangan kotak berikut dengan elemen HTML sasaran anda:

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

Pengeluaran:

10. Tambahkan Bayangan Sempadan Berbilang Warna ke Bahagian Bawah dan Kiri Kotak

Anda boleh menambah bayangan sempadan berwarna ke sisi bawah dan kiri kotak menggunakan CSS berikut dengan elemen HTML sasaran 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;

Pengeluaran:

cara membuat antena wifi

11. Tambahkan Bayangan Sempadan Berbilang Warna ke Bahagian Bawah

Anda boleh menambah bayang-bayang sempadan berwarna ke bahagian bawah kotak menggunakan CSS bayangan kotak berikut dengan elemen HTML sasaran 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;

Pengeluaran:

12. Tambahkan Bayangan Sempadan Berbilang Warna ke Bahagian Bawah dan Kanan Kotak

Anda boleh menambah bayangan sempadan berwarna ke sisi bawah dan kanan kotak menggunakan CSS berikut dengan elemen HTML sasaran 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;

Pengeluaran:

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

Anda boleh menambahkan bayangan cahaya ke sisi kiri dan kanan dan menyebarkan bayangan ke bahagian bawah kotak menggunakan CSS kotak-bayangan berikut dengan elemen HTML sasaran 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;

Pengeluaran:

Mengintegrasikan CSS dengan Halaman HTML

Sekarang anda tahu bagaimana menambahkan kesan kotak bayangan yang keren menggunakan CSS, anda dapat menggabungkannya dengan elemen HTML dengan pelbagai cara.

Berkaitan: 11 Alat Berguna untuk Memeriksa, Membersihkan, dan Mengoptimumkan Fail CSS

Anda boleh memasukkannya ke halaman HTML itu sendiri atau melampirkannya sebagai dokumen yang berasingan. Terdapat tiga cara untuk memasukkan CSS dalam dokumen HTML:

CSS dalaman

Helaian Gaya Tertanam atau Dalaman dimasukkan ke dalam bahagian dokumen HTML menggunakan unsur. Anda boleh membuat sebilangan elemen dalam dokumen HTML, tetapi mereka mesti dilampirkan di antara dan tanda nama. Berikut adalah contoh yang menunjukkan cara menggunakan CSS Dalaman dengan dokumen HTML:





CSS box-shadow

.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}




Style 4





CSS sebaris

Inline CSS digunakan untuk menambahkan peraturan gaya unik ke elemen HTML. Ia dapat digunakan dengan elemen HTML melalui gaya atribut. Atribut gaya mengandungi sifat CSS dalam bentuk 'harta: nilai' dipisahkan dengan titik koma ( ; ).

Berkaitan: Ketahui Cara Membangun Laman Web Dua Dimensi Dengan CSS Grid

Semua sifat CSS mesti berada dalam satu baris iaitu tidak boleh ada jeda baris antara sifat CSS. Berikut adalah contoh yang menunjukkan cara menggunakan CSS sebaris dengan dokumen HTML:





CSS box-shadow



Style 4





CSS luaran

CSS luaran adalah cara paling ideal untuk menerapkan gaya pada dokumen HTML. Lembaran gaya luaran mengandungi semua peraturan gaya dalam dokumen yang terpisah (file .css), dokumen ini kemudian dihubungkan ke dokumen HTML menggunakan teg. Kaedah ini adalah kaedah terbaik untuk menentukan dan menerapkan gaya pada dokumen HTML kerana fail HTML yang terpengaruh memerlukan perubahan minimum dalam markup. Berikut adalah contoh yang menunjukkan cara menggunakan CSS luaran dengan dokumen HTML:

Buat fail CSS baru dengan .css sambungan. Sekarang tambahkan kod CSS berikut di dalam fail itu:

.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

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

boleh dapatkan google di roku




CSS box-shadow




Style 4





Perhatikan bahawa fail CSS dihubungkan dengan dokumen HTML melalui teg dan href atribut.

Ketiga-tiga kaedah di atas (CSS Dalaman, CSS Inline dan CSS Luaran) akan menampilkan output yang sama-

Jadikan Halaman Web Anda Elegan Dengan CSS

Dengan menggunakan CSS, anda mempunyai kawalan penuh terhadap gaya laman web anda. Anda boleh menyesuaikan setiap elemen HTML menggunakan pelbagai sifat CSS. Peranti dari seluruh dunia menyumbang kepada kemas kini CSS, dan mereka telah melakukannya sejak dilancarkan pada tahun 1996. Oleh itu, pemula harus banyak belajar!

Nasib baik, CSS mesra pemula. Anda boleh mendapatkan latihan yang baik dengan memulakan dengan beberapa arahan mudah dan melihat ke mana kreativiti anda membawa anda.

Berkongsi Berkongsi Tweet E-mel 10 Contoh Kod CSS Mudah yang Anda Boleh Pelajari dalam 10 Minit

Perlukan bantuan dengan CSS? Cubalah contoh kod asas CSS ini, kemudian gunakannya ke laman web anda sendiri.

Baca Seterusnya Topik-topik yang berkaitan
  • Pengaturcaraan
  • Reka Bentuk Web
  • CSS
Mengenai Pengarang Yuvraj Chandra(60 Artikel Diterbitkan)

Yuvraj adalah pelajar sarjana Sains Komputer di University of Delhi, India. Dia meminati Pembangunan Web Stack Penuh. Ketika dia tidak menulis, dia meneroka kedalaman teknologi yang berbeza.

Lagi Dari Yuvraj Chandra

Langgan buletin kami

Sertailah buletin kami untuk mendapatkan petua, ulasan, ebook percuma, dan tawaran eksklusif!

Klik di sini untuk melanggan