css3 Archives - กระต่ายดำ ทำ CSS, WordPress

[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 นั้นมีดังนี้

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

จาก 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 แล้วกัน ^^

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

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

: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]

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

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

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

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

อ้าว เฮ้ย ไม่เห็นได้เลย ก็เพราะว่าตัว :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]

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

ตรงกับที่เราต้องการแล้ว แต่แบบนี้มันก็ลำบากนะ ต้องมานับเองว่ามันจะอยู่ในลำดับที่เท่าไหร่ใน 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]

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

จะเห็นว่า 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]

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

ซึ่งแบบนี้ก็จะง่ายกว่าที่เราต้องมานับลำดับในแบบของ :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 คร่าว ๆ ก็ประมาณนี้ครับ

[HTML5 CSS3] Modernizr JavaScript Library สำหรับทำเว็บ HTML5 CSS3

คงน่าเสียดายที่เว็บ HTML5 CSS3 ที่เราทำมามันจะถูกจำกัดให้ Browser เก่า ๆ แสดงผลได้ไม่เหมือนกับที่เราต้องการ ดังนั้นจึงมีตัวช่วยอย่าง Modernizr ออกมา

โดย 1 ในความสามารถของ Modernizr ซึ่งเป็น Javascript Library นั้นจะช่วยเช็คว่า Browser ที่ทำงานอยู่สนับสนุนการทำงานของ HTML5 CSS3 อย่างไรบ้าง เราจะใช้งานในลักษณะแบบนี้

[html]
<script src="js/modernizr.min.js"></script>
[/html]

และกำหนดที่ html ให้มี class เป็นแบบนี้

[html]
<html class="no-js">
[/html]

และเมื่อตัว Modernizr ทำงาน class ของ html ก็จะเปลี่ยนไปเป็นลักษณะแบบนี้ครับ

[html]
<html class="js canvas canvastext geolocation rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions video audio cufon-active fontface cufon-ready">
[/html]

จะเห็นว่า class ที่เปลี่ยนไปนั้น จะบอกถึงคุณสมบัติต่าง ๆ ที่ Browser ตัวนี้สนับสนุน เพื่อที่เราจะได้นำ class เหล่านี้ไปประยุกต์ให้ Browser เก่า ๆ สามารถแสดงผลได้ใกล้เคียงกับที่ Browser รุ่นใหม่ ๆ แสดงผลได้มากที่สุด

รวมเรายังสามารถกำหนดการใช้งานเฉพาะส่วนที่เราต้องการก็ได้ ในรูปแบบนี้ครับ

โดย Modernizr สนับสนุนการทำงานกับ IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome.
บน mobile Modernizr ใช้ได้กับ iOS mobile Safari, Android’s WebKit browser, Opera Mobile, Firefox Mobile และกำลังพัฒนาเพื่อให้สนับสนุน Blackberry 6+

ลองไปศึกษาเพิ่มเติมที่เว็บ : Modernizr เลยครับ

[CSS3] แนะนำเว็บที่มีตัวอย่างการเขียน CSS3 ให้นำไปใช้

คราวนี้มีเว็บมาแนะนำครับ เป็นเว็บที่มีตัวอย่างการเขียน CSS3 ไว้เรียบร้อยให้เราสามารถนำไปปรับใช้งานได้ เว็บนั้นก็คือ CSS3 Click Chart by Impressive Webs ลักษณะของเว็บก็เป็นแบบนี้ครับ

ถ้าเราคลิ๊กที่ วงกลม ? แล้ว จะมีตัวอย่างการใช้งาน และอธิบายรายละเอียดต่าง ๆ อย่างเช่น ผมคลิ๊กที่ Rotation ก็จะปรากฎแบบนี้ครับ

[CSS3] แนะนำเว็บที่มีตัวอย่างการเขียน CSS3 ให้นำไปใช้ [2] — ตัวอย่างการใช้งาน และอธิบายรายละเอียดต่าง ๆ

ทุกคนลองใช้งานดูนะครับ ไม่รู้ว่าจะถูกใจแล้วนำไปปรับใช้งานได้ตามที่ต้องการได้หรือเปล่า ^^

ที่มา : CSS3 Click Chart by Impressive Webs