[CSS Tutorial] สอนใช้ CSS3 เบื้องต้น พร้อม Code ตัวอย่าง (ตอน 1)!!
จริง ๆ แล้ว CSS3 ก็ออกมาได้สักพักนึงแล้วครับ แต่ด้วยความที่ต้องอัพเดทเว็บบราวเซอร์ของคุณให้เป็นเวอร์ชั่นใหม่ล่าสุดก่อน ถึงจะเรนเดอร์ CSS3 ได้ (เช่น Mozilla Firefox เวอร์ชั่น 3.6+) เลยยังไม่ค่อยได้รับความนิยมเท่าที่ควรในเว็บไซด์ส่วนใหญ่ครับ และเหตุผลอีกอย่างนึงก็คือคนส่วนใหญ่อาจคิดว่า CSS3 น่าจะใช้ยาก แต่ความจริงแล้วมันก็เป็น CSS เดิมที่เพิ่มฟังก์ชั่นใหม่ ๆ เข้ามาเท่านั้นเองครับ
พอดีผมไปเจอบทความหนึ่งจาก WebdesignerWall ซึ่งสรุปเกี่ยวกับพื้นฐานของ CSS3 ไว้ได้เข้าใจง่ายดีมากครับ เลยแปลบางส่วนมาให้ได้อ่านกัน สำหรับใครที่ยังไม่เชี่ยวชาญพื้นฐาน CSS มากเท่าไร แนะนำให้ไปอ่าน [CSS Tutorial สำหรับมือใหม่] เทคนิค CSS ที่ฉันน่าจะรู้ให้เร็วกว่านี้! [English] กันก่อนครับผม (ยังเป็นภาษาอังกฤษอยู่นะครับ เร็ว ๆ นี้จะแปลเป็นภาษาไทยมาให้ได้อ่านกันครับ)
มาดูกันเลยครับว่า CSS3 มีอะไรใหม่ ๆ บ้าง
RGBA
ปกติน่าจะรู้จัก RGB กันใช่มั้ยครับ เป็นโหมดสีที่ใช้ในงานกราฟฟิกส่วนใหญ่บนคอมพิวเตอร์ ซึ่งสร้างสีโดยประกอบสีจากความแตกต่างในค่า R (Red สีแดง) G (Green สีเขียว) และ B (Blue สีน้ำเงิน) ครับ ทีนี้ใน CSS3 จะมีค่า A เพิ่มขึ้นมาให้ใช้กัน นั่นคือค่า Alpha ครับ
ค่า Alpha นี่พูดให้เข้าใจง่าย ๆ จะใช้อีกคำ คือ Transparency หรือ ค่าความโปร่งใส นั่นเอง โดยแบ่งเป็นค่า
- 0 = โปร่งใสจนมองไม่เห็นอะไรเลย
- 1 = ทึบแสง เห็นทุกอย่าง
ซึ่งค่านี้เราสามารถใส่เป็นทศนิยมได้ ตัวอย่างเช่น:
- background: rgba(255, 255, 255, .5);
จะเห็นว่าผมใส่ .5 ในส่วนของ Alpha ซึ่งจะทำให้สีพื้นหลังใส 50% ครับ
ถ้าเห็นตัวหนังสือตัวนี้ใส ๆ แปลว่าบราวเซอร์คุณรองรับ CSS3 (ไม่งั้นจะเห็นสีดำสนิท)
ฟังก์ชั่น RGBA นี่สามารถใช้ได้ในทุกที่ที่ใช้ RGB ได้ครับ เช่น border, background, outline, etc.
Text Shadow
ต่อไปเป็นความสามารถในการใส่เงาให้ตัวอักษรครับ ใช้ง่าย ๆ แบบนี้เลยครับ:
- text-shadow: (ระยะแกนตั้ง X) (ระยะแกนนอน Y) (ความเบลอ) (สีเงา);
- Example: text-shadow: 2px 2px 3px #000000;
อักษรเงาเป็นแบบนี้ครับ (ถ้าบราวเซอร์เรนเดอร์ CSS3 ได้จะเห็นครับ)
ซึ่ง ระยะแกนตั้ง X กับ ระยะแกนนอน Y นี่ถ้าเป็นบวก เงาจะไปทางด้านขวา-ล่าง แต่ถ้าเป็นค่าติดลบ เงาจะไปทางด้านซ้าย-บน ครับผม และเราสามารถใช้ RGBA ในส่วน สีเงา ได้ด้วยครับ
นอกจากนั้นยังกำหนดเงาได้มากกว่า 1 เงาได้ครับ เช่นตัวอย่างจากเว็บไซด์ WebdesignerWall อันนี้:
ทดสอบตัวอักษรแบบยุบลงไป
ใช้โค้ดนี้ครับ
- text-shadow: 0 1px 0 #FFFFFF, 0 -1px 0 #000000;
จะเห็นว่าใช้เครื่องหมายคอมมา (,) เพื่อแยกการเซ็ตค่าของเงาแต่ละอันครับผม
>> คลิกที่นี่เพื่ออ่านบทความ สอนใช้ CSS3 เบื้องต้น พร้อม Code ตัวอย่าง (ตอน 2)!! <<
สำหรับตอนที่ 1 จะสอน 2 ฟังก์ชั่นนี้ก่อนครับ ใครลองเอาไปใช้แล้วเจอเทคนิคดี ๆ ยังไงก็ลองเอามาแบ่งปันกันครับ ถ้าชอบบทความนี้ก็กดดาว หรือทิ้งคอมเม้นท์ไว้หน่อยครับ ตอบทุกคอมเม้นท์ครับ
แล้วก็อย่าลืมแวะเวียนไปที่ เว็บบอร์ดเว็บดีไซน์ ของเราครับ สามารถทิ้งคำถามเกี่ยวกับเว็บดีไซน์ หรือไปหาความรู้เพิ่มเติมที่มีคนเอาไปโพสไว้ได้ครับ ขอบคุณคร้าบ!
เกี่ยวกับผู้เขียน - DesignIL
- เว็บไซต์ >>
RT: @designil: New Blog post [CSS Tutorial] สอนใช้ CSS3 เบื้องต้น พร้อม Code ตัวอย่าง (ตอน 1)!! http://bit.ly/d213Ew …
แจ๋วดีแหะ
เพิ่งรู้เนี่ยว่า css3 แล้ว ฮ่าๆ
CSS3 นี่เริ่มเก่าแล้วล่ะ แต่คนไม่ค่อยรู้จักกันอยู่ดี T0T
หาเว็บสอนการใข้ css มานานละ ขอบคุณมากเดี๋ยวจะติดตามเรื่อยๆ
ขอคุณครับ
ความรู้ใหม่นะเนี่ย =O=
ขอบคุณที่แวะมานะครับ จะแปลต่อให้เร็ว ๆ นี้ครับ ^^
[...] [CSS Tutorial] สอนใช้ CSS3 เบื้องต้น พร้อม Code ตัวอ… [...]
โหเจ๋งอ่ะเว็ปคุณ อ่านเข้าใจง่ายดี
แหล่ม – - ว่าแต่มันเพิ่มมาแค่ 3 ตัวเนี้ยนะ = =^
อ่าน Part 2 ด้วยน้อ
[...] [CSS Tutorial] สอนใช้ CSS3 เบื้องต้น พร้อม Code ตัวอ… [...]
แล้ว CSS3 กับ การ Validator ล่ะครับ
เวลาเขียนแล้ว
Validator กับ W3C มันก็ยังเกิด Error อยู่
เช่น ฟังก์ชั่น
moz-border-radius, webkit-border-radius
เนื่องจากว่า moz กับ webkit เป็น CSS ที่แยกตามบราวเซอร์ครับ ไม่นับว่าเป็น standard จึงไม่ผ่านการ validate ครับ
อย่างไรก็ตาม เป็นไปได้ว่าในอนาคตบราวเซอร์อื่นจะเรนเดอร์ property: border-radius ได้ครับ อันนี้ก็ต้องรอดูกันต่อไป
สำหรับ property moz กับ webkit ที่เรนเดอร์ไม่ผ่านนี่ผมไม่ค่อยสนใจมากครับ เพราะต่อให้ validate ไม่ผ่านมันก็ช่วยเรื่องการแสดงผลให้ดูดีขึ้นอยู่ดีนะครับ
อยากได้โค้ดที่กำหนดที่เดียว แล้วเราสามารถกำหนดให้ CSS รุ่นเก่า รันบน Browser IE 7 และ 8 ได้ค่ะ ใครพอจะแนะนำได้บ้างคะ
ไม่ได้หรอกครับ
CSS 3.0 ที่รองรับได้ก็ IE8 เท่านั้นครับ
นอกนั้นก็บราวเซอร์ทั่วไป เช่นพวก Firefox 3.5+ ครับ
ยกเว้นจะเขียนคำสั่งขึ้นมาสำรองไว้ เช่นคำสั่ง !important ครับ
สรุปว่า CSS3 ทำงานได้เฉพาะ IE8+ นะคร้าบ ^^
และตามด้วย [CSS Tutorial] สอนใช้ CSS3 เบื้องต้น พร้อม Code ตัวอย่าง (ตอน 1)!! คับ ซึ่งกำลังบรรจบกัน .. http://bit.ly/d6vZxy
[...] และทำอะไรได้บ้าง แนะนำให้ไปลองอ่านบทความสอนพื้นฐาน CSS3 [...]
สอนใช้ CSS3 เบื้องต้น พร้อม Code ตัวอย่าง (ตอน 1) http://is.gd/cUWQS
[...] Validate CSS ไม่ผ่านครับ (ใครอ่านบทความสอน CSS3 ของเราแล้วจะเห็นว่ามีการใช้ CSS [...]
ติดตามเรื่อยๆนะคับเป็นบทความที่ดี
ขอบคุณมากครับ ^^
เนื้อหาอ่านง่ายนะครับ แต่ผมติดปัญหาคือ กำหนดคุณสมบัติ background: rgba(255, 255, 255, .5);
แล้วมันไม่ขึ้น
ทั้งๆที่ browser ที่ เครื่องเป็น IE8 แล้วครับ
ลองดูว่าเปิดใน Firefox แล้วเห็นมั้ยครับ ถ้าใน FF แสดงผลได้ แปลว่า IE8 ยังไม่รองรับครับ
ถ้า FF ไม่แสดงผล แปลว่าโค้ดมีปัญหาครับผม