Pelajari Cara Menambahkan Efek Cahaya dengan Cepat dan Mudah Dengan CSS3

Tambahkan Cahaya ke Elemen Halaman Web untuk Penekanan

Cahaya luar yang lembut ditambahkan ke elemen di halaman web Anda menyebabkan elemen menonjol bagi pemirsa. Gunakan CSS3 dan HTML untuk menerapkan cahaya di sekitar tepi luar dari objek penting. Efeknya mirip dengan cahaya luar yang ditambahkan ke objek di Photoshop.

Pertama Buat Elemen untuk Bersinar

Efek cahaya dapat dilakukan pada setiap latar belakang warna, tetapi mereka terlihat terbaik pada latar belakang gelap karena kemudian cahaya tampak lebih berkilau. Dalam contoh kotak persegi panjang bersudut bulat ini, 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.

Berikan DIV kelas cahaya:


Atur Ukuran dan Warna dari Elemen

Setelah Anda memilih elemen yang akan dibumbui dengan cahaya, lanjutkan dan tambahkan gaya apa pun yang Anda inginkan, seperti warna latar belakang, ukuran, dan font. Contoh ini adalah kotak biru; ukuran diatur menjadi 147px kali 90px; dan warna latar belakang diatur ke # 1f5afe, warna biru kerajaan. Ini termasuk margin untuk menempatkan elemen di tengah elemen kontainer hitam.