การตกแต่งรูปภาพแฟนซี: มาสก์และเอฟเฟกต์โฮเวอร์ขั้นสูง

ยินดีต้อนรับสู่ส่วนที่ 2 ของซีรีส์สามตอนนี้! เรายังคงตกแต่งภาพโดยไม่มีองค์ประกอบพิเศษและองค์ประกอบเทียม ฉันหวังว่าคุณจะใช้เวลาในการแยกแยะ 1 หมายเลข เพราะเราจะทำงานกับการไล่ระดับสีต่อไปเพื่อสร้างเอฟเฟกต์ภาพที่ยอดเยี่ยม เราจะมาแนะนำ CSS . ด้วย mask คุณสมบัติสำหรับการตกแต่งที่ซับซ้อนมากขึ้นและเอฟเฟกต์โฮเวอร์

มาดูตัวอย่างแรกที่เรากำลังทำร่วมกัน...

แสตมป์

เชื่อหรือไม่ ทั้งหมดที่ใช้ในการสร้างเอฟเฟกต์ CSS ของแสตมป์คือสองการไล่ระดับสีและตัวกรอง:

img {
  --r: 10px; /* control the radius of the circles */
  padding: calc(2 * var(--r));
  filter: grayscale(.4);
  background: 
    radial-gradient(var(--r),#0000 98%,#fff) round
      calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
    linear-gradient(#fff 0 0) no-repeat
      50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
}

อย่างที่เราเห็นใน บทความก่อนหน้านี้, ขั้นตอนแรกคือการทำพื้นที่รอบภาพด้วย padding เพื่อให้เราสามารถวาดการไล่ระดับสีพื้นหลังแล้วเห็นได้ที่นั่น จากนั้นเราใช้ส่วนผสมของ radial-gradient() และ linear-gradient() เพื่อตัดวงกลมเหล่านั้นรอบๆ ภาพ

นี่คือภาพประกอบทีละขั้นตอนที่แสดงวิธีกำหนดค่าการไล่ระดับสี:

สังเกตการใช้ round ค่าในขั้นตอนที่สอง เคล็ดลับนี้สำคัญมาก เพราะจะช่วยให้แน่ใจว่าขนาดของการไล่ระดับสีได้รับการปรับให้อยู่ในแนวเดียวกันอย่างสมบูรณ์ในทุกด้าน ไม่ว่าภาพจะกว้างหรือสูงแค่ไหนก็ตาม

จาก ข้อมูลจำเพาะ: ภาพซ้ำบ่อยเท่าที่จะพอดีกับพื้นที่การจัดตำแหน่งพื้นหลัง หากใส่ไม่ครบจำนวนครั้ง ระบบจะปรับขนาดใหม่ให้เท่ากัน

กรอบโค้งมน

มาดูการตกแต่งภาพอื่นที่ใช้วงกลมกัน…

ตัวอย่างนี้ยังใช้ a radial-gradient()แต่คราวนี้ฉันสร้างแวดวงแล้ว รอบ รูปภาพแทนเอฟเฟกต์คัตเอาท์ สังเกตว่าฉันยังใช้ round มูลค่าอีกครั้ง ส่วนที่ยากที่สุดคือช่องว่างโปร่งใสระหว่างเฟรมและรูปภาพ ซึ่งฉันเอื้อมมือไปหา CSS mask คุณสมบัติ:

img {
  --s: 20px; /* size of the frame */
  --g: 10px; /* the gap */
  --c: #FA6900; 

  padding: calc(var(--g) + var(--s));
  background: 
    radial-gradient(farthest-side, var(--c) 97%, #0000) 
      0 0 / calc(2 * var(--s)) calc(2 * var(--s)) round;
  mask:
    conic-gradient(from 90deg at calc(2 * var(--s)) calc(2 * var(--s)), #0000 25%, #000 0)
      calc(-1 * var(--s)) calc(-1 * var(--s)),
    linear-gradient(#000 0 0) content-box;
}

การกำบังทำให้เราสามารถแสดงพื้นที่ของภาพได้ — ต้องขอบคุณ linear-gradient() ในนั้น - เช่นเดียวกับ 20px รอบด้านของมัน — ขอบคุณ conic-gradient(). 20px ไม่มีอะไรนอกจากตัวแปร --s ที่กำหนดขนาดของกรอบ กล่าวอีกนัยหนึ่ง เราต้องซ่อนช่องว่าง

นี่คือสิ่งที่ฉันหมายถึง:

การไล่ระดับสีแบบเส้นตรงคือส่วนสีน้ำเงินของพื้นหลัง ในขณะที่การไล่ระดับสีแบบกรวยเป็นส่วนสีแดงของพื้นหลัง ส่วนที่โปร่งใสระหว่างการไล่ระดับสีทั้งสองคือสิ่งที่เราตัดออกจากองค์ประกอบของเราเพื่อสร้างภาพลวงตาของเส้นขอบโปร่งใสด้านใน

ขอบใสด้านใน

สำหรับสิ่งนี้ เราจะไม่สร้างเฟรมแต่ลองทำอะไรที่แตกต่างออกไป เราจะสร้างขอบด้านในที่โปร่งใส ภายใน ภาพลักษณ์ของเรา อาจไม่มีประโยชน์ในสถานการณ์จริง แต่เป็นวิธีปฏิบัติที่ดีกับมาสก์ CSS

คล้ายกับตัวอย่างก่อนหน้านี้ เราจะใช้การไล่ระดับสีสองแบบ: a linear-gradient() สำหรับส่วนใน และ a conic-gradient() สำหรับส่วนด้านนอก เราจะเว้นช่องว่างระหว่างพวกเขาเพื่อสร้างเอฟเฟกต์เส้นขอบโปร่งใส

img {
  --b: 5px;  /* the border thickness */
  --d: 20px; /* the distance from the edge */

  --_g: calc(100% - 2 * (var(--d) + var(--b)));
  mask:
    conic-gradient(from 90deg at var(--d) var(--d), #0000 25%, #000 0)
      0 0 / calc(100% - var(--d)) calc(100% - var(--d)),
    linear-gradient(#000 0 0) 50% / var(--_g) var(--_g) no-repeat;
}

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

ต่อไปนี้คือสี่วิธีในการสร้างสี่เหลี่ยมด้านนอกโดยใช้การไล่ระดับสี:

มีหลายวิธีในการดึงสิ่งนี้ออก แต่คุณเข้าใจแล้ว

ไม่มีแนวทาง Best™ โดยส่วนตัวแล้ว ฉันพยายามค้นหาโค้ดที่มีขนาดเล็กที่สุดและเหมาะสมที่สุด สำหรับฉัน โซลูชันใดๆ ที่ต้องการการไล่ระดับสีน้อยลง การคำนวณน้อยลง และค่าที่ซ้ำกันน้อยลงนั้นเหมาะสมที่สุด บางครั้งฉันเลือกไวยากรณ์ที่ละเอียดมากขึ้น เพราะมันทำให้ฉันมีความยืดหยุ่นมากขึ้นในการเปลี่ยนตัวแปรและแก้ไขสิ่งต่างๆ มันมาพร้อมกับประสบการณ์และการฝึกฝน ยิ่งคุณเล่นกับการไล่ระดับสีมากเท่าไหร่ คุณก็ยิ่งรู้ว่าควรใช้รูปแบบใดและเมื่อใด

กลับไปที่เส้นขอบโปร่งใสด้านในของเราแล้วขุดลงไปในเอฟเฟกต์โฮเวอร์ ในกรณีที่คุณไม่ได้สังเกต มีเอฟเฟกต์โฮเวอร์เจ๋งๆ ที่ย้ายเส้นขอบโปร่งใสนั้นโดยใช้a font-size เล่ห์เหลี่ยม. แนวคิดคือการกำหนด --d ตัวแปรที่มีค่าของ 1em. ตัวแปรนี้ควบคุมระยะห่างของเส้นขอบจากขอบ เราแปลงร่างได้ดังนี้

--_d: calc(var(--d) + var(--s) * 1em)

…ให้ CSS ที่อัปเดตต่อไปนี้แก่เรา:

img {
  --b: 5px;  /* the border thickness */
  --d: 20px; /* the distance from the edge */
  --o: 15px; /* the offset on hover */
  --s: 1;    /* the direction of the hover effect (+1 or -1)*/

  --_d: calc(var(--d) + var(--s) * 1em);
  --_g: calc(100% - 2 * (var(--_d) + var(--b)));
  mask:
    conic-gradient(from 90deg at var(--_d) var(--_d), #0000 25%, #000 0)
     0 0 / calc(100% - var(--_d)) calc(100% - var(--_d)),
    linear-gradient(#000 0 0) 50% / var(--_g) var(--_g) no-repeat;
  font-size: 0;
  transition: .35s;
}
img:hover {
  font-size: var(--o);
}

พื้นที่ font-size เริ่มแรกเท่ากับ 0 ,ดังนั้น 1em ก็เท่ากับ 0 และ --_d จะเท่ากับ --d. เมื่อโฮเวอร์แม้ว่า font-size เท่ากับค่าที่กำหนดโดย an --o ตัวแปรที่กำหนดออฟเซ็ตของเส้นขอบ ในทางกลับกันสิ่งนี้จะอัปเดต --_d ตัวแปร ย้ายเส้นขอบโดยออฟเซ็ต จากนั้นฉันก็เพิ่มตัวแปรอื่น --sเพื่อควบคุมเครื่องหมายที่ตัดสินใจว่าเส้นขอบจะเคลื่อนไปด้านในหรือด้านนอก

พื้นที่ font-size เคล็ดลับมีประโยชน์มากถ้าเราต้องการทำให้คุณสมบัติเคลื่อนไหวไม่ได้ คุณสมบัติที่กำหนดเองกำหนดด้วย @property สามารถแก้ปัญหานี้ได้ แต่ สนับสนุนมัน ยังขาดอยู่ในขณะที่ฉันกำลังเขียนสิ่งนี้

การเปิดเผยเฟรม

เราได้สร้างแอนิเมชั่นการเปิดเผยต่อไปนี้ในส่วนแรกของซีรีส์นี้:

เราสามารถใช้แนวคิดเดียวกันได้ แต่แทนที่จะใช้เส้นขอบสีทึบ เราจะใช้การไล่ระดับสีดังนี้:

หากคุณเปรียบเทียบรหัสทั้งสอง คุณจะสังเกตเห็นการเปลี่ยนแปลงต่อไปนี้:

1. ฉันใช้การกำหนดค่าการไล่ระดับสีแบบเดียวกันจากตัวอย่างแรกภายใน mask คุณสมบัติ. ฉันเพียงแค่ย้ายการไล่ระดับสีจาก background ทรัพย์สินให้กับ mask คุณสมบัติ
2. ฉันเพิ่ม repeating-linear-gradient() เพื่อสร้างเส้นขอบไล่ระดับสี

แค่นั้นแหละ! ฉันใช้รหัสเดิมส่วนใหญ่ที่เราเห็นซ้ำแล้วซ้ำอีก - ด้วยการปรับแต่งที่เล็กมาก - และได้รับการตกแต่งภาพสุดเจ๋งด้วยเอฟเฟกต์โฮเวอร์

/* Solid color border */

img {
  --c: #8A9B0F; /* the border color */
  --b: 10px;   /* the border thickness*/
  --g: 5px;  /* the gap on hover */

  padding: calc(var(--g) + var(--b));
  --_g: #0000 25%, var(--c) 0;
  background: 
    conic-gradient(from 180deg at top var(--b) right var(--b), var(--_g))
     var(--_i, 200%) 0 / 200% var(--_i, var(--b)) no-repeat,
    conic-gradient(at bottom var(--b) left  var(--b), var(--_g))
     0 var(--_i, 200%) / var(--_i, var(--b)) 200% no-repeat;
  transition: .3s, background-position .3s .3s;
  cursor: pointer;
}
img:hover {
  --_i: 100%;
  transition: .3s, background-size .3s .3s;
}

/* Gradient color border */

img {
  --b: 10px; /* the border thickness*/
  --g: 5px;  /* the gap on hover */
  background: repeating-linear-gradient(135deg, #F8CA00 0 10px, #E97F02 0 20px, #BD1550 0 30px);

  padding: calc(var(--g) + var(--b));
  --_g: #0000 25%, #000 0;
  mask: 
    conic-gradient(from 180deg at top var(--b) right var(--b), var(--_g))
     var(--_i, 200%) 0 / 200% var(--_i, var(--b)) no-repeat,
    conic-gradient(at bottom var(--b) left  var(--b), var(--_g))
     0 var(--_i, 200%) / var(--_i, var(--b)) 200% no-repeat,
    linear-gradient(#000 0 0) content-box;
  transition: .3s, mask-position .3s .3s;
  cursor: pointer;
}
img:hover {
  --_i: 100%;
  transition: .3s, mask-size .3s .3s;
}

ลองใช้แอนิเมชั่นเฟรมอื่น อันนี้ค่อนข้างยุ่งยากเพราะมี แอนิเมชั่นสามขั้นตอน:

ขั้นตอนแรกของแอนิเมชั่นคือทำให้ขอบด้านล่างใหญ่ขึ้น สำหรับสิ่งนี้เราปรับ background-size ของ linear-gradient():

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

สำหรับขั้นตอนที่ XNUMX เราเพิ่มการไล่ระดับสีที่สองเพื่อแสดงขอบซ้ายและขวา แต่ครั้งนี้เราทำโดยใช้ background-position:

เราสามารถหยุดที่นี่ได้ เนื่องจากเรามีเอฟเฟกต์ที่ดีแล้วกับการไล่ระดับสีสองแบบ แต่เราอยู่ที่นี่เพื่อผลักดันขีดจำกัด มาเพิ่มมาสก์เพื่อบรรลุขั้นตอนที่สามกัน

เคล็ดลับคือการซ่อนขอบด้านบนไว้จนกว่าเราจะแสดงด้านล่างและด้านข้าง จากนั้นเราอัปเดต mask-size (หรือ mask-position) เพื่อแสดงส่วนบน ดังที่ฉันได้กล่าวไว้ก่อนหน้านี้ เราสามารถพบการกำหนดค่าการไล่ระดับสีจำนวนมากเพื่อให้ได้ผลลัพธ์แบบเดียวกัน

นี่คือภาพประกอบของการไล่ระดับสีที่ฉันจะใช้:

ฉันกำลังใช้การไล่ระดับสีรูปกรวยสองอันที่มีความกว้างเท่ากับ 200%. การไล่ระดับสีทั้งสองครอบคลุมพื้นที่โดยเหลือเพียงส่วนที่เปิดออก (ส่วนนั้นจะมองไม่เห็นในภายหลัง) เมื่อวางเมาส์เหนือ ฉันจะเลื่อนการไล่ระดับสีทั้งสองเพื่อปิดส่วนนั้น

ต่อไปนี้คือภาพประกอบที่ดีกว่าของการไล่ระดับสีแบบใดแบบหนึ่งเพื่อให้คุณเข้าใจได้ดีขึ้นว่าเกิดอะไรขึ้น:

ตอนนี้เราใส่สิ่งนี้ไว้ใน mask ทรัพย์สินและเราเสร็จแล้ว! นี่คือรหัสเต็ม:

img {
  --b: 6px;  /* the border thickness*/
  --g: 10px; /* the gap */
  --c: #0E8D94;

  padding: calc(var(--b) + var(--g));
  --_l: var(--c) var(--b), #0000 0 calc(100% - var(--b)), var(--c) 0;
  background:
    linear-gradient(var(--_l)) 50%/calc(100% - var(--_i,80%)) 100% no-repeat,
    linear-gradient(90deg, var(--_l)) 50% var(--_i,-100%)/100% 200% no-repeat;  
  mask:
    conic-gradient(at 50% var(--b),#0000 25%, #000 0) calc(50% + var(--_i, 50%)) / 200%,
    conic-gradient(at 50% var(--b),#000 75%, #0000 0) calc(50% - var(--_i, 50%)) / 200%;
  transition: 
    .3s calc(.6s - var(--_t,.6s)) mask-position, 
    .3s .3s background-position,
    .3s var(--_t,.6s) background-size,
    .4s transform;
  cursor: pointer;
}
img:hover {
  --_i: 0%;
  --_t: 0s;
  transform: scale(1.2);
}

ฉันได้แนะนำตัวแปรบางอย่างเพื่อปรับโค้ดให้เหมาะสม แต่คุณควรคุ้นเคยกับสิ่งนี้ในตอนนี้

แล้วแอนิเมชั่นสี่ขั้นตอนล่ะ? ใช่ เป็นไปได้!

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

ตัดขึ้น

แค่นั้นแหละสำหรับตอนที่ 2 ของซีรีส์สามตอนในการตกแต่งภาพสร้างสรรค์โดยใช้เพียง ธาตุ. ตอนนี้เรามีวิธีการที่ดีในการรวมการไล่ระดับสีและมาสก์เพื่อสร้างเอฟเฟกต์ภาพที่ยอดเยี่ยม และแม้แต่แอนิเมชัน โดยไม่ต้องเข้าถึงองค์ประกอบเพิ่มเติมหรือองค์ประกอบหลอก ใช่คนโสด แท็กก็พอ!

เรามีอีกหนึ่งบทความในชุดนี้ที่จะไป ก่อนหน้านั้น นี่คือตัวอย่างโบนัสพร้อมเอฟเฟกต์โฮเวอร์สุดเจ๋งที่ฉันใช้ mask เพื่อรวบรวมภาพที่แตกสลาย