web technology

แหล่งความรู้ทางด้านเว็บไซต์สมัยใหม่ ทั้ง css, html และ jquery หรือเทคนิควิธีการต่างๆ ในการทำเว็บไซต์

การทำยันต์ 5 แถวสำหรับ bootstrap 3

ผมใช้ bootstrap บ่อยมากเรียกได้ถ้าจะทำเว็บ responsive ผมจะเลือก bootstrap เป็นตัวแรกเสมอในการทำ ตัว bootstrap นั้นมีระบบ grid system มาให้ใช้เลย โดยเราสามารถสร้างเนื้อหาได้หลากหลาย columm (แถว) แต่ผมติดปัญหาที่ว่าอยากทำยันต์ 5 แถว (ฮาๆ) เพื่อใช้ในการแสดงผล 5 column ฉะนั้นเราก็ต้องเพิ่ม class ให้กับมัน วิธีเพิ่มการแสดงผล 5 แถว (column) ใน…
อ่านต่อ

คำสั่ง CSS ที่คุณคิดไม่ถึงว่ามันมีด้วยหรอ?

จริงๆ แล้วคำสั่ง CSS มีเยอะมาก โดยตัวที่ผมจะกล่าวถึงในครั้งนี้ผมว่าถ้านำมาใช้งานก็มีประโยชน์ไม่น้อย แต่ปัญหาก็คือรองรับเฉพาะบราวเซอร์บ้างเวอร์ชั่นเท่านั้น เรามาดูกันว่ามีตัวไหนน่าสนใจบ้าง Frist line [css]::first-line { }[/css] ตัวนี้จะเป็นการเลือกเฉพาะบรรทัดแรกใน paragraph หรือ element นั้นๆ HTML [code]Lorem ipsum dolor sit amet, consectetur…
อ่านต่อ

8 CSS3 Selectors ที่คุณต้องรู้จักมัน

Selector คือ HTML elements หรือ elements ที่ CSS Rule นำไปใช้เพื่อกำหนดค่าต่างๆ เช่น สี ขนาดกว้างสูง เป็นต้น ผมคงไม่อธิบายลงลึกมากนะครับ เพราะวันนี้ผมจะมาพูดถึง selector ของ CSS3 โดยเฉพาะที่เพิ่มเข้ามา ถ้าเรารู้จักวิธีใช้มันจะทำให้เราเขียน CSS สนุกขึ้นอีก เรามาดูกันว่ามีอะไรบ้าง E[foo^="bar"] E คือ html element , foo คือ attribute (id…
อ่านต่อ

หา latitude และ longitude ใน new google map

พอดีผมจะเอาแผนที่ google map ไปติดไว้ในเว็บของบริษัท และได้ลองไปเล่นกับ google map api ดูพบว่ามันต้องเรียกใช้ค่า latitude และ longitude ของสถานที่นั้นๆ ผมเลยไปหาวิธีมาว่าเราจะดูค่า latitude และ longitude ตรงจุดนั้นได้อย่างไรกัน วิธีดูค่า latitude และ longitude ใน new google map  เปิดเว็บ google map และไปยังตำแหน่งที่เราต้องการ…
อ่านต่อ

วิธีแก้ไขเมื่อเราใส่ youtube ในเว็บแล้วมันลอยเหนือทุกๆ element

หลายๆ คนคงเจอปัญหาที่ว่าเมื่อเวลาเราใส่ลิงค์ iframe ของ youtube ลงไปในเว็บเราแล้วเนี้ย ตัว iframe ของ youtube มันจะการเหมือนกำหนด z-index ให้มันอยู่บนสุดตลอด ซึ่งผมใช้ drupal ก็จะรำคาญมาก เพราะเวลาที่จะเข้าในส่วนของ admin มันจะเป็น overlay lightbox ขึ้นมา แต่เจ้ากรรม youtube จะต้องมาบังการแสดงผลตลอด T.T ตัวอย่างจากภาพด้านบน…
อ่านต่อ

CSS3 Help Sheet

CSS3 หรือ Cascading Style Sheets level 3 จะกลายเป็นมาตราฐานใหม่ของ CSS ในอนาคตแน่ครับ ซึ่งถ้าใครลองเล่นแล้วจะพบว่าทำให้การทำงานของพวก designer นั้นสะดวกมากขึ้น มี selector เพิ่มขึ้นมาเยอะพอสมควร โดยหลักๆที่ผมใช้งานตอนนี้ก็คงจะเป็น border-radius (ทำขอบมน) และ text-shadow (เงาของตัวอักษร) ซึ่งจะเห็นได้อย่างชัดเลยครับว่าถ้า CSS2…
อ่านต่อ

html5 cheat sheet

เป็นคู่มือ HTML5 นะครับโดยจะบอกรายละเอียดของ tag ต่างที่ใช้งานใน HTML5 ซึ่ง HTML5 ก็คือมาตราฐานใหม่ในอนาคตสำหรับ html นะครับ โดยจะมีการเปลี่ยนแปลงสำคัญๆ ใน HTML 5 คือ element ใหม่ๆ ที่ใช้งานเจาะจงและมีความหมายในตัวของมันเอง ต่างจากแต่ก่อนที่เราใช้ div ในการจัดเรียง layout ส่วนใครสงสัยก็ตามไปอ่านได้ที่ Preview of HTML5 ได้ครับมีภาพประกอบเข้าใจง่าย…
อ่านต่อ

Web Design Photoshop Layout 2010

วันนี้ผมไปเจอเว็บไซต์ที่เขารวบรวม template website แนวเว็บ 2.0 โดยเป็น Photoshop สวยงามมากครับมีหลากหลายแนวดี เหมาะสำหรับคนที่คิดไม่ออกว่าหน้าเว็บเราจะออกมาเป็นแบบไหน โดยเขาจะสอนทำ photoshop แบบ step by step กันเลยทีเดียว มีทั้งหมด 60 แบบครับ 1. Portfolio Layout 2. Web Hosting Layout 3. Business Layout เพิ่มเติมครับ : 60 Web Design Photoshop…
อ่านต่อ

The Best jQuery Plugins of 2009

ร่วมรวม plugin jquery ยอดนิยมในปี 2009 ลองนำไปใช้งานดูนะครับรับรองว่าเว็บเราจะเท่มากขึ้นอีกสองเท่า via : http://webdesignledger.com/resources/the-best-jquery-plugins-of-2009
อ่านต่อ

ใส่ flash ในเว็บให้ผ่าน validate html

วิธีการทำเว็บให้ถูกต้องโดยผ่านการ validate กับ w3c นั่นไม่ยากเลยครับ โดยที่พลาดกันบ่อยๆก็คงจะเป็นการเพิ่มหรือใส่ flash เข้าไปในเว็บเราเพื่อทำ banner หรืออะไรก็แล้วแต่ โดยถ้ายังใช้ embed tag ในการใส่ flash ลงไปในเว็บเรา พอเราไป validate กับ w3c ก็คงไม่ผ่าน [php] [/php] และก็อาจเจอ error ดังรูป และนี่คือ code ที่จะใส่ flash…
อ่านต่อ