ตัวอย่างเงาข้อความ CSS: เทคนิคหลายอย่างสำหรับเอฟเฟ็กต์จังหวะที่แตกต่างกัน
คุณเคยรู้สึกไม่พอใจเมื่อคำบรรยายของคุณไม่ตรงกับสีของปุ่ม แผง หรือข้อความที่ตัดกับพื้นหลังของหน้าไม่ดีหรือไม่? โดยใช้ เงาของ CSSปัญหานี้สามารถแก้ไขได้ง่ายโดยใช้คุณสมบัติ text-shadow เพื่อปรับปรุงความสามารถในการอ่านและความคมชัดของข้อความ
ในตัวอย่างที่ให้มา เราใช้เงาข้อความในสถานการณ์ต่างๆ ซึ่งจะให้พื้นฐานที่จำเป็นแก่คุณเพื่อให้คุณสามารถศึกษาปัญหานี้เพิ่มเติมได้ด้วยตนเอง
1. การตั้งค่าพื้นฐาน
สร้างอันใหม่ ไฟล์ HTMLและเพิ่มโค้ดต่อไปนี้เข้าไป HTMLและ ซีเอสเอส:
ในส่วน HTML ให้เพิ่มแท็ก
ด้วยคลาสข้อความ:
เว็บโค้ด Geeks
สำหรับองค์ประกอบนี้ เราจะเพิ่มเงาข้อความ CSS ฉันตั้งค่าคุณสมบัติเริ่มต้นสำหรับองค์ประกอบนี้เพื่อให้ดูดีบนหน้าจอ:
ตอนนี้เรามาตั้งค่าแอตทริบิวต์ text-shadow ให้กับข้อความกันดีกว่า แต่ก่อนอื่นเรามาดูกันว่าแอตทริบิวต์นี้ใช้ค่าอะไร:
ข้อความเงา: 4px 4px 4px #ccc;
- 4px - X ออฟเซ็ต ( แนวนอน);
- 3px - ออฟเซ็ตแกน Y ( แนวตั้ง);
- 2px - ค่าเบลอ;
- #ccc - สี.
สิ่งนี้ถูกตั้งค่าดังนี้:
เงาข้อความ: สีเบลอแนวนอนชดเชยแนวตั้งชดเชย;
de color สามารถแสดงด้วยรหัสฐานสิบหก #ccc หรือ RGBA (0,0,0,0.3) - ใน CSS เราสามารถใช้เงาภายใน CSS กับข้อความของเราได้ดังนี้:
.ข้อความ(
ขนาดตัวอักษร: 5em; /* เพิ่มข้อความให้ใหญ่ขึ้น */
ข้อความเงา: 4px 3px 2px #ccc;
}
การแสดงเบราว์เซอร์ของข้อความที่แรเงานี้จะมีลักษณะดังนี้:
ตัวอย่างเว็บไซต์
ต่อไปเราจะเปลี่ยนสีพื้นหลังขององค์ประกอบร่างกายในรูปแบบต่างๆ เราทำเช่นนี้เนื่องจากเงา CSS บางตัวจำเป็นต้องมีพื้นหลังที่เฉพาะเจาะจง ไม่เช่นนั้นจะไม่สามารถสังเกตเห็นได้ชัดเจน เพื่อให้ข้อความดูสวยงามยิ่งขึ้น เราจะตั้งค่าให้เป็นตัวพิมพ์ใหญ่
2. เอฟเฟกต์รอยประทับ
ตั้งค่าสีข้อความให้เป็นเฉดสีเข้มกว่าพื้นหลังเล็กน้อย จากนั้นใช้เงาข้อความสีขาวเล็กๆ โดยลดความทึบลง:
ร่างกาย (
พื้นหลัง: #222;
}
.ข้อความ(
ขนาดตัวอักษร: 5em;
สี: RGBA(0,0,0,0.6); /* สีข้อความ */
ข้อความเงา: 2px 2px 3px rgba (255,255,255,0.1); /* เพิ่มเงา */
}
การใช้โค้ด RGBA คุณสามารถตั้งค่าความทึบของสีได้ โปรดสังเกตว่าสีข้อความมีความทึบ 60% (0.6) และเงา div CSS มีความทึบ 10% (0.1)
ตัวอย่างเว็บไซต์
3. เอฟเฟกต์เงาย้อนยุค
เงาย้อนยุคไม่จำเป็นต้องเบลอเสมอไป ยกตัวอย่างเงาย้อนยุคนี้:
ร่างกาย (
}
.ข้อความ(
ขนาดตัวอักษร: 5em;
สี: ขาว; /* เปลี่ยนสีข้อความเป็นสีขาว */
ข้อความเงา: 6px 6px 0px rgba (0,0,0,0.2); /* เพิ่มเงาย้อนยุค */
}
ตัวอย่างเว็บไซต์
4. เอฟเฟกต์เงาคู่
ที่น่าสนใจคือคุณสามารถเพิ่มเงาแบบอักษร CSS ได้มากกว่าหนึ่งเงา ซึ่งสามารถทำได้เช่นนี้: text-shadow: shadow1, shadow2, shadow3; มาเพิ่มเงาสองอัน อันหนึ่งมีสีพื้นหลัง และอันที่สองเข้มขึ้นเล็กน้อย:
ข้อความ (
ขนาดตัวอักษร: 5em;
ข้อความเงา: 4px 3px 0px #fff, 9px 8px 0px rgba (0,0,0,0.15); /* ให้เงาสองอัน */
}
พื้นหลังของเราเป็นสีขาว ดังนั้นเราจึงไม่ต้องการสีอื่น ในเบราว์เซอร์เอฟเฟกต์จะมีลักษณะดังนี้:
ตัวอย่างเว็บไซต์
5. เอฟเฟกต์เงาระยะไกล
เอฟเฟกต์นี้ขึ้นอยู่กับฟังก์ชันการกำหนดเงา CSS ที่สวยงามหลายแบบ ด้านล่างนี้คุณจะเห็นเอฟเฟกต์ที่มีเงาสี่เงาทอดลงมาตามระดับความเข้มที่แตกต่างกัน:
ร่างกาย (
พื้นหลัง: #fff3cd; /* เปลี่ยนสีพื้นหลัง */
}
.ข้อความ(
ขนาดตัวอักษร: 5em;
สี: ขาว;
ข้อความเงา: 0px 3px 0px #b2a98f,
0px 14px 10px RGB (0,0,0,0.15),
0px 24px 2px RGB (0,0,0,0.1)
0px 34px 30px RGB (0,0,0,0.1);
}
ตัวอย่างเว็บไซต์
6. เอฟเฟกต์ 3D โดย Mark Dotto
ร่างกาย (
พื้นหลัง: #3495c0; /* เปลี่ยนสีพื้นหลัง */
}
.ข้อความ(
ขนาดตัวอักษร: 5em;
สี: ขาว;
ข้อความเงา: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px RGBA(0,0,0,.1)
0 0 5px RGBA(0,0,0,.1)
0 1px 3px RGBA(0,0,0,.3)
0 3px 5px RGBA(0,0,0,.2)
0 5px 10px RGBA(0,0,0,.25)
0 10px 10px RGBA(0,0,0,.2)
0 20px 20px RGBA(0,0,0,.15);
}
ตอนนี้ดูว่าเงาข้อความภายใน CSS เหล่านี้มีลักษณะอย่างไรในเบราว์เซอร์:
ตัวอย่างเว็บไซต์
7. เอฟเฟกต์ข้อความตัด Gordon Hall ที่สมจริง
Gordon ใช้เวทย์มนตร์ CSS ขั้นสูงเพื่อให้ไม่เพียงแต่เงาด้านนอกเท่านั้น แต่ยังให้เงาภายในที่สมจริงด้วย:
ร่างกาย (
พื้นหลัง: #cbcbcb; /* เปลี่ยนสีพื้นหลัง */
}
.ข้อความ(
ขนาดตัวอักษร: 5em;
สี: โปร่งใส;
สีพื้นหลัง: #666666;
-webkit-พื้นหลัง-คลิป:ข้อความ;
-moz-พื้นหลังคลิป: ข้อความ;
คลิปพื้นหลัง: ข้อความ;
ข้อความเงา: rgba (255,255,255,0.5) 0px 3px 3px;
}
และสิ่งนี้จะสร้างเอฟเฟกต์ของข้อความที่ตัด
ตัวอย่างเว็บไซต์
8. เอฟเฟกต์ข้อความเรืองแสง
ร่างกาย (พื้นหลัง: #992d23; /* เปลี่ยนสีพื้นหลัง */
}
.ข้อความ(
ขนาดตัวอักษร: 5em;
สี: ขาว;
ข้อความเงา: 0px 0px 6px rgba (255,255,255,0.7);
}
เงานี้สร้างเอฟเฟกต์เรืองแสงให้กับข้อความ:
ตัวอย่างเว็บไซต์
9. เอฟเฟกต์ข้อความที่ยกขึ้น
ร่างกาย (พื้นหลัง: #629552; /* เปลี่ยนสีพื้นหลัง */
}
.ข้อความ(
ขนาดตัวอักษร: 5em;
สี: RGBA(0,0,0,0.6);
ข้อความเงา: 2px 8px 6px rgba (0,0,0,0.2)
0px -5px 35px RGB (255,255,255,0.3);
}
ตัวอย่างเว็บไซต์
10. เอฟเฟกต์เงายาว
เอฟเฟกต์นี้สามารถทำได้โดยใช้
สีพื้นหลัง: rgb (147, 201, 67);
ข้อความเงา: 1px 1px rgb(131, 179, 60), 2px 2px rgb(131, 179, 60), 3px 3px rgb(131, 179, 60), 4px 4px rgb(131, 179, 60), 5px 5px RGB(131, 179, 60), 6px 6px RGB (131, 179, 60), 7px 7px RGB (131, 179, 60), 8px 8px RGB (131, 179, 60), 9px 9px RGB (131, 179, 60), 10px 10px RGB (131, 179, 60), 11px 11px RGB (131, 179, 60), 12px 12px RGB (131, 179, 60), 13px 13px RGB (131, 179, 60), 14px 14px RGB (131, 179, 60), 15px 15px RGB (131, 179, 60), 16px 16px RGB (131, 179, 60), 17px 17px RGB (131, 179, 60), 18px 18px RGB (131, 179, 60) ), 19px 19px RGB (131, 179, 60), 20px 20px RGB (131, 179, 60), 21px 21px RGB (131, 179, 60), 22px 22px RGB (131, 179, 60), 23px 23px RGB ( 131, 179, 60), 24px 24px RGB (131, 179, 60), 25px 25px RGB (131, 179, 60), 26px 26px RGB (131, 179, 60), 27px 27px RGB (131, 179, 60) ;
สี: #eaeaea;
ตัวอย่างเว็บไซต์
บทสรุป
อย่างที่คุณเห็น คุณสมบัติ text-shadow นั้นใช้งานง่ายมากและคุณสามารถใช้มันเพื่อสร้างเงา CSS สร้างสรรค์ของคุณเองได้
การพิมพ์คือของเล่นที่ฉันชื่นชอบเมื่อพูดถึงการออกแบบเว็บไซต์ แน่นอนว่าด้วยความช่วยเหลือนี้ คุณสามารถดึงดูดความสนใจของบุคคลได้โดยการเปลี่ยนสไตล์หรือขนาดของแบบอักษรเพียงเล็กน้อย เรียบง่ายและมีประสิทธิภาพมาก มีหนังสือหลายเล่มเขียนเกี่ยวกับหัวข้อนี้และมีสำเนาหลายฉบับถูกทำลายเนื่องจากข้อโต้แย้ง วันนี้ฉันจะไม่ให้คำแนะนำเกี่ยวกับการพิมพ์โดยทั่วไป - ฉันไม่มีคุณสมบัติเพียงพอ แต่ยินดีต้อนรับวิธีออกแบบข้อความในเว็บไซต์ของคุณเสมอ วันนี้ฉันจะแสดงวิธีการใช้คุณสมบัติ CSS3 ให้คุณดู ข้อความเงาเรียบง่ายมาก แต่ในมือขวาก็สามารถทำงานได้อย่างมหัศจรรย์
ไวยากรณ์ข้อความเงาพื้นฐาน
คุณสมบัตินี้ CSS3ใช้งานได้กับเบราว์เซอร์ล่าสุดทั้งหมด โดยไม่มีคำนำหน้าของผู้จำหน่าย เช่น -moz และ -webkit แม้แต่ IE ก็สามารถสอนให้เข้าใจคุณสมบัตินี้ได้ คุณต้องใช้ Modernizr หรือแอนะล็อก
เงาข้อความ: สีเบลอ x-offset y-offset;
นั่นคือไวยากรณ์พื้นฐานทั้งหมด ค่าแรกคือออฟเซ็ตแนวนอน ค่าที่สองคือออฟเซ็ตแนวตั้ง เงาเบลอ และสีของเงา ลองดูตัวอย่าง:
ข้อความเงา: 2px 4px 3px rgba (0,0,0,0.3);
เราย้ายเงา เบลอมัน 3 พิกเซล และกำหนดสีดำด้วยความโปร่งใส 30% เหตุใดฉันจึงใช้ช่องอัลฟ่าหรือความโปร่งใส สิ่งนี้จะทำให้คุณมีอิสระมากขึ้นในการดำเนินการของคุณ คุณสามารถทำให้สีจางลงหรือเข้มขึ้นเล็กน้อยได้ง่ายๆ ด้วยการเปลี่ยนค่าความโปร่งใส โดยไม่ต้องกังวลกับการเลือกสี ปรากฎค่อนข้างเร็วฉันแนะนำ
จดหมายหดหู่
body ( พื้นหลัง: #222; ) #text h1 ( สี: rgba(0,0,0,0.6); ข้อความเงา: 2px 2px 3px rgba(255,255,255,0.1); )
หลักการทำงานที่นี่คือ: พื้นหลังสว่างกว่าตัวอักษรเล็กน้อย, เงาแสงที่มีความโปร่งใสเล็กน้อย ผลลัพธ์ตามภาพเลย ลองดูครับ
เงาแข็ง
ข้อความเงา: 6px 6px 0px rgba (0,0,0,0.2);
ปัจจุบันสไตล์ย้อนยุคกำลังเป็นที่นิยม และที่นั่นมีการใช้เงาโดยไม่เบลอ เราพร้อมแล้วสำหรับสิ่งนี้
เงาคู่
ข้อความเงา: 4px 3px 0px #fff, 9px 8px 0px rgba (0,0,0,0.15);
และนี่ก็ใช้คุณสมบัติที่ยุ่งยากอีกอย่างหนึ่งของสถานที่ให้บริการ ข้อความเงาโดยสามารถแสดงรายการตัวเลือกได้โดยคั่นด้วยเครื่องหมายจุลภาค จึงสร้างเงาได้มากเท่าที่ต้องการ เงาแรกสามารถกำหนดสีให้คล้ายกับพื้นหลังได้ จากนั้นเอฟเฟกต์จะออกมาดังในภาพ
ลงและออกไป
ข้อความเงา: 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0,0,0,0.15), 0px 24px 2px rgba(0,0,0,0.1), 0px 34px 30px rgba(0,0,0,0.1 );
ข้อความมีขนาดใหญ่และดูเหมือนลอยอยู่เหนือพื้นหลังใช่ไหม ที่นี่เราใช้ 4 เงาที่มีระดับความเบลอและตำแหน่งต่างกัน โดยทั่วไป ยิ่งใช้เงามากเท่าไร เอฟเฟกต์ก็จะยิ่งสมจริงมากขึ้นเท่านั้น
ข้อความ 3 มิติขนาดเล็ก
ข้อความเงา: 0px 4px 3px rgba (0,0,0,0.4), 0px 8px 13px rgba (0,0,0,0.1), 0px 18px 23px rgba (0,0,0,0.1);
คล้ายกับตัวอย่างก่อนหน้านี้ มีเงาสามเงา แต่อยู่ใกล้กว่า ดังนั้นผลของความเป็นสามมิติและน้ำหนักของข้อความ
ข้อความ 3 มิติโดย Mark Dotto
ข้อความเงา: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px RGB (0,0,0,.1), 0 1px 3px RGB (0,0,0,.3), 0 3px 5px RGB (0,0,0,.2), 0 5px 10px RGB (0 ,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
ฉันเจอผลงานของนักออกแบบคนนี้ทางออนไลน์และไม่สามารถผ่านมันไปได้ ความสมจริงที่น่าประทับใจ
ข้อความเยื้องโดย Gordon Hall
สีพื้นหลัง: #666666; -webkit-พื้นหลัง-คลิป:ข้อความ; -moz-พื้นหลังคลิป: ข้อความ; คลิปพื้นหลัง: ข้อความ; สี: โปร่งใส; ข้อความเงา: rgba (255,255,255,0.5) 0px 3px 3px;
อีกตัวอย่างผลงานประทับใจกับทางอสังหาฯ ข้อความเงา- แต่หลักการก็เหมือนกับที่ผมกล่าวไว้ข้างต้น พื้นหลังสว่างกว่าเล็กน้อย มีเงาอ่อนด้านล่างตัวอักษรและด้านบนมืด ทำง่ายๆ แต่เจ๋งมาก
ข้อความส่องแสง
ข้อความเงา: 0px 0px 6px rgba (255,255,255,0.7);
ที่นี่ทุกอย่างก็เรียบง่ายเช่นกัน - เราไม่ขยับเงา แต่เราเบลอให้เข้มขึ้นและทำให้มันขาว นั่นคือความเงางามทั้งหมด
สไตล์ย้อนยุค
ข้อความเงา: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;
ฉันได้พูดไปข้างต้นเกี่ยวกับสไตล์ย้อนยุคซึ่งมาจากโอเปร่าเดียวกัน ตอนนี้มันทันสมัยมาก มีเงาชัดเจนหลายอัน ใช้ตามดุลยพินิจของคุณเอง
แหล่งกำเนิดแสงหลายแหล่ง
ข้อความเงา: 0px 15px 5px rgba (0,0,0,0.1), 10px 20px 5px rgba (0,0,0,0.05), -10px 20px 5px rgba (0,0,0,0.05);
นี่คือเอฟเฟ็กต์ของแหล่งกำเนิดแสงหลายแหล่งที่ให้เงาในทุกทิศทาง
ข้อความที่ยกขึ้น
สี: RGBA(0,0,0,0.6); ข้อความเงา: 2px 8px 6px rgba (0,0,0,0.2), 0px -5px 35px rgba (255,255,255,0.3);
ข้อความหดหู่ก็มีอยู่แล้ว แต่ตอนนี้มันถูกยกขึ้นมาแล้ว เอฟเฟกต์ที่ค่อนข้างเรียบง่าย แต่ดูดีมากในพาดหัวข่าว เป็นต้น ใช้มันลองมัน
โดยสรุปฉันอยากจะพูด - คุณสมบัติข้อความเงา CSS3ง่ายมากอย่างที่คุณเห็นแล้ว แต่การใช้อย่างเหมาะสมและจินตนาการเพียงเล็กน้อยก็สามารถสร้างสิ่งมหัศจรรย์ได้
ทดลองมีวันที่ดี
บทช่วยสอนนี้จะแนะนำเทคนิค CSS หลายประการสำหรับการสร้างเอฟเฟกต์ต่างๆ สำหรับโครงร่างขององค์ประกอบ
สามารถสร้างเอฟเฟกต์แสงเงาแบบง่ายๆ ได้โดยใช้สีเทาบนเส้นโครงร่าง CSS3 มีความสามารถในการสร้างเงาจริงโดยใช้คุณสมบัติ กล่องเงาแต่วิธีง่ายๆ จะใช้ได้กับทุกเบราว์เซอร์:
เงา ( ช่องว่างภายใน: 20px; เส้นขอบ: 1px solid #f0f0f0; ขอบล่าง: 2px solid #ccc; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; )
เอฟเฟกต์บล็อกแบบหดหู่นั้นทำได้ง่ายมากเช่นกัน การเพิ่มมุมโค้งมน CSS3 ช่วยเพิ่มเอฟเฟกต์:
กดแล้ว ( color: #fff; padding: 20px; พื้นหลัง: #111; border: 1px solid #000; border-right: 1px solid #353535; border-bottom: 1px solid #353535; -webkit-border-radius: 5px; -moz-border-radius: 5px; รัศมีเส้นขอบ: 5px )
เอฟเฟ็กต์นี้คล้ายกับจังหวะสองครั้งซึ่งมักใช้กับรูปภาพมาก มีการใช้การตั้งค่าการเยื้องและเส้นขีด ส่งผลให้เกิดเอฟเฟกต์ขอบคู่
Img.light ( เค้าร่าง: 1px solid #ddd; border-top: 1px solid #fff; padding: 10px; พื้นหลัง: #f0f0f0; ) img.dark ( เค้าร่าง: 1px solid #111; border-top: 1px solid #555; การขยาย: 10px; พื้นหลัง: #333;
เอฟเฟ็กต์นี้สามารถใช้ในเมนูหรือรายการได้ เป็นการผสมผสานอย่างเรียบง่ายระหว่างลายเส้นด้านบนและด้านล่างด้วยเฉดสีพื้นหลังที่แตกต่างกัน สิ่งหนึ่งที่ต้องจำไว้คือตัวเลือกลูกคนแรกและลูกสุดท้าย CSS ไม่ได้รับการสนับสนุนโดยเบราว์เซอร์รุ่นเก่า เพื่อหลีกเลี่ยงสถานการณ์ที่ไม่พึงประสงค์นี้ คุณสามารถใช้ jQuery
#indented ul( margin: 20px 0; padding: 0; list-style: none; ) #indented ul li ( ขอบบน: 1px solid #333; ขอบล่าง: 1px solid #111; ) #เยื้อง ul li:first -child (ขอบบน: none;) #indented ul li:last-child (border-bottom: none;) #indented ul li a ( padding: 10px; display: block; color: #fff; text- decoration: none ; ) #เยื้อง ul li a:hover (พื้นหลัง: #111;)
แม้แต่นักออกแบบที่เป็นมิตรต่อสิ่งแวดล้อมที่สุดก็รู้วิธีสร้างเงาใน Photoshop เงาเพิ่มมิติให้กับการออกแบบและปัจจุบันได้รับความนิยมอย่างมาก เงาสำหรับข้อความ รายการเมนู และส่วนหัวก็ไม่มีข้อยกเว้น เพียงพอที่จะนึกถึงการออกแบบอินเทอร์เฟซจาก Apple
การมีทักษะในการทำงานกับเงาข้อความในคลังแสงเทคนิคของคุณจะเป็นประโยชน์
งาน
สร้างเงาให้กับข้อความโดยใช้ CSS โดยไม่ต้องใช้รูปภาพ เราจะบรรลุผลอะไรจากสิ่งนี้?
- มีความยืดหยุ่น - ไม่ต้องใช้รูปภาพ ข้อความสามารถเปลี่ยนได้ง่าย
- ความเร็ว - รูปภาพน้อยลง - น้ำหนักหน้าน้อยลง, การเรียกไปยังเซิร์ฟเวอร์น้อยลง
- SEO - ข้อความได้รับการปรับให้เหมาะสมกว่ารูปภาพ และมีความน่าเชื่อถือมากกว่าการใช้เทคนิคการแทนที่ข้อความด้วยรูปภาพ
เงาข้อความสำหรับเบราว์เซอร์ปกติ
เบราว์เซอร์ปกติประกอบด้วยเบราว์เซอร์สมัยใหม่ทั้งหมดที่ปฏิบัติตามคำแนะนำของ W3C ไม่มากก็น้อย ในกรณีนี้ เบราว์เซอร์เหล่านี้เข้าใจคุณสมบัติ text-shadow ของ CSS3 ซึ่งได้รับการแนะนำในปี 2003
ต่อไปนี้เป็นรายการเบราว์เซอร์ที่รองรับคุณสมบัติ text-shadow:
- Safari 3.1 (Mac/Win) - รองรับ แต่ไม่รองรับหลายเงา
- Safari 4 (Mac/Win) - รองรับเต็มรูปแบบ
- Opera 9.5+ (Mac/Win/Lin) - รองรับเต็มรูปแบบ
- Firefox 3.1/3.5 (Mac/Win/Lin) - รองรับอย่างสมบูรณ์
- Google Chrome 2 (Win) - รองรับอย่างเต็มที่
- Shiira (Mac) - รองรับ ไม่รองรับหลายเงา
- Konqueror (Lin/Mac/Win) - รองรับอย่างเต็มที่
- iCab (Mac) - รองรับ ไม่รองรับหลายเงา
- Safari บน iPhone - รองรับ ไม่รองรับหลายเงา
- สมาร์ทโฟน Nokia Symbian (Series 60) - รองรับ
- Opera Mini 4.1 - รองรับ แต่ไม่รองรับเงาเบลอ
สำหรับเบราว์เซอร์เหล่านี้ CSS หนึ่งบรรทัดก็เพียงพอแล้วสำหรับแสดงข้อความ:
H1 ( ข้อความเงา: 0px 1px 3px #000; )
เราได้รับหัวข้อข่าวที่หรูหรานี้:
คุณสามารถบรรลุเอฟเฟกต์ที่น่าสนใจมากมายด้วยข้อความเงา
ข้อความเบลอ
H1 ( สี: #fff; พื้นหลัง: #666; ข้อความ-เงา: 0px 0px 3px #fff; )
ข้อความซ้ำ
H1 ( ข้อความเงา: 0px 20px #000; )
เงาหลายอันช่วยให้คุณได้รับเอฟเฟกต์เพิ่มเติมหลายประการ:
ข้อความปิดภาคเรียน
H1 ( พื้นหลัง: #ccc; สี: #ccc; ข้อความ-เงา: -1px -1px #666, 1px 1px #FFF; ตระกูลแบบอักษร: serif; )
ข้อความที่ยกขึ้น
H1 ( พื้นหลัง: #999; สี: #999; ข้อความ-เงา: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF; ตระกูลแบบอักษร: serif; )
(IE จะไม่อนุญาตให้คุณเพลิดเพลินกับความสวยงามที่นี่ เนื่องจากไม่รองรับข้อความเงา) คุณสามารถสร้างเอฟเฟกต์ต่างๆ ได้มากมายโดยใช้ข้อความเงา ข้อจำกัดในทางปฏิบัติเพียงอย่างเดียวคือจินตนาการของคุณ
ตอนนี้เกี่ยวกับเรื่องที่น่าเศร้า - จะทำอย่างไรกับ IE ที่ "ชื่นชอบ" ของทุกคน?
เงาข้อความใน IE
แม้ว่า IE จนถึงเวอร์ชัน 8 จะไม่เข้าใจข้อความเงา แต่ก็มี "ระฆังและนกหวีด" ของตัวเองมากมาย โดยเฉพาะมีฟิลเตอร์ dropShadow() สำหรับสร้างเงา เพื่อให้เงาปรากฏ องค์ประกอบต้องมีชุดเค้าโครง คุณสามารถติดตั้งได้หลายวิธี:
- โดยการตั้งค่าคุณสมบัติขององค์ประกอบ: block + height() หรือ width())
- ให้ธาตุ : สัมบูรณ์
- โดยระบุ: ซ้าย/ขวา
- การตั้งค่าการซูม: 1
H1 ( ตัวกรอง:progid:DXImageTransform.Microsoft.DropShadow(color="#666666",offX=2,offY=2,positive="true"); ซูม: 1; )
ดูเหมือนว่าใครจะตะโกนว่า "ไชโย!!!" และสนุกกับชีวิต แต่ดูว่าตัวกรองนี้ทำงานอย่างไรในความเป็นจริง:
นี่คือลักษณะที่ข้อความจะปรากฏขึ้นหากคุณใช้ตัวกรอง dropShadow กับข้อความ
สำหรับผู้ที่ไม่เข้าใจ นี่คือข้อเสียของตัวกรองนี้:
- เงาดูแย่มาก: เชิงมุมไม่มีการเปลี่ยนผ่านเป็นพื้นหลังอย่างราบรื่นด้วยความโปร่งแสง
- รูปแบบตัวอักษรบิดเบี้ยว
- เงานั้นแทบจะเป็นไปไม่ได้เลยที่จะปรับ (คุณสามารถควบคุมตำแหน่งของเงาได้เท่านั้น) - สามารถหลีกเลี่ยงได้บางส่วนโดยใช้ตัวกรองเงาแทน dropShadow แต่ข้อบกพร่องสองประการแรกที่สำคัญยังคงอยู่
- การมีอยู่ของเลย์เอาต์ที่จำเป็นนั้นค่อนข้างจำกัดนักพัฒนา
ผลลัพธ์นี้ไม่เป็นที่ยอมรับในโครงการจริง ยังไม่ชัดเจนว่าใครรับช่วงต่องานดังกล่าวจากนักพัฒนา
Kilian Valkhof แนะนำให้ใช้การจำลองเงา:
- อย่าใช้ตัวกรองกับข้อความโดยตรง
- ใช้การผสมผสานระหว่างฟิลเตอร์เรืองแสงและเบลอแทน dropShadow และเงา
วิธีนี้จะหลีกเลี่ยงการบิดเบือนข้อความและทำให้เงามีความยืดหยุ่นมากขึ้น
ทดสอบส่วนหัวТестовый заголовок
H1 ( ข้อความ-เงา: 3px 3px 3px #cccccc; ตำแหน่ง: สัมพันธ์; ซูม: 1; สี: #000; ) ช่วง h1 ( ตำแหน่ง: สัมบูรณ์; ซ้าย: -3px; บน: -3px; ดัชนี z: -1; ตัวกรอง: progid: DXImageTransform.Microsoft.Glow (สี = #cccccc, Strength = 1) progid: DXImageTransform.Microsoft.blur (pixelradius = 3, เปิดใช้งาน = "true" ; ซูม: 1;
แต่ถึงแม้จะใช้วิธีนี้ แต่ก็ยังมีข้อเสียอยู่หลายประการ:
- โค้ดที่ไม่ใช่ความหมายเป็นองค์ประกอบพิเศษ และถึงแม้จะมีข้อความซ้ำกัน ก็จะไม่ส่งผลกระทบที่ดีที่สุดต่อโครงสร้างเชิงตรรกะของเนื้อหาและการเพิ่มประสิทธิภาพ SEO ปัญหานี้สามารถแก้ไขได้โดยใช้จาวาสคริปต์ซึ่งจะแทรกองค์ประกอบเพิ่มเติมสำหรับ IE เมื่อโหลดหน้าเว็บ
- ไม่สอดคล้องกับการแสดงผลในเบราว์เซอร์อื่น (ซึ่งเข้าใจข้อความเงา) - ตัวกรองช่วยให้คุณสามารถจำลองเงาด้วยการตั้งค่าขั้นต่ำ ไม่สามารถบรรลุความคล้ายคลึงกันของเงากับเบราว์เซอร์อื่นได้เสมอไป
- ความยืดหยุ่นน้อยลง - ตัวกรองไม่ได้ให้ความสามารถทั้งหมดของเงาข้อความ ตัวอย่างเช่น ไม่สามารถใช้หลายเงาได้
ในการสร้างเงาสำหรับ IE คุณสามารถใช้จาวาสคริปต์ (ไม่ใช่ครั้งแรกที่จาวาสคริปต์บันทึกวันนั้น)
เงาข้อความโดยใช้จาวาสคริปต์
จากสคริปต์ที่ฉันทดสอบ ฉันเลือกปลั๊กอิน jquery “Drop Shadow” ข้อดีของมัน:
- จำลองเงาโดยการใส่คอนเทนเนอร์หลายอัน เช่น โดยไม่ต้องใช้ตัวกรองสำหรับ IE ทำให้สามารถสร้างเงาใน IE คล้ายกับเบราว์เซอร์อื่นๆ มากที่สุดเท่าที่จะเป็นไปได้ + ไม่ต้องกังวลเรื่องเค้าโครงสำหรับ IE
- สร้างเงาไม่เพียงแต่สำหรับ IE ซึ่งบางครั้งอาจมีประโยชน์
- สคริปต์มีน้ำหนักเบา - 4Kb (หากคุณลบความคิดเห็นออกจากโค้ด) และหากคุณใช้การบีบอัดก็จะยิ่งน้อยลงไปอีก มีข้อกำหนดในการเขียนสคริปต์ - การมีสคริปต์ jquery. dimensions.js แต่ฉันยังไม่เข้าใจว่าเหตุใดจึงต้องมี เงาถูกสร้างขึ้น ลบ กำหนดโดย id และไม่มีมัน
- เรียบง่ายและชัดเจนในการใช้งาน
- คุณสามารถจำลองเงาหลาย ๆ อันได้สำเร็จ
ข้อบกพร่อง:
- คุณไม่สามารถเริ่มต้นสคริปต์ด้วยรหัสองค์ประกอบได้
- หากองค์ประกอบได้รับพื้นหลัง เงาจะถูกสร้างขึ้นไม่ใช่สำหรับข้อความ แต่สำหรับองค์ประกอบโดยรวม
- การรวมไลบรารี jquery ที่จำเป็น (ซึ่งมากกว่า 50Kb) แต่ความนิยมของ jquery จะช่วยขจัดข้อเสียเปรียบนี้ได้จริง
- ตามคำอธิบายสคริปต์ จำเป็นต้องมีการเชื่อมต่อ jquery. dimensions.js (อีก 2Kb) ด้วย แต่ฉันไม่เข้าใจว่าทำไมถึงต้องมีห้องสมุดนี้ ทุกอย่างดูเหมือนจะทำงานได้ดีหากไม่มีห้องสมุดนี้
การใช้ปลั๊กอิน Drop Shadow
ไวยากรณ์:
JQuery(ตัวเลือก).dropShadow(ตัวเลือก); // การสร้างเงาบนองค์ประกอบ jQuery(selector).redrawShadow(); // วาดเงาใหม่ jQuery(selector).removeShadow(); // ลบเงา jQuery(selector).shadowId(); // ส่งคืน ID ของเงาขององค์ประกอบ
ซ้าย: [จำนวนเต็ม] (ค่าเริ่มต้น = 4) บน: [จำนวนเต็ม] (ค่าเริ่มต้น = 4) เบลอ: [จำนวนเต็ม] (ค่าเริ่มต้น = 2) ความทึบ: [จำนวนเศษส่วน] (ค่าเริ่มต้น = 0.5) สี: [สตริง] (ค่าเริ่มต้น = " สีดำ") สลับ: [บูลีน] (ค่าเริ่มต้น = เท็จ)
พารามิเตอร์ด้านซ้ายและด้านบนคือพิกัดของจุดเริ่มต้นของเงาที่สัมพันธ์กับมุมซ้ายบนของป้ายกำกับ (หรือวัตถุ) ค่าบวกจะเลื่อนเงาไปทางขวาและลง ค่าลบจะเลื่อนเงาไปทางซ้ายและขึ้น
โมดูลนี้มีคุณสมบัติ CSS ที่เกี่ยวข้องกับการจัดรูปแบบข้อความ เช่น การขีดเส้นใต้ เงาของข้อความ และการเน้นข้อความแบบเอเชียตะวันออก
คุณสมบัติการจัดรูปแบบข้อความ
1. การออกแบบเส้น: ขีดเส้นใต้ เส้นขีด และขีดทับ
เส้นใต้ เส้นขีด และเส้นขีดฆ่าจะแสดงเฉพาะสำหรับบล็อกระดับบรรทัดที่ไม่ถูกแทนที่เท่านั้น (จอแสดงผล: อินไลน์) และแสดงตลอดข้อความทั้งหมด รวมถึงการเว้นวรรคระหว่างอักขระและคำ ยกเว้นการเยื้องที่จุดเริ่มต้นและจุดสิ้นสุดของบรรทัด
เบราว์เซอร์อาจแยกขีดเส้นใต้และเส้นขีดตรงที่เส้นตัดกับสัญลักษณ์ โดยปรากฏระยะห่างที่ด้านใดด้านหนึ่งของโครงร่างของสัญลักษณ์ เมื่อเบราว์เซอร์แบ่งขีดเส้นใต้หรือเส้นขีดที่ขอบเขตของสัญลักษณ์ รูปร่างของเส้นบนขอบเขตนั้นจะต้องตรงกับรูปร่างของสัญลักษณ์นั้น อย่างไรก็ตาม ข้อกำหนดไม่ได้กำหนดวิธีการเฉพาะสำหรับการ "ตามรูปร่าง" ของสัญลักษณ์ โดยปล่อยให้เรื่องนี้ขึ้นอยู่กับเบราว์เซอร์
ข้าว. 1. ทำลายขีดเส้นใต้ 1.1. ประเภทเส้นตกแต่ง: คุณสมบัติข้อความ-ตกแต่ง-เส้น
รองรับเบราว์เซอร์
เช่น: —
ขอบ: —
ไฟร์ฟอกซ์: 36, 35 -เดือน-
โครเมียม: 57
ซาฟารี: 12.1, 7.1 -เว็บคิท-
โอเปร่า: 44
iOS ซาฟารี: 8 -เว็บคิท-
เบราว์เซอร์ UC สำหรับ Android: 11.8
โครมสำหรับแอนดรอยด์: 73
ซัมซุงอินเทอร์เน็ต: 7.2
คุณสมบัติ text- decoration-line กำหนดประเภทของเส้น (ถ้ามี) ที่ถูกเพิ่มเข้าไปในองค์ประกอบ
ทรัพย์สินไม่ได้รับมรดก
ไวยากรณ์
ข้อความตกแต่งบรรทัด: none; ข้อความตกแต่งบรรทัด: ขีดเส้นใต้; ข้อความตกแต่งบรรทัด: โอเวอร์ไลน์; ข้อความตกแต่งบรรทัด: เส้นผ่าน; ข้อความตกแต่งบรรทัด: กะพริบ; ข้อความตกแต่งบรรทัด: ขีดเส้นใต้โอเวอร์ไลน์; ข้อความตกแต่งบรรทัด: overline ขีดเส้นใต้ line-through; ข้อความตกแต่งบรรทัด: สืบทอด; ข้อความตกแต่งบรรทัด: เริ่มต้น;
1.2. สไตล์เส้นตกแต่ง: คุณสมบัติสไตล์การตกแต่งข้อความ
รองรับเบราว์เซอร์
เช่น: —
ขอบ: —
ไฟร์ฟอกซ์: 36, 35 -เดือน-
โครเมียม: 57
ซาฟารี: 12.1, 7.1 -เว็บคิท-
โอเปร่า: 44
iOS ซาฟารี: 8 -เว็บคิท-
เบราว์เซอร์ UC สำหรับ Android: 11.8
โครมสำหรับแอนดรอยด์: 73
ซัมซุงอินเทอร์เน็ต: 7.2
คุณสมบัติ text-decoration-style ระบุรูปแบบของเส้นที่วาดเพื่อตกแต่งข้อความที่ระบุในองค์ประกอบ ค่ามีความหมายเหมือนกับคุณสมบัติเส้นขอบ
ทรัพย์สินไม่ได้รับมรดก
ไวยากรณ์
สไตล์การตกแต่งข้อความ: ทึบ; รูปแบบการตกแต่งข้อความ: double; สไตล์การตกแต่งข้อความ: ประ; สไตล์การตกแต่งข้อความ: ประ; สไตล์การตกแต่งข้อความ: หยัก; รูปแบบการตกแต่งข้อความ: สืบทอด; รูปแบบการตกแต่งข้อความ: เริ่มต้น;
1.3. สีของเส้นตกแต่ง: คุณสมบัติสีข้อความตกแต่ง
รองรับเบราว์เซอร์
เช่น: —
ขอบ: —
ไฟร์ฟอกซ์: 36, 35 -เดือน-
โครเมียม: 57
ซาฟารี: 12.1, 7.1 -เว็บคิท-
โอเปร่า: 44
iOS ซาฟารี: 8 -เว็บคิท-
เบราว์เซอร์ UC สำหรับ Android: 11.8
โครมสำหรับแอนดรอยด์: 73
ซัมซุงอินเทอร์เน็ต: 7.2
คุณสมบัติ text- decoration-color ระบุสีเส้นตกแต่งข้อความที่ตั้งค่าไว้สำหรับองค์ประกอบที่มี text- decoration-line
ทรัพย์สินไม่ได้รับมรดก
ไวยากรณ์
ข้อความตกแต่งสี: currentColor; ตกแต่งข้อความสี: ปลาแซลมอน; สีตกแต่งข้อความ: #00ff00; สีตกแต่งข้อความ: rgba (255, 128, 128, 0.5); ข้อความตกแต่งสี: โปร่งใส; ข้อความตกแต่งสี: สืบทอด; ข้อความตกแต่งสี: เริ่มต้น;
1.4. สรุปคุณสมบัติของเส้นตกแต่งโดยย่อ: คุณสมบัติการตกแต่งข้อความ
รองรับเบราว์เซอร์
เช่น: —
ขอบ: —
ไฟร์ฟอกซ์: 36, 35 -เดือน-
โครเมียม: 57
ซาฟารี: 12.1, 7.1 -เว็บคิท-
โอเปร่า: 44
iOS ซาฟารี: 8 -เว็บคิท-
เบราว์เซอร์ UC สำหรับ Android: 11.8
โครมสำหรับแอนดรอยด์: 73
ซัมซุงอินเทอร์เน็ต: 7.2
คุณสมบัติการตกแต่งข้อความเป็นรูปแบบสั้น ๆ ของการเขียนคุณสมบัติการตกแต่งข้อความบรรทัดการตกแต่งข้อความสไตล์การตกแต่งข้อความสีในการประกาศเดียว ค่าที่หายไปจะถูกตั้งค่าเป็นค่าเริ่มต้น การตกแต่งข้อความค่าเริ่มต้น: ไม่มีสีปัจจุบันที่เป็นของแข็ง; - ทรัพย์สินไม่ได้รับมรดก อย่างไรก็ตาม รูปแบบของบรรทัดข้อความทั้งหมดจะต้องเหมือนกันสำหรับองค์ประกอบเดียว
1.5. ตำแหน่งของเส้นการออกแบบ: คุณสมบัติ text-underline-position
รองรับเบราว์เซอร์
เช่น: —
ขอบ: 12
ไฟร์ฟอกซ์: —
โครเมียม: 71
ซาฟารี: —
โอเปร่า: —
iOS ซาฟารี: —
เบราว์เซอร์ UC สำหรับ Android: ?
โครมสำหรับแอนดรอยด์: 71
ซัมซุงอินเทอร์เน็ต: —
คุณสมบัติ text-underline-position กำหนดตำแหน่งของขีดเส้นใต้ที่ระบุในองค์ประกอบ
ทรัพย์สินเป็นมรดก
| ค่า: | |
| อัตโนมัติ | เบราว์เซอร์สามารถใช้อัลกอริธึมใดก็ได้เพื่อกำหนดตำแหน่งของขีดเส้นใต้ แต่จะต้องวางบรรทัดไว้บนหรือใต้เส้นฐานของข้อความ ค่าเริ่มต้น |
| ภายใต้ | ขีดเส้นใต้อยู่ใต้เนื้อหาข้อความขององค์ประกอบ ในกรณีนี้ เส้นใต้มักจะไม่ตัดกับตัวจากมากไปน้อย ค่านี้สามารถใช้ร่วมกับซ้ายหรือขวาได้หากต้องการใช้ด้านใดด้านหนึ่งในโหมดการพิมพ์แนวตั้ง |
| ซ้าย | ในโหมดการพิมพ์แนวตั้ง ขีดเส้นใต้จะจัดชิดกับขอบด้านซ้ายของข้อความ อย่างไรก็ตาม ค่านี้จะถูกตีความว่าอยู่ภายใต้ |
| ขวา | ในโหมดการพิมพ์แนวตั้ง การขีดเส้นใต้จะจัดชิดกับขอบด้านขวาของข้อความ อย่างไรก็ตาม ค่านี้จะถูกตีความว่าอยู่ภายใต้ |
| สืบทอด | |
| อักษรย่อ | |
ไวยากรณ์
ข้อความขีดเส้นใต้ตำแหน่ง: อัตโนมัติ; ข้อความขีดเส้นใต้ตำแหน่ง: ใต้; ข้อความขีดเส้นใต้ตำแหน่ง: ซ้าย; ข้อความขีดเส้นใต้ตำแหน่ง: ขวา; ข้อความขีดเส้นใต้ตำแหน่ง: ใต้ซ้าย; ข้อความขีดเส้นใต้ตำแหน่ง: ใต้ขวา; ข้อความขีดเส้นใต้ตำแหน่ง: สืบทอด; ข้อความขีดเส้นใต้ตำแหน่ง: เริ่มต้น; 
ข้าว. 2. ขีดเส้นใต้ข้อความทั้งสองด้านในโหมดการพิมพ์แนวตั้งโดยใช้ค่าซ้ายและขวา
2. เงาข้อความ: คุณสมบัติข้อความเงา
รองรับเบราว์เซอร์
เช่น: 10
ขอบ: 12
ไฟร์ฟอกซ์: 3.5
โครเมียม: 4
ซาฟารี: 4
โอเปร่า: 10
iOS ซาฟารี: 3.2
เบราว์เซอร์ UC สำหรับ Android: 11.8
โครมสำหรับแอนดรอยด์: 73
ซัมซุงอินเทอร์เน็ต: 4
คุณสมบัติ text-shadow ใช้เพื่อเพิ่มเงาให้กับข้อความ เงาข้อความเป็นเครื่องมือที่น่าสนใจที่ให้คุณสร้างเอฟเฟกต์ที่น่าทึ่งได้ เงาอาจเป็นแบบชั้นเดียวหรือหลายชั้น เบลอ มีสี หรือโปร่งแสง เมื่อระบุเงาสำหรับองค์ประกอบ คุณสามารถระบุความยาวและสีได้เพียงสีเดียว ดังนั้นจึงสร้างสำเนาสีของอักขระหรือคำเดียว นอกจากนี้ การใช้เงายังทำให้ข้อความอ่านง่ายขึ้นหากสีข้อความและพื้นหลังมีความคมชัดต่ำ
แต่ละเงาจะถูกนำไปใช้กับทั้งข้อความและองค์ประกอบการออกแบบ (คุณสมบัติการตกแต่งข้อความ) คุณสามารถระบุเงาได้หลายรายการพร้อมกัน โดยระบุให้คั่นด้วยเครื่องหมายจุลภาค เงาซ้อนทับกัน แต่อย่าซ้อนทับข้อความ เงาแรกจะอยู่เหนือเงาอื่นๆ เสมอ ทรัพย์สินเป็นมรดก
แต่ละเงาถูกกำหนดโดยความยาวสองหรือสามสีและสีเสริม ความยาวที่อนุญาตคือ 0
ทรัพย์สินไม่ได้รับมรดก
ข้าว. 3. ไวยากรณ์คุณสมบัติข้อความเงา | ข้อความเงา | |
|---|---|
| ค่า: | |
| x-ชดเชย | ตั้งค่าออฟเซ็ตแนวนอนของเงา ค่าบวกจะดึงเงาไปทางขวาของข้อความ ส่วนค่าลบจะดึงเงาไปทางซ้าย |
| y-ชดเชย | ตั้งค่าออฟเซ็ตแนวตั้งของเงา ค่าบวกจะเลื่อนเงาลง ค่าลบจะเลื่อนเงาขึ้น |
| เบลอ | ตั้งค่ารัศมีการเบลอ ไม่อนุญาตให้ใช้ค่าลบ หากค่าเบลอเป็นศูนย์ แสดงว่าขอบของเงามีความคม มิฉะนั้น ยิ่งค่าสูง ขอบของเงาก็จะยิ่งเบลอมากขึ้น |
| สี | ตั้งค่าเงา หากไม่มีสี สีที่ใช้จะถูกนำมาจากคุณสมบัติสี |
| ไม่มี | ค่าเริ่มต้นหมายถึงไม่มีเงาข้อความ ลบเงาขององค์ประกอบออกจากกลุ่มขององค์ประกอบที่มีคุณสมบัติที่ระบุ |
| อักษรย่อ | ตั้งค่าคุณสมบัติให้เป็นค่าเริ่มต้น |
| สืบทอด | สืบทอดค่าคุณสมบัติจากองค์ประกอบหลัก |
ต่างจาก box-shadow เงาของข้อความจะไม่ถูกตัดและอาจปรากฏขึ้นหากข้อความโปร่งใสบางส่วน เช่นเดียวกับ box-shadow เงาของข้อความจะไม่ส่งผลต่อเค้าโครง และไม่ทำให้พื้นที่ที่เลื่อนได้เลื่อนหรือเพิ่มขนาด
ไวยากรณ์
ข้อความเงา: 2px 2px 4px สีชมพู; ข้อความเงา: #fc0 1px 0 10px; ข้อความเงา: 5px 5px #4D4644; ข้อความเงา: สีน้ำเงิน 2px 5px; ข้อความเงา: 5px 10px; ข้อความเงา: สืบทอด; ข้อความเงา: เริ่มต้น;
2.1. ตัวอย่างเงาข้อความ
เงาของโปสเตอร์
เงาข้อความ
ข้อความ-เงา-1 ( พื้นหลัง: #77F7DE; สี: สีขาว; ข้อความ-เงา: -2px -2px 0 #4D4644, 2px -2px 0 #4D4644, -2px 2px 0 #4D4644, 2px 2px 0 #4D4644, 4px 4px 0 สีขาว, 5px 5px 0 สีขาว, 6px 6px 0 สีขาว;
เงาสามมิติ
เงาข้อความ
ข้อความ-เงา-2 ( พื้นหลัง: การไล่ระดับสีเชิงเส้น(-45deg, #FEE864, #F5965E); สี: #f4f4f4; ข้อความ-เงา: -1px -1px สีขาว, 1px 1px สีเทา, 2px 2px #7a7a7a, 3px 3px #757575 , 4px 4px #707070, 5px 5px #6b6b6b, 6px 6px #666666, 7px 7px #616161, 8px 8px #5c5c5c, 9px 9px #575757, 10px 10px #525252, 11px 11px #4d4d4d, 18px 18px 30px RGB (0, 0, 0, .4), 18px 18px 10px RGB (0, 0, 0, .4 )
ข้อความเงา
เงาข้อความ
ข้อความ-เงา-3 ( พื้นหลัง: #FFE6DB; สี: #FFE6DB; ระยะห่างตัวอักษร: .1em; ข้อความ-เงา: 3px 0 rgba(250, 111, 142, .5), 6px 0 rgba(250, 111, 142 , .4), 9px 0 RGBA(250, 111, 142, .3), 12px 0 RGBA(250, 111, 142, .2), 15px 0 RGBA(250, 111, 142, .1);
เงาย้อนยุค
เงาข้อความ
ข้อความ-เงา-4 ( สี: #FB631E; การเว้นวรรคตัวอักษร: .1em; ข้อความ-เงา: 4px 4px สีขาว, 6px 6px #D7CC88; )
เงาเป็นชั้นๆ
เงาข้อความ
ข้อความ-เงา-5 ( พื้นหลัง: #f1f1f1; สี: #fcc105; ระยะห่างตัวอักษร: .1em; ข้อความ-เงา: 4px 4px #ff981d, 7px 7px rgba(200, 120, 22, .2); )