คำอธิบายโดยละเอียดของเงา CSS:

นักออกแบบมักใช้เอฟเฟ็กต์แบบอักษรและเอฟเฟ็กต์หน้าที่เป็นเอกลักษณ์ และเงาก็เป็นหนึ่งในนั้น มันสามารถทำให้ข้อความและองค์ประกอบบนหน้ามีเอฟเฟกต์สามมิติและโดดเด่นได้ ตัวอย่างเช่น สำหรับเงาข้อความ วิธีการแบบดั้งเดิมอาจต้องมีการตัดข้อความออกและใช้รูปภาพโดยตรง หากพิจารณาถึงประสิทธิภาพของ SEO และเว็บไซต์ เทคโนโลยี เช่น CSS Sprites ก็อาจถูกนำมาใช้เพื่อรวมรูปภาพเข้าด้วยกัน:

h2 { พื้นหลัง: url (sprites.png) ไม่ซ้ำ 0 0; ขนาดตัวอักษร: 0; เยื้องข้อความ: -9999em;...}
h2#title1{ตำแหน่งพื้นหลัง:0 -30px;}
h2#title2{ตำแหน่งพื้นหลัง:0 -60px;}
-

นี่เป็นสิ่งที่ยุ่งยาก การรวมรูปภาพเข้าด้วยกันจะทำให้คุณใช้เวลานาน และเพื่อให้ได้เอฟเฟ็กต์ภาพที่ดีขึ้น คุณอาจต้องใช้รูปภาพ png 32 บิตคุณภาพสูง ซึ่งจะทำให้คุณต้องเผชิญกับ PNG ของ IE 6 ที่น่ากลัว ปัญหาความโปร่งใส!

จริงๆ แล้ว เราสามารถใช้ CSS เพื่อสร้างเอฟเฟกต์เงาของข้อความได้อย่างสมบูรณ์!

คุณสามารถดู การสาธิต ก่อน

ข้อความเงา

เงาข้อความช่วยให้เราได้เอฟเฟกต์เงาข้อความที่สมบูรณ์แบบ การเขียนขั้นพื้นฐาน:

ข้อความเงา: [รัศมีเบลอแกน x สีแกน y], [รัศมีเบลอแกน x สีแกน y]...

หรือ

ข้อความเงา: [สีรัศมีเบลอของแกน x แกน y], [สีรัศมีเบลอของแกน x แกน y]...

สีที่นี่คือสีของเงา จะเขียนสีก่อนหรือหลังก็ได้ แกน x และแกน y คือตำแหน่งออฟเซ็ตของเงาตามลำดับ และรัศมีความเบลอสามารถเข้าใจได้ว่าเป็นความยาวของเงา และเบราว์เซอร์ส่วนใหญ่รองรับเงาหลายชั้นแล้ว คุณสามารถแยกการตั้งค่าหลายกลุ่มด้วยเครื่องหมายจุลภาค (แน่นอนว่าคุณสามารถใช้การตั้งค่าเดียวได้เช่นกัน)

ตัวอย่าง:

h1{color:#000; พื้นหลัง:#333; ตัวอักษร: ตัวหนา 24px/2 "Microsoft Yahei",Arial;
เยื้องข้อความ:2em;
ข้อความเงา: ดำ 2px 2px 2px }

เอฟเฟกต์มีดังนี้:

ปัจจุบันเบราว์เซอร์ส่วนใหญ่รองรับแอตทริบิวต์นี้ ยกเว้น IE เราสามารถใช้ตัวกรองเงาเพื่อดำเนินการดังนี้:

ตัวกรอง: เงา(สี='ดำ', ทิศทาง='135', ความแข็งแกร่ง='2')

คุณอาจสังเกตเห็นว่าการใช้ฟิลเตอร์เงาสามารถกำหนดทิศทางของมุมได้เท่านั้น แต่กำหนดแกน xy ไม่ได้ และแกน z ก็ถูกแทนที่ด้วยความแรงเช่นกัน โปรดทราบว่าเมื่อใช้ตัวกรองนี้ คุณจะไม่สามารถตั้งค่าสีพื้นหลังได้ ไม่เช่นนั้นตัวกรองจะไม่ถูกต้อง! นอกจากนี้หากคุณไม่เก่งคณิตศาสตร์และไม่เข้าใจอัลกอริธึมของฟังก์ชันตรีโกณมิติคุณสามารถใช้ตัวกรองอื่นของ IE: dropshadow:

ตัวกรอง: dropshadow(OffX=2, OffY=2, Color='black', Positive='true');

IE จะรั้งเราไว้เสมอ แต่ก็คุ้มค่าที่จะกล่าวถึงว่าตัวกรองทั้งสองของ IE รองรับเงาหลายชั้น ! ตัวอย่างเช่น คุณสามารถเขียนว่า:

ตัวกรอง: dropshadow(OffX=2, OffY=2, Color='red', Positive='true')
dropshadow (OffX = 2, OffY = 2, สี = 'สีเหลือง', บวก = 'จริง')
dropshadow(OffX=2, OffY=2, สี='สีน้ำเงิน', บวก='จริง');

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับตัวกรองทั้งสองนี้สำหรับ IE โปรดดูที่: Shadow และ Dropshadow

ลองดูตัวอย่างเงาหลายชั้น (โดยไม่สนใจ IE ที่นี่):

h1{font:bold 32px/2 Verdana, เจนีวา, sans-serif;
ข้อความเงา:1px 1px 2px rgba(0,0,0,.8), 0 0 1em rgba(255, 0, 255, 0.5), 0 0 0.2em rgba(0, 0, 255, 0.9);}

เอฟเฟกต์ดังแสดงในรูป:

ที่นี่เราใช้สี rgba ซึ่งเป็นวิธีการประกาศสีและความโปร่งใสในเวลาเดียวกันใน CSS และเป็นแอตทริบิวต์สีที่เบราว์เซอร์ A-level ส่วนใหญ่รองรับ ( ยกเว้น IE ) หากต้องการเรียนรู้เพิ่มเติม โปรดดู: สี " RGBa" รองรับเบราว์เซอร์ " - ในขณะเดียวกัน เราขอแนะนำให้ใช้วิธีการเขียนแบบง่ายๆ นี้สำหรับความโปร่งแสงของสีทึบ

ความเข้ากันได้ของเบราว์เซอร์สำหรับข้อความเงา

ปัจจุบัน text-shadow รองรับ Firefox 3.5+, Safari 1.1+/chrome 2.0+ และ opera 9.5 แต่ IE ไม่รองรับ ควรสังเกตว่าเฉพาะ Safari 4.0 เท่านั้นที่รองรับเงาหลายเลเยอร์

• IE ทุกเวอร์ชันไม่รองรับ text-shadow;
• Opera 9.5+ รองรับเงาได้มากถึง 6-9 เลเยอร์ และใช้ลำดับการเรนเดอร์ CSS2 (เงาแรกที่กำหนดไว้จะอยู่ด้านล่าง) และด้วยเหตุผลด้านประสิทธิภาพ รัศมีการเบลอจึงจำกัดอยู่ที่ 100px
• ในทางทฤษฎี Gecko (Firefox) รองรับเลเยอร์ข้อความเงาที่ไม่มีที่สิ้นสุด (แต่ไม่แนะนำให้ลอง) และเป็นไปตามลำดับการเรนเดอร์ CSS3 ใหม่ (เงาที่กำหนดไว้ก่อนจะอยู่ด้านบน);
• Safari 1.1-3.2 รองรับ text-shadow เพียงเลเยอร์เดียวเท่านั้น (เฉพาะการประกาศก่อนเครื่องหมายจุลภาคแรกแสดง และสิ่งต่อไปนี้จะถูกละเว้น) Safari 4.0+ รองรับเฉพาะเงาหลายเลเยอร์และลำดับการเรนเดอร์ CSS3 ใหม่

กล่องเงา

มาพูดถึง IE กันก่อน IE ไม่รองรับแอตทริบิวต์ box-shadow แต่ตัวกรองทั้งสองที่กล่าวถึงข้างต้นสามารถใช้เพื่อให้เกิดเอฟเฟกต์เงาได้ ซึ่งหมายความว่า IE ไม่ได้แยกความแตกต่างระหว่างเงาข้อความและเงากล่อง ! สิ่งนี้ทำให้เกิดปัญหาบางประการ: ข้อความภายในองค์ประกอบจะสืบทอดการตั้งค่าเงาขององค์ประกอบ แต่ถ้าคุณไม่กำหนดพื้นหลังและเส้นขอบขององค์ประกอบ เฉพาะเงาข้อความเท่านั้นที่จะปรากฏขึ้น หากคุณกำหนดเฉพาะแอตทริบิวต์พื้นหลังโดยไม่กำหนดเส้นขอบ เฉพาะเงาของกล่องเท่านั้นที่จะปรากฏขึ้น และข้อความจะไม่มีเงา และ หากคุณกำหนดเฉพาะแอตทริบิวต์เส้นขอบและหากไม่ได้กำหนดพื้นหลัง เงาของกล่องจะปรากฏขึ้น และข้อความและรูปภาพของเนื้อหาก็จะมีเงาด้วย นักเรียนที่สนใจสามารถทดลองใช้งานได้

เอาล่ะ ตอนนี้เรามาลืมเรื่อง IE กันดีกว่า และดูที่ box-shadow ในความเป็นจริง หลังจากทำความเข้าใจ text-shadow แล้ว box-shadow ก็เข้าใจได้ง่าย ปัจจุบันมีเพียง firefox และ safari/chrome เท่านั้นที่รองรับแอตทริบิวต์ box-shadow ผ่านแอตทริบิวต์ส่วนตัว แม้ว่าเบราว์เซอร์ Opera จะไม่รองรับคุณลักษณะนี้ในขณะนี้ แต่ก็มีการระบุไว้ในเอกสารประกอบว่าเวอร์ชันถัดไปของเอ็นจิ้น Presto 2.3 (เอ็นจิ้นของ Opera 10.10 เวอร์ชันล่าสุดคือ Presto 2.2.15) จะรองรับ box-shadow จากนั้นให้ เรารอช้าๆ

ไวยากรณ์ของ box-shadow จะเหมือนกับ text-shadow

#boxShadow{
-
-webkit-box-shadow:2px 2px 2px สีดำ;
-moz-box-shadow:2px 2px 2px สีดำ;
-
-

ในความเป็นจริง box-shadow และ border-radius เป็นพันธมิตรที่ดี:

#boxShadow1{-moz-border-radius:10px;
-webkit-ขอบรัศมี:10px;
รัศมีเส้นขอบ: 10px;
เส้นขอบ: 1px ทึบ ddd;
-webkit-box-shadow:0 0 10px สีดำ;
-moz-box-shadow:0 0 10px สีดำ;
การขยาย:10px;}

เอฟเฟกต์ดังแสดงในรูป:

Firefox เริ่มรองรับ box-shadow ในเวอร์ชัน 3.5 เท่านั้น และการเรนเดอร์เงาในปัจจุบันยังไม่สมบูรณ์แบบ

สรุป

CSS shadow เป็นคุณสมบัติที่มีประโยชน์มากใน CSS3 เราสามารถใช้ text-shadow ใน Firefox/webkit/Opera ได้แล้ว และ box-shadow จะถูกนำมาใช้ในเบราว์เซอร์เหล่านี้เร็วๆ นี้ มีเพียง IE เท่านั้นที่มีเอกลักษณ์และยังคงยืนยันตัวกรองเส็งเคร็ง นี่เป็นความล้มเหลวจริงๆ