Rabbitinblack

Blog

  • [CSS] แนะนำ Slide ที่ควรดูเพื่อทำความเข้าใจกับ CSS

    [CSS] แนะนำ Slide ที่ควรดูเพื่อทำความเข้าใจกับ CSS

    เวลาหัดทำ CSS เราคงอยากหาความรู้เพิ่มเติมให้มากที่สุด วันนี้ผมมี Slide มา 5 อัน ดูแล้วน่าจะเข้าใจ CSS มากขึ้นนะครับ (ถ้า Slide ไหนไม่ขึ้น ลอง Refresh หน้านี้ดูใหม่อีกทีนะครับ ^^)

    Efficient, Maintainable CSS

    [slideshare id=569994&doc=efficient4-1219757009650034-8]

    CSS Inheritance

    [slideshare id=1772232&doc=inheritance2-090726204631-phpapp02]

    Line Height

    [slideshare id=1689979&doc=line-height-090707022607-phpapp01]

    CSS System

    [slideshare id=623386&doc=csssystemsslides-1222639135449752-9]

    Object Oriented CSS

    [slideshare id=990405&doc=oocss-1233786987806904-3]
  • [CSS3] แนะนำเว็บที่มีตัวอย่างการเขียน CSS3 ให้นำไปใช้

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

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

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

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

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

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

    ที่มา : CSS3 Click Chart by Impressive Webs
  • [CSS] ข้อแตกต่างระหว่าง width:auto กับ width:100%

    [CSS] ข้อแตกต่างระหว่าง width:auto กับ width:100%

    ในการทำเว็บนั้น เราอาจจะเจอกรณีที่ layout ต้องเปลี่ยนไปตามความกว้าง เช่น เวลาทำเว็บที่เป็น responsive หรือเวลาที่สั่งพิมพ์ทางเครื่องพิมพ์ ตามปรกติแล้ว เราจะเคลียร์ค่า float หรือ width

    โดยการเคลียร์ค่า float นั้น เราก็เพียงสั่ง float:none แต่ในการเคลียร์ค่า width บางคนกลับใช้ width:100% แทนที่จะเป็น width:auto

    โดยพื้นฐานแล้ว บรรดา element ที่มีคุณสมบัติเป็น block อย่างเช่น div หรือ p พวกนี้จะมีความกว้างเป็น auto โดยมาตรฐาน แล้ว width:auto กับ width:100% มันต่างกันยังไง

    width:auto vs width:100%

    วิธีที่ทำให้เราเข้าใจ และเห็นภาพมากที่สุด ก็คือ เขียนให้มันแสดงผลมาให้เราดูครับ งั้นเรามาลองดูกันเลยครับ

    กล่องนี้มีความกว้าง 400px

    กล่องนี้ตั้งความกว้างเป็น width:auto
    มี padding ซ้ายขวา 50px
    มี margin ซ้ายขวา 50px
    และมีกรอบหนา 10px

    กล่องนี้ตั้งความกว้างเป็น width:100%
    มี padding ซ้ายขวา 50px
    มี margin ซ้ายขวา 50px
    และมีกรอบหนา 10px

    width:auto นั้นจะคำนวนมาให้ความกว้างพอดีกับกล่องที่คลุมไว้ โดยความกว้างของสีแดงที่เห็น จะมีค่าเท่ากับ 280px (มีค่า padding ด้านละ 50px รวมอยู่ใน 280px ด้วย) เมื่อรวมกับ border และ margin แล้วจะมีค่าเท่ากับ 400px พอดี แต่ถ้าเราตั้งค่าเป็น width:100% แล้ว ความกว้างของกล่องสีน้ำเงิน จะมีค่าเท่ากับ 500px ซึ่งมาจาก 400px บวกกับ padding ซ้ายขวาอย่างละ 50px ทำให้ตัวกล่องสีน้ำเงิน เกินออกมาจากกล่องสีเทาที่คลุมอยู่

    จากตัวอย่างน่าจะทำให้เข้าใจความแตกต่างระหว่าง width:auto กับ width:100% บ้างนะครับ ยังไงก็ลองเอาไปปรับใช้งานกันนะครับ

  • PhotoSwipe : Image Gallery ใช้กับ Touch Screen

    PhotoSwipe : Image Gallery ใช้กับ Touch Screen

    วันนี้มี Plugin ใช้ทำ Image Gallery สำหรับใช้กับ Touch Screen ได้ มาชมวิดีโอแนะนำตัว PhotoSwipe กันก่อนนะครับ

    PhotoSwipe

    ในเว็บของ PhotoSwipe นั้นได้อธิบายเกี่ยวกับตัว Plugin ตัวนี้ไว้ว่า

    What is it?

    PhotoSwipe is a FREE HTML/CSS/JavaScript based image gallery specifically targeting mobile devices.

    Who is it for?

    Developers and designers requiring an interactive image gallery on their mobile website with the look and feel of a native app.

    Why use it?

    PhotoSwipe provides your visitors with a familiar and intuitive interface allowing them to interact with images on your mobile website.

    ใช้กับมือถือ platform ไหนได้บ้าง

    PhotoSwipe : Image Gallery สำหรับ Touch Screeen [1]

    สำหรับตัว PhotoSwipe นั้นสนับสนุน iOS, Android รวมถึง BlackBerry และใช้งานคู่กับ jQuery หรือ PhoneGap ได้ด้วยครับ

    วิธีการใช้งาน PhotoSwipe

    ดาวน์โหลดตัว PhotoSwipe ที่นี่เลยครับ Download PhotoSwipe หลังจากนั้นก็เพิ่ม code นี้ไปที่ส่วน head นะครับ

    [html]
    <script type="text/javascript" src="klass.min.js"></script>
    <script type="text/javascript" src="code.photoswipe-3.0.4.min.js"></script>
    [/html]

    และเรียกใช้งานโดย

    [javascript]
    // Set up PhotoSwipe with all anchor tags in the Gallery container
    document.addEventListener(‘DOMContentLoaded’, function(){

    var myPhotoSwipe = Code.PhotoSwipe.attach( window.document.querySelectorAll(‘#Gallery a’), { enableMouseWheel: false , enableKeyboard: false } );

    }, false);
    [/javascript]

    แต่ถ้าถนัดเป็น jQuery ก็เรียกใช้งานแบบนี้เลยครับ

    [javascript]
    //jQuery version
    $(document).ready(function(){

    var myPhotoSwipe = $("#Gallery a").photoSwipe({ enableMouseWheel: false , enableKeyboard: false });

    });
    [/javascript]

    และในส่วน HTML เพื่อใช้ประกอบให้ตัว PhotoSwipe ทำงานได้นั้น ก็มีลักษณะแบบนี้ครับ

    [html]
    <ul id="Gallery">
    <li><a href="images/full/01.jpg"><img src="images/thumb/01.jpg" alt="Image 01" /></a></li>
    <li><a href="images/full/02.jpg"><img src="images/thumb/02.jpg" alt="Image 02" /></a></li>
    <li><a href="images/full/03.jpg"><img src="images/thumb/03.jpg" alt="Image 03" /></a></li>
    <li><a href="images/full/04.jpg"><img src="images/thumb/04.jpg" alt="Image 04" /></a></li>
    <li><a href="images/full/05.jpg"><img src="images/thumb/05.jpg" alt="Image 05" /></a></li>
    <li><a href="images/full/06.jpg"><img src="images/thumb/06.jpg" alt="Image 06" /></a></li>
    </ul>
    [/html]

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

    ที่มา : PhotoSwipe
  • [HTML] : HTML Ipsum

    [HTML] : HTML Ipsum

    ในการทำเว็บ เชื่อว่าหลาย ๆ คนต้องรู้จักกับ Lorem Ipsum ถ้าใครยังไม่รู้จักก็ไปดูที่นี่เลยครับ lipsum.com ให้เปรียบเทียบ Lorem Ipsum ก็เหมือนกับข้อความตัวอย่างแบบนี้ครับ

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia, dolor sit amet tincidunt iaculis, lacus est rutrum nibh, at dapibus felis leo sit amet ipsum. In blandit blandit neque non laoreet. Pellentesque eleifend mollis lectus vitae aliquam. Proin diam augue, ultricies vitae viverra sed, aliquet sit amet leo. Fusce sem turpis, eleifend non cursus id, condimentum quis nulla. Nam consectetur feugiat enim, aliquet fermentum quam consectetur eget. In placerat aliquet ipsum, in dictum nisi dapibus ut. Pellentesque nisl mi, tempus non convallis non, porttitor eget neque. Vestibulum pulvinar facilisis diam volutpat volutpat. Nunc adipiscing, quam et tincidunt aliquet, orci velit posuere nisl, a eleifend orci ligula non ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam sodales, urna at sollicitudin vulputate, velit neque aliquam lacus, ac ornare enim sapien nec quam. Nulla dignissim ullamcorper lacus, eget varius metus scelerisque nec. Sed iaculis sodales gravida. Sed aliquam, erat eget semper viverra, sapien urna semper tellus, et suscipit enim nisi ut nisl.

    สำหรับเว็บ lipsum.com นั้น เราก็จะได้เพียงข้อความมาใช้ในเว็บ แต่ผมจะแนะนำอีกเว็บนึงครับนั่นคือ HTML Ipsum

    HTML Ipsum

    สำหรับเว็บ HTML Ipsum นั้น ก็จะมี code สำหรับใช้เป็นตัวอย่าง อย่างเช่น form ตัวอย่าง

    [html]
    <form action="#" method="post">
    <div>
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" value="" tabindex="1" />
    </div>

    <div>
    <h4>Radio Button Choice</h4>

    <label for="radio-choice-1">Choice 1</label>
    <input type="radio" name="radio-choice-1" id="radio-choice-1" tabindex="2" value="choice-1" />

    <label for="radio-choice-2">Choice 2</label>
    <input type="radio" name="radio-choice-2" id="radio-choice-2" tabindex="3" value="choice-2" />
    </div>

    <div>
    <label for="select-choice">Select Dropdown Choice:</label>
    <select name="select-choice" id="select-choice">
    <option value="Choice 1">Choice 1</option>
    <option value="Choice 2">Choice 2</option>
    <option value="Choice 3">Choice 3</option>
    </select>
    </div>

    <div>
    <label for="textarea">Textarea:</label>
    <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
    </div>

    <div>
    <label for="checkbox">Checkbox:</label>
    <input type="checkbox" name="checkbox" id="checkbox" />
    </div>

    <div>
    <input type="submit" value="Submit" />
    </div>
    </form>
    [/html]

    หรือแค่ list ตัวอย่าง

    [html]
    <ul>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
    <li>Vestibulum auctor dapibus neque.</li>
    </ul>
    [/html]

    ถ้าสนใจลองเข้าไปในเว็บ HTML Ipsum เลยครับ

    ที่มา : HTML Ipsum