Lampu luar lembut yang ditambah pada elemen di laman web anda menyebabkan elemen menonjol ke penonton. Gunakan CSS3 dan HTML untuk memohon cahaya di sekitar tepi luar sesuatu objek penting. Kesannya adalah sama dengan cahaya luar yang ditambah kepada objek dalam Photoshop.
Pertama Buat Elemen ke Cahaya
Kesan cahaya boleh dilakukan pada mana-mana latar belakang warna, tetapi mereka kelihatan lebih baik pada latar belakang gelap kerana kemudian cahaya kelihatan lebih berkilau. Dalam contoh kotak persegi bulat ini, elemen DIV diletakkan dalam elemen DIV yang lain dengan latar belakang hitam. DIV luar tidak perlu untuk cahaya, tetapi sukar untuk melihat cahaya pada latar belakang putih.
Berikan DIV satu kelas cahaya:
Tetapkan Saiz dan Warna Elemen
Selepas anda memilih elemen yang akan anda pelangi dengan cahaya, teruskan dan tambahkan apa-apa gaya yang anda mahu, seperti warna latar belakang, saiz, dan fon. Contoh ini adalah segi empat biru; saiz ditetapkan kepada 147px oleh 90px; dan warna latar belakang ditetapkan kepada # 1f5afe, biru diraja. Ia termasuk margin untuk meletakkan unsur di tengah-tengah unsur kontena hitam.
Pusingan Sudut
Mewujudkan segi empat tepat dengan sudut bulat mudah dengan CSS3. Tambah sifat gaya radius sempadan ke kelas cahaya anda. Ingatlah untuk menggunakan awalan -webkit- dan -moz untuk keserasian tertinggi.
-webkit-border-radius: 15px;-moz-border-radius: 15px;jejari sempadan: 15px; Tambah Glow Dengan Shadow Box
Cahaya itu sendiri diciptakan dengan bayangan kotak. Kerana anda mahu mengelakkan keseluruhan elemen dan tidak memperlihatkan cahaya dari satu sisi seperti bayang-bayang, anda menetapkan panjang mendatar dan tegak ke 0px. Dalam contoh ini, jejari kabur ditetapkan kepada 15px dan penyebaran blur adalah 5px, tetapi anda boleh membariskan dengan tetapan tersebut untuk menentukan sejauh mana luas dan meresap anda mahu cahaya menjadi. Warna rgb (255,255,190) adalah warna kuning dengan transparansi alpha RGBa ditetapkan kepada 75 peratus-rgba (255,255,190, .75). Pilih warna cahaya yang berfungsi paling sesuai untuk projek anda. Seperti dengan membulatkan sudut, jangan lupa menggunakan awalan penyemak imbas (-webkit- dan -moz-) untuk keserasian yang 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 Box Glowing
Uji kotak bercahaya dalam satu atau lebih pelayar dan buat sebarang pelarasan yang diperlukan untuk memberikan kesan cahaya yang berfungsi paling baik untuk halaman web anda.
