[CSS] Equal Width Menu (ทำเมนูให้กว้างเท่ากัน)

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

ใช้ display: table

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

See the Pen Equal Width Menu by Sittipong Wiboonsirichai (@rabbitinblack) on CodePen.0

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

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

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

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

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

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

เขียนเกี่ยวกับ CSS มาเยอะแยะ คราวนี้ขอย้อนกลับไกลหน่อย ย้อนกลับมาถึงการเรียกใช้งาน CSS ซึ่งการเรียกใช้งาน CSS นั้นก็มีอยู่ในหลาย ๆ รูปแบบ

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

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

Inline style

ก็คือการเขียนลงไปในตัว tag HTML เลย โดยเรียกใช้ด้วย style="xxx" อย่างเช่น

[html]
<h1 style="font-size:32px;color:#FF0000;">Kwon Yuri</h1>
[/html]

รูปแบบนี้คือการใช้งานแบบ Inline style เป็นการกำหนดให้เฉพาะตัวนี้ มีคุณสมบัติดังที่เรากำหนดให้

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

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

อย่างเช่น

[html]
<head>
<style> h1 { font-size:32px; color:#FF0000; } </style>
</head>
[/html]

เรียกจาก file โดยใช้ <link>

ให้สร้าง file css ขึ้นมา ในนั้นก็เขียน CSS กำหนดคุณสมบัติให้ตัว element ต่าง ๆ ตามที่เราต้องการ แล้วก็ใช้ >link< เพื่อเรียก file CSS ที่เราสร้างขึ้นมาใช้งาน อย่างเช่น ผมสร้าง style.css แล้ววางไว้ในตำแหน่งชั้นเดียวกับตัว index.html ของเรา ก็เรียกโดย

[html]
<head>
<link rel="stylesheet" href="style.css" />
</head>
[/html]

แต่ก่อนจะทำความเข้าใจเรื่องการเรียกใช้งานมากขึ้นกว่านี้ แนะนำให้ไปอ่านหัวข้อ CSS : ลำดับความสำคัญของ style ใน CSS ก่อนเพื่อทำความเข้าใจเรื่อง ID และ Class ใน tag HTML

หลังจากที่เรียนรู้เรื่องเกี่ยวกับ ID และ Class เสร็จแล้ว คราวนี้เรามาดูกันนะครับ ว่าจะนำไปใช้กับ CSS ได้อย่างไรบ้าง

[html]
<h1 id="heading1" class="title1">Kwon Yuri</h1>
[/html]

ถ้าเรามี element ที่มี ID และ Class แบบนี้ เราสามารถกำหนดคุณสมบัติให้ได้แบบนี้ครับ

[css]
h1 { font-size:32px; color:#FF0000; } // ใช้ชื่อ Tag HTML
#heading1 { font-size:32px; color:#FF0000; } // ใช้ชื่อ ID
.title1 { font-size:32px; color:#FF0000; } // ใช้ชื่อ Class
[/css]

ซึ่งจากบทความที่ให้ไปอ่านมาก่อนนั้น เราก็จะเข้าใจอยู่แล้ว ในแต่ละแบบมันต่างกันอย่างไร ตัวไหนสำคัญกว่ากัน

[CSS3] ประยุกต์การใช้งานกับ text-shadow

text-shadow นี่เป็น 1 ใน property ของ CSS3 ที่ผมจะมาแนะนำให้ดูกัน ซึ่งตัว text-shadow เป็น property ที่เราอ่านก็รู้เลยว่า เป็นการใส่เงาให้กับตัวอักษร ไปดูกันก่อนว่า ตัว text-shadow ใช้งานยังไง

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

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

[CSS3] ประยุกต์การใช้งาน text-shadow [1]

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

โดยค่า value ที่ใช้กับตัว text-shadow นั้นมีดังนี้

  1. ค่าตัวแรก เป็นระยะห่างที่เงานั้นห่างจากตัวอักษรเป็นระยะเท่าไหร่ในแนวนอน
  2. ค่าตัวที่สอง เป็นระยะห่างที่เงานั้นห่างจากตัวอักษรเป็นระยะเท่าไหร่ในแนวตั้ง
  3. ค่าตัวที่สาม เป็นความเบลอของเงา หรือ blur radius ยิ่งค่ามาก เงาก็จะยิ่งเบลอขึ้น
  4. ค่าตัวสุดท้าย สีของเงา เราต้องการสีของเงาเป็นสีอะไร ก็ใส่ลงไปเลยครับ

จาก css ด้านบน เราจะได้ผลลัพธ์มาแบบนี้ครับ

[CSS3] ประยุกต์การใช้งานกับ text-shadow [2]

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

[CSS3] ประยุกต์การใช้งานกับ text-shadow [3]

[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 [4]

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]

[CSS3] ประยุกต์การใช้งานกับ text-shadow [5]

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

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

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

[CSS3] ประยุกต์การใช้งานกับ text-shadow [6]

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]

[CSS3] ประยุกต์การใช้งานกับ text-shadow [7]

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

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

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

[CSS3] ประยุกต์การใช้งานกับ text-shadow [8]

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

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

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

[CSS3] Pseudo-Classes

ผมจะเริ่มโดยใช้ HTML ตัวนี้นะครับ

[html]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pseudo-Classes</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div id="post">
<h3 class="post_text">ABC</h3>
<p class="post_text">ABC</p>
<h3 class="post_text">ABC</h3>
<p class="post_text">ABC</p>
<h3 class="post_text">ABC</h3>
<p class="post_text">ABC</p>
<h3 class="post_text">ABC</h3>
<p class="post_text">ABC</p>
<h3 class="post_text">ABC</h3>
<p class="post_text">ABC</p>
</div>
</body>
</html>
[/html]

Pseudo-Classes :root

สำหรับ :root ผมรู้สึกว่า มันทำหน้าที่ selector เหมือนกับเราสั่งกับ body อะไรแบบนั้นอะครับ อย่างเช่น

[css]
:root {background:pink;}
[/css]

เราเลยได้ผลลัพธ์ออกมาเป็นแบบนี้ครับ

[CSS3] Pseudo-Classes [1]

:root มันคือการเลือก root ของตัว document ซึ่งผลที่ได้ก็คือ หน้าเว็บของเรามีพื้นหลังเป็นสีชมพู

Pseudo-Classes :nth-child(n)

สำหรับตัว :nth-child(n) นั้น มันก็คือการเลือกลำดับที่นั่นละครับ อย่างเช่นเราต้องการให้ตัว element ลำดับที่ 4 ใน id post มีขนาดตัวอักษรใหญ่ขึ้น แล้วเป็นสีเขียว เราก็เขียนไปว่า

[css]
#post :nth-child(4) {font-size:30px;color:green;}
[/css]

ผลลัพธ์ที่ได้ออกมาก็จะเป็น

[CSS3] Pseudo-Classes [2]

แล้วถ้าเราจะเลือกเป็น tag h3 ที่อยู่ในลำดับที่ 4 ใน id post ละ งั้นก็เขียนแบบนี้แล้วกัน

[css]
#post h3:nth-child(4) {font-size:30px;color:green;}
[/css]

ผลลัพธ์ออกมาเราก็จะได้ tag h3 ลำดับที่ 4 มีขนาดใหญ่ขึ้น เป็นสีเขียว

[CSS3] Pseudo-Classes [1]

อ้าว เฮ้ย ไม่เห็นได้เลย ก็เพราะว่าตัว :nth-child(4) นั้น มันจะวิ่งดูใน id post ว่าตัวไหนเป็นลำดับที่ 4 แล้วค่อยมาดูว่าลำดับที่ 4 ตรงกับ selector ที่เรากำหนดไว้หรือเปล่า ซึ่งในตัวอย่างลำดับที่ 4 มันต้องเป็น tag p ไม่ใช่ tag h3 ดังนั้นมันเลยไม่แสดงผลที่เรากำหนด

ดังนั้นถ้าเราต้องการให้ tag h3 ในลำดับที่ 4 มันแสดงผลแบบที่เราต้องการ ก็ต้องนับก่อนมันอยู่ลำดับที่เท่าไหร่ใน id post ซึ่งเราก็จะได้ว่า

[css]
#post h3:nth-child(7) {font-size:30px;color:green;}
[/css]

คราวนี้มาดูผลลัพธ์ว่าตรงกับที่เราต้องการมั้ย

[CSS3] Pseudo-Classes [3]

ตรงกับที่เราต้องการแล้ว แต่แบบนี้มันก็ลำบากนะ ต้องมานับเองว่ามันจะอยู่ในลำดับที่เท่าไหร่ใน id post มันน่าจะมีวิธีที่ง่ายกว่า ซึ่งมันก็มีครับคือการใช้ :nth-of-type(n)

Pseudo-Classes :nth-of-type(n)

สำหรับ :nth-of-type(n) นั้นจะแบ่งตามประเภทของ element เลยครับ อย่างเช่น เราจะเลือกลำดับที่ 3 นะครับ

[css]
#post :nth-of-type(3) {font-size:30px;color:green;}
[/css]

เราก็จะได้ผลลัพธ์ออกมาเป็น

[CSS3] Pseudo-Classes [4]

จะเห็นว่า tag h3 และ tag p ที่อยู่ในลำดับที่ 3 เป็นตัวใหญ่สีเขียวทั้งคู่ เพราะว่ามันแบ่งแยกลำดับตาม element

คราวนี้จากตัวอย่างของหัวข้อที่แล้ว เราจะมาเลือก tag h3 ลำดับที่ 4 กันใหม่ โดยใช้ :nth-of-type(n) แทนตัว :nth-child(n)

[css]
#post h3:nth-of-type(4) {font-size:30px;color:green;}
[/css]

ผลลัพธ์ที่ได้ก็จะเป็น

[CSS3] Pseudo-Classes [3]

ซึ่งแบบนี้ก็จะง่ายกว่าที่เราต้องมานับลำดับในแบบของ :nth-child(n) ยังไงก็ลองนำไปใช้งานจริงดูนะครับ จะได้ใช้งานได้คล่อง ๆ

[CSS3] Attribute Selectors

ใน CSS2 นั้นก็มีตัว Attribute Selectors ให้เราใช้งานอยู่แล้ว ส่วนใน CSS3 นั้นได้เพิ่มเติม Attribute Selectors เข้ามาอีก 3 แบบ ได้แก่

[css]
E[foo^="bar"] // E element ที่ค่า attribute "foo" มีค่าเริ่มต้นด้วย "bar"
E[foo$="bar"] // E element ที่ค่า attribute "foo" มีค่าปิดท้ายด้วย "bar"
E[foo*="bar"] // E element ที่ค่า attribute "foo" มีค่า "bar" อยู่
[/css]

ตัวอย่างการใช้งานนะครับ อย่างเช่น

[css]
img[src$=".png"] { border:5px solid red; }
a[href*="google"] {padding-left:20px;background:url(images/google.png) no-repeat left top; }
[/css]

ตัวอย่างแรกคือ ให้ดูว่ารูปภาพของเราเป็นนามสกุลอะไร ถ้าเป็น png เมื่อไหร่ ให้ตีกรอบรูปด้วยความหนา 5px เป็นเส้นทึบสีแดง

ตัวอย่างที่สองคือ ถ้าเมื่อไหร่ลิงก์ของเรามีคำว่า google อยู่ภายใน attribute “href” ก็ให้ดึงรูปมาโชว์เป็นเหมือน icon ทางด้านซ้ายของคำ

หลักการใช้งานตัว Attribute Selectors คร่าว ๆ ก็ประมาณนี้ครับ