แถบพื้นหลังเคลื่อนไหวที่เปลี่ยนไปเมื่อโฮเวอร์

คุณเข้าถึง 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. และในขณะที่เรากำลังพูดถึงการช่วยสำหรับการเข้าถึงสั้น ๆ มันก็คุ้มค่า การพิจารณาการตั้งค่าของผู้ใช้สำหรับการเคลื่อนไหวที่ลดลง เมื่อมันมาถึงเอฟเฟกต์โฮเวอร์

นั่นห่อ!

สวยเรียบร้อยใช่มั้ย? ฉันคิดอย่างนั้นอย่างแน่นอน สิ่งที่ฉันชอบเกี่ยวกับสิ่งนี้ก็คือมันสามารถบำรุงรักษาและปรับแต่งได้ ตัวอย่างเช่น เราสามารถเปลี่ยนความสูง สี และทิศทางของแถบได้โดยเปลี่ยนค่าเล็กน้อย คุณอาจจะแปรผันอีกสองสามอย่างในนั้น เช่น สีและความกว้าง เพื่อให้สามารถกำหนดค่าได้มากขึ้น

ฉันสนใจจริงๆ ถ้าคุณจะใช้วิธีนี้ด้วยวิธีอื่น ถ้าเป็นเช่นนั้นโปรดแบ่งปันความคิดเห็น! คงจะดีมากหากเรารวบรวมรูปแบบต่างๆ ได้