Category: CSS HTML

เนื้อหาเกี่ยวกับ CSS และ HTML

วิธีการใช้สีใน 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
[CSS] Equal Width Menu (ทำเมนูให้กว้างเท่ากัน)

Equal Width Menu หรือการทำให้เมนูกว้างเท่ากันนั้น แต่ละคนคงมีวิธีทำที่แตกต่างกันไป ผมก็ไปเจอมาวิธีนึงซึ่งง่ายๆ เลย ใช้แค่ CSS ก็เรียบร้อยแล้ว

ใช้ display: table

วิธีนี้ก็เป็น 1 ในผลพลอยได้ที่เราไม่ต้องไปห่วงอีเจ้า IE6 ดูได้จาก Can I use : CSS Table display เจ้าตัว display: table เนี่ย มันสนับสนุนแบบเต็มรูปแบบใน IE8 ขึ้นไป โดยเราจะนำมาประยุกต์ใช้งานกับการทำเมนู

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”AJDfh” default_tab=”result”]See the Pen Equal Width Menu by Sittipong Wiboonsirichai (@rabbitinblack) on CodePen.[/codepen_embed]

การทำเมนูด้วยวิธีนี้ เป็นการประยุกต์คุณสมบัติการแสดงผลของตารางมาใช้งาน เพียงแค่เราไม่ได้ใช้ tag <table> เท่านั้นเอง

โดย display: table เปรียบเสมือน <table>
และ display: table-cell เปรียบเสมือน <td>

อีกตัวที่สำคัญคือ table-layout: fixed โดยปรกติแล้ว tag <table> จะมีค่าพื้นฐานเป็น table-layout: auto โดยทั้งสองอย่างแตกต่างกันที่

table-layout: auto จะปรับความกว้างของแต่ละช่องตามเนื้อหาในช่องนั้นๆ
table-layout: fixed ความกว้างแต่ละช่องจะถูกแบ่งให้อย่างเท่าๆ กัน ถ้าเนื้อหาในช่องนั้นมีความยาวมากกว่าความกว้างของช่อง ช่องนั้นจะถูกเพิ่มความสูงแทน

แต่วิธีนี้เองก็มีข้อเสียตรงที่ ถ้าเมนูของเรามีช่องไหนที่สูงมากกว่าช่องอื่น ตอน hover จะเจอช่องว่างในช่องที่สูงน้อยกว่า

July 7, 2014
[CSS] พื้นฐานการเรียกใช้งาน CSS
เขียนเกี่ยวกับ CSS มาเยอะแยะ คราวนี้ขอย้อนกลับไกลหน่อย ย้อนกลับมาถึงการเรียกใช้งาน CSS ซึ่งการเรียกใช้งาน CSS นั้นก็มีอยู่ในหลาย ๆ รูปแบบ

พื้นฐานการเรียกใช้งาน CSS

เรามาดูการเรียกใช้งานแบบหลัก ๆ ที่เห็นกันบ่อย ๆ นะครับ ก็จะมี Inline style, เขียนใน >head< หรือเขียนเรียกจาก >link<

Inline style

ก็คือการเขียนลงไปในตัว tag HTML เลย โดยเรียกใช้ด้วย style="xxx" อย่างเช่น
```
<h1 style="font-size:32px;color:#FF0000;">Kwon Yuri</h1>
```
รูปแบบนี้คือการใช้งานแบบ Inline style เป็นการกำหนดให้เฉพาะตัวนี้ มีคุณสมบัติดังที่เรากำหนดให้

เขียนลงไปใน <head>

ก็คือการกำหนดคุณสมบัติให้ element ตัวไหน มีคุณสมบัติตามที่เรากำหนด โดยคลุมด้วย <style></style>

อย่างเช่น
```
<head>
  <style> h1 { font-size:32px; color:#FF0000; } </style>
</head>
```
เรียกจาก file โดยใช้ <link>

ให้สร้าง file css ขึ้นมา ในนั้นก็เขียน CSS กำหนดคุณสมบัติให้ตัว element ต่าง ๆ ตามที่เราต้องการ แล้วก็ใช้ >link< เพื่อเรียก file CSS ที่เราสร้างขึ้นมาใช้งาน อย่างเช่น ผมสร้าง style.css แล้ววางไว้ในตำแหน่งชั้นเดียวกับตัว index.html ของเรา ก็เรียกโดย
```
<head>
  <link rel="stylesheet" href="style.css" />
</head>
```
แต่ก่อนจะทำความเข้าใจเรื่องการเรียกใช้งานมากขึ้นกว่านี้ แนะนำให้ไปอ่านหัวข้อ CSS : ลำดับความสำคัญของ style ใน CSS ก่อนเพื่อทำความเข้าใจเรื่อง ID และ Class ใน tag HTML

หลังจากที่เรียนรู้เรื่องเกี่ยวกับ ID และ Class เสร็จแล้ว คราวนี้เรามาดูกันนะครับ ว่าจะนำไปใช้กับ CSS ได้อย่างไรบ้าง
```
<h1 id="heading1" class="title1">Kwon Yuri</h1>
```
ถ้าเรามี element ที่มี ID และ Class แบบนี้ เราสามารถกำหนดคุณสมบัติให้ได้แบบนี้ครับ
```
// ใช้ชื่อ Tag HTML
h1 {
  font-size: 32px;
  color: #FF0000;
}

// ใช้ชื่อ ID
#heading1 {
  font-size: 32px;
  color: #FF0000;
}

// ใช้ชื่อ Class
.title1 {
  font-size: 32px;
  color: #FF0000;
}
```
ซึ่งจากบทความที่ให้ไปอ่านมาก่อนนั้น เราก็จะเข้าใจอยู่แล้ว ในแต่ละแบบมันต่างกันอย่างไร ตัวไหนสำคัญกว่ากัน
April 23, 2012
[CSS3] ประยุกต์การใช้งานกับ text-shadow
text-shadow นี่เป็น 1 ใน property ของ CSS3 ที่ผมจะมาแนะนำให้ดูกัน ซึ่งตัว text-shadow เป็น property ที่เราอ่านก็รู้เลยว่า เป็นการใส่เงาให้กับตัวอักษร ไปดูกันก่อนว่า ตัว text-shadow ใช้งานยังไง

CSS3 : วิธีการใช้ text-shadow

รูปแบบของ value ในการใช้งาน text-shadow ก็เป็นลักษณะแบบนี้

[css]
text-shadow: 2px 4px 3px #FF0099;
[/css]

โดยค่า value ที่ใช้กับตัว text-shadow นั้นมีดังนี้
1. ค่าตัวแรก เป็นระยะห่างที่เงานั้นห่างจากตัวอักษรเป็นระยะเท่าไหร่ในแนวนอน
2. ค่าตัวที่สอง เป็นระยะห่างที่เงานั้นห่างจากตัวอักษรเป็นระยะเท่าไหร่ในแนวตั้ง
3. ค่าตัวที่สาม เป็นความเบลอของเงา หรือ blur radius ยิ่งค่ามาก เงาก็จะยิ่งเบลอขึ้น
4. ค่าตัวสุดท้าย สีของเงา เราต้องการสีของเงาเป็นสีอะไร ก็ใส่ลงไปเลยครับ
จาก css ด้านบน เราจะได้ผลลัพธ์มาแบบนี้ครับ

ในการใส่ค่าสีของเงานั้น เราสามารถใช้แบบ rgba ได้ด้วย การใช้แบบ rgba เพื่อที่เราจะได้สามารถกำหนด opacity ให้กับสีเงาได้ด้วย โดยการใส่ค่า rgba มีลักษณะแบบนี้

[css]
text-shadow: 2px 4px 3px rgba(255,0,153,1);
[/css]

โดยค่าที่ใส่ให้กับสีนั้น เราใส่ค่าได้ตั้งแต่ 0 – 255 และค่าสุดท้าย opacity นั้นใส่ค่าได้ตั้งแต่ 0 – 1

ถ้าเราลองปรับค่า opacity ดู แล้วเทียบกันจะได้แบบนี้ครับ

[css]
text-shadow: 2px 4px 3px rgba(255,0,153,1);
text-shadow: 2px 4px 3px rgba(255,0,153,0.5);
[/css]

CSS3 : ใส่เงาหลาย ๆ ชั้น

การใช้ text-shadow นั้น เราสามารถใส่ค่าให้ได้มากกว่า 1 ชั้น โดยแต่ละชั้นนั้น เราจะคั่นด้วย , อย่างเช่น

[css]
text-shadow: 3px 3px 5px #777, -2px -3px 7px #FF0000;
[/css]

หรือ

[css]
text-shadow:0px 0px 4px #FFFFFF, 0px -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200;
[/css]

คราวนี้เราลองมาประยุกต์ใช้งานแบบง่าย ๆ ดูนะครับ

text-shadow : ทำตัวอักษรแบบ inset

เราจะทำตัวอักษรแบบ inset ด้วย text-shadow แบบง่าย ๆ อย่างนี้ครับ

[css]
color: #CCC;
text-shadow : 0px -1px 1px #000;
[/css]

text-shadow : ทำตัวอักษรแบบ embross

เราจะทำตัวอักษรแบบ embross ด้วย text-shadow แบบง่าย ๆ อย่างนี้ครับ

[css]
color:#CCC;
text-shadow:-1px -1px #FFFFFF, 1px 1px #333333;
[/css]

text-shadow : ทำตัวอักษรแบบไฟนีออน

เราจะทำตัวอักษรแบบไฟนีออน ด้วย text-shadow แบบง่าย ๆ อย่างนี้ครับ

[css]
color:#ffffff;
text-shadow:0 0 1px #ffffff, 0 0 2px #ffffff, 0 0 3px #ffffff, 0 0 4px #ff00de, 0 0 7px #ff00de, 0 0 8px #ff00de, 0 0 10px #ff00de, 0 0 15px #ff00de;
[/css]

ระหว่างที่เรากำลังดีใจกับการเรียนรู้ text-shadow อยู่นั่น ลองมาดูกันก่อนว่า Browser ไหนใช้งานกันได้บ้าง

text-shadow กับ browser ที่สนับสนุน

ผมก็เข้าไปเช็คดูในเว็บ When can I use ก็พบว่า text-shadow ยังไม่สนับสนุนใน IE9 แต่จะสนับสนุนเมื่อถึง IE10

ก่อน IE10 จะมา เราก็คงทำได้แค่ใช้อย่างอื่นแทนกันไปก่อน โดยสำหรับ IE นั้น text-shadow เราจะแทนด้วย

[css]
filter: progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=ff0000);
[/css]

แต่ผมไม่ขออธิบายถึงมันนะครับ ผมนั่งรอ IE10 แล้วกัน ^^
March 17, 2012