Tag: css

วิธีการใช้งาน css clamp()
เมื่อเราพูดถึงการทำเว็บแบบ Responsive การใช้งาน clamp() เป็นเครื่องมือที่น่าสนใจในการจัดการขนาดตามขนาดของอุปกรณ์ที่แสดงผล แล้ว clamp() คืออะไร เราสามารถใช้งานมันได้อย่างไร
Table of Contents
เริ่มต้นการใช้งาน css clamp()
ตัวอย่างการใช้งาน clamp()
Browser ที่รองรับ 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() ได้แล้วละครับ
October 16, 2023
ทำความเข้าใจ CSS Flexbox – 1
แต่ก่อนเวลาเราต้องการจัด Layout ของเว็บไซต์ เราใช้ <table> ในการทำ หลังจากนั้นมีการพัฒนามาใช้งาน float หรือ position และในปัจจุบันที่เขียนบทความนี้อยู่ เรามี flex และ grid ที่ใช้ในการจัด Layout ของเว็บไซต์

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

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

CodePen Embed Fallback

เราสามารถใช้ 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 ด้านล่าง

CodePen Embed Fallback

สำหรับบทความนี้ ขอจบไว้ตรงนี้ก่อน แล้วเราจะมาต่อกันในบทความหน้า ที่จะมาอธิบายเกี่ยวกับ CSS Flexbox เพิ่มเติม
February 28, 2022
วิธีไล่สีตัวอักษรด้วย CSS
ในการสร้างคอนเท้นต์ในเว็บไซต์นั้น บางทีเราต้องการไล่สีให้ตัวอักษรเพื่อความสวยงาม โดยตัวเอกของเราในครั้งนี้จะเป็น
```
background-clip: text;
-webkit-background-clip: text;
```
และสิ่งที่เราใช้ประกอบด้วยคือ การใช้พื้นหลังแบบไล่สี รวมถึงให้ตัวอักษรเราโปร่งใส
```
background: linear-gradient(to right, #40e0d0, #ff8c00, #ff0080);
color: transparent;
```
ตัวอย่างการไล่สีตัวอักษรด้วย CSS

CodePen Embed Fallback
February 18, 2022
วิธีการใช้สีใน 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%)
CodePen Embed Fallback

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

วิธีการใช้สีใน 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 นั้นง่ายในการสื่อสารสำหรับการปรับแต่ง เช่น ขอสีแดงที่สว่างกว่านี้ อยากได้สีน้ำเงินที่อิ่มกว่านี้ หรืออยากได้โทนสีอื่น ที่ยังสว่างแบบเดิม
February 13, 2022
3 CSS Animation ไลบารี่สำหรับนำไปใช้งาน
ในการทำเว็บไซต์นั้น หลายครั้งที่เราต้องการให้ Element นั้นมีการเคลื่อนไหว ซึ่งสามารถศึกษาเพิ่มเติมได้ที่ animation – CSS: Cascading Style Sheets | MDN

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

CSS Animation ไลบารี่

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
February 9, 2022
[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 เอกสารแล้วคลิก

August 27, 2019