Rabbitinblack

Blog

  • [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 คร่าว ๆ ก็ประมาณนี้ครับ

  • [Plugin WordPress] Pinterest Pinboard Widget

    [Plugin WordPress] Pinterest Pinboard Widget

    หลังจากที่เคยแนะนำการใส่ปุ่ม Pin it ของ Pinterest ในเว็บ WordPress ของเราแล้ว ([WordPress] เพิ่มปุ่ม Pin it ของ Pinterest) มาครั้งนี้ก็มาแนะนำ Plugin สำหรับดึงข้อมูลใน Pinboard ของเรามาโชว์ Plugin ตัวนั้นก็คือ

    [Plugin WordPress] Pinterest Pinboard Widget [1]

    หลังจากที่โหลดตัว Plugin มาติดตั้งแล้ว ให้เข้าไปในส่วน Widget เราจะได้พบ Widget ตัวใหม่ ชื่อ Pinterest Pinboard ก็กรอกข้อมูลลงไปนะครับ ว่าจะให้ดึงข้อมูลมาจาก User ไหน

    [Plugin WordPress] Pinterest Pinboard Widget [2]

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

    [Plugin WordPress] Pinterest Pinboard Widget [3]

    Download Plugin ได้ที่ : Pinterest Pinboard Widget
  • [Infographic] iPad 3: ใครจะซื้อ และเหตุผลอะไรถึงซื้อ

    [Infographic] iPad 3: ใครจะซื้อ และเหตุผลอะไรถึงซื้อ

    หลังจากที่มีข่าวว่า iPad3 กำลังจะมานั้น ทาง AYTM Research ได้ทำ Infographic มาในหัวข้อ iPad 3 : Who Will Buy One, and Why? มาดูกันครับ

    iPad3

    จากที่นี่ iPad 3 [Infographic]
  • [WordPress] ปรับแต่งส่วน Contact Info

    [WordPress] ปรับแต่งส่วน Contact Info

    ถ้าเราอยู่ในส่วนของ Dashboard ลองเข้าไปดูที่หัวข้อ Users -> Your Profile นะครับ เราจะพบว่าในส่วนของ Contact Info จะมีช่องให้กรอกข้อมูลแบบนี้

    [Wordpress] ปรับแต่งส่วนของ Contact Info [1]

    แต่ผมคิดว่า เดี๋ยวนี้เนี่ยไอ้เจ้า AIM, Yahoo IM แล้วก็ Jabber มันไม่ค่อยจะมีใครกรอกเท่าไหร่แล้ว

    [Wordpress] ปรับแต่งส่วนของ Contact Info [2]

    มาเปลี่ยนให้มันอินเทรนกันหน่อย เป็นพวก Facebook, Twitter แล้วก็ LinkedIn กันดีกว่านะครับ

    WordPress : ลบ AIM, Yahoo IM และ Jabber แล้วใส่ Facebook, Twitter และ LinkedIn ลงไป

    ให้เราเข้าไปใน functions.php แล้วแปะโค้ดเพิ่มเติมครับ

    [php]
    /* BEGIN Custom User Contact Info */
    function extra_contact_info($contactmethods) {
    unset($contactmethods[‘aim’]);
    unset($contactmethods[‘yim’]);
    unset($contactmethods[‘jabber’]);
    $contactmethods[‘facebook’] = ‘Facebook’;
    $contactmethods[‘twitter’] = ‘Twitter’;
    $contactmethods[‘linkedin’] = ‘LinkedIn’;
    return $contactmethods;
    }
    add_filter(‘user_contactmethods’, ‘extra_contact_info’);
    /* END Custom User Contact Info */
    [/php]

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

    [Wordpress] ปรับแต่งส่วนของ Contact Info [3]

    แถม : วิธีเรียกใช้งานข้อมูลในส่วนที่เราเพิ่มลงไป

    แน่นอนว่า เมื่อเราเปลี่ยนมาใช้เป็น Facebook, Twitter และ LinkedIn ก็อยากมีวิธีที่เรียกใช้งานข้อมูลเหล่านี้ โดยเราใช้โค้ดแบบนี้เพื่อเรียกใช้งาน

    [php]
    <a href="<?php the_author_meta(‘facebook’, $current_author->ID); ?>">Facebook</a>
    <a href="<?php the_author_meta(‘twitter’, $current_author->ID); ?>">Twitter</a>
    <a href="<?php the_author_meta(‘linkedin’, $current_author->ID); ?>">LinkedIn</a>
    [/php]

  • [HTML CSS] บางอย่างที่เราอาจจะยังไม่รู้

    [HTML CSS] บางอย่างที่เราอาจจะยังไม่รู้

    วันนี้ไปเปิดเจอ Slide ของคุณ Chris Coyier เจ้าของเว็บ CSS-Tricks ได้พูดไว้ในหัวข้อ What We Don’t Know เลยเอามาแชร์ให้ได้อ่าน ได้ดูกันนะครับ >_<

    ตามไปอ่านบทความเต็ม ๆ ได้ที่ My Slides from InControl 2012: What We Don’t Know