Tag: css3

  • [CSS3] ประยุกต์การใช้งานกับ text-shadow

    [CSS3] ประยุกต์การใช้งานกับ text-shadow

    text-shadow นี่เป็น 1 ใน property ของ CSS3 ที่ผมจะมาแนะนำให้ดูกัน ซึ่งตัว text-shadow เป็น property ที่เราอ่านก็รู้เลยว่า เป็นการใส่เงาให้กับตัวอักษร ไปดูกันก่อนว่า ตัว text-shadow ใช้งานยังไง

    CSS3 : วิธีการใช้ text-shadow

    รูปแบบของ value ในการใช้งาน text-shadow ก็เป็นลักษณะแบบนี้

    [CSS3] ประยุกต์การใช้งาน text-shadow [1]

    [css]
    text-shadow: 2px 4px 3px #FF0099;
    [/css]

    โดยค่า value ที่ใช้กับตัว text-shadow นั้นมีดังนี้

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

    จาก css ด้านบน เราจะได้ผลลัพธ์มาแบบนี้ครับ

    [CSS3] ประยุกต์การใช้งานกับ text-shadow [2]

    ในการใส่ค่าสีของเงานั้น เราสามารถใช้แบบ rgba ได้ด้วย การใช้แบบ rgba เพื่อที่เราจะได้สามารถกำหนด opacity ให้กับสีเงาได้ด้วย โดยการใส่ค่า rgba มีลักษณะแบบนี้

    [CSS3] ประยุกต์การใช้งานกับ text-shadow [3]

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

    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]

    [CSS3] ประยุกต์การใช้งานกับ text-shadow [5]

    text-shadow : ทำตัวอักษรแบบ embross

    เราจะทำตัวอักษรแบบ embross ด้วย text-shadow แบบง่าย ๆ อย่างนี้ครับ

    [css]
    color:#CCC;
    text-shadow:-1px -1px #FFFFFF, 1px 1px #333333;
    [/css]

    [CSS3] ประยุกต์การใช้งานกับ text-shadow [6]

    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]

    [CSS3] ประยุกต์การใช้งานกับ text-shadow [7]

    ระหว่างที่เรากำลังดีใจกับการเรียนรู้ text-shadow อยู่นั่น ลองมาดูกันก่อนว่า Browser ไหนใช้งานกันได้บ้าง

    text-shadow กับ browser ที่สนับสนุน

    ผมก็เข้าไปเช็คดูในเว็บ When can I use ก็พบว่า text-shadow ยังไม่สนับสนุนใน IE9 แต่จะสนับสนุนเมื่อถึง IE10

    [CSS3] ประยุกต์การใช้งานกับ text-shadow [8]

    ก่อน IE10 จะมา เราก็คงทำได้แค่ใช้อย่างอื่นแทนกันไปก่อน โดยสำหรับ IE นั้น text-shadow เราจะแทนด้วย

    [css]
    filter: progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=ff0000);
    [/css]

    แต่ผมไม่ขออธิบายถึงมันนะครับ ผมนั่งรอ IE10 แล้วกัน ^^

  • [CSS3] Pseudo-Classes

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

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

    [CSS3] Pseudo-Classes [1]

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

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

    [CSS3] Pseudo-Classes [2]

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

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

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

    [CSS3] Pseudo-Classes [1]

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

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

    [CSS3] Pseudo-Classes [3]

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

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

    [CSS3] Pseudo-Classes [4]

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

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

    [CSS3] Pseudo-Classes [3]

    ซึ่งแบบนี้ก็จะง่ายกว่าที่เราต้องมานับลำดับในแบบของ :nth-child(n) ยังไงก็ลองนำไปใช้งานจริงดูนะครับ จะได้ใช้งานได้คล่อง ๆ

  • [CSS3] Attribute Selectors

    [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] 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 ให้นำไปใช้

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

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

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

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

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