สรรเสริญเงา

เผยแพร่ซ้ำโดยเพลโต

ผู้ติดตาม: 0

โรบิน เพื่อนรักของเรามีบทความใหม่ชื่อว่า ในการสรรเสริญเงา. ก่อนที่คุณจะกระโดดไปที่นั่นเพื่อมองหานักเก็ตบน CSS box shadow, text shadows และ shadow filters… นี่คือ ไม่ว่า. เป็นบทความเกี่ยวกับการถ่ายภาพและสิ่งที่โรบินได้เรียนรู้เกี่ยวกับการส่งเงาด้วยกล้อง

เหตุใดจึงแบ่งปันสิ่งนี้ เพราะมันเจ๋งจริง ๆ ที่เขาสร้างบทความที่กำกับหน้าเฉพาะสำหรับบทความหนึ่งเรื่อง และคุณจะได้เรียนรู้มากมายเกี่ยวกับ CSS หากคุณเปิด DevTools ขึ้นมา:

เทคนิคการตั้งศูนย์ สังเกตว่า CSS Grid ถูกใช้บน the . อย่างไร <body> เพียงเพื่อ วางแผ่นพับไว้ตรงกลาง. จากนั้นโรบินก็เอื้อมมือไปหามันอีกครั้ง on .frame ของเรียงความเพื่อทำสิ่งเดียวกันกับเนื้อหา
ภาพพื้นหลัง "เทียม" Robin สามารถทำงานให้ตัวเองได้มากมายด้วยการสร้างคลาส CSS สำหรับแต่ละคลาส .frame เพื่อให้ได้ภาพพื้นหลัง เขาใช้ .แทน object-fit: cover บน HTML แบบอินไลน์ <img>เพื่อรักษาอัตราส่วนภาพในขณะที่เติม .frame คอนเทนเนอร์. (เขาคือ เขียนเกี่ยวกับสิ่งนี้ ก่อนหน้านี้) แน่นอนว่าช่วยประหยัด CSS ได้มาก แต่ยังช่วยให้เขาใช้ข้อความแสดงแทนได้หากต้องการ ฉันค่อนข้างสงสัยว่า a <figure>/<figcaption> โครงสร้างสามารถทำงานที่นี่แทนได้ แต่ฉันสงสัยว่ามันจะให้ประโยชน์เพิ่มเติมมากมายสำหรับสิ่งที่เกิดขึ้น
บริบทการซ้อน ข้อดีอีกอย่างของภาพพื้นหลัง faux เหล่านั้น? พวกเขาใช้การวางตำแหน่งที่แน่นอนซึ่งสร้างบริบทการซ้อน ทำให้ Robin สามารถตั้งค่า a z-index: 0 บนภาพ ด้วยวิธีนี้ ข้อความจะถูกวางทับด้วย z-index: 1. อีกครั้ง CSS Grid กำลังจัดการการจัดกึ่งกลางทั้งหมดเพื่อให้ทุกอย่างอยู่ในแนวเดียวกัน
เลื่อนสแนป ฉันเสมอ ความรัก เมื่อฉันเห็น CSS เลื่อนสแนปในป่า Robin เลือกใช้ตัวเลือกนี้ได้ดี เนื่องจากให้ประสบการณ์ในการเปลี่ยนหน้าทั้งหมดขณะเลื่อนดูเฟรม การเลื่อนในแนวนอนอาจทำให้คุณคลั่งไคล้ แต่ก็ดูสง่างามอย่างยิ่งเมื่อดำเนินการได้ดี เนื่องจากเป็นการปรับปรุงการออกแบบคอลัมน์แคบ หากคุณต้องการคำอธิบายที่ดีว่ามันทำงานอย่างไร Robin ก็มี เขียนเกี่ยวกับการเลื่อนเลื่อนแนวนอน.