เรียนรู้วิธีการเพิ่มผลเรืองแสงอย่างรวดเร็วและง่ายดายด้วย CSS3

เพิ่มเรืองแสงเป็นองค์ประกอบของหน้าเว็บสำหรับเน้น

รัศมีด้านนอกนุ่มที่เพิ่มลงในองค์ประกอบบนหน้าเว็บของคุณทำให้องค์ประกอบโดดเด่นกว่าผู้ดู ใช้ CSS3 และ HTML เพื่อใช้เรืองแสงรอบ ๆ ขอบด้านนอกของวัตถุที่สำคัญ ผลคล้ายกับแสงภายนอกที่เพิ่มเข้าไปในวัตถุใน Photoshop

ก่อนสร้าง Element เพื่อ Glow

เอฟเฟกต์เรืองแสงสามารถทำได้บนพื้นหลังสีใด ๆ แต่จะดูดีที่สุดบนพื้นหลังที่มืดเพราะแสงเรืองแสงดูเหมือนจะเรืองแสงมากขึ้น ในตัวอย่างสี่เหลี่ยมผืนผ้าสี่เหลี่ยมผืนผ้านี้องค์ประกอบ DIV จะถูกวางไว้ในองค์ประกอบ DIV อื่นที่มีพื้นหลังเป็นสีดำ DIV ภายนอกไม่จำเป็นสำหรับการเรืองแสง แต่ยากที่จะเห็นเรืองแสงบนพื้นหลังสีขาว

ให้ DIV ชั้น ของเรืองแสง:


ตั้งค่าขนาดและสีขององค์ประกอบ

หลังจากเลือกองค์ประกอบที่คุณต้องการตกแต่งด้วยเรืองแสงให้ดำเนินการต่อและ เพิ่มสไตล์ที่ คุณต้องการเช่นสีพื้นหลังขนาดและแบบอักษร ตัวอย่างนี้เป็นรูปสี่เหลี่ยมผืนผ้าสีน้ำเงิน ขนาดถูกตั้งไว้ที่ 147px x 90px; และสีพื้นหลังถูกตั้งค่าเป็น # 1f5 เซฟเป็นสีน้ำเงินเข้ม ซึ่งจะรวมถึงขอบเพื่อวางองค์ประกอบไว้ตรงกลางขององค์ประกอบคอนเทนเนอร์สีดำ