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

Basic CSS3 Tutorial for Beginners

จริง ๆ แล้ว 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 ฟังก์ชั่นนี้ก่อนครับ ใครลองเอาไปใช้แล้วเจอเทคนิคดี ๆ ยังไงก็ลองเอามาแบ่งปันกันครับ ถ้าชอบบทความนี้ก็กดดาว หรือทิ้งคอมเม้นท์ไว้หน่อยครับ ตอบทุกคอมเม้นท์ครับ

แล้วก็อย่าลืมแวะเวียนไปที่ เว็บบอร์ดเว็บดีไซน์ ของเราครับ สามารถทิ้งคำถามเกี่ยวกับเว็บดีไซน์ หรือไปหาความรู้เพิ่มเติมที่มีคนเอาไปโพสไว้ได้ครับ ขอบคุณคร้าบ!







There are 27 comments

Add yours
  1. TanZEniiZ

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

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

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

    moz-border-radius, webkit-border-radius

  2. เว็บดีไซน์นิล

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

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

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

  3. ao

    อยากได้โค้ดที่กำหนดที่เดียว แล้วเราสามารถกำหนดให้ CSS รุ่นเก่า รันบน Browser IE 7 และ 8 ได้ค่ะ ใครพอจะแนะนำได้บ้างคะ

    • LuviKunG

      ไม่ได้หรอกครับ
      CSS 3.0 ที่รองรับได้ก็ IE8 เท่านั้นครับ
      นอกนั้นก็บราวเซอร์ทั่วไป เช่นพวก Firefox 3.5+ ครับ

      ยกเว้นจะเขียนคำสั่งขึ้นมาสำรองไว้ เช่นคำสั่ง !important ครับ

  4. samat

    เนื้อหาอ่านง่ายนะครับ แต่ผมติดปัญหาคือ กำหนดคุณสมบัติ background: rgba(255, 255, 255, .5);
    แล้วมันไม่ขึ้น
    ทั้งๆที่ browser ที่ เครื่องเป็น IE8 แล้วครับ

    • DesignIL

      ลองดูว่าเปิดใน Firefox แล้วเห็นมั้ยครับ ถ้าใน FF แสดงผลได้ แปลว่า IE8 ยังไม่รองรับครับ

      ถ้า FF ไม่แสดงผล แปลว่าโค้ดมีปัญหาครับผม

  5. เอค่ะ

    อยากแก้ไขเว็บไซต์ตัวเองค่ะ ต้องการเขียนโค้ดเองแต่เขียนไม่เป็น เลยรองเปิดมาดู แต่ไม่เข้าใจสักเท่าไหร่ แต่ของคนเขียนโค้ดนี้สวยดี อยากเอาแบบนี้อะค่ะ ช่วยสอนที

    • designil

      ลองใช้โปรแกรมพวก Dreamweaver ในการช่วยปรับปรุงเว็บครับ ถ้าจำไม่ผิดนี่เวอร์ชั่นใหม่จะรองรับ CSS3 HTML5 แล้วครับผม ^^ สงสัยถามได้ครับ

  6. Misslegretto

    บทความมีประโยชน์มากค่ะ แจ้งลิงค์ผิดนิดนึงนะค่ะ คลิ๊กแล้วยังคงเป็นตอนที่ 1 นะค่ะ>> คลิกที่นี่เพื่ออ่านบทความ สอนใช้ CSS3 เบื้องต้น พร้อม Code ตัวอย่าง (ตอน 2)!! <<


Post a new comment