Telah Hadir Kembali Plesk Hosting NVME Jakarta yang Super Cepat!

Buy Now
Cloudku logo 1
Online-kan Segera Website Anda!
Didukung oleh SSD Enterprise dan Webserver Nginx yang membuat website Anda super cepat.
Interface Plesk menyajikan pengalaman pengguna yang lebih mudah.
Tunjukkan pada dunia, apa yang Anda tawarkan!
Dapatkan pelanggan di seluruh belahan dunia!
Register Domain
Temukan domain impianmu.
Rp215.495
Rp17.249
Rp15.939
Rp365.000
Rp251.084
Transfer Domain
Transfer & Perbarui Domain Anda ke Cloudku Sekarang
Ide Hebat Dimulai dengan Nama Domain yang Hebat!
Pilih nama domain sesuka Anda!
Pesan sekarang sebelum diambil orang lain!
Server dengan Performa Tinggi
Speed up to 500Mbps Rasakan sendiri betapa cepatnya berlayar di sever kami!
Nikmati mudahnya mengelola VPS melalui dashboard kami!
Segera Custom Sekarang!
Penawaran terbatas! Ambil kesempatan Anda! Datacenter kami berada di Tier III Koneksi up to 10Gbps

Tidak ada yang lebih profesional daripada alamat email yang dipersonalisasi dengan nama domain Anda sendiri.
Anda Cukup Fokus pada Bisnis Anda!
Biarkan website menjadi urusan kami. Custom website Anda, tim kami siap mewujudkan mimpi Anda!
Custom sekarang!

Amankan Sistem Anda!
Memastikan sistem Anda aman dari malware,ransomware dan virus lain.
Compatible di semua device.

Cek Dokumentasi Kami!

Mari belajar bersama.
Layanan Anda bermasalah? Bukan hal yang mustahil lagi untuk memperbaiki sendiri!"
We Are available 24/7 to help answer question and solve your problems.

ContacT US

Contact Form

Mengenal Box Shadow dalam CSS

by Rizal Johan / Februari 23, 2023

Apa sih Box Shadow itu

Box Shadow adalah property CSS yang memungkinkan untuk menambahkan bayangan pada sebuah elemen HTML, seperti kotak atau teks. Property ini dapat digunakan untuk memberikan efek visual yang menarik pada desain website kalian.

Box shadow CSS memiliki beberapa nilai yang dapat diatur, termasuk warna bayangan, ukuran, jarak dari elemen, dan jenis bayangan. Dengan mengatur nilai-nilai ini, Anda dapat menciptakan efek bayangan yang bervariasi, seperti bayangan yang halus dan tipis atau bayangan yang tebal dan kasar.

Berikut ini adalah contoh penggunaan Box Shadow

.box {

  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);

}

Kode diatas akan memberikan bayangan dengan ukuran 2px di sebelah kanan dan bawah elemen, jarak bayangan 5px dari elemen, dan warna bayangan hitam transparan dengan opasitas sebesar 0,3

Jenis - jenis Box Shadow didalam CSS

1. Single box shadow: Bayangan tunggal pada elemen dengan nilai horizontal offset, vertical offset, blur radius, dan warna bayangan yang didefinisikan.

.box {

  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);

}

2. Multiple box shadow: Beberapa bayangan pada elemen dengan menambahkan nilai offset, blur radius, dan warna bayangan menggunakan koma.

.box {

  box-shadow: 2px 2px 5px rgba(0,0,0,0.3), -2px -2px 5px rgba(255,255,255,0.3);

}

3. Inner box shadow: Bayangan pada dalam elemen,bukan di sekitar elemen.

.box {

  box-shadow: inset 2px 2px 5px rgba(0,0,0,0.3);

}

4. Outset box shadow: Bayangan yang ditempatkan di sekitar elemen.

.box {

  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);

}

5. Text Shadow: Bayangan pada teks di dalam elemen.

.text {

  text-shadow: 2px 2px 5px rgba(0,0,0,0.3);

}

6. Multiple text shadow: Beberapa bayangan pada teks dengan menambahkan nilai offset, blur radius, dan warna bayangan menggunakan koma.

.text {

  text-shadow: 2px 2px 5px rgba(0,0,0,0.3), -2px -2px 5px rgba(255,255,255,0.3);

}

Dengan memahami jenis-jenis box shadow di CSS, Anda dapat memilih dan mengatur jenis bayangan yang sesuai untuk mengatakan tampilan desain website kalian.

Kapan kita harus menggunakan Box Shadow dalam CSS

Anda dapat menggunakan box shadow CCS ketika ingin memberikan efek visual pada elemen HTML kalian. Box shadow dapat memberikan tampilan yang lebih menarik dan profesional pada desain website kalian: Beberapa alasan mengapa kalian mungkin ingin menggunakan box shadow CSS:

  • Menekankan elemen penting: Bayangan dapat membantu menyoroti elemen penting pada halaman web, seperti tombol aksi atau elemen navigasi.
  • Memberikan dimensi pada elemen: Dengan memberikan bayangan pada elemen, Anda dapat memberikan dimensi visual dan membuatnya lebih menonjol.
  • Memberikan efek kedalaman: Bayangan dapat memberikan efek kedalaman pada elemen dan membuat desain website terlihat lebih kompleks.
  • Meningkatkan kesan profesional: Bayangan dapat membuat desain website terlihat lebih profesional dan modern.

Namun, penting untuk diingat bahwa menggunakan box shadow CCS harus dibuat dengan hati-hati dan tidak berlebihan. Terlalu banyak bayangan atau bayangan yang tidak diatur dengan baik dapat menggangu tampilan desain website Anda. Selain itu, pastikan bahwa box shadow CSS kalian konsisten dengan gaya desain keseluruan pada halaman web kalian.

Kapan kita tidak harus menggunakan Box Shadow didalam CSS

Box shadow dapat terlihat jelek atau menggunakan tampilan desain website ketika digunakan dengan tidak benar atau berlebihan. Berikut adalah beberapa hal yang dapat membaut box shadow menjadi terlihat jelek:

  • Terlalu banyak bayangan: terlalu banyak bayangan pada elemen dapat membuat desain website terlihat berantakan dan sulit untuk dibaca
  • Warna bayangan yang tidak sesuai: warna bayangan yang tidak cocok dengan warna latar belakang atau elemen lain pada halaman web dapat membuat desain website terlihat tidak seimbang.
  • Ukuran bayangan yang tidak sesuai: bayangan yang terlalu besar atau kecil dapat membuat elemen tidak proposional.
  • Jarak bayangan yang salah: jarak antara elemen dan bayangan yang salah dapat membaut desain website terlihat tidak seimbang atau tidak teratur.
  • Tidak konsisten dengan gaya desain keseluruhan: box shadow yang tidak konsisten dengan gaya desain keseluruhan pada halaman web dapat membuat desain website terlihat tidak proporsional.

Oleh karna itu, penting untuk menggunakan box shadow dengan hati-hati dan memperhatikan detail seperti ukuran, jarak, dan warna bayangan. Pastikan bahwa box shadow yang kalian

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

We Accept
@ 2023 Cloudku subsidiary PT Menara Sinar Semesta. All rights reserved.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram