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 eksternal 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 Anda kilaukan 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.
Membulatkan Sudut
Membuat persegi panjang dengan sudut bulat mudah dilakukan dengan CSS3. Tambahkan properti gaya border-radius ke kelas glow Anda. Ingatlah untuk menggunakan –webkit– dan –moz– prefixes untuk kompatibilitas tertinggi.
-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px; Tambahkan Cahaya Dengan Bayangan Kotak
Cahaya itu sendiri dibuat dengan bayangan kotak. Karena Anda ingin halo untuk seluruh elemen dan tidak memproyeksikan cahaya dari satu sisi seperti bayangan, Anda mengatur panjang horisontal 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 luas dan menyebar cahaya yang Anda inginkan. Warna rgb (255.255.190) adalah warna kuning dengan transparansi RGBa alpha diatur menjadi 75 persen - rgba (255.255.190, .75). Pilih warna pijar yang paling cocok untuk proyek Anda. Sama halnya dengan 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); Uji Kotak Bersinar
Uji kotak bercahaya di satu atau beberapa browser dan lakukan penyesuaian apa pun yang diperlukan untuk memberikan efek cahaya yang paling cocok untuk halaman web Anda.
