วิธีการซ้อนทับ CSS-Only Effect ด้วย Box-Shadow

วางซ้อนเนื้อหา เป็นส่วนสำคัญของการออกแบบเว็บไซต์ที่ทันสมัย พวกเขาช่วยคุณ ซ่อนองค์ประกอบ บนหน้าเว็บและต่อมา - ด้วยการอนุมัติของผู้ใช้ - เปิดเผยมัน, และแสดงข้อมูลเพิ่มเติมหรือตัวควบคุมเช่นปุ่มด้านหลัง.

ภาพซ้อนทับทั่วไปคือ กึ่งโปร่งใส, กับ สีพื้นหลังแข็ง (โดยทั่วไปจะเป็นสีดำ) และมีข้อความหรือปุ่มบางส่วนสำหรับให้ผู้ใช้เห็นหรือโต้ตอบ หลังจากการโต้ตอบ (คลิกหรือโฮเวอร์) เกิดขึ้นโอเวอร์เลย์ ถูกลบและแสดงเนื้อหา ภายใต้มัน.

ในบทความนี้เราจะมาดูวิธีการ เพิ่มการซ้อนทับสีลงในภาพ โดยใช้ CSS บริสุทธิ์ คุณสามารถดูผลลัพธ์สุดท้ายได้ที่ตัวอย่างด้านล่าง เลื่อนภาพเพื่อให้ภาพซ้อนทับเปิดเผย pokemons แม้ว่าโพสต์นี้จะพูดถึงรูปภาพเทคนิคที่นำเสนอสามารถนำไปใช้กับเนื้อหาประเภทอื่น ๆ ได้อย่างปลอดภัย (เช่นบล็อคข้อความ) เช่นกัน.

หลีกเลี่ยงการเพิ่มองค์ประกอบ HTML พิเศษ

ภาพซ้อนทับมักถูกสร้างขึ้นโดย วางตำแหน่งองค์ประกอบ HTML พิเศษ ด้วย ความทึบแสง ค่าน้อยกว่า 1 ขวาเหนือองค์ประกอบที่จะครอบคลุม. ปัญหาคือว่าเทคนิคนี้เกี่ยวข้องกับการใช้งานของ พิเศษ องค์ประกอบ (หรือองค์ประกอบหลอก) สำหรับการซ้อนทับ.

หากคุณไม่ได้เป็นคนหยาบคายขนาด HTML การมีองค์ประกอบเพิ่มเติมสำหรับการซ้อนทับอาจไม่ใช่เรื่องใหญ่เพราะส่วนใหญ่แล้วมันจะไม่เก็บภาษีแบนด์วิดท์ของเครือข่ายใด ๆ อย่างไรก็ตามมี แยก กฎสไตล์สำหรับองค์ประกอบและการซ้อนทับของพวกเขายังคงเป็นอันตรายต่อการอ่าน CSS และการบำรุงรักษา.

เพื่อให้โค้ดของคุณเป็นระเบียบและไม่ทำให้ HTML ของคุณยุ่งเหยิงมันเป็นทางเลือกที่ดีกว่าในการใช้โซลูชัน CSS-only.

สร้างภาพซ้อนทับด้วย กล่องเงา

ดังนั้นคุณจะสร้างการซ้อนทับ CSS เท่านั้นได้อย่างไร ด้วยความช่วยเหลือของ กล่องเงา คุณสมบัติ CSS กล่องเงาเหมาะสำหรับงานนี้เนื่องจากมีอะไรซ้อนทับ แต่ เงาดำปกคลุมองค์ประกอบ?

กล่องเงามีค่าคุณสมบัติที่เรียกว่า สิ่งที่ใส่เข้าไป, ซึ่งทำให้เงาปรากฏขึ้น ด้านในของกรอบของกล่อง.

กล่องใส่เงา - เงาที่มีขนาดครึ่งหนึ่งหรือมากกว่าครึ่งของความกว้างและความสูงขององค์ประกอบสร้างเงาที่ ครอบคลุม ทั้งหมด ธาตุ.

 .กล่อง กว้าง: 200px; ความสูง: 200px; box-shadow: green 0 0 0 100px ภาพประกอบ;  

เนื่องจากภาพซ้อนทับมักจะ มีความโปร่งใส, คุณต้องเพิ่มมันเข้าไปในเงาของกล่องด้วย ซึ่งสามารถทำได้โดยใช้ RGBA () ฟังก์ชั่นสำหรับสีเงา.

RGB ส่วนของ rgba หมายถึงค่าช่องสีแดงสีเขียวและสีน้ำเงินในขณะที่ แสดงถึง ช่องอัลฟา, ซึ่งเป็น รับผิดชอบเพื่อความโปร่งใส.

สำหรับช่องอัลฟาค่า 1 จะสร้าง สีทึบแสง, ในขณะที่ 0 สร้าง สีโปร่งใสอย่างเต็มที่.

ด้วยการกำหนดค่าระหว่าง 0 ถึง 1 ให้กับช่องอัลฟาของค่าสี rgba ของ shadow box คุณสามารถทำได้ สร้างการซ้อนทับแบบกึ่งโปร่งใส.

สร้างรหัสสำหรับการสาธิต

การสาธิตของเราจะแสดงภาพและชื่อของโปเกมอนที่แตกต่างกัน ที่นี่เราจะสร้างรหัสสำหรับ Bulbasaur ซึ่งเป็นโปเกมอนแรกในการสาธิตเท่านั้นเนื่องจากคนอื่น ๆ ทำแบบเดียวกัน (บน Codepen คุณสามารถตรวจสอบรหัสสำหรับพวกเขาได้เช่นกัน).

HTML

สำหรับ HTML เราจำเป็นต้องทำเท่านั้น สร้างกล่อง ซึ่งเราจะเพิ่มทุกอย่างอื่นด้วย CSS.

CSS

ใน CSS ด้านล่าง .โปเกมอน องค์ประกอบที่แสดงภาพโปเกมอนและ .โปเกมอน :: หลังจาก องค์ประกอบเทียมมีชื่อของโปเกมอน.

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

 / * pokemon pictures * / .pokemon width: 200px; ความสูง: 200px; / * เนื้อหากลางโดยใช้ flex box * / display: flex; ปรับเนื้อหา: ศูนย์; จัดเรียงรายการ: กึ่งกลาง; / * overlay * / box-shadow: 0 0 0 100px inset, 0 0 5px grey; / * hover-out transition * / transition: box-shadow 1s;  / * ชื่อ pokemon * / .pokemon :: หลัง width: 80%; ความสูง: 80%; จอแสดงผล: บล็อก; ตัวอักษร: 16pt 'bookman old syle'; สี: ขาว เส้นขอบ: 2px solid; จัดข้อความ: ศูนย์; / * เนื้อหากลางโดยใช้ flex box * / display: flex; ปรับเนื้อหา: ศูนย์; จัดเรียงรายการ: กึ่งกลาง; / * hover out transition * / transition: ความทึบ 1s .5s;  / * เปิดเผยรูปภาพโปเกมอนบนโฮเวอร์ * / .pokemon: โฮเวอร์ การเปลี่ยนภาพ: box-shadow 1s; กล่องเงา: 0 0 0 5px สิ่งที่ใส่เข้าไป, 0 0 5px สีเทา, 0 0 10px สีเทาสิ่งที่ใส่เข้าไป;  / * hide ชื่อโปเกมอนบนโฮเวอร์ * / .pokemon: hover :: หลังจาก transition: opacity .5s; ความทึบ: 0;  

เมื่อ .โปเกมอน องค์ประกอบถูกโฮเวอร์กล่องเงาจำเป็นต้องเปลี่ยนเพื่อเปิดเผยภาพด้านหลัง.

คุณจะเห็นว่า .โปเกมอน: เลื่อน ตัวเลือกจะได้รับกล่องเงาใหม่ซึ่งจะลบการซ้อนทับและ .โปเกมอน: โฉบ :: หลังจาก selector ซ่อนชื่อของโปเกมอนโดยใช้ ความทึบแสง คุณสมบัติ.

คุณอาจสังเกตเห็นด้วย ไม่มีค่าสี ในเงาของกล่องซ้อนทับใน .โปเกมอน และ .โปเกมอน: เลื่อน กฎสไตล์ ต้องระบุสีเงาของกล่องซ้อนทับของโปเกมอนแต่ละอัน ในกฎสไตล์แยกต่างหาก, เพราะพวกเขาต่างจากกัน.

เช่น กล่องเงา ไม่มีทรัพย์สินที่มีมือยาว ๆ, คุณไม่สามารถตั้งค่าสีเงา เป็นรายบุคคล กับสิ่งที่ชอบ, กล่องเงาสี; แทน - เราใช้ สี คุณสมบัติ.

โดยค่าเริ่มต้นเมื่อคุณให้ค่าสำหรับ สี ค่าคุณสมบัตินั้นคือ ใช้สำหรับเส้นขอบโครงร่างและสีเงาของกล่อง เช่นกัน ดังนั้นคุณสามารถใช้ สี คุณสมบัติเพื่อเพิ่มสีให้กับกล่องเงา.

 #bulbasaur background-image: url (https://assets.hongkiat.com/uploads/css-only-overlays-box-shadow/bulbasaur.jpg); / * ค่าสีที่ใช้สำหรับสีเงาของกล่อง * / สี: rgba (71, 121, 94, 0.9);  #bulbasaur :: หลัง / * ชื่อโปเกมอน * / เนื้อหา: 'Bulbasaur';  

สีของภาพซ้อนทับใช้สีข้างต้น RGBA () ฟังก์ชั่นที่มี 0.9 สำหรับค่าอัลฟาที่จะทำให้การซ้อนทับโปร่งใส.

นอกเหนือจากสีของกล่องเงาซ้อนทับ CSS ข้างต้นยังเพิ่มกฎที่เป็นรายบุคคลสำหรับโปเกมอนแต่ละตัว - ภาพเป็น ภาพพื้นหลัง และชื่อ.

และนั่นคือทั้งหมดที่เราพร้อมด้วยการซ้อนทับภาพสี CSS-only ของเรา ดูรหัสของโปเกมอนทั้งหมดในปากกาด้านล่าง.