นักออกแบบมักใช้เอฟเฟ็กต์แบบอักษรและเอฟเฟ็กต์หน้าที่เป็นเอกลักษณ์ และเงาก็เป็นหนึ่งในนั้น มันสามารถทำให้ข้อความและองค์ประกอบบนหน้ามีเอฟเฟกต์สามมิติและโดดเด่นได้ ตัวอย่างเช่น สำหรับเงาข้อความ วิธีการดั้งเดิมอาจต้องมีการตัดข้อความออกและใช้รูปภาพโดยตรง หากพิจารณาถึงประสิทธิภาพของ 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 สำหรับ 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 เท่านั้นที่มีเอกลักษณ์และยังคงยืนยันตัวกรองเส็งเคร็ง นี่เป็นความล้มเหลวจริงๆ