วิธีการซ้อนทับ 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 ของเรา ดูรหัสของโปเกมอนทั้งหมดในปากกาด้านล่าง.