รัศมีด้านนอกนุ่มที่เพิ่มลงในองค์ประกอบบนหน้าเว็บของคุณทำให้องค์ประกอบโดดเด่นกว่าผู้ดู ใช้ CSS3 และ HTML เพื่อใช้เรืองแสงรอบ ๆ ขอบด้านนอกของวัตถุที่สำคัญ ผลคล้ายกับแสงภายนอกที่เพิ่มเข้าไปในวัตถุใน Photoshop
ก่อนสร้าง Element เพื่อ Glow
เอฟเฟกต์เรืองแสงสามารถทำได้บนพื้นหลังสีใด ๆ แต่จะดูดีที่สุดบนพื้นหลังที่มืดเพราะแสงเรืองแสงดูเหมือนจะเรืองแสงมากขึ้น ในตัวอย่างสี่เหลี่ยมผืนผ้าสี่เหลี่ยมผืนผ้านี้องค์ประกอบ DIV จะถูกวางไว้ในองค์ประกอบ DIV อื่นที่มีพื้นหลังเป็นสีดำ DIV ภายนอกไม่จำเป็นสำหรับการเรืองแสง แต่ยากที่จะเห็นเรืองแสงบนพื้นหลังสีขาว
ให้ DIV ชั้นของเรืองแสง:
ตั้งค่าขนาดและสีขององค์ประกอบ
หลังจากเลือกองค์ประกอบที่คุณต้องการตกแต่งด้วยเรืองแสงให้ดำเนินการต่อและเพิ่มสไตล์ที่คุณต้องการเช่นสีพื้นหลังขนาดและแบบอักษร ตัวอย่างนี้เป็นรูปสี่เหลี่ยมผืนผ้าสีน้ำเงิน ขนาดถูกตั้งไว้ที่ 147px x 90px; และสีพื้นหลังถูกตั้งค่าเป็น # 1f5 เซฟเป็นสีน้ำเงินเข้ม ซึ่งจะรวมถึงขอบเพื่อวางองค์ประกอบไว้ตรงกลางขององค์ประกอบคอนเทนเนอร์สีดำ
รอบมุม
การสร้างสี่เหลี่ยมผืนผ้าที่มีมุมโค้งมนเป็นเรื่องง่ายด้วย CSS3 เพิ่มคุณสมบัติสไตล์ขอบรัศมีกับระดับเรืองแสงของคุณ เพียงแค่จำไว้ว่าให้ใช้เว็บเบราเซอร์และมูก - คำนำหน้าเพื่อความเข้ากันได้สูงสุด
-webkit-border-radius: 15px;-moz-border-radius: 15px;รัศมีขอบ: 15px; เพิ่มเรืองแสงด้วยกล่องเงา
เรืองแสงถูกสร้างขึ้นด้วยกล่องเงา เนื่องจากคุณต้องการให้รัศมีองค์ประกอบทั้งหมดและไม่ฉายแสงจากด้านใดด้านหนึ่งเช่นเงาคุณจะกำหนดความยาวแนวนอนและแนวตั้งเป็น 0px ในตัวอย่างนี้รัศมีเบลอถูกตั้งไว้ที่ 15px และการแพร่กระจายของภาพเบลอเป็น 5px แต่คุณสามารถบรรเลงด้วยการตั้งค่าเหล่านี้เพื่อกำหนดความกว้างและการกระจายที่คุณต้องการให้เป็นประกาย สี rgb (255,255,190) เป็นสีเหลืองที่มีความโปร่งใสของ RGBa alpha ตั้งไว้ที่ 75 เปอร์เซ็นต์-rgba (255,255,190. .75) เลือกสีเรืองแสงที่เหมาะกับโครงการของคุณมากที่สุด เช่นเดียวกับการปัดเศษมุมอย่าลืมใช้เบราว์เซอร์คำนำหน้า (-webkit- และ -moz-) เพื่อให้เข้ากันได้ดีที่สุด
-buzzbox- เงา: 0px 0px 15px 5px rgba (255, 255, 190, .75);-moz-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);ช่องเงา: 0px 0px 15px 5px rgba (255, 255, 190, .75); ทดสอบกล่องเรืองแสง
ทดสอบกล่องเรืองแสงในเบราว์เซอร์ตั้งแต่หนึ่งเบราว์เซอร์ขึ้นไปและทำการปรับเปลี่ยนใด ๆ ที่จำเป็นเพื่อให้ผลเรืองแสงทำงานได้ดีที่สุดสำหรับหน้าเว็บของคุณ
