คุณเข้าถึง CSS บ่อยแค่ไหน background-size
คุณสมบัติ? หากคุณเป็นเหมือนฉันและอาจเป็นคนหน้าอื่น ๆ อีกหลายคน ก็มักจะเป็นเมื่อคุณ background-size: cover
รูปภาพเพื่อเติมเต็มช่องว่างขององค์ประกอบทั้งหมด
ฉันได้รับความท้าทายที่น่าสนใจที่ต้องใช้การปรับขนาดพื้นหลังขั้นสูงมากขึ้น: แถบพื้นหลังที่เปลี่ยนเมื่อโฮเวอร์ ตรวจสอบสิ่งนี้และวางเคอร์เซอร์ไว้:
มีอะไรเกิดขึ้นมากมายกว่าขนาดของพื้นหลัง แต่นั่นคือเคล็ดลับที่ฉันต้องใช้เพื่อให้ลายเส้นเปลี่ยนไป ฉันคิดว่าฉันจะแสดงให้คุณเห็นว่าฉันมาถึงที่นั่นได้อย่างไร ไม่ใช่แค่เพราะฉันคิดว่ามันเป็นเอฟเฟ็กต์ภาพที่สวยงามจริงๆ แต่เพราะมันทำให้ฉันต้องใช้ความคิดสร้างสรรค์ด้วยการไล่ระดับสีและโหมดผสมผสานที่ฉันคิดว่าคุณอาจจะชอบ
เรามาเริ่มกันที่การตั้งค่าพื้นฐานเพื่อให้ทุกอย่างเรียบง่าย ฉันกำลังพูดถึงเรื่องเดียว
ใน HTML ที่มีลักษณะเป็นสี่เหลี่ยมสีเขียว:
div {
width: 500px;
height: 500px;
background: palegreen;
}
การตั้งค่าแถบพื้นหลัง
หากคุณนึกถึงการไล่ระดับสีเชิงเส้นของ CSS เมื่อคุณเห็นลายเส้นเหล่านั้น แสดงว่าเราอยู่ในหน้าเดียวกันแล้ว เราไม่สามารถทำการไล่ระดับสีซ้ำได้ในกรณีนี้ เนื่องจากเราต้องการให้ลายเส้นครอบครองพื้นที่ที่ไม่เท่ากันและเปลี่ยนมัน แต่เราสามารถสร้างแถบห้าแถบได้โดยการโยงพื้นหลังห้าเส้นที่ด้านบนของสีพื้นหลังที่มีอยู่ของเราและวางไว้ที่ด้านบนสุด - ด้านขวาของคอนเทนเนอร์:
div {
width: 500px;
height: 500px;
background:
linear-gradient(black, black) top right,
linear-gradient(black, black) top 100px right,
linear-gradient(black, black) top 200px right,
linear-gradient(black, black) top 300px right,
linear-gradient(black, black) top 400px right,
palegreen;
}
ฉันสร้างแถบแนวนอน แต่เราสามารถวาดในแนวตั้งได้ด้วยแนวทางที่เราครอบคลุมอยู่นี้ และเราสามารถทำให้สิ่งนี้ง่ายขึ้นเล็กน้อยด้วยคุณสมบัติที่กำหนดเอง:
div {
--gt: linear-gradient(black, black);
--n: 100px;
width: 500px;
height: 500px;
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
palegreen;
}
ดังนั้น --gt
ค่าคือการไล่ระดับสีและ --n
เป็นค่าคงที่ที่เราใช้ในการเลื่อนแถบลงด้านล่างเพื่อให้หักล้างกันในแนวตั้ง และคุณอาจสังเกตเห็นว่าฉันไม่ได้ตั้งค่าการไล่ระดับสีจริง แต่ค่อนข้างเป็นแถบสีดำทึบใน linear-gradient()
ฟังก์ชั่น — นั่นเป็นความตั้งใจและเราจะเข้าใจว่าทำไมฉันถึงทำอย่างนั้นในไม่ช้า
อีกสิ่งหนึ่งที่เราควรทำก่อนดำเนินการต่อคือป้องกันไม่ให้ภูมิหลังของเราซ้ำรอย มิฉะนั้นพวกเขาจะเรียงต่อกันและเติมเต็มพื้นที่ทั้งหมด:
div {
--gt: linear-gradient(black, black);
--n: 100px;
width: 500px;
height: 500px;
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
palegreen;
background-repeat: no-repeat;
}
เราสามารถตั้งค่าได้ background-repeat
ใน background
ชวเลข แต่ฉันตัดสินใจที่จะแยกมันออกมาที่นี่เพื่อให้อ่านง่าย
หักล้างแถบ
ในทางเทคนิคแล้วเรามีลายทาง แต่ค่อนข้างยากที่จะบอกได้เนื่องจากไม่มีระยะห่างระหว่างแถบและแถบจะคลุมภาชนะทั้งหมด มันเหมือนกับว่าเรามีสี่เหลี่ยมทึบสีดำ
นี่คือที่ที่เราจะใช้ background-size
คุณสมบัติ. เราต้องการตั้งค่าทั้งความสูงและความกว้างของแถบ และคุณสมบัติรองรับไวยากรณ์แบบสองค่าที่ช่วยให้เราทำเช่นนั้นได้ และเราสามารถเชื่อมโยงขนาดเหล่านั้นได้โดยคั่นด้วยเครื่องหมายจุลภาคแบบเดียวกับที่เราทำ background
.
เริ่มต้นง่ายๆ ด้วยการตั้งค่าความกว้างก่อน การใช้ไวยากรณ์ค่าเดียวสำหรับ background-size
กำหนดความกว้างและความสูงเริ่มต้นเป็น auto
. ฉันใช้ค่าตามอำเภอใจทั้งหมดที่นี่ ดังนั้นให้ตั้งค่าเป็นค่าที่ดีที่สุดสำหรับการออกแบบของคุณ:
div {
--gt: linear-gradient(black, black);
--n: 100px;
width: 500px;
height: 500px;
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
palegreen;
background-repeat: no-repeat;
background-size: 60%, 90%, 70%, 40%, 10%;
}
หากคุณใช้ค่าเดียวกับที่ฉันเป็น คุณจะได้สิ่งนี้:
ดูไม่เหมือนที่เรากำหนดความกว้างให้กับแถบทั้งหมดใช่ไหม นั่นเป็นเพราะว่า auto
พฤติกรรมความสูงของไวยากรณ์ค่าเดียว แถบที่สองกว้างกว่าแถบอื่นที่อยู่ด้านล่างและคลุมอยู่ เราควรตั้งสูงเพื่อให้เห็นผลงานของเรา พวกเขาทั้งหมดควรมีความสูงเท่ากันและเราสามารถนำกลับมาใช้ใหม่ได้ --n
ตัวแปรอีกครั้งเพื่อให้สิ่งต่าง ๆ ง่ายขึ้น:
div {
--gt: linear-gradient(black, black);
--n: 100px;
width: 500px;
height: 500px;
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
palegreen;
background-repeat: no-repeat;
background-size: 60% var(--n), 90% var(--n), 70% var(--n), 40% var(--n), 10% var(--n); // HIGHLIGHT 15
}
อา ดีขึ้นมาก!
เพิ่มช่องว่างระหว่างแถบ
นี่เป็นขั้นตอนที่ไม่บังคับหากการออกแบบของคุณไม่ต้องการให้มีช่องว่างระหว่างแถบ แต่ของฉันทำ และไม่ซับซ้อนเกินไป เราเปลี่ยนความสูงของแต่ละแถบ background-size
รอยเปื้อน ทำให้ค่าลดลงจนไม่เต็มพื้นที่แนวตั้ง
เราสามารถใช้ของเราต่อไปได้ --n
ตัวแปร แต่ลบจำนวนเล็กน้อยพูด 5px
โดยใช้ calc()
เพื่อให้ได้สิ่งที่เราต้องการ
background-size: 60% calc(var(--n) - 5px), 90% calc(var(--n) - 5px), 70% calc(var(--n) - 5px), 40% calc(var(--n) - 5px), 10% calc(var(--n) - 5px);
นั่นคือการทำซ้ำจำนวนมากที่เราสามารถกำจัดได้ด้วยตัวแปรอื่น:
div {
--h: calc(var(--n) - 5px);
/* etc. */
background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}
มาส์กและผสม
ตอนนี้เรามาแลกเปลี่ยน palegreen
สีพื้นหลังที่เราใช้เพื่อจุดประสงค์ด้านการมองเห็นจนถึงจุดนี้สำหรับสีขาว
div {
/* etc. */
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
#fff;
/* etc. */
}
ลวดลายขาวดำแบบนี้เหมาะสำหรับการมาสก์และผสมผสาน ในการทำเช่นนั้น ก่อนอื่นเราจะห่อของเรา
ในพาเรนต์คอนเทนเนอร์ใหม่และแนะนำวินาที
ภายใต้มัน:
เรากำลังจะทำการรีแฟกเตอร์ CSS เล็กน้อยที่นี่ ตอนนี้เรามีคอนเทนเนอร์พาเรนต์ใหม่แล้ว เราสามารถผ่านการแก้ไขได้ width
และ height
คุณสมบัติที่เราใช้กับของเรา
ตรงนั้น:
section {
width: 500px;
height: 500px;
}
ฉันจะใช้ CSS Grid เพื่อวางตำแหน่งทั้งสองด้วย
องค์ประกอบที่อยู่ด้านบนของกันและกัน นี่เป็นเคล็ดลับเดียวกับที่ Temani Afif ใช้ในการสร้างของเขา แกลเลอรี่ภาพสุดเจ๋ง. แนวคิดคือเราวาง div ทั้งสองไว้เหนือคอนเทนเนอร์ทั้งหมดโดยใช้
grid-area
คุณสมบัติและจัดทุกอย่างเข้าหาศูนย์กลาง:
section {
display: grid;
align-items: center;
justify-items: center;
width: 500px;
height: 500px;
}
section > div {
width: inherit;
height: inherit;
grid-area: 1 / 1;
}
ตอนนี้ตรวจสอบสิ่งนี้ เหตุผลที่ฉันใช้การไล่ระดับสีแบบทึบที่เปลี่ยนจากสีดำเป็นสีดำก่อนหน้านี้ก็เพื่อเตรียมการมาสก์และผสมทั้งสองสี
ชั้น นี่ไม่ใช่การปกปิดที่แท้จริงในแง่ที่เราเรียกว่า
mask
คุณสมบัติ แต่ความแตกต่างระหว่างเลเยอร์จะควบคุมสีที่มองเห็นได้ พื้นที่ที่ปกคลุมด้วยสีขาวจะยังคงเป็นสีขาว และบริเวณที่ปกคลุมด้วยรอยรั่วสีดำ เอกสารประกอบของ MDN เกี่ยวกับโหมดผสมผสาน มีคำอธิบายที่ดีเกี่ยวกับวิธีการทำงาน
เพื่อให้ได้ผล ฉันจะใช้การไล่ระดับสีจริงที่เราต้องการเห็นในตอนแรก
ในขณะที่ใช้กฎสไตล์จากการเริ่มต้นของเรา
บนอันใหม่โดยใช้
:nth-child()
ตัวเลือกหลอก:
div:nth-child(1) {
background: linear-gradient(to right, red, orange);
}
div:nth-child(2) {
--gt: linear-gradient(black, black);
--n: 100px;
--h: calc(var(--n) - 5px);
background:
var(--gt) top right,
var(--gt) top var(--n) right,
var(--gt) top calc(var(--n) * 2) right,
var(--gt) top calc(var(--n) * 3) right,
var(--gt) top calc(var(--n) * 4) right,
white;
background-repeat: no-repeat;
background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}
หากเราหยุดอยู่ตรงนี้ เราจะไม่เห็นความแตกต่างจากภาพก่อนหน้าเลย นั่นเป็นเพราะเรายังไม่ได้ผสมจริง ลองทำกันตอนนี้โดยใช้ screen
โหมดผสมผสาน:
div:nth-child(2) {
/* etc. */
mix-blend-mode: screen;
}
ฉันใช้สีพื้นหลังสีเบจในการสาธิตที่ฉันแสดงให้เห็นในตอนต้นของบทความนี้ การลงสีแบบขาวนวลที่เข้มขึ้นเล็กน้อยช่วยให้สีจางลงเล็กน้อยผ่านพื้นหลังที่เหลือ:
เอฟเฟ็กต์โฮเวอร์
ชิ้นสุดท้ายของปริศนานี้คือเอฟเฟ็กต์โฮเวอร์ที่ขยายแถบให้กว้างขึ้น ก่อนอื่นมาเขียนตัวเลือกของเรากันก่อน เราต้องการให้สิ่งนี้เกิดขึ้นเมื่อคอนเทนเนอร์หลัก (
ในกรณีของเรา) ลอยอยู่ เมื่อวางเมาส์เหนือ เราจะเปลี่ยนขนาดพื้นหลังของแถบที่อยู่ในแถบที่สอง
:
/* When is hovered, change the second div's styles */
section:hover > div:nth-child(2){
/* styles go here */
}
เราจะต้องการเปลี่ยน background-size
ของแถบให้เต็มความกว้างของภาชนะโดยยังคงความสูงเท่าเดิม:
section:hover > div:nth-child(2){
background-size: 100% var(--h);
}
ที่ "ยึด" พื้นหลังให้เต็มความกว้าง หากเราเพิ่มเพียงเล็กน้อย transition
ในกรณีนี้เราจะเห็นแถบขยายเมื่อโฮเวอร์:
section:hover > div:nth-child(2){
background-size: 100% var(--h);
transition: background-size 1s;
}
นี่คือการสาธิตครั้งสุดท้ายอีกครั้ง:
ฉันแค่เพิ่มข้อความในนั้นเพื่อแสดงว่าการใช้สิ่งนี้ในบริบทอื่นจะเป็นอย่างไร หากคุณทำเช่นเดียวกัน คุณควรตรวจสอบให้แน่ใจว่ามีคอนทราสต์เพียงพอระหว่างสีข้อความและสีที่ใช้ในการไล่ระดับสีเพื่อให้สอดคล้องกับ หลักเกณฑ์ของ WCAG. และในขณะที่เรากำลังพูดถึงการช่วยสำหรับการเข้าถึงสั้น ๆ มันก็คุ้มค่า การพิจารณาการตั้งค่าของผู้ใช้สำหรับการเคลื่อนไหวที่ลดลง เมื่อมันมาถึงเอฟเฟกต์โฮเวอร์
นั่นห่อ!
สวยเรียบร้อยใช่มั้ย? ฉันคิดอย่างนั้นอย่างแน่นอน สิ่งที่ฉันชอบเกี่ยวกับสิ่งนี้ก็คือมันสามารถบำรุงรักษาและปรับแต่งได้ ตัวอย่างเช่น เราสามารถเปลี่ยนความสูง สี และทิศทางของแถบได้โดยเปลี่ยนค่าเล็กน้อย คุณอาจจะแปรผันอีกสองสามอย่างในนั้น เช่น สีและความกว้าง เพื่อให้สามารถกำหนดค่าได้มากขึ้น
ฉันสนใจจริงๆ ถ้าคุณจะใช้วิธีนี้ด้วยวิธีอื่น ถ้าเป็นเช่นนั้นโปรดแบ่งปันความคิดเห็น! คงจะดีมากหากเรารวบรวมรูปแบบต่างๆ ได้