เงากล่องอยู่ข้างใน เงาภายในใน CSS รัศมีการยืดเงา
คุณสามารถเพิ่มเงาให้กับองค์ประกอบและเปลี่ยนแปลงได้ รูปร่างใช้คุณสมบัติ box-shadow CSS สไตล์นี้ช่วยให้คุณทราบถึงเอฟเฟกต์ที่น่าสนใจ เช่น ปริมาตรและมิติสามมิติของบล็อก คุณสมบัตินี้รองรับเบราว์เซอร์สมัยใหม่ทั้งหมด ข้อยกเว้นคือ IE8 และ Opera Mini
คุณสมบัติกล่องเงา: ไวยากรณ์
สไตล์นี้เขียนดังนี้:
กล่องเงา: ใส่ 4px 4px 8px 5px #333333;
พิจารณาตามลำดับว่าแต่ละพารามิเตอร์รับผิดชอบอะไร (จากซ้ายไปขวา):
- คำสำคัญ inset: พารามิเตอร์ที่ไม่จำเป็นต้องระบุ วาดเงา ข้างในองค์ประกอบ.
- เอ็กซ์ออฟเซ็ต: ระบุระดับที่เงาจะชดเชยในแนวนอนโดยสัมพันธ์กับองค์ประกอบ ค่าบวกหมายถึงการเลื่อนไปทางขวา ลบ - ไปทางซ้าย ค่า 0 หมายความว่าเงาไม่ได้ถูกชดเชย
- Y กะ: ระบุจำนวนการกระจัดในแนวตั้งของเงา ค่าบวกหมายถึงการเลื่อนลง ค่าลบหมายถึงการเลื่อนขึ้น ค่า 0 คือเงาที่ไม่มีการเปลี่ยนแปลง
- รัศมีเบลอ: นี่คือระดับความเบลอของเงา ยิ่งค่าสูง เงาก็จะยิ่งเบลอมากขึ้น หากไม่ได้ระบุพารามิเตอร์ ค่าเริ่มต้นคือ 0 ในกรณีนี้เงาจะชัดเจนอย่างสมบูรณ์
- ส่วนขยาย: พารามิเตอร์ทางเลือกที่รับผิดชอบในการยืดเงาไปตามแกนทั้งสอง ยิ่งค่าสูงเท่าใดก็ยิ่งยืดมากขึ้นเท่านั้น ส่วนขยายใช้งานได้เฉพาะเมื่อมีพารามิเตอร์ก่อนหน้าเท่านั้น ค่าเริ่มต้นคือ 0
- สีเงา: ทุกอย่างชัดเจนด้วยพารามิเตอร์นี้ - โดยจะกำหนดสีของเงาขององค์ประกอบ สีเริ่มต้นคือสีดำ
บันทึก. เบราว์เซอร์ Androidและเก่ากว่า เวอร์ชันไอโฟน Safari ต้องใช้คำนำหน้า -webkit- เพื่อให้ทำงานได้อย่างถูกต้อง คุณสมบัติซีเอสเอสกล่องเงา
คุณสมบัตินี้อาจรับค่าได้หลายกลุ่ม (สร้างเงาหลายอันพร้อมกัน) ในการดำเนินการนี้ คุณจะต้องแสดงรายการกลุ่มพารามิเตอร์เหล่านี้โดยคั่นด้วยเครื่องหมายจุลภาค ตัวอย่างเช่น:
กล่องเงา: 15px 15px 20px #8b0163, ภาพประกอบ 15px 15px 20px #630046;
ตัวอย่างเงากล่อง
เพื่อช่วยให้คุณเข้าใจถึงประสิทธิภาพและความสวยงามของคุณสมบัติ CSS box-shadow ได้ดีขึ้น เราจะแสดงตัวอย่างบางส่วนที่คุณสามารถนำไปปฏิบัติได้อย่างปลอดภัย คุณสมบัตินี้สามารถเปลี่ยนบล็อกธรรมดาได้อย่างมาก!
แสงเงา
กล่องเงา: 0 2px 4px rgba (0, 0, 0, .25);
เอฟเฟกต์กระดาษ
กล่องเงา: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0, 0, 0, .6), 23px 0 20px -23px rgba(0, 0, 0, .6) ใส่ 0 0 40px rgba (0, 0, 0, .1); 
หลายชั้น
กล่องเงา: 6px 6px #ccc, 12px 12px #a3a3a3; 
กรอบสาม
กล่องเงา: 0 0 0 7px rgb (118, 46, 177), 0 0 0 14px rgba (118, 46, 177, 0.6), 0 0 0 21px rgba (118, 46, 177, 0.4); 
มุม
กล่องเงา: -20px 20px 0 -17px #eee, 20px -20px 0 -17px #eee, 20px 20px 0 -20px #592385, 0 0 0 2px #592385; 
อย่างที่คุณเห็น คุณสมบัติของกล่องเงาทำให้มีพื้นที่สำหรับจินตนาการมากมาย คุณสามารถแปลงบล็อกได้ตามที่คุณต้องการ - สิ่งสำคัญคือต้องมีสัดส่วน! 😉
ในบทถัดไป คุณจะสำรวจคุณสมบัติความกว้างและความสูง ซึ่งกำหนดขนาดขององค์ประกอบ
ลำดับการบันทึกมีความสำคัญอย่างยิ่ง ค่าแรกจะเป็นค่าออฟเซ็ตตามแกน X เสมอ ค่าที่สอง - ตามแกน Y
หากไม่ต้องการออฟเซ็ตตามแกนใดแกนหนึ่ง ให้ตั้งค่าเป็นศูนย์:
Class(box-shadow: 0 8px;) – เลื่อนเงาตามแกน Y เท่านั้น
ผลลัพธ์
Class(box-shadow: 8px 8px;) – เลื่อนไปตามแกนทั้งสอง
ผลลัพธ์
ค่าลบสำหรับแกนกล่องเงา
เงาจะเคลื่อนไปในทิศทางตรงกันข้าม:
Class(box-shadow: -8px 8px;) – เลื่อนเงาด้วยค่าลบตามแนวแกน X
ผลลัพธ์
รัศมีเงาเบลอ
พารามิเตอร์คุณสมบัติที่สาม กล่องเงา. หากไม่ได้ระบุ ค่าจะเป็น 0 และขนาดเงาจะเท่ากับขนาดขององค์ประกอบที่ใช้ด้วย
Class(box-shadow: 0 48px 0;) - เงาจะทำซ้ำขนาดขององค์ประกอบที่จะนำไปใช้
ผลลัพธ์
เมื่อค่ามากกว่าศูนย์ ขอบจะสูญเสียความคมชัด เงาจะใหญ่ขึ้นและสว่างขึ้น เบลอถูกนำไปใช้จากทุกด้าน:
Class(box-shadow: 0 0 8px;) – ไม่มีการชดเชย มีแต่ความเบลอ
ผลลัพธ์
คลาส (กล่องเงา: 0 8px 8px;) – ออฟเซ็ตแกน Y และเบลอ
ผลลัพธ์
ค่าลบถือเป็นข้อผิดพลาด และเงาจะไม่แสดงเลย
รัศมีการยืดเงา
พารามิเตอร์คุณสมบัติที่สี่ กล่องเงา. เปลี่ยนขนาดของเงาที่สัมพันธ์กับองค์ประกอบ ยืดออกไปทุกทิศทาง:
คลาส(box-shadow: 0 0 0 8px;) – ไม่มีการกระจัดหรือเบลอ มีเพียงการยืดออก
ผลลัพธ์
ในกรณีนี้ เงาจะมีขนาดใหญ่กว่าองค์ประกอบ 16 พิกเซลในด้านความกว้างและความสูง: 8px ซ้าย + 8px ขวา และ 8px บน + 8px ล่าง
ค่ายืดเงาติดลบใน CSS
เงาไม่ยืดออก แต่จะแคบลงทุกด้านตามค่าที่ระบุ:
Class(box-shadow: 0 16px 0 -8px;) – ลดเงาด้วยค่าลบ
ผลลัพธ์
สีเงา
ตามค่าเริ่มต้น สีเงาจะซ้ำกับสีแบบอักษร: ดังตัวอย่างด้านบน
สีเงาถูกระบุในรูปแบบ CSS ที่มีอยู่:
- #ff0009
- RGB(255, 0, 9)
- hsl(358, 100%, 50%);
ให้เงาสีน้ำเงินแก่องค์ประกอบ:
คลาส (กล่องเงา: 0 8px #3a8fe7;)
ผลลัพธ์
เงาภายใน
พารามิเตอร์ สิ่งที่ใส่เข้าไปแสดงเงาภายในบล็อก
ต่างจากตัวเลือกที่ระบุไว้ข้างต้น ไม่มีคำสั่งการเขียนที่เข้มงวด ทั้งสองตัวเลือกจะให้ผลลัพธ์เหมือนกัน:
กล่องเงา: 0 8px #3a8fe7 สิ่งที่ใส่เข้าไป; กล่องเงา: ใส่ 0 8px #3a8fe7;
ผลลัพธ์
ตัวเลือกที่สองนั้นเข้าใจง่ายกว่าเมื่ออ่านโค้ด
เงาหลาย
มีการระบุเงาหลายรายการโดยคั่นด้วยเครื่องหมายจุลภาค แสดงลำดับจากบนลงล่าง:
คลาส ( กล่องเงา: 0 8px #3a8fe7, 0 16px #3ae7af; )
ผลลัพธ์
หากคุณสลับสถานที่ เงาสีน้ำเงินจะไม่ปรากฏให้เห็น:
คลาส ( กล่องเงา: 0 16px #3ae7af, 0 8px #3a8fe7; )
ผลลัพธ์
เงาด้านในและด้านนอกถูกกำหนดไว้พร้อมกัน:
คลาส ( กล่องเงา: 0 16px #3ae7af, สิ่งที่ใส่เข้าไป 0 8px #3a8fe7; )
ผลลัพธ์
เงามน
หากองค์ประกอบได้รับคุณสมบัติ รัศมีชายแดนเงาจะมีมุมโค้งมน
คลาส ( กล่องเงา: 0 16px #3a8fe7; รัศมีเส้นขอบ: 8px; )
ผลลัพธ์
โดยการตั้งค่าการยืดของเงา เราจะเพิ่มการปัดเศษของมัน ตัวอย่างเช่น รัศมีเส้นขอบคือ 8px และการยืดเงาคือ 4
8+4=12px คือรัศมีการปัดเศษของเงา
คลาส ( กล่องเงา: 0 16px 0 4px #3a8fe7; รัศมีเส้นขอบ: 8px; )
ผลลัพธ์
หลักการเดียวกันนี้ใช้กับการลดขนาดเงาเมื่อค่าเป็นลบ
8+(-4)=4px - เราได้เงาที่ปัดเศษเล็กกว่าสองเท่า
ถ้าการบีบอัดเงามากกว่ารัศมีเส้นขอบ เราจะได้เงาที่มีมุมฉาก ตัวอย่างเช่น การบีบอัดคือ 16px
8+(-16)=(-8) แต่ fillet ไม่สามารถมีค่าลบได้ และจะใช้ศูนย์
คลาส ( กล่องเงา: 0 24px 0 -16px #3a8fe7; รัศมีเส้นขอบ: 8px; )
ผลลัพธ์
คุณสมบัติซีเอสเอส กล่องเงารองรับเบราว์เซอร์ยอดนิยมทั้งหมด ยกเว้น Opera Mini
เงาปกตินั้นง่ายต่อการใช้งานโดยใช้ 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-พื้นหลัง-คลิป: ข้อความ; คลิปพื้นหลัง: ข้อความ ; )
มันเกือบจะตรงกับที่เราต้องการเลย ตอนนี้เราเพียงทำให้ข้อความมืดลงเล็กน้อย (อัลฟา) และผลลัพธ์ก็คือ:
วันนี้เราจะมาเรียนรู้วิธีสร้างเงา CSS โดยไม่มีรูปภาพ หลังจากเสร็จสิ้นบทช่วยสอนนี้แล้ว คุณจะไม่จำเป็นต้องใช้โปรแกรมสร้างเงา CSS อีกต่อไป
ข้อได้เปรียบหลักของเงาที่สร้างด้วย CSS3 คือความง่ายในการใช้งานและการลดจำนวนคำขอไปยังเซิร์ฟเวอร์ (เนื่องจากเราไม่ได้ใช้รูปภาพอีกต่อไป) ในการสร้างเงา CSS เราจำเป็นต้องมีแท็ก div และคุณสมบัติ box-shadow ของ CSS คุณไม่จำเป็นต้องมาร์กอัปเพิ่มเติมใดๆ เนื่องจากเราจะสร้าง :after และ :before องค์ประกอบหลอกที่เราจะวางไว้ด้านหลังวัตถุหลัก (div กับคลาส ปิดกั้น).
ดูโค้ด HTML ที่เราจะสร้างเงา CSS3:
เนื้อหา
ต่อไปก็ดูได้ ตัวอย่างสำเร็จรูปและโค้ดที่จำเป็นในการใช้งาน เพื่อลดขนาดข้อความบนหน้าเว็บ เราจะละเว้นคุณสมบัติ CSS ที่มีคำนำหน้าเบราว์เซอร์ สามารถดูโค้ดแบบเต็มได้โดยคลิกที่ลิงก์ "ตัวอย่าง" ที่สอดคล้องกับตัวอย่าง
.block ( ตำแหน่ง: ญาติ; ความกว้าง: 40%; การขยาย: 1em; ระยะขอบ: 2em 10px 4em; พื้นหลัง: #fff; รัศมีเส้นขอบ: 4px; กล่องเงา: 0 1px 4px rgba (0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) สิ่งที่ใส่เข้าไป; ) .block:before, .block:after ( เนื้อหา:""; ตำแหน่ง:สัมบูรณ์; z-index:-2; ด้านล่าง:15px; ซ้าย:10px ; ความกว้าง:50%; ความสูง:20%; ความกว้างสูงสุด:300px; กล่องเงา:0 15px 10px rgba(0, 0, 0, 0.7); แปลง:หมุน(-3deg); ) .block:หลัง ( ขวา :10px; ซ้าย:อัตโนมัติ; แปลง:หมุน(3deg); )
.block ( ตำแหน่ง:ญาติ; ความกว้าง:40%; การขยาย:1em; ระยะขอบ:2em 10px 4em; พื้นหลัง:#fff; กล่อง-เงา:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) สิ่งที่ใส่เข้าไป; border:1px solid #efefef; border-radius:0 0 120px 120px / 0 0 6px 6px; ) .block:before, .block:after ( content:""; position:absolute ; z-index:-2; ด้านล่าง:12px; ซ้าย:10px; ความกว้าง:50%; ความสูง:55%; ความกว้างสูงสุด:200px; box-shadow:0 8px 12px rgba(0, 0, 0, 0.5); แปลง: เอียง (-8deg) หมุน (-3deg); ) .block: หลัง ( ขวา: 10px; ซ้าย: อัตโนมัติ; แปลง: เอียง (8deg) หมุน (3deg); )
การใช้เงาทำให้คุณสามารถกำหนดเปอร์สเปคทีฟของบล็อกได้ ดูตัวอย่าง
.block ( ตำแหน่ง:ญาติ; ความกว้าง:40%; การขยาย:1em; ระยะขอบ:2em 10px 4em; พื้นหลัง:#fff; กล่อง-เงา:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) สิ่งที่ใส่เข้าไป; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; ) .block:before ( left:80px; Bottom:5px ; ความกว้าง: 50%; ความสูง: 35%; ความกว้างสูงสุด: 200px; กล่องเงา: -80px 0 8px rgba (0, 0, 0, 0.4); การแปลง: เอียง (50deg); แหล่งกำเนิดการแปลง: 0 100% ; ) .block:หลัง ( จอแสดงผล:ไม่มี; )
เงาของ CSSที่บล็อกที่ยกขึ้น ดูตัวอย่าง
.block ( ตำแหน่ง:ญาติ; ความกว้าง:40%; การขยาย:1em; ระยะขอบ:2em 10px 4em; พื้นหลัง:#fff; กล่อง-เงา:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) สิ่งที่ใส่เข้าไป; กล่องเงา: 0 15px 10px -10px rgba (0, 0, 0, 0.5), 0 1px 4px rgba (0, 0, 0, 0.3), 0 0 40px rgba (0 , 0, 0, 0.1) สิ่งที่ใส่เข้าไป; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; )
ตัวอย่างเงา CSS3 สำหรับบล็อกพับในแนวตั้ง ดูตัวอย่าง
.block ( ตำแหน่ง:ญาติ; ความกว้าง:40%; การขยาย:1em; ระยะขอบ:2em 10px 4em; พื้นหลัง:#fff; กล่อง-เงา:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) สิ่งที่ใส่เข้าไป; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; ) .block:before ( top:10px; below:10px ; ซ้าย: 0; ขวา: 50%; กล่องเงา: 0 0 15px rgba (0,0,0,0.6); รัศมีเส้นขอบ: 10px / 100px; )
.block ( ตำแหน่ง:ญาติ; ความกว้าง:40%; การขยาย:1em; ระยะขอบ:2em 10px 4em; พื้นหลัง:#fff; กล่อง-เงา:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) สิ่งที่ใส่เข้าไป; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; ) .block:before ( top:10px; below:10px ; ซ้าย: 0; ขวา: 0; กล่องเงา: 0 0 15px rgba (0,0,0,0.6); รัศมีเส้นขอบ: 10px / 100px; )
ตัวอย่างเงา CSS3 สำหรับบล็อกพับในแนวนอน ดูตัวอย่าง
.block ( ตำแหน่ง:ญาติ; ความกว้าง:40%; การขยาย:1em; ระยะขอบ:2em 10px 4em; พื้นหลัง:#fff; กล่อง-เงา:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) สิ่งที่ใส่เข้าไป; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; ) .block:before ( top:50%; Bottom: 0px; ซ้าย:10px; ขวา:10px; กล่อง-เงา:0 0 15px rgba(0,0,0,0.6); รัศมีเส้นขอบ:100px / 10px; )
.block ( ตำแหน่ง:ญาติ; ความกว้าง:40%; การขยาย:1em; ระยะขอบ:2em 10px 4em; พื้นหลัง:#fff; กล่อง-เงา:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) สิ่งที่ใส่เข้าไป; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; ) .block:before ( top:0px; below:0px ; ซ้าย:10px; ขวา:10px; box-shadow:0 0 15px rgba(0,0,0,0.6); border-radius:100px / 10px; )
เงา CSS3 สำหรับบล็อกที่หมุน ดูตัวอย่าง
.block ( ตำแหน่ง: ญาติ; ความกว้าง: 40%; การขยาย: 1em; ระยะขอบ: 2em 10px 4em; พื้นหลัง: #fff; รัศมีเส้นขอบ: 4px; กล่องเงา: 0 1px 4px rgba (0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:none; แปลง:rotate(-3deg); ) .block > :first-child:before ( เนื้อหา:""; ตำแหน่ง:สัมบูรณ์; ดัชนี z:-1; บน:0px; ล่าง:0; ซ้าย:0; ขวา:0px; พื้นหลัง:#fff; กล่องเงา:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba (0, 0, 0, 0.1) สิ่งที่ใส่เข้าไป; ) .block:before, .block:after ( เนื้อหา:""; ตำแหน่ง:สัมบูรณ์; z-index:-2; ก้น:15px; ซ้าย:10px; ความกว้าง:50% ; ความสูง: 20%; ความกว้างสูงสุด: 300px; box-shadow: 0 15px 10px rgba (0, 0, 0, 0.7); แปลง: หมุน (-3deg); ) .block: หลังจาก ( ขวา: 10px; ซ้าย: อัตโนมัติ แปลง: หมุน (3deg); ) เงาของบล็อกเป็นเอฟเฟกต์สามมิติที่ยอดเยี่ยมที่ทำให้เว็บไซต์มีความสมจริงและปริมาตร เมื่อฉันเริ่มเรียน (ประมาณ 5-6 ปีที่แล้ว) ฉันไม่รู้เกี่ยวกับการมีอยู่จริง และเมื่อสร้างไซต์ฉันต้องทำให้เงาของบล็อกเป็นรูปภาพ มันไม่สะดวกมากและก็ไม่ได้เป็นไปตามที่ฉันต้องการเสมอไป ด้วยพลังของ CSS ซึ่งทำให้การทำงานของนักออกแบบเว็บไซต์ง่ายขึ้น วันนี้ฉันจะแสดงวิธีสร้างเงาสำหรับบล็อกใน CSS
หากต้องการเพิ่มเงาใน CSS ให้ใช้คุณสมบัติ กล่องเงา .
1. เลื่อนเงาในแนวนอน (สูงสุด 100px ไปทางขวา, สูงสุด -100px ไปทางซ้าย)
2. การเลื่อนแนวตั้ง (สูงสุด 100px ลง, สูงสุด -100px ขึ้นไป)
3. เงาเบลอ (0 - เงาที่ชัดเจน, 100 - เงาที่พร่ามัวมาก)
4. การยืดเงา (สูงสุด 100px - การยืด, สูงสุด -100px - การบีบอัด)
5. สีเงา;
6. สิ่งที่ใส่เข้าไป - เงาจะอยู่ภายในองค์ประกอบ หากไม่มีการใส่เข้าไป เงาก็จะอยู่ด้านนอก
เมื่อฉันเริ่มเรียนรู้ HTML (ประมาณ 5-6 ปีที่แล้ว) ฉันไม่รู้เลยเกี่ยวกับการมีอยู่ของ CSS และเมื่อสร้างเว็บไซต์ฉันต้องทำให้เงาของบล็อกกลายเป็นรูปภาพ
ผลลัพธ์ :
ตารางที่มีเงา:
| รหัส | ตัวอย่าง: |
| กล่องเงา: 0px 13px 17px -6px #000000; |  |
| กล่องเงา: 10px -10px 0px -6px #000000; |  |
| กล่องเงา: 10px 13px 0px -6px #000000; |  |
| กล่องเงา: 1px 1px 32px -6px #000000; |  |
| กล่องเงา: -1px 23px 41px -25px #000000; |  |
| กล่องเงา: -1px 23px 41px -25px #4dc13c; |  |
| กล่องเงา: -10px -10px 40px -6px #000000 สิ่งที่ใส่เข้าไป; |  |
| กล่องเงา: 7px 10px 23px -8px #92a9e7; |  |
การใช้เงาคุณสามารถสร้างบล็อกสามมิติได้:
| รหัส | ตัวอย่าง |
| กล่องเงา: 1px 0px rgb(220,195,35), 1px 1px rgb(192,167,7), 2px 1px rgb(219,194,34), 2px 2px rgb(191,166,6), 3px 2px rgb(218,193,33), 3px 3px RGB (190,165,5), 4px 3px RGB (217,192,32), 4px 4px RGB (189,164,4), 5px 4px RGB (216,191,31), 5px 5px RGB (188,163,3), 6px 5px RGB (215,190, 30), 6px 6px RGB(187,162,2), 7px 6px RGB(214,189,29), 7px 7px RGB(186,161,1), 8px 7px RGB(213,188,28), 8px 8px RGB(185,160,0), 9px 8px RGB(212,187,27), 9px 9px RGB(184,159,0); |  |
| กล่องเงา: -1px 0px rgb(220,195,35), -1px 1px rgb(192,167,7), -2px 1px rgb(219,194,34), -2px 2px rgb(191,166,6), -3px 2px rgb(218,193) ,33), -3px 3px RGB(190,165,5), -4px 3px RGB(217,192,32), -4px 4px RGB(189,164,4), -5px 4px RGB(216,191,31), -5px 5px RGB(188,163) ,3), -6px 5px RGB(215,190,30), -6px 6px RGB(187,162,2), -7px 6px RGB(214,189,29), -7px 7px RGB(186,161,1), -8px 7px RGB(213,188) ,28), -8px 8px RGB(185,160,0), -9px 8px RGB(212,187,27), -9px 9px RGB(184,159,0); |  |
| กล่องเงา: -1px -0px rgb(220,195,35), -1px -1px rgb(192,167,7), -2px -1px rgb(219,194,34), -2px -2px rgb(191,166,6), -3px -2px RGB(218,193,33), -3px -3px RGB(190,165,5), -4px -3px RGB(217,192,32), -4px -4px RGB(189,164,4), -5px -4px RGB(216,191, 31), -5px -5px RGB(188,163,3), -6px -5px RGB(215,190,30), -6px -6px RGB(187,162,2), -7px -6px RGB(214,189,29), -7px - 7px RGB(186,161,1), -8px -7px RGB(213,188,28), -8px -8px RGB(185,160,0), -9px -8px RGB(212,187,27), -9px -9px RGB(184,159,0) ); |  |
| กล่องเงา: 1px -0px rgb(220,195,35), 1px -1px rgb(192,167,7), 2px -1px rgb(219,194,34), 2px -2px rgb(191,166,6), 3px -2px rgb(218,193) ,33), 3px -3px RGB(190,165,5), 4px -3px RGB(217,192,32), 4px -4px RGB(189,164,4), 5px -4px RGB(216,191,31), 5px -5px RGB(188,163) ,3), 6px -5px RGB(215,190,30), 6px -6px RGB(187,162,2), 7px -6px RGB(214,189,29), 7px -7px RGB(186,161,1), 8px -7px RGB(213,188) ,28), 8px -8px RGB(185,160,0), 9px -8px RGB(212,187,27), 9px -9px RGB(184,159,0); |  |
Blok1 ( กว้าง: 70%; ความกว้างสูงสุด: 550px; ระยะขอบ: 10px อัตโนมัติ; ขยาย: 1em; กล่องเงา: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0 , 0, 0, .8), 23px 0 20px -23px rgba(0, 0, 0, .8), 0 0 40px rgba(0, 0, 0, .1) แทรก; )
ผลลัพธ์ :
Blok1 ( ความกว้าง: 30%; ความกว้างสูงสุด: 550px; ระยะขอบ: 2em อัตโนมัติ; การขยาย: 1em; พื้นหลัง: #DADADA; กล่องเงา: 6px 6px #BBBBBB, 12px 12px #919191; )
ผลลัพธ์ :
Blok1 ( ความกว้าง: 30%; ระยะขอบ: 0 อัตโนมัติ; การขยาย: 2em; กล่องเงา: 0 0 0 1px #ccc, 0 -20px 0 -10px #00FF00, 20px 0 0 -10px #FF0000, 0 20px 0 -10px # FFFF00, -20px 0 0 -10px #FF3399; )
ผลลัพธ์ :
การใช้เงาคุณสามารถสร้างกรอบที่สวยงามได้
กรอบสวยใช้คุณสมบัติกล่อง- เงา
Blok1 ( ความกว้าง: 20%; ความกว้างสูงสุด: 250px; ระยะขอบ: 0 อัตโนมัติ; การขยาย: 1em; เส้นขอบ: 2px ประ #999; กล่องเงา: 0 0 0 1px #999, สิ่งที่ใส่เข้าไป 0 0 0 1px #999; )ผลลัพธ์ :
Blok1 ( ความกว้าง: 30%; ความกว้างสูงสุด: 250px; ระยะขอบ: 2em อัตโนมัติ; การขยาย: 4em; พื้นหลัง: #dcc005; กล่องเงา: 0 0 4em 4em #fff สิ่งที่ใส่เข้าไป; )
ผลลัพธ์ :
Blok1 ( ความกว้างสูงสุด: 250px; ระยะขอบ: 0 อัตโนมัติ; การขยาย: 1em; รัศมีเส้นขอบ: 10px; พื้นหลัง: rgb(100,100,100) การไล่ระดับสีแบบรัศมี (วงกลมที่ 0 0, rgba(255,255,255,.65), rgba(255,255,255, .35)); กล่องเงา: inset rgba(0,0,0,.5) -3px -3px 8px, inset rgba(255,255,255,.9) 3px 3px 8px, rgba(0,0,0,.8) 3px 3px 8px -3px; )
ผลลัพธ์ :
เงาของกล่องใน CSS
เว็บไซต์
ผลลัพธ์ :
เหล่านี้คือพวกนั้น เอฟเฟกต์ที่สวยงามสามารถทำได้โดยใช้เงาใน CSS คิดค้นสิ่งใหม่และแปลกใหม่ทุกอย่างอยู่ในมือคุณ คุณมีความรู้และความสามารถ
และวันหนึ่งฉันจะเผยแพร่บทความเกี่ยวกับวิธีสร้างโดยไม่ต้องใช้ Photoshop ดังนั้นเป็นศูนย์กลางของสิ่งต่าง ๆ และสมัครรับการอัปเดตบล็อกของฉัน อย่าพลาดหัวข้อที่คุณสนใจ เอาล่ะ โชคดีนะ!!!
