[CSS Tutorial] สอนใช้ CSS3 เบื้องต้น พร้อม Code ตัวอย่าง (ตอน 1)

designil

จริง ๆ แล้ว 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 ของเราครับ สามารถทิ้งคำถามเกี่ยวกับเว็บดีไซน์ หรือไปหาความรู้เพิ่มเติมที่มีคนเอาไปโพสไว้ได้ครับ ขอบคุณคร้าบ!

designil

designil

Front-end & WordPress Developer ที่ชอบอ่านบทความใหม่ ๆ ตลอดเวลา ชอบ Interactive เป็นชีวิตจิตใจ มีความฝันอยากทำ HTML5 Game ดี ๆ ออกมาสักเกม เขียน HTML / CSS / JS เป็นงานหลัก PHP เป็นงานเสริม
บทความทั้งหมด

5 Responses

  1. แจ๋วดีแหะ

    เพิ่งรู้เนี่ยว่า css3 แล้ว ฮ่าๆ

  2. โหเจ๋งอ่ะเว็ปคุณ อ่านเข้าใจง่ายดี

  3. แล้ว CSS3 กับ การ Validator ล่ะครับ
    เวลาเขียนแล้ว

    Validator กับ W3C มันก็ยังเกิด Error อยู่

    เช่น ฟังก์ชั่น

    moz-border-radius, webkit-border-radius

  4. เนื่องจากว่า moz กับ webkit เป็น CSS ที่แยกตามบราวเซอร์ครับ ไม่นับว่าเป็น standard จึงไม่ผ่านการ validate ครับ

    อย่างไรก็ตาม เป็นไปได้ว่าในอนาคตบราวเซอร์อื่นจะเรนเดอร์ property: border-radius ได้ครับ อันนี้ก็ต้องรอดูกันต่อไป

    สำหรับ property moz กับ webkit ที่เรนเดอร์ไม่ผ่านนี่ผมไม่ค่อยสนใจมากครับ เพราะต่อให้ validate ไม่ผ่านมันก็ช่วยเรื่องการแสดงผลให้ดูดีขึ้นอยู่ดีนะครับ

Leave a Reply

Your email address will not be published. Required fields are marked *

Related posts