วิธีสร้างรูปร่างและรูปแบบคลื่นใน CSS

wave น่าจะเป็นรูปทรงที่ยากที่สุดรูปแบบหนึ่งในการสร้าง CSS เรามักจะพยายามประมาณมันด้วยคุณสมบัติเช่น border-radius และเลขอาถรรพ์มากมาย จนกว่าเราจะได้ของที่ใกล้เคียงกัน และนั่นคือก่อนที่เราจะเข้าสู่รูปแบบคลื่นซึ่งยากกว่า

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

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

ค่าบางค่าอาจมีลักษณะดังนี้ “ตัวเลขมหัศจรรย์” แต่จริงๆ แล้วมีเหตุผลอยู่เบื้องหลัง และเราจะผ่ารหัสและค้นพบความลับทั้งหมดเบื้องหลังการสร้างกระแส

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

คณิตศาสตร์เบื้องหลังคลื่น

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

มาเริ่มกันด้วยตัวอย่างง่ายๆ โดยใช้รูปร่างวงกลมสองรูป:

เรามีวงกลมสองวงที่มีรัศมีเท่ากัน คุณเห็นเส้นสีแดงนั้นไหม ครอบคลุมครึ่งบนของวงกลมแรกและครึ่งล่างของวงกลมที่สอง ตอนนี้ลองนึกภาพว่าคุณใช้เส้นนั้นแล้วทำซ้ำ

เราเห็นคลื่นแล้ว ตอนนี้มาเติมส่วนล่าง (หรือส่วนบน) เพื่อให้ได้สิ่งต่อไปนี้:

ธาดา! เรามีรูปร่างเป็นคลื่น และแบบที่เราสามารถควบคุมได้โดยใช้ตัวแปรเดียวสำหรับรัศมีวงกลม นี่เป็นหนึ่งในคลื่นที่ง่ายที่สุดที่เราสามารถทำได้และเป็นคลื่นที่ฉันแสดงให้เห็นใน this บทความก่อนหน้านี้

มาเพิ่มความซับซ้อนอีกเล็กน้อยด้วยการใช้ภาพประกอบแรกแล้วขยับวงกลมเล็กน้อย:

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

ตอนนี้ใช้เส้นนั้นแล้วทำซ้ำและคุณจะได้คลื่นลูกที่นุ่มนวลขึ้น

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

คุณอาจสังเกตเห็นว่าในโปรแกรมสร้างออนไลน์ เราควบคุมคลื่นโดยใช้สองอินพุต พวกเขาจับคู่กับตัวแปรข้างต้น S คือ “ขนาดของคลื่น” และ P คือ “ความโค้งของคลื่น”

ฉันกำลังกำหนด P as P = m*S ที่ไหน m เป็นตัวแปรที่คุณปรับเมื่ออัปเดตความโค้งของคลื่น ซึ่งช่วยให้เรามีความโค้งเท่ากันเสมอ แม้ว่าเราจะอัปเดต S

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

อย่าลืมรัศมีของวงกลมของเรา! ที่สามารถกำหนดได้โดยใช้ S และ P อย่างนี้:

R = sqrt(P² + S²)/2

เมื่อ P เท่ากับ 0, เราจะมี R = S/2.

เรามีทุกอย่างที่จะเริ่มแปลงทั้งหมดนี้เป็นการไล่ระดับสีใน CSS!

การสร้างการไล่ระดับสี

คลื่นของเราใช้วงกลม และเมื่อพูดถึงวงกลม เราจะพูดถึงการไล่ระดับสีในแนวรัศมี และเนื่องจากวงกลมสองวงกำหนดคลื่นของเรา เราจะใช้การไล่ระดับแนวรัศมีสองวงตามหลักเหตุผล

เราจะเริ่มต้นด้วยกรณีเฉพาะที่ P เท่ากับ 0. นี่คือภาพประกอบของการไล่ระดับสีแรก:

การไล่ระดับนี้ทำให้เกิดความโค้งแรกในขณะที่เติมเต็มพื้นที่ด้านล่างทั้งหมด นั่นคือ "น้ำ" ของคลื่น

.wave {
  --size: 50px;

  mask: radial-gradient(var(--size) at 50% 0%, #0000 99%, red 101%) 
    50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}

พื้นที่ --size ตัวแปรกำหนดรัศมีและขนาดของการไล่ระดับสีในแนวรัศมี ถ้าเปรียบกับ S ตัวแปรก็จะเท่ากับ S/2.

ตอนนี้ มาเพิ่มการไล่ระดับสีที่สอง:

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

radial-gradient(var(--size) at 50% var(--size), blue 99%, #0000 101%) 
  calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%

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

ฉันติดตามทั้งสองบทความ แต่การกำหนดค่าการไล่ระดับสีไม่เหมือนกัน

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

นี่คือรหัสเต็มสำหรับคลื่นลูกแรกของเรา:

.wave {
  --size: 50px;

  mask:
    radial-gradient(var(--size) at 50% var(--size),#000 99%, #0000 101%) 
      calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--size) at 50% 0px, #0000 99%, #000 101%) 
      50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}

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

รหัสของเราจะมีลักษณะดังนี้:

.wave {
  --size: 50px;
  --p: 25px;

  mask:
    radial-gradient(var(--size) at 50% calc(var(--size) + var(--p)), #000 99%, #0000 101%) 
      calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--size) at 50% calc(-1*var(--p)), #0000 99%, #000 101%) 
      50% var(--size) / calc(4 * var(--size)) 100% repeat-x;
}

ฉันได้แนะนำใหม่ --p ตัวแปรที่ใช้กำหนดตำแหน่งศูนย์กลางของแต่ละวงกลม การไล่ระดับสีแรกกำลังใช้ 50% calc(-1*var(--p))ดังนั้นจุดศูนย์กลางจึงเลื่อนขึ้นในขณะที่อันที่สองกำลังใช้ calc(var(--size) + var(--p)) เพื่อย้ายลง

การสาธิตมีค่าหนึ่งพันคำ:

วงกลมไม่อยู่ในแนวเดียวกันหรือสัมผัสกัน เราเว้นระยะห่างกันโดยไม่เปลี่ยนรัศมี ดังนั้นเราจึงสูญเสียคลื่น แต่เราสามารถแก้ไขได้โดยใช้คณิตศาสตร์แบบเดียวกับที่เราใช้ก่อนหน้านี้ในการคำนวณรัศมีใหม่ จำไว้ R = sqrt(P² + S²)/2. ในกรณีของเรา --size เท่ากับ S/2; เหมือนกันสำหรับ --p ซึ่งก็เท่ากับ P/2 เนื่องจากเรากำลังเคลื่อนที่ทั้งสองวงกลม ดังนั้น ระยะห่างระหว่างจุดศูนย์กลางของพวกมันจึงมีค่าเป็นสองเท่าของ --p สำหรับสิ่งนี้:

R = sqrt(var(--size) * var(--size) + var(--p) * var(--p))

นั่นทำให้เราได้รับผลลัพธ์จาก 55.9px.

คลื่นของเรากลับมาแล้ว! ลองใส่สมการนั้นลงใน CSS ของเรา:

.wave {
  --size: 50px;
  --p: 25px;
  --R: sqrt(var(--p) * var(--p) + var(--size)*var(--size));

  mask:
    radial-gradient(var(--R) at 50% calc(var(--size) + var(--p)), #000 99%, #0000 101%) 
      calc(50% - 2*var(--size)) 0 / calc(4 * var(--size)) 100%,
    radial-gradient(var(--R) at 50% calc(-1*var(--p)), #0000 99%, #000 101%) 
      50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}

นี่คือโค้ด CSS ที่ถูกต้อง sqrt() เป็นส่วนหนึ่งของข้อกำหนดแต่ในขณะที่ฉันเขียนสิ่งนี้ ไม่มีเบราว์เซอร์รองรับ นั่นหมายความว่าเราต้องการ JavaScript หรือ Sass เพื่อคำนวณค่านั้นจนกว่าเราจะกว้างขึ้น sqrt() สนับสนุน

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

ย้อนคลื่น

จะเป็นอย่างไรถ้าเราต้องการคลื่นไปในทิศทางอื่น ซึ่งเราเติม "ท้องฟ้า" แทน "น้ำ" เชื่อหรือไม่ สิ่งที่เราต้องทำคืออัปเดตสองค่า:

.wave {
  --size: 50px;
  --p: 25px;
  --R: sqrt(var(--p) * var(--p) + var(--size) * var(--size));

  mask:
    radial-gradient(var(--R) at 50% calc(100% - (var(--size) + var(--p))), #000 99%, #0000 101%)
      calc(50% - 2 * var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--R) at 50% calc(100% + var(--p)), #0000 99%, #000 101%) 
      50% calc(100% - var(--size)) / calc(4 * var(--size)) 100% repeat-x;
}

ทั้งหมดที่ฉันทำคือเพิ่มออฟเซ็ตเท่ากับ 100%ที่ไฮไลต์ไว้ด้านบน นี่คือผลลัพธ์:

เราสามารถพิจารณาไวยากรณ์ที่เป็นมิตรยิ่งขึ้นโดยใช้ค่าคีย์เวิร์ดเพื่อทำให้ง่ายยิ่งขึ้น:

.wave {
  --size: 50px;
  --p: 25px;
  --R: sqrt(var(--p)*var(--p) + var(--size) * var(--size));

  mask:
    radial-gradient(var(--R) at left 50% bottom calc(var(--size) + var(--p)), #000 99%, #0000 101%) 
      calc(50% - 2 * var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--R) at left 50% bottom calc(-1 * var(--p)), #0000 99%, #000 101%) 
      left 50% bottom var(--size) / calc(4 * var(--size)) 100% repeat-x;
}

เรากำลังใช้ไฟล์ left และ bottom คีย์เวิร์ดเพื่อระบุด้านและออฟเซ็ต ตามค่าเริ่มต้น เบราว์เซอร์จะมีค่าเริ่มต้นเป็น left และ top — นั่นเป็นเหตุผลที่เราใช้ 100% เพื่อย้ายองค์ประกอบไปด้านล่าง ในความเป็นจริง เรากำลังย้ายจาก top by 100%ดังนั้นจึงเหมือนกับว่า bottom. อ่านง่ายกว่าคณิตศาสตร์มาก!

ด้วยไวยากรณ์ที่อัปเดตนี้ สิ่งที่เราต้องทำคือสลับ bottom for top — หรือในทางกลับกัน — เพื่อเปลี่ยนทิศทางของคลื่น

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

.wave {
  --size: 50px;
  --p: 25px;
  --R: sqrt(var(--p)*var(--p) + var(--size)*var(--size));

  mask:
    /* Gradient 1 */
    radial-gradient(var(--R) at left 50% bottom calc(var(--size) + var(--p)), #000 99%, #0000 101%) 
      left calc(50% - 2*var(--size)) bottom 0 / calc(4 * var(--size)) 51% repeat-x,
    /* Gradient 2 */
    radial-gradient(var(--R) at left 50% bottom calc(-1 * var(--p)), #0000 99%, #000 101%) 
      left 50% bottom var(--size) / calc(4 * var(--size)) calc(51% - var(--size)) repeat-x,
    /* Gradient 3 */
    radial-gradient(var(--R) at left 50% top calc(var(--size) + var(--p)), #000 99%, #0000 101%) 
      left calc(50% - 2 * var(--size)) top 0 / calc(4 * var(--size)) 51% repeat-x,
    /* Gradient 4 */
    radial-gradient(var(--R) at left 50% top calc(-1 * var(--p)), #0000 99%, #000 101%) 
      left 50% top var(--size) / calc(4 * var(--size)) calc(51% - var(--size)) repeat-x;
}

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

ด้านซ้ายและขวาเป็นอย่างไร?

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

มีปัญหาก็ใช้ได้ตลอด เครื่องกำเนิดไฟฟ้าออนไลน์ เพื่อตรวจสอบรหัสและเห็นภาพผลลัพธ์

เส้นหยัก

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

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

#0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%

ฉันคิดว่าคุณเดาได้แล้วว่า --b ตัวแปรคือสิ่งที่เราใช้ควบคุมความหนาของเส้น ลองใช้สิ่งนี้กับการไล่ระดับสีของเรา:

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

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

.wave {
  --size: 50px;
  --b: 10px;
  --p: 25px;
  --R: sqrt(var(--p)*var(--p) + var(--size)*var(--size));

  --_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
  mask:
    radial-gradient(var(--R) at left 50% bottom calc(-1*var(--p)), var(--_g)) 
      calc(50% - 2*var(--size)) 0/calc(4*var(--size)) 100%,
    radial-gradient(var(--R) at left 50% top    calc(-1*var(--p)), var(--_g)) 
      50% var(--size)/calc(4*var(--size)) 100%;
}

ตอนนี้เราต้องปรับขนาดและตำแหน่งของรูปร่างสุดท้าย เราไม่ต้องการการไล่ระดับสีให้เต็มความสูงอีกต่อไป เราจึงสามารถแทนที่ได้ 100% ด้วยสิ่งนี้:

/* Size plus thickness */
calc(var(--size) + var(--b))

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

.wave {
  --size: 50px;
  --b: 10px;
  --p: 25px;
  --R: sqrt(var(--p)*var(--p) + var(--size)*var(--size));

  --_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;  
  mask:
    radial-gradient(var(--R) at left 50% bottom calc(-1*var(--p)), var(--_g)) 
      calc(50% - 2*var(--size)) 50%/calc(4 * var(--size)) calc(var(--size) + var(--b)) no-repeat,
    radial-gradient(var(--R) at left 50% top calc(-1 * var(--p)), var(--_g)) 50%
      50%/calc(4 * var(--size)) calc(var(--size) + var(--b)) no-repeat;
}

ยังไม่ค่อยมี:

การไล่ระดับสีหนึ่งต้องเลื่อนลงเล็กน้อยและอีกอันหนึ่งขึ้นเล็กน้อย ทั้งสองต้องขยับโดยครึ่งหนึ่งของความสูง

เราเกือบจะอยู่ที่นั่นแล้ว! เราต้องการการแก้ไขเล็กน้อยเพื่อให้รัศมีมีความเหลื่อมล้ำกันอย่างสมบูรณ์ ทั้งสองเส้นต้องออฟเซ็ตครึ่งเส้นขอบ (--b) ความหนา:

เราได้รับมัน! เส้นหยักที่สมบูรณ์แบบที่เราสามารถปรับได้โดยการควบคุมตัวแปรสองสามตัว:

.wave {
  --size: 50px;
  --b: 10px;
  --p: 25px;
  --R: calc(sqrt(var(--p) * var(--p) + var(--size) * var(--size)) + var(--b) / 2);

  --_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
  mask:
    radial-gradient(var(--R) at left 50% bottom calc(-1 * var(--p)), var(--_g)) 
     calc(50% - 2*var(--size)) calc(50% - var(--size)/2 - var(--b)/2) / calc(4 * var(--size)) calc(var(--size) + var(--b)) repeat-x,
    radial-gradient(var(--R) at left 50% top calc(-1*var(--p)),var(--_g)) 
     50%  calc(50% + var(--size)/2 + var(--b)/2) / calc(4 * var(--size)) calc(var(--size) + var(--b)) repeat-x;
}

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

ลายคลื่น

เราสามารถสร้างลวดลายจากเส้นหยักที่เราเพิ่งสร้างขึ้นได้!

ไม่นะ รหัสของรูปแบบจะยิ่งเข้าใจยากขึ้นไปอีก!

ไม่เลย! เรามีรหัสอยู่แล้ว สิ่งที่เราต้องทำคือเอาออก repeat-x จากสิ่งที่เรามีอยู่แล้วและทาดา 🎉

ลายคลื่นสวยๆ. จำสมการที่ฉันบอกว่าเราจะกลับมาทบทวนได้ไหม?

/* Size plus thickness */
calc(var(--size) + var(--b))

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

นี่คือรูปแบบเดียวกันไปในทิศทางที่ต่างกัน:

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

ลดความซับซ้อนของรหัส

ในการสาธิตก่อนหน้านี้ เรามักจะกำหนด --size และ --p อย่างอิสระ แต่คุณจำได้ไหมว่าฉันได้กล่าวไปแล้วก่อนหน้านี้ว่าเครื่องมือสร้างออนไลน์ประเมินผล P เท่ากับ m*Sที่นี่มี m ควบคุมความโค้งของคลื่น? โดยการกำหนดตัวคูณคงที่ เราสามารถทำงานกับคลื่นลูกเดียวและรหัสจะง่ายขึ้น นี่คือสิ่งที่เราต้องการในกรณีส่วนใหญ่: รูปร่างหยักเฉพาะและตัวแปรเพื่อควบคุมขนาด

มาอัปเดตโค้ดของเราและแนะนำ m ตัวแปร:

.wave {
  --size: 50px;
  --R: calc(var(--size) * sqrt(var(--m) * var(--m) + 1));

  mask:
    radial-gradient(var(--R) at 50% calc(var(--size) * (1 + var(--m))), #000 99%, #0000 101%) 
      calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--R) at 50% calc(-1 * var(--size) * var(--m)), #0000 99%, #000 101%) 
      50% var(--size) / calc(4 * var(--size)) 100% repeat-x;
  }

อย่างที่คุณเห็น เราไม่ต้องการ . อีกต่อไป --p ตัวแปร. ฉันแทนที่มันด้วย var(--m)*var(--size)และปรับคณิตศาสตร์บางส่วนให้เหมาะสม ทีนี้ ถ้าเราต้องการทำงานกับรูปร่างเป็นคลื่น เราสามารถละเว้น --m ตัวแปรและแทนที่ด้วยค่าคงที่ มาลองกัน .8 เช่น

--size: 50px;
--R: calc(var(--size) * 1.28);

mask:
  radial-gradient(var(--R) at 50% calc(1.8 * var(--size)), #000 99%, #0000 101%) 
    calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
  radial-gradient(var(--R) at 50% calc(-.8 * var(--size)), #0000 99%, #000 101%) 
    50% var(--size) / calc(4 * var(--size)) 100% repeat-x;

ดูว่ารหัสตอนนี้ง่ายกว่าอย่างไร? ตัวแปรเดียวเท่านั้นที่จะควบคุม wave ของคุณ และคุณไม่จำเป็นต้องพึ่งพาอีกต่อไป sqrt() ซึ่งไม่มีการสนับสนุนเบราว์เซอร์!

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

ข้อจำกัดของแนวทางนี้

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

สำหรับกรณีอื่นๆ ปัญหาที่เกี่ยวข้องกับการปัดเศษบางอย่างจะส่งผลให้เกิดการเยื้องศูนย์และช่องว่างระหว่างคลื่น:

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

ตัดขึ้น

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

บทความสิ้นสุดที่นี่ แต่ตอนนี้ คุณมีเครื่องมืออันทรงพลังในการสร้างงานออกแบบแฟนซีที่ใช้รูปทรงคลื่น นี่คือแรงบันดาลใจในการเริ่มต้น...

แล้วคุณล่ะ ใช้โปรแกรมสร้างออนไลน์ของฉัน (หรือเขียนรหัสด้วยตนเองหากคุณเรียนรู้คณิตศาสตร์ทั้งหมดด้วยใจแล้ว) และแสดงการสร้างสรรค์ของคุณให้ฉันดู! ให้มีคอลเลกชันที่ดีในส่วนความคิดเห็น