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

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




About Author

28 Comments

  • Neko-nero-ro
    Posted March 4, 2010 10:24 am 0Likes

    แจ๋วดีแหะ

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

  • Designil
    Posted March 4, 2010 5:42 pm 0Likes

    CSS3 นี่เริ่มเก่าแล้วล่ะ แต่คนไม่ค่อยรู้จักกันอยู่ดี T0T

  • gps navigator
    Posted March 5, 2010 8:48 pm 0Likes

    หาเว็บสอนการใข้ css มานานละ ขอบคุณมากเดี๋ยวจะติดตามเรื่อยๆ

  • tonkung
    Posted March 5, 2010 8:51 pm 0Likes

    ขอคุณครับ

  • KOTZHUL
    Posted March 5, 2010 10:34 pm 0Likes

    ความรู้ใหม่นะเนี่ย =O=

  • เว็บดีไซน์นิล
    Posted March 6, 2010 12:03 am 0Likes

    ขอบคุณที่แวะมานะครับ จะแปลต่อให้เร็ว ๆ นี้ครับ ^^

  • wat007
    Posted March 9, 2010 12:14 am 0Likes

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

  • LuviKunG
    Posted March 13, 2010 4:08 pm 0Likes

    แหล่ม – – ว่าแต่มันเพิ่มมาแค่ 3 ตัวเนี้ยนะ = =^

  • admin
    Posted March 14, 2010 11:17 pm 0Likes

    อ่าน Part 2 ด้วยน้อ

  • TanZEniiZ
    Posted April 16, 2010 9:15 am 0Likes

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

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

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

    moz-border-radius, webkit-border-radius

  • เว็บดีไซน์นิล
    Posted April 16, 2010 6:52 pm 0Likes

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

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

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

  • ao
    Posted May 10, 2010 11:12 pm 0Likes

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

    • LuviKunG
      Posted May 26, 2010 9:56 pm 0Likes

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

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

      • DesignIL
        Posted May 26, 2010 10:06 pm 0Likes

        สรุปว่า CSS3 ทำงานได้เฉพาะ IE8+ นะคร้าบ ^^

  • BTHOEN
    Posted May 28, 2010 12:44 pm 0Likes

    และตามด้วย [CSS Tutorial] สอนใช้ CSS3 เบื้องต้น พร้อม Code ตัวอย่าง (ตอน 1)!! คับ ซึ่งกำลังบรรจบกัน .. https://bit.ly/d6vZxy

  • NISMO
    Posted June 24, 2010 9:28 am 0Likes

    ติดตามเรื่อยๆนะคับเป็นบทความที่ดี

    • DesignIL
      Posted June 24, 2010 10:57 am 0Likes

      ขอบคุณมากครับ ^^

  • samat
    Posted July 8, 2010 3:19 pm 0Likes

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

    • DesignIL
      Posted July 9, 2010 9:42 am 0Likes

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

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

  • shockfm
    Posted September 24, 2010 9:12 pm 0Likes

    IE เลิกใช้กันได้แล้ว – -”

    thanks 😀

  • เอกคับ
    Posted November 5, 2010 2:34 am 0Likes

    เหอะๆๆ ถูก

  • เอค่ะ
    Posted February 26, 2011 10:50 pm 0Likes

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

    • designil
      Posted March 1, 2011 8:39 pm 0Likes

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

  • วิตามิน
    Posted April 18, 2011 3:47 am 0Likes

    browser มันไม่ซัพพอร์ท T T คงต้องรอ ms ออก windows ตัวใหม่มานู้น กว่าจะเป็นที่นิยม 55+

    • Designil
      Posted April 18, 2011 11:01 pm 0Likes

      หมายถึงตัวไหนครับ IE8-9 ตัวใหม่น่าจะเริ่มซัพพอร์ทแล้วนะคร้าบ ^^

  • Misslegretto
    Posted December 2, 2011 6:31 am 0Likes

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

  • Trackback: [CSS Tutorial] สอนใช้ CSS3 เบื้องต้น พร้อม Code ตัวอย่าง (ตอน 2) - Designil

Leave a comment