Tag: css

  • วิธีการใช้งาน css clamp()

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

    เริ่มต้นการใช้งาน css clamp()

    ในการพัฒนาเว็บไซต์แบบ Responsive ที่ตอบสนองตามขนาดของหน้าจอ ตัว clamp() มีความสามารถในการกำหนดค่าที่ปรับเปลี่ยนโดยอยู่ระหว่างค่าต่ำสุด และค่าสูงสุด

    รูปแบบของ clamp() คือ

    property: clamp(min, val, max);
    • min : ค่าต่ำสุดที่คุณต้องการ
    • val : ค่าที่ปรับเปลี่ยน
    • max : ค่าสูงสุดที่คุณต้องการ

    โดย property ที่ใช้งาน clamp() เรามักเจอกับ width, height, margin, padding, border-width, font-size และ text-shadow

    ตัวอย่างการใช้งาน clamp()

    ตัวอย่างง่าย ๆ ในการใช้งานคือ การกำหนดขนาดตัวอักษรโดยปรับตามขนาดหน้าจอ

    font-size: clamp(2rem, 1.0625rem + 3.125vw, 3rem);

    โดยผมใช้งานเว็บ https://clamp.font-size.app/ ในการคำนวนค่าที่นำมาใช้ใน clamp() ซึ่งในตัวอย่างคือ

    • ถ้าหน้าจอไม่ถึง 480px จะมีขนาดตัวอักษรที่ 32px
    • ถ้าหน้าจอมากกว่า 992px จะมีขนาดตัวอักษรที่ 48px
    • หน้าจอขนาดระหว่าง 480px กับ 992px จะมีขนาดตัวอักษรที่ปรับตามขนาดหน้าจอ ( 1.0625rem + 3.125vw )

    Browser ที่รองรับ clamp()

    ในปัจจุบัน Browser ที่คนใช้งานกัน สนับสนุนการใช้งาน clamp() แล้ว แต่ถ้าหากยังต้องสนับสนุน IE กันอยู่ คงต้องมีการใช้ fallback style ไว้

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

  • ทำความเข้าใจ CSS Flexbox – 1

    ทำความเข้าใจ CSS Flexbox – 1

    แต่ก่อนเวลาเราต้องการจัด Layout ของเว็บไซต์ เราใช้ <table> ในการทำ หลังจากนั้นมีการพัฒนามาใช้งาน float หรือ position และในปัจจุบันที่เขียนบทความนี้อยู่ เรามี flex และ grid ที่ใช้ในการจัด Layout ของเว็บไซต์

    สิ่งที่ flex และ grid ดีกว่า <table>, float และ position ตรงที่สามารถจัดการการจัดเรียงเนื้อหา จัดเรียง element ได้ด้วย attribute ที่ใช้ร่วมกับ flex และ grid

    โดย Flexbox เป็นสิ่งที่มาช่วยในการจัด Layout ในมิติเดียว ( แนวตั้ง หรือแนวนอน ) ยกตัวอย่างให้เห็นภาพ คือเวลาทำเว็บไซต์แล้วอยากให้กล่องเนื้อหาเราอยู่ด้านซ้าย และกล่อง sidebar อยู่ด้านขวา

    เราสามารถใช้ CSS Flexbox ทำอะไรได้บ้าง

    ในการจัด Layout ด้วย CSS Flex นั้น สามารถตัดสินใจเพื่อจะใช้งานด้วยสิ่งต่าง ๆ เหล่านี้ได้

    • จัดรูปแบบการแสดงผลมิติเดียวในแนวตั้ง หรือแนวนอน ( a column or a row )
    • สนับสนุนการทำงานกับ writing mode ( อ่านเพื่อทำความเข้าใจเกี่ยวกับ writing mode : https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode )
    • สามารถจัดลำดับการแสดงผลได้ เช่น ในหน้าจอ tablet อยากให้เรียง block-2, block-1, block-3 แต่บนหน้าจอ desktop อยากให้เรียง block-3, block-2, block-1 ได้
    • ระยะห่างสำหรับ element ที่อยู่ภายใน สามารถยืดหยุ่นตาม element ที่ครอบคลุมไว้อยู่ได้
    • สามารถจัดตำแหน่งการแสดงผล element ด้านในได้ง่าย เช่น จัดให้ทุก element ด้านในให้อยู่กลาง element ที่ครอบคลุมอยู่
    • สามารถจัดการตำแหน่งการแสดงผล เฉพาะ element ด้านในที่เลือกได้

    วิธีการใช้งาน CSS Flexbox เบื้องต้น

    สำหรับค่ามาตรฐานของในการประกาศ display: flex; ให้กับ element นั้น คือ

    • element ด้านในแสดงผลเรียงในแนวนอน flex-direction: row;
    • element ด้านในเรียงเป็นแถวเดียว flex-wrap: noswap;
    • element ด้านใน ไม่ขยายเพื่อให้เต็ม element ที่ครอบคลุมอยู่ flex-grow: 0;
    • element ด้านในเรียงกันโดยเริ่มจากที่จุดเริ่มต้น justify-content: normal; และ align-items: normal;

    การควบคุมทิศทางของ element ด้านในด้วย flex-direction

    ถ้าเราไม่ได้กำหนด flex-direction ไว้ อย่างที่บอกไว้ด้านบนค่ามาตรฐานจะเป็น row โดยค่าต่าง ๆ ที่ใช้กับ flex-direction นั้น มีดังนี้

    • row แสดงผล element ด้านในเป็นแนวนอน
    • row-reverse แสดงผล element ด้านในเป็นแนวนอน โดยเริ่มจากจุดสุดท้ายของ element นี้
    • column แสดงผล element ด้านในเป็นแนวตั้ง
    • column-reverse แสดงผล element ด้านในเป็นแนวตั้ง โดยเริ่มจากจุดสุดท้ายของ element นี้

    สามารถทำความเข้าใจเพิ่มเติม โดยทดลองเปลี่ยนค่าในกล่อง dropdown ด้านล่าง

    สำหรับบทความนี้ ขอจบไว้ตรงนี้ก่อน แล้วเราจะมาต่อกันในบทความหน้า ที่จะมาอธิบายเกี่ยวกับ CSS Flexbox เพิ่มเติม

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

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

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

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

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

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

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

  • วิธีการใช้สีใน 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

  • [CSS] วิธีเช็คหน้าเว็บของเราตอน Print

    [CSS] วิธีเช็คหน้าเว็บของเราตอน Print

    บางครั้งในการทำเว็บไซต์ เราต้องเขียน CSS เพื่อใช้สำหรับในการ Print ซึ่งเราสามารถสั่งให้ Browser ใช้งาน CSS สำหรับการ Print โดยเฉพาะได้ตามด้านล่าง

    หรือใช้ media ใน File CSS ของเรา

    ทีนี้เราจะสามารถเช็คหน้าเว็บของเราเวลา Print ได้จาก Browser ที่เราใช้งาน

    Chrome

    เปิด DevTools หรือ Inspect (ใน Mac ให้กด Command + Option + i)

    เลือกตามลำดับ หัวข้อ More tools => Rendering แล้วด้านล่างจะปรากฎกล่องดังรูป

    ในส่วนของ Emulate CSS media ให้เปลี่ยนเป็น print ก็เสร็จแล้วครับ

    Safari

    เปิด DevTools หรือ Inspect (ใน Mac ให้กด Command + Option + i)

    เลือกที่หัวข้อ Elements แล้วเลือกที่ Icon เหมือนรูป Printer เป็นอันเสร็จสิ้น

    Firefox

    เปิด DevTools หรือ Inspect (ใน Mac ให้กด Command + Option + i)

    เลือกที่หัวข้อ Inspector และหา Icon ที่เหมือนเป็นรูป Icon เอกสารแล้วคลิก