Blog

  • วิธีไล่สีตัวอักษรด้วย CSS

    วิธีไล่สีตัวอักษรด้วย CSS

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

    background-clip: text;
    -webkit-background-clip: text;

    และสิ่งที่เราใช้ประกอบด้วยคือ การใช้พื้นหลังแบบไล่สี รวมถึงให้ตัวอักษรเราโปร่งใส

    background: linear-gradient(to right, #40e0d0, #ff8c00, #ff0080);
    color: transparent;

    ตัวอย่างการไล่สีตัวอักษรด้วย CSS

  • Enable Media Replace : Plugin WordPress สำหรับแทนที่ File ที่เคย Upload ไปแล้ว

    Enable Media Replace : Plugin WordPress สำหรับแทนที่ File ที่เคย Upload ไปแล้ว

    1 ในปัญหาที่ลูกค้าที่ทำเว็บไซต์ด้วย WordPress เจอ คืออยากจะอัพเดต File ที่เคย Upload ไป แต่ไม่อยากจะเปลี่ยน URL หรืออยากจะอัพเดตรูป แต่รูปนี้ใช้อยู่ในหลาย ๆ บทความ จะไปไล่อัพเดตในทุกบทความเลย ก็เสียเวลา

    ผมเลยมาแนะนำ Plugin ที่ใช้สำหรับอัพเดต File ที่เคย Upload ไปแล้ว ชื่อ Enable Media Replace

    Enable Media Replace : Plugin WordPress สำหรับแทนที่ File ที่เคย Upload ไปแล้ว

    หลังจากที่เราติดตั้ง และเปิดใช้งานตัว Plugin นี้แล้ว ในหน้าเดี่ยวของ File ต่าง ๆ ที่อยู่ใน Media จะมีหัวข้อ Replace Media ปรากฎขึ้นมา

    เมื่อเราเลือก Upload a new file แล้ว จะไปยังหน้าจัดการ File ดังรูป

    File ที่จะนำไปแทนที่นั้น ต้องมีนามสกุลเดียวกับ File เดิม เช่น default.jpg ก็ต้อง Upload File ที่มีนามสกุล jpg มาแทนที่ หลังจากเลือก File ที่จะนำไปแทนที่แล้ว

    • ตำแหน่งที่ 1 ให้เลือก Replace the file, use new file name and update all links
    • ตำแหน่งที่ 2 นั้นเราสามารถเลือกวันที่สำหรับตัว File ได้

    หลังจากกด Update ก็เสร็จสิ้น File ที่ Upload ไปก็แทนที่ File เดิมในทุกหน้าให้แล้วครับ

  • วิธีการใช้สีใน CSS

    วิธีการใช้สีใน CSS

    ในการเขียนเว็บไซต์ CSS เป็นตัวตกแต่งหน้าตาของเว็บไซต์ ซึ่งส่วนหนึ่งในนั้น ก็คือสามารถปรับเปลี่ยนสีต่าง ๆ ในเว็บไซต์ได้ด้วย CSS

    โดยวิธีการใช้สีใน CSS นั้น มีอยู่หลายวิธี แต่จะขอพูดถึง 4 รูปแบบที่ใช้งานกันบ่อย ๆ ดังนี้

    • ใช้ชื่อสี โดยสามารถดูรายชื่อสีได้ที่ W3C Color Keyword
    • ใช้ Hex Code ตัวอย่างเช่น #FFF, #DE3D58
    • ใช้ RGB ตัวอย่างเช่น rgb(255,255,255), rgb(125,90,52)
    • ใช้ HSL ตัวอย่างเช่น hsl(100, 50%, 50%), hsl(240, 20%, 80%)

    จะเห็นว่า ทุกรูปแบบแสดงผลสีเดียวกันทั้งหมด

    วิธีการใช้สีใน CSS แบบใช้ชื่อสี

    วิธีนี้ไม่ได้มีอะไรซับซ้อนมากมาย แค่เรานำชื่อสีไปใส่เพื่อใช้งาน เช่น

    Black
    Gray
    Hotpink
    Yellowgreen

    วิธีการใช้สีใน CSS แบบใช้ Hex Code

    โดยในการใช้ Hex Code นั้น มีวิธีการใช้งานโดยมองแยกแบบนี้

    #RRGGBB // โดย R คือสีแดง G คือสีเขียว และ B คือสีน้ำเงิน
    #b91c1c
    #facc15

    ค่าของ RGB นั้นจะมีค่าอยู่ระหว่าง 00 – FF ในเลขฐาน 16 รวมถึงใน Browser version ใหม่ ๆ นั้นจะสนับสนุนการใช้งานสีแบบกำหนดความโปร่งใสได้ด้วย

    #RRGGBBAA // โดย A คือค่าความโปร่งใส มีค่าอยู่ระหว่าง 00 - FF
    #b91c1c99
    #facc1599

    วิธีการใช้สีใน CSS แบบใช้ RGB

    โดยในการใช้ RGB นั้น มีวิธีการใช้งานโดยมองแยกแบบนี้

    rgb(255,255,255) // โดยค่าที่ใส่ลงไปจะมีค่าระหว่าง 0 - 255
    rgba(255,255,255,1) // โดยตัวสุดท้ายจะใช้ค่าที่อยู่ระหว่าง 0 - 1
    rgb(37, 99, 235)
    rgb(190, 18, 60)
    rgb(37, 99, 235, 0.5)
    rgba(190, 18, 60, 0.5)

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

    rgb(255 255 255)
    rgb(255 255 255 / 1) // โดยใช้ / คั่นระหว่าง 3 ค่ากับค่าของความโปร่งใส
    rgb(21 128 61)
    rgb(21 128 61 / 0.5)

    วิธีการใช้สีใน CSS แบบใช้ HSL

    โดยในการใช้ HSL นั้น มีวิธีการใช้งานโดยมองแยกแบบนี้

    hsl(360, 100%, 100%)
    hsla(360, 100%, 100%, 1)
    hsl(221, 83%, 53%)
    hsl(345, 83%, 41%)
    hsl(221, 83%, 53%, 0.5)
    hsl(345, 83%, 41%, 0.5)

    โดยค่าแต่ละตัวคือ

    • Hue (เนื้อสี) ค่ามีตั้งแต่ 0 – 360
    • Saturation (ความอิ่ม) ค่าเป็นเปอร์เซ็นต์ตั้งแต่ 0 – 100
    • Lightness (ความสว่าง) ค่าเป็นเปอร์เซ็นต์ตั้งแต่ 0 – 100
    • Alpha (ค่าความโปร่งใส) ค่าอยู่ระหว่าง 0 – 1

    รวมถึงใน Browser version ใหม่ เราสามารถใช้ hsl ในการใช้งานแบบโปร่งใสได้เลยแบบนี้ โดยไม่ต้องใส่ลูกน้ำ แต่ใช้ / ในการคั่น

    hsl(360 100% 100%)
    hsla(360 100% 100% / 1)
    hsl(142 72% 29%)
    hsl(142 72% 29% / 0.5)

    หลายคนคงสงสัยว่า แล้วความแตกต่างของ rgb กับ hsl ว่ามันแตกต่างกันอย่างไร

    • ระบบของ rgb สามารถแทนจำนวนสีได้มากกว่า hsl โดยสังเกตง่าย ๆ ว่า rgb มันสามารถแทนสีได้ 256 x 256 x 256 ซึ่งเท่ากับ 16,777,216 สี ในขณะที่ hsl นั้นแทนสีได้ 360 x 100 x 100 ซึ่งเท่ากับ 3,600,000 สี
    • แต่ระบบ hsl นั้นง่ายในการสื่อสารสำหรับการปรับแต่ง เช่น ขอสีแดงที่สว่างกว่านี้ อยากได้สีน้ำเงินที่อิ่มกว่านี้ หรืออยากได้โทนสีอื่น ที่ยังสว่างแบบเดิม
  • 3 CSS Animation ไลบารี่สำหรับนำไปใช้งาน

    3 CSS Animation ไลบารี่สำหรับนำไปใช้งาน

    ในการทำเว็บไซต์นั้น หลายครั้งที่เราต้องการให้ Element นั้นมีการเคลื่อนไหว ซึ่งสามารถศึกษาเพิ่มเติมได้ที่ animation – CSS: Cascading Style Sheets | MDN

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

    CSS Animation ไลบารี่


    animate.css

    Animate.css

    สำหรับไลบารี่ตัวนี้ เป็นตัวที่ผมใช้บ่อยมากที่สุด โดยวิธีการใช้งานก็ไม่ได้ยาก แค่เพิ่ม CSS ตัวนี้เข้าไป

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

    และใส่ class animate__animated แล้วตามด้วยชื่อ animation ที่จะใช้ โดยนำหน้าด้วย animate__ เช่น animate__bounce

    ลิงก์ : animate.css

    Hint.css

    สำหรับไลบารี่ตัวนี้ สำหรับใช้งาน tooltip โดยใช้แค่ CSS อย่างเดียวไม่ต้องใช้ Javascript ประกอบ วิธีการใช้งานก็เรียก hint.css ใน HTML ของเรา

    <link rel="stylesheet" href="hint.css" />

    และใส่ class ที่ต้องการใช้งาน รวมถึง aria-label ซึ่งภายใน aria-label จะเป็นข้อความที่แสดงผลใน tooltip

    สวัสดีครับ, <span class="hint--bottom" aria-label="ขอบคุณครับ">เอาเม้าส์มาวางบนนี้ซิ.</span>

    ลิงก์ : hint.css

    Magic.css

    สำหรับไลบารี่ตัวนี้ การเคลื่อนไหวของมันจะดูหรูหรามากขึ้นจาก animate.css โดยเพิ่ม CSS ของไลบารี่นี้เข้าไป

    <link rel="stylesheet" href="magic.css" />

    และใส่ class ที่ตัวไลบารี่กำหนดไว้ เช่น magic, swap, puffin

    ลิงก์ : magic.css

  • แก้ปัญหาการแทรก tag pใน widget เมื่อใช้ gutenberg

    แก้ปัญหาการแทรก tag pใน widget เมื่อใช้ gutenberg

    หลังจากที่ WordPress มีการอัพเดตเป็น Version 5.8 ได้มีการนำ block ของ gutenberg มาใช้งานกับ widget แทนรูปแบบเดิมที่เคยใช้มา

    แก้ปัญหาการแทรก tag pใน widget เมื่อใช้ gutenberg

    ทีนี้เราดันมาเจอปัญหาว่า เวลาใช้ block ที่เป็น shortcode มันจะแทรก tag p เข้ามาอัตโนมัติ แล้วตัว shortcode ที่เราสร้างขึ้น มันดันไปตีกับตัว tag p ที่มันแทรกเข้า ทำให้ code กลายเป็นแบบนี้

    <p>[shortcode]</p>

    เราเลยต้องหาวิธีเอามันออกไป โดยเราไปไล่ code ที่ file

    wp-includes/class-wp-block.php

    แล้วก็เจอ filter ตัวนี้

    $block_content = apply_filters( "render_block_{$this->name}", $block_content, $this->parsed_block );

    เมื่อไปค้นต่อ เจอลิงก์นี้

    โดยเรานำมาปรับใช้เป็น

    add_filter( "render_block_core/shortcode", 'custom_render_block_shortcode', 10, 2);
    function custom_render_block_shortcode( $block_content, $parsed_block ) {
      $array = array (
        '<p>[' => '[', 
        ']</p>' => ']'
      );
      $block_content = strtr($block_content, $array);
    
      return $block_content;
    }

  • วิธีปรับ Theme ของ Chrome DevTools

    วิธีปรับ Theme ของ Chrome DevTools

    ในการใช้งานตัว DevTools ของ Chrome นั้น จะมี Theme ที่ Chrome เตรียมไว้ให้อยู่ 2 แบบ คือ Light และ Dark

    ซึ่งปรกติผมก็จะใช้ Theme Dark อยู่เป็นปรกติ แต่ก็ยังรู้สึกว่า มันเรียบๆ ไป ไม่ค่อยชินเท่าไหร่

    เพราะตัว Sublime Text หรือ Visual Studio Code ที่ผมใช้ เราก็ปรับ Theme ของมันเป็นสี เป็นฟอนต์อื่นๆ ที่เราต้องการ เวลาไปค้นว่า เราจะปรับ Theme ของ DevTools ได้อย่างไร

    จนไปเจอว่า ให้เราเข้าไปที่ https://chrome.google.com/webstore/category/extensions แล้วค้นหา DevTools Theme

    โดยเราเลือกเป็นตัวนี้ Material DevTools Theme Collection

    หลังจากที่ Add to Chrome แล้วทำตามขั้นตอนดังนี้

    • พิมพ์ chrome://flags ที่ Address Bar
    • ค้นหาคำว่า “Developer Tools experiments”
    • เปลี่ยนเป็น Enable แล้ว restart Chrome
    • เปิด D​evTools อีกครั้ง
    • ไปที่ Settings > Experiments
    • แล้วติ๊กที่ “Allow Custom UI Themes”
    • ปิดแล้วเปิดอีกครั้ง
    • อย่าลืมเปลี่ยน Theme ให้เป็น “Dark”

    มองหา icon เหมือนตัว M ที่อยู่ด้านบนตรงใกล้ๆ Address Bar แล้วคลิก สามารถเลือก Theme ตามที่ให้ได้ดังรูป

    เป็นอันเสร็จสิ้น