Home-theater-designers
CSS adalah bahasa yang digunakan pengembang untuk menata halaman web. Ini mengontrol bagaimana elemen HTML ditampilkan di layar, di atas kertas, atau dalam bentuk media lainnya. CSS memberikan kekuatan penyesuaian penuh untuk menata halaman web dalam gambar Anda sendiri.
Anda dapat mengubah warna latar belakang elemen, gaya font, warna font, bayangan kotak, margin, dan banyak properti lainnya menggunakan CSS. Kami akan memandu Anda melalui beberapa penggunaan bayangan kotak yang efektif dalam panduan ini.
Apa itu bayangan kotak CSS?
NS bayangan kotak properti digunakan untuk menerapkan bayangan ke elemen HTML. Ini adalah salah satu properti CSS yang paling banyak digunakan untuk kotak gaya atau gambar.
Sintaks CSS:
box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];- offset horisontal: Jika offset horizontal positif, bayangan akan berada di sebelah kanan kotak. Dan jika offset horizontal negatif, bayangan akan berada di sebelah kiri kotak.
- offset vertikal: Jika offset vertikal positif, bayangan akan berada di bawah kotak. Dan jika offset vertikal negatif, bayangan akan berada di atas kotak.
- radius kabur: Semakin tinggi nilainya, semakin kabur bayangannya.
- radius penyebaran: Ini menandakan seberapa banyak bayangan harus menyebar. Nilai positif meningkatkan penyebaran bayangan, nilai negatif mengurangi penyebaran.
- Warna: Ini menandakan warna bayangan. Juga, ini mendukung format warna apa pun seperti rgba, hex, atau hsla.
Parameter blur, spread, dan warna adalah opsional. Bagian yang paling menarik dari box-shadow adalah Anda dapat menggunakan koma untuk memisahkan nilai box-shadow beberapa kali. Ini dapat digunakan untuk membuat beberapa batas dan bayangan pada elemen.
1. Tambahkan bayangan kotak Dim ke Kiri, Kanan, dan Bawah Kotak
Anda dapat menambahkan bayangan yang sangat redup ke tiga sisi (kiri, kanan dan bawah) kotak menggunakan CSS bayangan kotak berikut dengan elemen HTML target Anda:
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;Keluaran:
2. Tambahkan bayangan kotak Dim ke Semua Sisi
Anda dapat menambahkan bayangan terang ke semua sisi kotak menggunakan CSS bayangan kotak berikut dengan elemen HTML target Anda:
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;Keluaran:
3. Tambahkan bayangan kotak Tipis ke Sisi Bawah dan Kanan
Anda dapat menambahkan bayangan ke sisi bawah dan kanan kotak menggunakan CSS bayangan kotak berikut dengan elemen HTML target Anda:
cara membuat disk pemulihan untuk windows 8
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 bayangan kotak 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 bayangan kotak berikut dengan elemen HTML target Anda:
box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;Keluaran:
8. Tambahkan bayangan kotak Dim 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 ke 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 Berwarna Tipis ke Semua Sisi
Anda dapat menambahkan bayangan batas berwarna sederhana ke semua sisi kotak menggunakan CSS bayangan kotak 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:
cara menghapus sepenuhnya hard drive windows 10
11. Tambahkan Beberapa Bayangan Perbatasan Berwarna ke Bawah
Anda dapat menambahkan beberapa bayangan batas berwarna ke bagian bawah kotak menggunakan CSS bayangan kotak 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 batas 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 cahaya ke sisi kiri dan kanan dan menyebarkan bayangan ke bagian bawah kotak menggunakan CSS bayangan kotak 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 bayangan kotak yang 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
Lembar Gaya Tertanam atau Internal dimasukkan ke dalam bagian dari dokumen HTML menggunakan elemen. Anda dapat membuat sejumlah elemen dalam dokumen HTML, tetapi mereka harus diapit di antara dan tag. Berikut adalah contoh yang menunjukkan cara menggunakan CSS Internal 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
CSS sebaris digunakan untuk menambahkan aturan gaya unik ke elemen HTML. Itu dapat digunakan dengan elemen HTML melalui gaya atribut. Atribut style 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 menunjukkan cara menggunakan CSS sebaris dengan dokumen HTML:
CSS box-shadow
Style 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 mendefinisikan dan menerapkan gaya ke dokumen HTML karena file HTML yang terpengaruh memerlukan sedikit perubahan pada markup. Berikut adalah contoh yang menunjukkan 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 {
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 kode berikut di dalam dokumen itu:
cara mengizinkan situs web melalui firewall
CSS box-shadow
Style 4
Perhatikan bahwa file CSS ditautkan dengan dokumen HTML melalui tandai dan href atribut.
Ketiga metode di atas (CSS Internal, CSS Inline dan CSS Eksternal) akan menampilkan output yang sama-
Jadikan Halaman Web Anda Elegan Dengan CSS
Dengan menggunakan CSS Anda memiliki kontrol 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. Dengan demikian, para 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.
Membagikan Membagikan Menciak Surel 10 Contoh Kode CSS Sederhana yang Dapat Anda Pelajari dalam 10 MenitButuh bantuan dengan CSS? Cobalah contoh kode CSS dasar ini untuk memulai, lalu terapkan ke halaman web Anda sendiri.
Baca Selanjutnya Topik-topik yang berkaitan- Pemrograman
- Desain web
- CSS
Yuvraj adalah mahasiswa sarjana Ilmu Komputer di University of Delhi, India. Dia bersemangat tentang Pengembangan Web Full Stack. Ketika dia tidak menulis, dia menjelajahi kedalaman teknologi yang berbeda.
More From Yuvraj ChandraBerlangganan newsletter kami
Bergabunglah dengan buletin kami untuk kiat teknologi, ulasan, ebook gratis, dan penawaran eksklusif!
Klik di sini untuk berlangganan