เอฟเฟกต์ข้อความเส้นขอบหลายชั้นของ CSS

 (yuanchuan.dev)
1 คะแนน โดย GN⁺ 1 시간 전 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • CSS text-stroke รับได้เพียงค่าเดียว แต่ถ้านำตัวอักษรเดียวกันมาซ้อนกันหลายเลเยอร์ แล้วกำหนด ความหนาของเส้นขอบ และสีของแต่ละเลเยอร์ให้ต่างกัน ก็สามารถสร้างเอฟเฟกต์ข้อความเส้นขอบหลายชั้นสไตล์เรโทรได้
  • เมื่อนำเอฟเฟกต์ข้อความจาก Graphic Japan : from woodblock and zen to manga and kawaii มาเป็นต้นแบบ แล้วตั้งค่า text-stroke-width ของหลายองค์ประกอบให้ต่างกัน ก็จะได้ผลลัพธ์ที่ใกล้เคียงมากขึ้น
  • ใช้การผสมกันของ text-stroke-width, text-stroke-color, z-index ในแต่ละเลเยอร์เพื่อควบคุมลำดับและสีของเส้นขอบ และแม้ความหนาจะเพิ่มขึ้น รูปร่างตัวอักษรดั้งเดิมก็ยังคงอยู่
  • ผลการเรนเดอร์แตกต่างกันไปตามเบราว์เซอร์ โดย Firefox ดูนุ่มนวลกว่า Chrome และ Safari และหากใส่หลายตัวอักษรไว้ในบรรทัดเดียว รูปร่างของตัวอักษรจะถูกรวมเข้าด้วยกัน
  • ผลลัพธ์ขึ้นอยู่กับ ฟอนต์ ที่เลือกอย่างมาก และเมื่อ font-size ใหญ่ขึ้นอาจเห็นอาการกะพริบได้ จึงเหมาะกับการทดลองหรือการสร้างภาพด้วย css-doodle มากกว่าการใช้งานจริงในโปรดักชัน

วิธีทำ

  • ซ้อนตัวอักษรเดียวกันหลายเลเยอร์และกำหนด text-stroke-width ของแต่ละเลเยอร์ให้ต่างกัน เพื่อให้ได้ผลลัพธ์ที่ใกล้เคียงกับเอฟเฟกต์ข้อความที่เห็นใน Graphic Japan : from woodblock and zen to manga and kawaii มากขึ้น
-webkit-text-stroke-color: @pn(--c, #f4e1e8);
-webkit-text-stroke-width: $em(.08n+.02(1-(-1)^n));
  • ใส่สีต่างกันในแต่ละเลเยอร์และซ้อนตามลำดับที่ต้องการ ก็จะควบคุมสีและลำดับของเส้นขอบได้
-webkit-text-stroke-color: @pn(#f4e1e8, #cc0d55);
-webkit-text-stroke-width: @i(*3px);

การเรนเดอร์และข้อจำกัด

  • Firefox ให้การเรนเดอร์ที่นุ่มนวลกว่า Chrome และ Safari
  • หากใส่หลายตัวอักษรไว้ในบรรทัดเดียว รูปร่างของตัวอักษรจะถูกรวมเข้าด้วยกัน
@content: '秋收冬藏';
  • เพื่อให้ทดลองฟอนต์หลากหลายแบบได้รวดเร็ว จึงเพิ่มฟังก์ชัน @google-font เพื่อเร่งการโหลดฟอนต์
font-family: @google-font(Matemasie);
@content: 'b';

font-family: @google-font(Tangerine);
@content: 'Love';

font-family: @google-font('Cherry Bomb One');
@content: '+';
  • ประสิทธิภาพไม่ได้ดีเท่าฟิลเตอร์ CSS และโดยเฉพาะเมื่อ font-size ใหญ่ขึ้น อาจเห็นอาการกะพริบได้
  • ตัวอย่างเพิ่มเติมถูกสร้างด้วย css-doodle และสามารถดู CodePen ของตัวอย่างแรกได้ที่ https://codepen.io/yuanchuan/pen/ogzarGo

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 1 시간 전
ความคิดเห็นจาก Hacker News

  • บทความนี้ทำโดยผู้สร้าง css-doodle โดยใช้ css-doodle เอง เว็บคอมโพเนนต์นี้ช่วยให้ใส่ไวยากรณ์ CSS แบบดัดแปลงที่เขาใช้ในบล็อกลงใน HTML ได้โดยตรง
    ตัวอย่างจะประมาณนี้:
    @grid: 15 / 90%;
    border-radius: 50%;
    background: hsl(@t(/20), 70%, 60%);
    scale: sin(@atan2(@dx, @dy) + @ts);
    ไม่ต้องใช้ JavaScript นอกจากตอนโหลดนิยามของคอมโพเนนต์ และมันทำงานได้กับ HTML ปกติ, Markdown, เฟรมเวิร์ก ฯลฯ
    https://css-doodle.com/

    • ขอบคุณสำหรับคำอธิบาย ตั้งแต่ออกจากงานฝั่งฟรอนต์เอนด์ในปี 2018 ก็แทบไม่รู้เลยว่าเดี๋ยวนี้ CSS ทำอะไรได้บ้างแล้ว
      CSS ในหน้านี้หลายส่วนดูเหมือนรหัสลับสำหรับผม ขอชื่นชมผู้เขียนที่โพสต์อะไรใหม่ ๆ และเจ๋ง ๆ ในยุคที่สไตล์ส่วนใหญ่กลายเป็นมาตรฐานไปมากแล้ว

  • สงสัยว่าทำไม CSS rendering engine ของ Firefox ถึงชอบจัดการแบบนุ่มนวลกว่า แม้ว่าการทำงานจะดูต่างกันมาก แต่ก็อาจเป็นเพราะนี่คือกรณีขอบเขตของการเรนเดอร์เลยออกมาแบบนั้น

    • การขยายเส้นขอบเป็นหัวข้อที่ซับซ้อน ไม่ได้มีผลลัพธ์ที่สมเหตุสมผลเพียงแบบเดียว และมีทั้งความชอบส่วนตัว กรณีขอบเขตจำนวนมาก และคำตอบที่ผิดปะปนกันอยู่
      Firefox เลือกที่จะขยายโดยอิงระยะทางในทุกจุด ซึ่งเป็นคำตอบที่สมเหตุสมผลแบบหนึ่ง และน่าจะเป็นแนวทางที่ใช้กันทั่วไปที่สุด ดังนั้น cusp ที่แหลมจึงถูกขยายเป็นเส้นโค้ง
      เบราว์เซอร์อื่นเลือกคง cusp ไว้ ซึ่งก็อาจสมเหตุสมผลเช่นกัน และน่าจะคำนวณได้ถูกกว่ามาก แต่ถ้าขยายเกินขนาดของรายละเอียดนั้นเอง คือเกินระยะระหว่าง node ก็จะเกิดกรณีเสื่อมสภาพจำนวนมาก ทำให้ราว ๆ วงแหวนสีแดงชั้นที่สี่มันดูผิดอย่างชัดเจน
      box-shadow ก็เป็นอีกกรณีหนึ่งที่เกิดการขยาย โดยก็คือค่า spread distance ซึ่งเป็นค่าความยาวตัวที่สี่ ถ้ามุมเป็น cusp มุมของเงาก็จะเป็น cusp ด้วย ถ้ากลม มุมของเงาก็จะกลมตาม มีภาพประกอบที่เป็นประโยชน์อยู่ที่ https://drafts.csswg.org/css-backgrounds/#shadow-shape
      มีทริกเล็กน้อยคือใส่ 0.1px border-radius แล้วกล่องจะยังดูเหมือนสี่เหลี่ยมอยู่ แต่เงาที่ถูกขยายจะกลายเป็นเส้นโค้ง ซึ่งบางครั้งก็มีประโยชน์ กลับมาที่บทความต้นฉบับ ถ้าใช้ฟอนต์ที่มีเส้นโค้งละเอียดมากแทน node แบบ cusp แล้ว Chromium/Safari ก็น่าจะออกมาใกล้ Firefox มากขึ้น
    • ผมไม่ได้ชอบเอฟเฟกต์ความโค้งของ Firefox ไปเสียทั้งหมด แต่การตีความของ Chrome ให้ความรู้สึกเหมือนสร้าง เดือยแหลมปลอม ๆ ขึ้นมา เลยดูเหมือนผิดมากกว่า
      ตามสัญชาตญาณแล้วคาดว่าเส้นขอบของรูปดาวน่าจะค่อย ๆ เข้าใกล้รูปหกเหลี่ยมธรรมดา แต่ไม่มีเบราว์เซอร์ไหนทำออกมาแบบนั้น
    • miter join คือ Safari ส่วน round join คือ Chrome
    • ฝั่ง Firefox ดูเหมือน SDF น่าจะเป็นการเรนเดอร์โดยอิงระยะที่สั้นที่สุดถึงวัตถุ ส่วนของ Chrome เป็นอะไรนั้นผมไม่แน่ใจ
    • ฝั่ง Firefox ดูเหมือนผลลัพธ์ที่คาดหวังได้จากการตัดผล SDF ของตัวอักษรนั้นออกมาเป็นชั้น ๆ อย่างแม่นยำ
      มุมโค้งในเลเยอร์แรกน่าจะอยู่ห่างจากมุมที่ใกล้ที่สุดของตัวอักษรต้นฉบับเท่ากันทั้งหมด

  • ดีไซน์บล็อกนี้ดีมาก เรียบง่าย ชัดเจน และให้เนื้อหาเป็นหลัก

    • เห็นด้วย มีหลายบทความที่แสดง CSS/SVG/canvas ได้อย่างชัดเจน
      ซีรีส์ Daily Sketch หรือ CSS Animation with offset-path ก็สนุกพอ ๆ กัน

  • อ่านบทความนี้แล้วเพิ่งรู้จัก https://css-doodle.com เป็นครั้งแรก
    เมื่อไม่กี่เดือนก่อนผมกำลังทำอะไรคล้าย ๆ กันด้วย HTML Canvas API แต่ไม่รู้เลยว่า CSS ก็ทำงานเล็ก ๆ สนุก ๆ แบบนี้ได้เหมือนกัน ชอบมาก

  • ลองเปลี่ยน fiddle ให้เป็น โลโก้และสีของ Apple แล้วพบว่าวงแหวนแรกกินส่วนหนึ่งของแอปเปิลไป สงสัยว่ามีใครรู้ไหมว่าทำไมส่วนบนของแอปเปิลถึงถูกตัด
    --c: #5EBD3E,#FFB900,#F78200,#E23838,#973999,#009CDF;
    @content: '';

  • สงสัยว่าวิธีที่ดีที่สุดในการทำ ข้อความเส้นขอบคู่ โดยไม่ต้องใช้ตัวอักษร Unicode แปลก ๆ แต่ยังคงการแสดงผลตามที่ฟอนต์แนะนำไว้คืออะไร
    ตอนนี้ใน my blog ผมใช้ตัวอักษรเท่ ๆ อยู่ แต่มันไม่ดีกับผลการค้นหา กำลังย้ายบล็อกจาก HTML ที่เขียนมือไปเป็น 11ty เลยอยากปรับปรุงบล็อกไปพร้อมกันด้วย
    อีกอย่างก็อยากได้ความเห็นเกี่ยวกับดีไซน์บล็อกปัจจุบันด้วย

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

    • ถ้าจะทำเส้นขอบด้วยเงา ต้องกระจายเงาออกเป็นวงกลม ดังนั้นรูปร่างโดยรวมสุดท้ายจะประมาณว่า ลู่เข้าเป็นวงกลม และแทบจะไม่ตามรูปตัวอักษรแล้ว

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

    • ฝั่งผมอีโมจิเรนเดอร์ออกมานะ แต่ไม่มีเอฟเฟกต์เส้นขอบเลย เห็นแค่อีโมจิล้วน ๆ
    • ถ้าใช้ฟอนต์ Noto Emoji ก็จะทำงาน