วิธีการสร้างการออกแบบเส้นขอบ Cut-out ด้วย CSS
กับ การออกแบบเส้นขอบที่ถูกตัดออก เราสามารถแสดงให้ผู้ใช้เห็นสิ่งที่สามารถพบได้ ใต้พื้นที่ชายแดนขององค์ประกอบ HTML. โดยทั่วไปงานนี้จะถูกแก้ไขโดย สแต็กองค์ประกอบบล็อกสองรายการขึ้นไป (ในกรณีส่วนใหญ่ divs) ขนาดแตกต่างกัน ด้านบนของกันและกัน ครั้งแรกสิ่งนี้ดูเหมือนจะเป็นวิธีการแก้ปัญหาที่ง่ายดาย แต่จะทำให้หงุดหงิดมากขึ้นเมื่อคุณต้องการนำเค้าโครงมาใช้ซ้ำหลายครั้งย้ายองค์ประกอบต่างๆปรับการออกแบบสำหรับมือถือหรือดูแลรหัส.
ในโพสต์นี้ฉันจะแสดงให้คุณเห็น CSS-only สุดหรูที่ใช้ องค์ประกอบ HTML เดียวเท่านั้น เพื่อให้บรรลุผลเดียวกัน เทคนิคนี้ยังยอดเยี่ยมสำหรับการเข้าถึงเช่นเดียวกับมัน โหลดภาพพื้นหลังใน CSS, แยกออกจาก HTML.
ในตอนท้ายของโพสต์นี้คุณจะรู้วิธี แสดงภาพพื้นหลังในพื้นที่ชายแดน เพื่อที่จะสร้าง การออกแบบเส้นขอบที่ถูกตัดออก คุณสามารถดูด้านล่าง ฉันจะแสดงให้คุณเห็นว่าคุณสามารถออกแบบให้ตอบสนองได้อย่างไร ใช้หน่วยวิวพอร์ต.
รหัสเริ่มต้น
ข้อกำหนดเฉพาะในส่วนหน้า HTML คือ องค์ประกอบบล็อก:
เราจะต้อง นำมาใช้ใหม่ ขนาด (ความกว้างและความสูง) และค่าความกว้างชายแดนของ div, ดังนั้นฉันแนะนำพวกเขา เป็นตัวแปร CSS. ตัวแปร --W หมายถึง ความกว้าง ของ .CB องค์ประกอบบล็อก, --ชั่วโมง ระบุว่า ความสูง, --ข ไปสำหรับ ความกว้างชายแดน, และ --b2 สำหรับความกว้างเส้นขอบคูณด้วย 2 เราจะเห็นการใช้ตัวแปรสุดท้าย.
ฉันกำลังปรับขนาด หน่วย มาปรับปรุงโค้ดข้างต้นด้วยการเพิ่มพื้นหลังและตั้งค่าเส้นขอบความสูงและความกว้าง โดยใช้ตัวแปร CSS ที่กำหนดไว้ล่วงหน้าของเรา. ต่อไปนี้เป็นตัวอย่างการสาธิตที่ดูเหมือนว่าจะเป็นตอนนี้: เราต้องการภาพพื้นหลังเพื่อ ครอบคลุมพื้นที่ทั้งหมดของ หากคุณต้องการให้ภาพพื้นหลังมีขนาดคงที่เพียงตรวจสอบให้แน่ใจว่าขนาดที่คุณให้นั้นช่วยให้ครอบคลุมพื้นที่ชายแดนของ ความกว้างของภาพพื้นหลัง [ ในทำนองเดียวกัน ความสูงของภาพพื้นหลัง [ ด้วยวิธีนี้เราได้ปรับขนาดภาพพื้นหลังเป็นพื้นที่ที่มีขนาดเท่ากับ บันทึก: หากคุณกำลังเพิ่มช่องว่างภายใน นี่คือสิ่งที่เรามีตอนนี้: ตอนนี้เราได้ครอบคลุมพื้นที่รวมถึงชายแดนด้วยภาพพื้นหลังสิ่งที่เหลืออยู่คือ ครอบคลุมพื้นที่กึ่งกลางภายในเส้นขอบ (พื้นที่พิเศษที่เป็นเส้นขอบ) ด้วยสีทึบซึ่งเราไปถึง เงาแนวนอนที่มีค่า ในการสาธิต Codepen คุณจะเห็นเส้นขอบสีขาวรอบ ๆ ภาพ มีเคล็ดลับที่มีชื่อเสียงของ ใช้ box-shadows เพื่อสร้างเส้นขอบหลายเส้น-เราสามารถใช้เทคนิคเดียวกันกับ เพิ่มเส้นขอบสีทึบตั้งแต่หนึ่งเส้นขึ้นไป การออกแบบของเรา. การอัพเดท ในการสาธิต Codepen ครั้งสุดท้ายของฉันฉันได้วางรหัสสำหรับภาพพื้นหลังและสีเงาของกล่อง ในชั้นเรียนที่แยกต่างหาก. นี่คือ ไม่จำเป็น, แต่จะมีประโยชน์มากถ้าคุณต้องการ ใช้เค้าโครงของการออกแบบเส้นขอบแบบตัดออก ในองค์ประกอบหลายรายการและเพิ่มความสวยงาม (ภาพพื้นหลัง + สี) สำหรับแต่ละองค์ประกอบอย่างอิสระ. ฉันได้เพิ่มคลาสชื่อ ตั้งแต่ เพื่อตั้งค่าของ เนื่องจากขนาดทั้งหมดในหน่วย บันทึก: อย่าลืม เพิ่มเมตาแท็กวิวพอร์ต ไปที่หน้า HTML ของคุณหากคุณตัดสินใจที่จะเพิ่มประสิทธิภาพสำหรับมุมมองมือถือ.VW หน่วย (คุณสามารถใช้หน่วยคงที่ถ้าคุณต้องการ). .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2);
คำอธิบายด่วน -
VW และ VH หน่วยVW แสดงถึง 1/100TH ของความกว้างของวิวพอร์ต. ตัวอย่างเช่น, 50vw คือ 50 ส่วนของความกว้างวิวพอร์ต แบ่งออกเป็น 100 ส่วนเท่า ๆ กันในแนวตั้ง, ในขณะที่ 50vh คือ 50 ส่วนของความสูงวิวพอร์ต แบ่งเป็น 100 ส่วนเท่า ๆ กันในแนวนอน. .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); พื้นหลัง: url (bg.jpg); เส้นขอบ: var (- b) ทึบโปร่งใส; ความสูง: var (- h); ความกว้าง: var (- w);
ปรับขนาดภาพพื้นหลัง
พื้นหลัง คุณค่าที่ฉันให้: .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); พื้นหลัง: url (bg.jpg) กึ่งกลาง / คำนวณ (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); เส้นขอบ: var (- b) ทึบโปร่งใส; ความสูง: var (- h); ความกว้าง: var (- w);
คำนวณ (var (- w) + var (- b2))] คือผลรวมของ ความกว้างของ div [var (- W)] และ ความกว้างของเส้นขอบซ้ายและขวา [var (- B2)].คำนวณ (var (- h) + var (- b2))] คือผลรวมของ ความสูงของ div [var (- เอช)] และ ความกว้างของขอบบนและล่าง [var (- B2)].div (รวมถึงพื้นที่ชายแดน).ศูนย์ คำหลัก จัดตำแหน่งภาพพื้นหลัง ถึงศูนย์กลางของ div.div, อย่าลืม รวมถึงพื้นที่การขยาย กับขนาดพื้นหลังเช่นเดียวกับพื้นที่ชายแดน.
ครอบคลุมพื้นที่พิเศษชายแดน
กล่องเงา สิ่งที่ใส่เข้าไป. .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); พื้นหลัง: url (bg.jpg) กึ่งกลาง / คำนวณ (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); เส้นขอบ: var (- b) ทึบโปร่งใส; box-shadow: inset var (- w) 0 0 rgba (0,120,237, .5); ความสูง: var (- h); ความกว้าง: var (- w);
var (- W) ครอบคลุมความกว้างทั้งหมดของ div. การใช้งานของ RGBA ฟังก์ชั่นสีช่วยให้ ความโปร่งใส ที่จะเพิ่มในการผสมอย่างไรก็ตามคุณยังสามารถใช้สีทึบถ้าคุณต้องการครอบคลุมพื้นที่กึ่งกลาง.
เพิ่มเส้นขอบพิเศษด้วย
กล่องเงากล่องเงา ค่าคือ: .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); พื้นหลัง: url (bg.jpg) กึ่งกลาง / คำนวณ (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); เส้นขอบ: var (- b) ทึบโปร่งใส; box-shadow: inset var (- w) 0 0 rgba (0,120,237, .5), 0 0 0 calc (var (- b) / 2) สีขาว; ความสูง: var (- h); ความกว้าง: var (- w);
คำนวณ (var (- b) / 2) ฟังก์ชั่นสร้างเงาของ ครึ่งหนึ่งของความกว้างชายแดน.
ทางเลือก: แยกเค้าโครงและสุนทรียภาพ
.poster1 ไปที่ .poster1 --tbgc: rgba (0,120,237, .5); ภาพพื้นหลัง: url ("http://bit.ly/2eQBij2"); พื้นหลัง เป็นคุณสมบัติจดชวเลข, คุณสมบัติแบบ longhand สามารถถูกแทนที่ / ตั้งค่าเป็นรายบุคคล. ดังนั้นเราสามารถตั้งค่า ภาพพื้นหลัง ใน .poster1, และลบค่า url ออกจาก พื้นหลัง ทรัพย์สินใน .CB.กล่องเงา, เราสามารถใช้ ตัวแปร CSS อีกตัว. --tbgc ตัวแปร ถือค่าสี เราต้องการมอบให้กับ box-shadow (lightblue ในการสาธิต) ดังนั้นในบรรดากฎสไตล์สำหรับ .CB เรา แทนที่ค่าสีของ กล่องเงา ทรัพย์สินพร้อม var (- tbgc). .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); พื้นหลัง: ศูนย์ / Calc (var (- w) + var (- b2)) Calc (var (- h) + var (- b2)); เส้นขอบ: var (- b) ทึบโปร่งใส; box-shadow: inset var (- w) 0 0 var (- tbgc), 0 0 0 calc (var (- b) / 2) สีขาว; ความสูง: var (- h); ความกว้าง: var (- w);
รหัสสำหรับโหมดแนวตั้ง
VW, มันจะ ดูเล็กเกินไป เมื่อคุณดูการออกแบบในโหมดแนวตั้ง (ความกว้างขนาดเล็กเมื่อเทียบกับความสูง) ซึ่งอุปกรณ์พกพาทั้งหมดจะใช้งานตามค่าเริ่มต้น เพื่อแก้ไขปัญหานี้, สวิตซ์ VW กับ VH, และ ปรับขนาดการออกแบบ ตามที่คุณเห็นว่าเหมาะสมสำหรับโหมดแนวตั้ง. @media (ปฐมนิเทศ: แนวตั้ง) .cb --w: 35vh; --h: 40vh; --b: 4vh;
