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

หากต้องการเพิ่มเงา ให้ใช้คุณสมบัติ box-shadow ซึ่งมี 6 ค่า โดยต้องใช้เพียง 2 ค่าเท่านั้น ในรูป รูปที่ 1 แสดงคุณสมบัติ box-shadow พร้อมค่าที่เป็นไปได้ทั้งหมด โดยมีหมายเลขกำกับไว้เพื่อระบุค่าเหล่านั้น

ข้าว. 1. ค่าคุณสมบัติกล่องเงา

1. คำหลักที่ใส่เข้าไปจะกำหนดเงาภายในองค์ประกอบ
2. เลื่อนเงาในแนวนอน (5px - ขวา, -5px - ซ้าย)
3. การเลื่อนแนวตั้ง (5px - ลง, -5px - ขึ้น);
4. รัศมีเงาเบลอ (0 - เงาที่คมชัด);
5. การยืดเงา (5px - ยืด -5px - หด);
6. สีเงา

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

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

โต๊ะ 1. การรวมกันของพารามิเตอร์เงา

รหัส	ผลลัพธ์	คำอธิบาย
กล่องเงา: 5px 5px;		เงาคมชัดทั้งด้านขวาและด้านล่าง
กล่องเงา: -5px -5px;		เงาคมชัดทั้งด้านซ้ายและด้านบน
กล่องเงา: 0 0 5px;		เงาเบลอรอบๆ องค์ประกอบ
กล่องเงา: 0 0 5px 2px;		ขยายเงาอีก 2 พิกเซล
กล่องเงา: 0 0 5px 2px สีแดง;		มีแสงสีแดงล้อมรอบองค์ประกอบ
กล่องเงา: 0.4em 0.4em 5px rgba (122,122,122,0.5);		เงาโปร่งแสง
กล่องเงา: สิ่งที่ใส่เข้าไป 0 0 6px;		เงาอยู่ข้างใน.

ดังที่เห็นจากตาราง ไม่จำเป็นต้องระบุการเลื่อนเงาเป็นพิกเซล แม้ว่าจะสะดวกก็ตาม สามารถระบุสีเงาได้ทุกสี รูปแบบที่สามารถเข้าถึงได้จึงเหมาะกับการได้เงาที่โปร่งแสง รูปแบบ RGBAเงาดังกล่าวจะดูดีกับพื้นหลังใดๆ ตัวอย่างที่ 1 แสดงวิธีการทำเช่นนี้

ตัวอย่างที่ 1: เงาในพื้นหลัง

HTML5 CSS3 IE 9+ Cr Op Sa Fx

ซุนวู ทรานส์ นิโคไล คอนราด ผลลัพธ์ตัวอย่างนี้

แสดงในรูป 2. เงาตามการปัดเศษของมุมของบล็อก

เมื่อเพิ่มเงา "กว้าง" โปรดทราบว่าเงาอาจขยายเกินขอบเขตที่มองเห็นได้ของหน้าต่างเบราว์เซอร์ และทำให้เกิดลักษณะที่ปรากฏ แถบแนวนอนเลื่อน

คุณสามารถเพิ่มเงาให้กับองค์ประกอบหลอกได้ บางครั้งสิ่งนี้จำเป็นสำหรับเลย์เอาต์ที่ซับซ้อน ในรูป รูปที่ 3 แสดงบล็อกส่วนหัวโดยมีเงาเพิ่มเข้าไป เพื่อหลีกเลี่ยงเส้นใดๆ ที่ทางแยก คุณต้องใช้องค์ประกอบหลอก ::after และเพิ่มเงาลงไป

ข้าว. 3. บล็อกด้วยเงา

ตัวอย่างที่ 2 แสดงการสร้างบล็อกดังกล่าว

ตัวอย่างที่ 2 บล็อกด้วยเงา

HTML5 CSS3 IE 9+ Cr Op Sa Fx

องค์ประกอบสามารถมีเงาได้มากกว่าหนึ่งเงา แต่หลายรายการจะแสดงรายการพารามิเตอร์โดยคั่นด้วยเครื่องหมายจุลภาคในค่าของคุณสมบัติ box-shadow ตัวอย่างที่ 3 แสดงวิธีการเพิ่มเงาสองชั้นให้กับรูปภาพทั้งหมด

ตัวอย่างที่ 2 บล็อกด้วยเงา

HTML5 CSS3 IE 9+ Cr Op Sa Fx

ผลลัพธ์ของตัวอย่างนี้แสดงไว้ในรูปที่ 1 4.

ข้าว. 4. ภาพเงาคู่

เงาแรกจะแสดงทางด้านซ้ายของภาพโดยมีรัศมีเบลอ 20px ขนาดของมันจะลดลงตามพารามิเตอร์ที่สี่ (-20px) พารามิเตอร์ของเงาที่สองจะถูกระบุหลังจุดทศนิยม โดยเงาจะแสดงทางด้านขวาของภาพและจะลดลงเพื่อความสมมาตรด้วย

เหมือนกับการอัปเดต 3 แต่มี กฎเกณฑ์สมัยใหม่ css (= น้อยกว่า) เพื่อไม่ให้มีการวางตำแหน่งพิเศษบนองค์ประกอบหลอก

#box ( สีพื้นหลัง: #3D6AA2; ความกว้าง: 160px; ความสูง: 90px; ตำแหน่ง: สัมบูรณ์; ด้านบน: calc(10% - 10px); ซ้าย: calc(50% - 80px); ) .box-shadow:after ( เนื้อหา:""; width:100%; z-index:-1; box-shadow: 0px 8px 2px #000000;

อัปเดต 3

#box ( สีพื้นหลัง: #3D6AA2; ความกว้าง: 160px; ความสูง: 90px; ขอบด้านบน: -45px; ขอบซ้าย: -80px; ตำแหน่ง: สัมบูรณ์; ด้านบน: 50%; ซ้าย: 50%; ) .box- เงา:หลัง ( เนื้อหา: ""; ความกว้าง: 150px; ความสูง: 1px; ขอบด้านบน: 88px; ขอบซ้าย: -75px; จอแสดงผล: บล็อก; ตำแหน่ง: สัมบูรณ์; ซ้าย: 50%; ดัชนี z: -1; -webkit-box-shadow: 0px 0px 8px 2px #000000; -moz-box-shadow: 0px 0px 8px 2px #000000;

อัปเดต 2

เห็นได้ชัดว่าคุณสามารถทำได้โดยใช้ตัวเลือกแท็กกล่อง CSS ที่เป็นตัวเลือกตามที่คนอื่นๆ เพิ่งระบุไว้ นี่คือการสาธิต:

Webkit-box-shadow: 0 4px 4px -2px #000000;

-moz-box-shadow: 0 4px 4px -2px #000000; กล่องเงา: 0 4px 4px -2px #000000;. มันจะเป็นทางออกที่ดีที่สุด

ความยาวที่สี่คือระยะการแพร่กระจาย ค่าบวกทำให้รูปร่างเงาขยายทิศทางตามรัศมีที่กำหนด ค่าลบทำให้รูปร่างเงาสอดคล้องกัน

อัปเดต

สิ่งที่ฉันทำคือสร้าง "องค์ประกอบเงา" ที่จะซ่อนอยู่หลังองค์ประกอบจริงที่คุณต้องการให้มีในเงา ฉันทำให้ความกว้างของ "องค์ประกอบเงา" กว้างน้อยกว่าองค์ประกอบจริงอย่างแน่นอน 2 เท่าของเงาที่ระบุ จากนั้นฉันก็จัดตำแหน่งให้ถูกต้อง

#wrapper ( ความกว้าง: 84px; ตำแหน่ง: ญาติ; ) #element ( สีพื้นหลัง: #3D668F; ความสูง: 54px; ความกว้าง: 100%; ตำแหน่ง: ญาติ; z-index: 10; ) #shadow ( สีพื้นหลัง: # 3D668F; ความสูง: 8px; ขอบซ้าย: -40px; ด้านล่าง: 0px; z-box: 5; moz-box-shadow: 0px 2px 4px #000000;

คำตอบเดิม

ใช่ คุณสามารถทำได้โดยใช้ไวยากรณ์เดียวกับที่คุณระบุ ค่าแรกจะควบคุมการวางตำแหน่งในแนวนอน และค่าที่สองจะควบคุมการวางตำแหน่งในแนวตั้ง ดังนั้นเพียงตั้งค่าแรกเป็น 0px และค่าที่สองเป็นออฟเซ็ตที่คุณต้องการดังต่อไปนี้

เงาปกตินั้นง่ายต่อการใช้งานโดยใช้ box-shadow หรือ text-shadow แต่ถ้าคุณต้องการสร้างเงาภายในล่ะ? บทความนี้จะอธิบายวิธีสร้างเงาเหล่านี้ด้วยโค้ดเพียงไม่กี่บรรทัด

ไวยากรณ์

อันดับแรก มาดูสองวิธีหลักในการใช้เงาใน CSS

กล่องเงา

ออกแบบ กล่องเงามีความหมายที่แตกต่างกันหลายประการ:

ชดเชยแนวนอนและ ชดเชยแนวตั้ง- การกระจัดในแนวนอนและแนวตั้งตามลำดับ ค่าเหล่านี้ระบุทิศทางที่วัตถุจะทอดเงา:

รัศมีเบลอและ รัศมีการแพร่กระจายซับซ้อนกว่านี้เล็กน้อย ความแตกต่างคืออะไร? ลองดูตัวอย่างที่มีสององค์ประกอบ โดยที่ค่าต่างๆ รัศมีเบลอแตกต่าง:

ขอบของเงานั้นเบลอเพียงอย่างเดียว ด้วยคุณค่าที่แตกต่างกัน รัศมีการแพร่กระจายเราเห็นสิ่งต่อไปนี้:

ในกรณีนี้เราจะเห็นว่าเงากระจัดกระจายเป็นบริเวณกว้าง หากคุณไม่ระบุค่า รัศมีเบลอและ รัศมีการแพร่กระจายแล้วพวกมันจะเท่ากับ 0

ข้อความเงา

ไวยากรณ์คล้ายกันมาก กล่องเงา:

ความหมายคล้ายกันแต่ไม่ เงากระจาย- ตัวอย่างการใช้งาน:

ใส่เข้าไปในกล่องเงา

หากต้องการ "พลิก" เงาภายในวัตถุ คุณต้องเพิ่ม สิ่งที่ใส่เข้าไปในซีเอสเอส:

เมื่อคุณเข้าใจไวยากรณ์กล่อง-เงาพื้นฐานแล้ว คุณจะเข้าใจวิธีใช้เงาภายในได้ง่ายมาก ค่ายังคงเหมือนเดิมคุณสามารถเพิ่มสีได้ (RGB เป็นฐานสิบหก):

สีเข้า รูปแบบ RGBค่าอัลฟ่ามีหน้าที่รับผิดชอบต่อความโปร่งใสของเงา:

ภาพที่มีเงา

เพิ่ม เงาภายในภาพจะยากกว่าปกติเล็กน้อย กอง- เริ่มต้นด้วยนี่คือโค้ดรูปภาพปกติ:

มีเหตุผลที่จะสมมติว่าคุณสามารถเพิ่มเงาได้ดังนี้:

Img ( กล่องเงา: ใส่ 0px 0px 10px rgba(0,0,0,0.5); )

แต่มองไม่เห็นเงา:

มีหลายวิธีในการแก้ปัญหานี้ ซึ่งแต่ละวิธีมีข้อดีและข้อเสีย ลองดูทั้งสองคน ประการแรกคือการห่อภาพตามปกติ กอง:

div ( ความสูง: 200px; ความกว้าง: 400px; กล่องเงา: สิ่งที่ใส่เข้าไป 0px 0px 10px rgba(0,0,0,0.9); ) img ( ความสูง: 200px; ความกว้าง: 400px; ตำแหน่ง: ญาติ; ดัชนี z: -2 ; )

ทุกอย่างใช้งานได้ แต่คุณต้องเพิ่มอีกเล็กน้อย มาร์กอัป HTMLและซีเอสเอส วิธีที่สองคือการตั้งค่ารูปภาพเป็นพื้นหลัง บล็อกที่ต้องการ:

Div (ความสูง: 200px; ความกว้าง: 400px; พื้นหลัง: url(http://lorempixum.com/400/200/transport/2); box-shadow: ใส่ 0px 0px 10px rgba(0,0,0,0.9); )

นี่คือสิ่งที่สามารถเกิดขึ้นได้เมื่อใช้เงาภายใน:

แทรกลงในข้อความเงา

หากต้องการใช้เงาข้อความด้านใน เพียงเพิ่มโค้ด สิ่งที่ใส่เข้าไปใช้งานไม่ได้:

หากต้องการแก้ไข ให้นำไปใช้กับส่วนหัวก่อน h1ติดตั้ง พื้นหลังสีเข้มและเงาอันสว่างไสว:

H1 ( สีพื้นหลัง: #565656; สี: โปร่งใส; ข้อความ-เงา: 0px 2px 3px rgba(255,255,255,0.5); )

นี่คือสิ่งที่เกิดขึ้น:

เพิ่มส่วนผสมลับ คลิปพื้นหลังซึ่งตัดสิ่งที่ขยายเกินข้อความออกไป (เป็นพื้นหลังสีเข้ม):

H1 ( สีพื้นหลัง: #565656; สี: โปร่งใส; ข้อความ-เงา: 0px 2px 3px rgba(255,255,255,0.5); -webkit-พื้นหลัง-คลิป: ข้อความ; -moz-พื้นหลัง-คลิป: ข้อความ; คลิปพื้นหลัง: ข้อความ ; )

มันเกือบจะตรงกับที่เราต้องการ ตอนนี้เราทำให้ข้อความมืดลงเล็กน้อย (อัลฟา) และผลลัพธ์คือ:

คุณสมบัติ box-shadow ของ CSS ช่วยให้คุณสามารถตั้งค่าเงาได้ องค์ประกอบ HTML- นักออกแบบเว็บไซต์ใช้ค่อนข้างบ่อยในการตกแต่งและเน้นกรอบด้วยข้อความ รูปภาพ และทำให้เนื้อหาอ่านง่ายขึ้น

ไวยากรณ์กล่องเงา CSS

... กล่องเงา : สี X Y R1 R2 ; -

• X - ชดเชยตามแกน X (แนวนอน)
• Y - ชดเชยตามแกน Y (แนวตั้ง)
• R1 - เบลอ (ยิ่งค่าสูง การเปลี่ยนผ่านก็จะราบรื่นยิ่งขึ้น)
• R2 - รัศมีของส่วนขยาย (ถ้าเป็นบวกจะยืดออก ลบจะบีบอัด)
• สี - สี (ระบุได้ทุกรูปแบบ: #RGB, ชื่อสี)
• สิ่งที่ใส่เข้าไป - หากมีค่านี้เงาจะอยู่ภายในบล็อก (องค์ประกอบ)

ตัวอย่างที่ 1 เฟรม HTML พร้อมกล่องเงาโดยไม่มีออฟเซ็ต

ด้านล่างนี้เป็นวิธีที่ง่ายที่สุดในการใช้เงา คุณสมบัติซีเอสเอสกล่องเงาบน หน้า htmlเมื่อมันไหลอย่างสม่ำเสมอทั่วทั้งเฟรมโดยไม่มีการกระจัด

ตัวอย่างหมายเลข 1 ใส่กรอบมีเงา

ตัวอย่างหมายเลข 1 ใส่กรอบมีเงา

ตัวอย่างที่ 2 กรอบ HTML พร้อมกล่องเงาออฟเซ็ต-เงา

เกือบจะเหมือนกับตัวอย่างแรก แต่เฉพาะเมื่อมีการเลื่อนเฟรมเท่านั้น

ตัวอย่างหมายเลข 2 ใส่กรอบพร้อมเงาออฟเซ็ต

หน้าจะแปลงเป็นดังต่อไปนี้

ตัวอย่างหมายเลข 2 ใส่กรอบพร้อมเงาออฟเซ็ต

ตัวอย่างหมายเลข 3 กรอบเรืองแสง html

การลงเงาเป็นประกาย

ตัวอย่างหมายเลข 3 เรืองแสง

หน้าจะแปลงเป็นดังต่อไปนี้

ตัวอย่างหมายเลข 3 เรืองแสง

ตัวอย่างที่ 4 เรืองแสงภายในเส้นขอบ HTML

แสงที่ส่องเข้ามาภายในบล็อกและไม่เกินขอบเขต เอฟเฟกต์ถูกสร้างขึ้นโดยใช้แอตทริบิวต์สิ่งที่ใส่เข้าไป

ตัวอย่างหมายเลข 4 เปล่งประกายภายใน

หน้าจะแปลงเป็นดังต่อไปนี้

ตัวอย่างหมายเลข 4 เปล่งประกายภายใน

ตัวอย่างที่ 5 การรวมเงาใน html

เอฟเฟกต์เงาสามารถรวมกันได้โดยคั่นด้วยเครื่องหมายจุลภาค ในกรณีนี้จะเกิดผลลัพธ์ที่น่าสนใจมาก ตัวอย่างเช่น คุณสามารถสร้างกรอบหลากสีในรูปแบบ 3 มิติได้

ตัวอย่างหมายเลข 5 รวมเงา

หน้าจะแปลงเป็นดังต่อไปนี้

ตัวอย่างหมายเลข 5 รวมเงา

หมายเหตุ: เบราว์เซอร์รุ่นเก่า

IE เวอร์ชันเก่ากว่า 9 ไม่รองรับ box-shadow คำนำหน้าเบราว์เซอร์สำหรับ box-shadow

• -webkit-box-shadow - สำหรับ Chrome สูงสุด 10, Safari สูงสุด 5.1, Android สูงสุด 4 และ iOS สูงสุด 5
• -moz-box-shadow - สำหรับ Firefox สูงถึงเวอร์ชัน 4.0

เงาปกตินั้นง่ายต่อการใช้งานโดยใช้ box-shadow หรือ text-shadow แต่ถ้าคุณต้องการสร้างเงาภายในล่ะ? บทความนี้จะอธิบายวิธีสร้างเงาเหล่านี้ด้วยโค้ดเพียงไม่กี่บรรทัด

ไวยากรณ์

ขั้นแรก มาดูสองวิธีหลักในการใช้เงาใน CSS

กล่องเงา

ออกแบบ กล่องเงามีความหมายที่แตกต่างกันหลายประการ:

ชดเชยแนวนอนและ ชดเชยแนวตั้ง— การกระจัดในแนวนอนและแนวตั้งตามลำดับ ค่าเหล่านี้ระบุทิศทางที่วัตถุจะทอดเงา:

รัศมีเบลอและ รัศมีการแพร่กระจายซับซ้อนกว่านี้เล็กน้อย ความแตกต่างคืออะไร? ลองดูตัวอย่างที่มีสององค์ประกอบ โดยที่ค่าต่างๆ รัศมีเบลอแตกต่าง:

ขอบของเงานั้นเบลอเพียงอย่างเดียว ด้วยคุณค่าที่แตกต่างกัน รัศมีการแพร่กระจายเราเห็นสิ่งต่อไปนี้:

ในกรณีนี้เราจะเห็นว่าเงากระจัดกระจายเป็นบริเวณกว้าง หากคุณไม่ระบุค่า รัศมีเบลอและ รัศมีการแพร่กระจายแล้วพวกมันจะเท่ากับ 0

ข้อความเงา

ไวยากรณ์คล้ายกันมาก กล่องเงา:

ความหมายคล้ายกันแต่ไม่ เงากระจาย- ตัวอย่างการใช้งาน:

ใส่เข้าไปในกล่องเงา

หากต้องการ "พลิก" เงาภายในวัตถุ คุณต้องเพิ่ม สิ่งที่ใส่เข้าไปในซีเอสเอส:

เมื่อคุณเข้าใจไวยากรณ์กล่อง-เงาพื้นฐานแล้ว คุณจะเข้าใจวิธีใช้เงาภายในได้ง่ายมาก ค่ายังคงเหมือนเดิมคุณสามารถเพิ่มสีได้ (RGB เป็นฐานสิบหก):

สีอยู่ในรูปแบบ RGB ค่าอัลฟ่ารับผิดชอบต่อความโปร่งใสของเงา:

ภาพที่มีเงา

การเพิ่มเงาภายในให้กับรูปภาพนั้นยากกว่าการเพิ่มเงาปกติเล็กน้อย กอง- เริ่มต้นด้วยนี่คือโค้ดรูปภาพปกติ:

มีเหตุผลที่จะสมมติว่าคุณสามารถเพิ่มเงาได้ดังนี้:

ไอเอ็มจี (
กล่องเงา: ใส่ 0px 0px 10px rgba (0,0,0,0.5);
}

แต่มองไม่เห็นเงา:

มีหลายวิธีในการแก้ปัญหานี้ ซึ่งแต่ละวิธีมีข้อดีและข้อเสีย ลองดูทั้งสองคน ประการแรกคือการห่อภาพตามปกติ กอง:

ดิวิชั่น (
ความสูง: 200px;
ความกว้าง: 400px;
}

img(
ความสูง: 200px;
ความกว้าง: 400px;
ตำแหน่ง: ญาติ;
ดัชนี z: -2;
}

ทุกอย่างใช้งานได้ แต่เราต้องเพิ่มมาร์กอัป HTML และ CSS เพิ่มเติมเล็กน้อย วิธีที่สองคือการตั้งค่ารูปภาพเป็นพื้นหลังของบล็อกที่ต้องการ:

ดิวิชั่น (
ความสูง: 200px;
ความกว้าง: 400px;
พื้นหลัง: url(http://lorempixum.com/400/200/transport/2);
กล่องเงา: ใส่ 0px 0px 10px rgba (0,0,0,0.9);
}

นี่คือสิ่งที่สามารถเกิดขึ้นได้เมื่อใช้เงาภายใน:

แทรกลงในข้อความเงา

หากต้องการใช้เงาข้อความด้านใน เพียงเพิ่มโค้ด สิ่งที่ใส่เข้าไปใช้งานไม่ได้:

หากต้องการแก้ไข ให้นำไปใช้กับส่วนหัวก่อน h1ตั้งค่าพื้นหลังสีเข้มและเงาสว่าง:

H1 (
สีพื้นหลัง: #565656;
สี: โปร่งใส;
}

นี่คือสิ่งที่เกิดขึ้น:

เพิ่มส่วนผสมลับ คลิปพื้นหลังซึ่งตัดสิ่งที่ขยายเกินข้อความออกไป (เป็นพื้นหลังสีเข้ม):

H1 (
สีพื้นหลัง: #565656;
สี: โปร่งใส;
ข้อความเงา: 0px 2px 3px rgba (255,255,255,0.5);
-webkit-พื้นหลังคลิป: ข้อความ;
-moz-พื้นหลังคลิป: ข้อความ;
คลิปพื้นหลัง: ข้อความ;
}

มันเกือบจะตรงกับที่เราต้องการเลย ตอนนี้เราแค่ทำให้ข้อความมืดลงเล็กน้อย (อัลฟา) เท่านี้ก็เรียบร้อย