ตกแต่งภาพแฟนซี: มายากลองค์ประกอบเดียว

ตามหัวข้อเลยครับ เรามาตกแต่งภาพกันเถอะ! มีบทความอื่นๆ มากมายที่พูดถึงเรื่องนี้ แต่สิ่งที่เราจะกล่าวถึงในที่นี้ค่อนข้างแตกต่างออกไปเล็กน้อย เพราะมันท้าทายมากกว่า ความท้าทาย? ตกแต่งภาพโดยใช้เพียง แท็กและไม่มีอะไรเพิ่มเติม

ถูกต้อง ไม่มีมาร์กอัปเพิ่มเติม ไม่มี div และไม่มีองค์ประกอบหลอก แท็กเดียวเท่านั้น

ฟังดูยากใช่มั้ย? แต่ในตอนท้ายของบทความนี้ — และบทความอื่นๆ ที่ประกอบเป็นชุดเล็กๆ นี้ — ฉันจะพิสูจน์ว่า CSS นั้นทรงพลังพอที่จะให้ผลลัพธ์ที่ยอดเยี่ยมและน่าทึ่งแก่เรา แม้ว่าจะมีข้อจำกัดในการทำงานกับองค์ประกอบเดียว

มาเริ่มกันที่ตัวอย่างแรกของเรา

ก่อนที่จะขุดลงไปในโค้ด เรามาแจกแจงความเป็นไปได้ในการใส่สไตล์ an . กันก่อน โดยไม่มีองค์ประกอบพิเศษหรือองค์ประกอบหลอก เราสามารถใช้ border, box-shadow, outlineและแน่นอน background. การเพิ่มพื้นหลังให้กับรูปภาพอาจดูแปลก ๆ เพราะเราไม่สามารถมองเห็นได้เนื่องจากจะอยู่ด้านหลังภาพ - แต่เคล็ดลับคือการสร้างพื้นที่ รอบ ภาพโดยใช้ padding และ / หรือ border แล้ววาดพื้นหลังของเราภายในพื้นที่นั้น

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

กลับมาที่ตัวอย่างแรกของเรา:

img {
  --s: 10px; /* control the size */
  padding: var(--s);
  border: calc(2 * var(--s)) solid #0000;
  outline: 1px solid #000;
  outline-offset: calc(-1 * var(--s));
  background: conic-gradient(from 90deg at 1px 1px, #0000 25%, #000 0);
}

เรากำลังกำหนด padding และโปร่งใส border โดยใช้ตัวแปร --s เพื่อสร้างช่องว่างรอบ ๆ ภาพของเราเท่ากับสามเท่าของตัวแปรนั้น

ทำไมเราใช้ทั้งสองอย่าง padding และ border แทนที่จะเป็นอย่างใดอย่างหนึ่ง? เราหาได้โดยใช้เพียงตัวเดียว แต่ฉันต้องการชุดค่าผสมนี้สำหรับการไล่ระดับสีของฉัน เพราะโดยค่าเริ่มต้น ค่าเริ่มต้นของ background-clip is border-box และ background-origin เท่ากับ padding-box.

นี่คือภาพประกอบทีละขั้นตอนเพื่อทำความเข้าใจตรรกะ:

ในขั้นต้น เราไม่มีเส้นขอบใดๆ บนรูปภาพ ดังนั้นการไล่ระดับสีของเราจะสร้างสองส่วนด้วย 1px ความหนา (ฉันใช้ 3px ในการสาธิตเฉพาะนี้เพื่อให้มองเห็นได้ง่ายขึ้น) เราเพิ่มเส้นขอบสีและการไล่ระดับสียังคงให้ผลลัพธ์เดียวกันภายในพื้นที่ช่องว่างภายใน (เนื่องจาก background-origin) แต่มันซ้ำหลังเส้นขอบ ถ้าเราทำให้สีของเส้นขอบโปร่งใส เราสามารถใช้การทำซ้ำและได้กรอบที่เราต้องการ

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

นี่คือโซลูชันการไล่ระดับสีเท่านั้นที่ฉันใช้เท่านั้น padding เพื่อกำหนดพื้นที่ ยังคงให้ผลลัพธ์เหมือนเดิม แต่มีไวยากรณ์ที่ซับซ้อนกว่า

ลองใช้แนวคิดอื่น:

สำหรับอันนี้ฉันเอาตัวอย่างก่อนหน้านี้ลบ outlineและประยุกต์ a clip-path เพื่อตัดการไล่ระดับสีในแต่ละด้าน ดิ clip-path ค่าค่อนข้างละเอียดและสับสน แต่นี่คือภาพประกอบเพื่อให้เห็นประเด็นได้ดีขึ้น:

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

กรอบมุมเท่านั้น

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

--b: 5px; /* border thickness */
background: conic-gradient(from 90deg at top var(--b) left var(--b), #0000 90deg, darkblue 0) 0 0;
background-size: 50px 50px; 
background-repeat: no-repeat;

เราจะวาดการไล่ระดับสีที่มีขนาดเท่ากับ 50px 50px และวางไว้ที่มุมซ้ายบน (0 0). สำหรับการกำหนดค่าของการไล่ระดับสี นี่คือภาพประกอบทีละขั้นตอนที่แสดงให้เห็นว่าฉันไปถึงผลลัพธ์นั้นได้อย่างไร

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

#0000 25%, darkblue 0

โดยพื้นฐานแล้วพูดว่า: "เติมการไล่ระดับสีด้วยสีโปร่งใสจนถึง 25% ของพื้นที่แล้วเติมพื้นที่ที่เหลือด้วย darkblue.

คุณอาจจะเกาหัวของคุณมากกว่า 0 ค่า. เป็นการแฮ็กเล็กน้อยเพื่อทำให้ไวยากรณ์ง่ายขึ้น ในความเป็นจริง เราควรใช้สิ่งนี้เพื่อหยุดระหว่างสีอย่างหนัก:

#0000 25%, darkblue 25%

นั่นเป็นเหตุผลมากกว่า! สีโปร่งใสสิ้นสุดที่ 25% และ darkblue เริ่มต้นตรงจุดสิ้นสุดของความโปร่งใส ทำให้หยุดได้ยาก ถ้าเราแทนที่อันที่สองด้วย 0เบราว์เซอร์จะทำงานให้เรา ดังนั้นจึงเป็นวิธีที่มีประสิทธิภาพมากกว่าเล็กน้อย

ที่ไหนสักแห่งใน ข้อมูลจำเพาะ, มันบอกว่า:

ถ้า หยุดสี or คำใบ้การเปลี่ยนแปลง มีตำแหน่งที่น้อยกว่าตำแหน่งที่ระบุของการหยุดสีหรือคำใบ้การเปลี่ยนก่อนหน้าในรายการ ตั้งค่าตำแหน่งให้เท่ากับตำแหน่งที่ระบุที่ใหญ่ที่สุดของการหยุดสีหรือคำใบ้การเปลี่ยนแปลงก่อนหน้านั้น

0 มีค่าน้อยกว่าค่าอื่นเสมอ ดังนั้นเบราว์เซอร์จะแปลงเป็นค่าที่มากที่สุดซึ่งมาก่อนค่าในการประกาศเสมอ ในกรณีของเรา ตัวเลขนั้นคือ 25%.

ตอนนี้เราใช้ตรรกะเดียวกันกับทุกมุมและลงท้ายด้วยรหัสต่อไปนี้:

img {
  --b: 5px; /* border thickness */
  --c: #0000 90deg, darkblue 0; /* define the color here */
  padding: 10px;
  background:
    conic-gradient(from 90deg  at top    var(--b) left  var(--b), var(--c)) 0 0,
    conic-gradient(from 180deg at top    var(--b) right var(--b), var(--c)) 100% 0,
    conic-gradient(from 0deg   at bottom var(--b) left  var(--b), var(--c)) 0 100%,
    conic-gradient(from -90deg at bottom var(--b) right var(--b), var(--c)) 100% 100%;
  background-size: 50px 50px; /* adjust border length here */
  background-repeat: no-repeat;
}

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

สำหรับเอฟเฟกต์โฮเวอร์ ฉันแค่เพิ่มขนาดของการไล่ระดับสีเพื่อสร้างฟูลเฟรม:

img:hover {
  background-size: 51% 51%;
}

ใช่มันเป็น 51% แทน 50% — ที่สร้างการทับซ้อนกันเล็กน้อยและหลีกเลี่ยงช่องว่างที่เป็นไปได้

ลองใช้แนวคิดอื่นโดยใช้เทคนิคเดียวกัน:

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

img {
  --b: 8px;  /* border thickness*/
  --s: 60px; /* size of the corner*/
  --g: 14px; /* the gap*/
  --c: #EDC951; 

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

ทำไมต้องทำ --_i และ --_p ตัวแปรมีขีดล่างในชื่อหรือไม่ ขีดล่างเป็นส่วนหนึ่งของหลักการตั้งชื่อที่ฉันใช้เพื่อพิจารณาตัวแปร "ภายใน" ที่ใช้ในการปรับโค้ดให้เหมาะสม ไม่มีอะไรพิเศษ แต่ฉันต้องการสร้างความแตกต่างระหว่างตัวแปรที่เราปรับเพื่อควบคุมเฟรม (เช่น --b, --cฯลฯ) และที่ฉันใช้เพื่อทำให้โค้ดสั้นลง

รหัสอาจดูสับสนและเข้าใจไม่ง่าย แต่ฉันเขียน a ซีรีส์สามตอน ที่ฉันให้รายละเอียดเทคนิคดังกล่าว ฉันขอแนะนำให้อ่านบทความแรกอย่างน้อยเพื่อทำความเข้าใจว่าฉันเข้าถึงโค้ดด้านบนได้อย่างไร

นี่คือภาพประกอบเพื่อให้เข้าใจถึงค่าต่างๆ ได้ดีขึ้น:

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

ลองใช้แอนิเมชั่นประเภทอื่นที่เราเปิดเผยแบบเต็มเฟรมเมื่อวางเมาส์เหนือ:

เจ๋งใช่มั้ย? และถ้าคุณมองใกล้ ๆ คุณจะสังเกตเห็นว่าเส้นหายไปในทิศทางตรงกันข้ามเมื่อเอาเมาส์ออกซึ่งทำให้เอฟเฟกต์ดูแปลกตายิ่งขึ้น! ฉันใช้เอฟเฟกต์ที่คล้ายกันใน บทความก่อนหน้า.

แต่คราวนี้ แทนที่จะครอบคลุมองค์ประกอบทั้งหมด ฉันครอบคลุมเพียงส่วนเล็ก ๆ โดยกำหนด a height เพื่อให้ได้สิ่งนี้:

นี่คือเส้นขอบด้านบนของเฟรมของเรา เราทำซ้ำขั้นตอนเดียวกันในแต่ละด้านของภาพและเรามีผลโฮเวอร์ของเรา:

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

  padding: calc(var(--g) + var(--b));
  --_g: no-repeat linear-gradient(var(--c) 0 0);
  background: 
    var(--_g) var(--_i, 0%) 0,
    var(--_g) 100% var(--_i, 0%),
    var(--_g) calc(100% - var(--_i, 0%)) 100%,
    var(--_g) 0 calc(100% - var(--_i, 0%));
  background-size: var(--_i, 0%) var(--b),var(--b) var(--_i, 0%);
  transition: .4s, background-position 0s;
  cursor: pointer;
}
img:hover {
  --_i: 100%;
}

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

อีกอัน? ไปกันเถอะ!

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

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

แต่ทำไมฉันสร้างความกว้างของการไล่ระดับสี 200%? คุณคิดว่า 100% ก็เพียงพอแล้วใช่ไหม

100% ก็น่าจะเพียงพอแล้ว แต่ฉันไม่สามารถเลื่อนการไล่ระดับสีได้เหมือนที่ฉันต้องการ ถ้าฉันรักษาความกว้างให้เท่ากับ 100%. นั่นเป็นมุมแหลมเล็กน้อยที่เกี่ยวข้องกับวิธีการ background-position ทำงาน ฉันครอบคลุมสิ่งนี้ใน บทความก่อนหน้า. ฉันยัง โพสต์คำตอบที่ Stack Overflow จัดการกับเรื่องนี้ ฉันรู้ว่ามันอ่านเยอะมาก แต่ก็คุ้มค่ากับเวลาของคุณจริงๆ

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

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

  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;
}

อย่างที่คุณเห็น การไล่ระดับสีทั้งสองเกือบจะเหมือนกัน ฉันแค่สลับค่าของขนาดและตำแหน่ง

การหมุนเฟรม

คราวนี้เราจะไม่วาดกรอบรอบๆ รูปภาพของเรา แต่ให้ปรับรูปลักษณ์ของกรอบที่มีอยู่

คุณคงสงสัยว่าฉันสามารถแปลงเส้นตรงเป็นเส้นมุมได้อย่างไร ไม่ เวทมนตร์นั้นแตกต่างจากนั้น นั่นเป็นเพียงภาพลวงตาที่เราได้รับหลังจากรวมแอนิเมชั่นอย่างง่ายสำหรับการไล่ระดับสีสี่ระดับ

มาดูกันว่าแอนิเมชั่นสำหรับการไล่ระดับสีบนสุดเป็นอย่างไร:

ฉันแค่อัปเดตตำแหน่งของการไล่ระดับสีซ้ำ ยังไม่มีอะไรแฟนซี! ลองทำเช่นเดียวกันกับด้านขวา:

คุณเริ่มเห็นเคล็ดลับหรือไม่? การไล่ระดับสีทั้งสองตัดกันที่มุมเพื่อสร้างภาพลวงตาที่เส้นตรงเปลี่ยนเป็นมุม มาลบโครงร่างและซ่อนโอเวอร์โฟลว์เพื่อให้มองเห็นได้ดีขึ้น:

ตอนนี้ เราเพิ่มการไล่ระดับสีอีกสองแบบเพื่อครอบคลุมขอบที่เหลือ และทำเสร็จแล้ว:

img {
  --g: 4px; /* the gap */
  --b: 12px; /* border thickness*/
  --c: #669706; /* the color */

  padding: calc(var(--g) + var(--b));
  --_c: #0000 0 25%, var(--c) 0 50%;
  --_g1: repeating-linear-gradient(90deg ,var(--_c)) repeat-x;
  --_g2: repeating-linear-gradient(180deg,var(--_c)) repeat-y;
  background:
    var(--_g1) var(--_p, 25%) 0, 
    var(--_g2) 0 var(--_p, 125%),
    var(--_g1) var(--_p, 125%) 100%, 
    var(--_g2) 100% var(--_p, 25%);
  background-size: 200% var(--b), var(--b) 200%;
  transition: .3s;
}
img:hover {
  --_p: 75%;
}

หากเราใช้โค้ดนี้และปรับแต่งเล็กน้อย เราจะได้แอนิเมชั่นเจ๋งๆ อีกอัน:

คุณช่วยหาตรรกะในตัวอย่างนี้ได้ไหม นั่นคือการบ้านของคุณ! โค้ดอาจดูน่ากลัวแต่ใช้ตรรกะเดียวกับตัวอย่างก่อนหน้านี้ที่เราดู พยายามแยกการไล่ระดับสีแต่ละครั้งและจินตนาการว่ามันเคลื่อนไหวอย่างไร

ตัดขึ้น

นั่นคือการไล่ระดับสีมากมายในบทความเดียว!

แน่นอนและฉันเตือนคุณแล้ว! แต่ถ้าความท้าทายคือการตกแต่งภาพโดยไม่มีองค์ประกอบพิเศษและองค์ประกอบเทียม เราก็มีความเป็นไปได้เพียงไม่กี่อย่างและการไล่ระดับสีก็เป็นตัวเลือกที่ทรงพลังที่สุด

อย่ากังวลหากคุณหลงทางในคำอธิบายบางอย่าง ฉันมักจะแนะนำบทความเก่า ๆ ของฉัน ซึ่งฉันจะลงรายละเอียดมากขึ้นด้วยแนวคิดบางส่วนที่เรานำกลับมาใช้ใหม่สำหรับความท้าทายนี้

ฉันจะทิ้งท้ายด้วยการสาธิตครั้งสุดท้ายเพื่อเก็บคุณไว้จนกว่าจะถึงบทความถัดไปในชุดนี้ ครั้งนี้ฉันใช้ radial-gradient() เพื่อสร้างเอฟเฟกต์โฮเวอร์ตลก ๆ ฉันจะให้คุณผ่าโค้ดเพื่อดูว่ามันทำงานอย่างไร ถามคำถามในความคิดเห็นหากคุณติดขัด!