Cahaya luar yang lembut ditambahkan ke elemen di halaman web Anda membuat elemen menonjol bagi pemirsa. Menggunakan CSS3 dan HTML untuk menerapkan cahaya di sekitar tepi luar objek penting. Efeknya mirip dengan cahaya luar yang ditambahkan ke objek di Photoshop.
Buat Elemen untuk Bersinar
Efek cahaya bekerja pada latar belakang apa pun, tetapi terlihat paling baik pada latar belakang gelap karena cahaya tampak lebih berkilau. Dalam contoh kotak persegi panjang sudut bulat, elemen DIV ditempatkan di elemen DIV lain dengan latar belakang hitam. DIV luar tidak diperlukan untuk cahaya, tetapi sulit untuk melihat cahaya pada latar belakang putih.
Atur Ukuran dan Warna Elemen
Setelah Anda memilih elemen yang akan Anda hiasi dengan cahaya, tambahkan gaya untuk itu, seperti warna latar belakang, ukuran, dan font.
Contoh ini adalah persegi panjang biru; ukurannya diatur ke 147px kali 90px; dan warna latar belakang diatur ke #1f5afe, biru tua. Ini termasuk margin untuk menempatkan elemen di tengah elemen wadah hitam.
Putaran Sudut
Membuat persegi panjang dengan sudut membulat mudah dilakukan dengan CSS3. Tambahkan properti gaya radius batas ke kelas cahaya Anda. Ingatlah untuk menggunakan use –webkit– dan –moz– awalan untuk kompatibilitas tertinggi.
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
batas-radius: 15px;
Tambahkan Cahaya Dengan Bayangan Kotak
Cahaya itu sendiri dibuat dengan bayangan kotak. Karena lingkaran cahaya seluruh elemen tanpa memproyeksikan cahaya dari satu sisi seperti bayangan, atur panjang horizontal dan vertikal ke 0px.
Dalam contoh ini, radius blur diatur ke 15px dan penyebaran blur adalah 5px, tetapi Anda dapat mengutak-atik pengaturan tersebut untuk menentukan seberapa lebar dan difus cahaya yang Anda inginkan. Warna rgb (255.255.190) adalah warna kuning dengan transparansi alfa RGBa diatur ke 75 persen—rgba (255.255.190, .75). Pilih warna cahaya yang paling cocok untuk proyek Anda. Seperti pembulatan sudut, jangan lupa untuk menggunakan awalan browser (–webkit– dan –moz–) untuk kompatibilitas terbaik.
-webkit-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);
-moz-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);
box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);