jQuery, Ajax, PHP, JSON, XML, Web Technologies » CSS http://blog.chonla.com คุยกันเรื่อง jQuery, Ajax, PHP, JSON, XML และ Web Technologies เป็นภาษาไทยกันดีกว่า Tue, 17 Jan 2012 18:27:02 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 พิมพ์ไปทำตัวใหญ่ไปไม่ยากอย่างที่คิด http://blog.chonla.com/2011/12/%e0%b8%9e%e0%b8%b4%e0%b8%a1%e0%b8%9e%e0%b9%8c%e0%b9%84%e0%b8%9b%e0%b8%97%e0%b8%b3%e0%b8%95%e0%b8%b1%e0%b8%a7%e0%b9%83%e0%b8%ab%e0%b8%8d%e0%b9%88%e0%b9%84%e0%b8%9b%e0%b9%84%e0%b8%a1%e0%b9%88%e0%b8%a2/ http://blog.chonla.com/2011/12/%e0%b8%9e%e0%b8%b4%e0%b8%a1%e0%b8%9e%e0%b9%8c%e0%b9%84%e0%b8%9b%e0%b8%97%e0%b8%b3%e0%b8%95%e0%b8%b1%e0%b8%a7%e0%b9%83%e0%b8%ab%e0%b8%8d%e0%b9%88%e0%b9%84%e0%b8%9b%e0%b9%84%e0%b8%a1%e0%b9%88%e0%b8%a2/#comments Sat, 31 Dec 2011 06:32:39 +0000 chonla http://blog.chonla.com/?p=345 ในภาษาอังกฤษ การทำให้ตัวอักษรเป็นตัวอักษรใหญ่ (เช่น a->A) เรียกว่าการทำให้เป็น Uppercase แต่ถ้าทำให้เป็นตรงกันข้าม เราเรียกว่าทำ Lowercase แต่ในหลาย ๆ ครั้ง เราจะเห็นการทำตัวอักษรเฉพาะตัวแรกให้เป็นตัวใหญ่ ส่วนที่เหลือเป็นตัวเล็ก แบบนี้เราจะเรียกว่า Capitalize

ไม่ว่าจะเป็นการทำ Uppercase, Lowercase หรือ Capitalize จริง ๆ แล้วไม่ใช่เรื่องยุ่งยากอะไร หลาย ๆ คนแก้ปัญหานี้ด้วยวิธีการเขียน Javascript มาดักตอนที่พิมพ์ แล้วปรับแก้เป็นตัวที่ต้องการ ในความจริงแล้ว เรายังสามารถทำได้อีกหลายวิธี มีวิธีหนึ่งที่ผมคิดว่าโคตรง่าย นั่นคือการใช้ CSS มาช่วยนั่นเอง

การใช้ CSS มาเปลี่ยนตัวอักษรนั้น ทำได้โดยการใช้ style ที่ชื่อว่า text-transform โดยกำหนดค่าเป็นแบบนี้

  • กำหนดเป็น uppercase เพื่อให้ตัวอักษรที่เราต้องการเป็นตัวใหญ่ทั้งหมด
  • กำหนดเป็น lowercase เพื่อให้ตัวอักษรที่เราต้องการเป็นตัวเล็กทั้งหมด
  • กำหนดเป็น capitalize เพื่อให้ตัวอักษรตัวแรกของคำที่เราต้องการเป็นตัวใหญ่ (ที่เหลือเป็นตัวเล็ก)

วิธีนี้ใช้ได้กับทุก ๆ element รวมถึง input และ textarea ด้วย นั่นหมายถึงเราจะสามารถพิมพ์ไปเรื่อย ๆ ได้ โดยไม่ต้องคอยกด Shift เพื่อทำเป็นตัวใหญ่เลย

สะดวกและสบายแบบนี้… เจ๋งเนอะ :)

ใครนึกภาพไม่ออก ลองไปดู LIVE DEMO ที่ http://sandbox.chonla.com/capitalize ได้ครับ

ท้ายสุดนี้สวัสดีปีใหม่ 2555 ครับ

Share

]]> http://blog.chonla.com/2011/12/%e0%b8%9e%e0%b8%b4%e0%b8%a1%e0%b8%9e%e0%b9%8c%e0%b9%84%e0%b8%9b%e0%b8%97%e0%b8%b3%e0%b8%95%e0%b8%b1%e0%b8%a7%e0%b9%83%e0%b8%ab%e0%b8%8d%e0%b9%88%e0%b9%84%e0%b8%9b%e0%b9%84%e0%b8%a1%e0%b9%88%e0%b8%a2/feed/ 0 เรื่องวุ่น ๆ กับการกำหนด padding ใน CSS http://blog.chonla.com/2010/02/%e0%b9%80%e0%b8%a3%e0%b8%b7%e0%b9%88%e0%b8%ad%e0%b8%87%e0%b8%a7%e0%b8%b8%e0%b9%88%e0%b8%99-%e0%b9%86-%e0%b8%81%e0%b8%b1%e0%b8%9a%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b8%81%e0%b8%b3%e0%b8%ab%e0%b8%99%e0%b8%94/ http://blog.chonla.com/2010/02/%e0%b9%80%e0%b8%a3%e0%b8%b7%e0%b9%88%e0%b8%ad%e0%b8%87%e0%b8%a7%e0%b8%b8%e0%b9%88%e0%b8%99-%e0%b9%86-%e0%b8%81%e0%b8%b1%e0%b8%9a%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b8%81%e0%b8%b3%e0%b8%ab%e0%b8%99%e0%b8%94/#comments Thu, 25 Feb 2010 19:18:13 +0000 chonla http://blog.chonla.com/?p=269 ได้มีโอกาสเขียนเว็บโดยใช้ CSS เป็นหลักแล้วเจอปัญหาเกี่ยวกับการกำหนด padding ใน <div> ปัญหาที่ว่านี้ก็คือ การแสดงผล padding ในแต่ละ browser มันไม่เหมือนกัน ผมเชื่อว่าหลาย ๆ คนที่ทำเว็บก็คงเคยเจอปัญหานี้เหมือนกัน ยกตัวอย่าง web browser คู่ปรับยอดนิยม ระหว่าง IE กับ FireFox โดยตัว IE เอง จะวัดความกว้างของ content จากขอบด้านหนึ่งของ container ไปยังอีกด้านหนึ่ง ในขณะที่ Firefox จะวัดจากตัว content ด้านใน container เอง ดังนั้นทำให้เมื่อเรากำหนดความกว้างที่ 300 pixels และกำหนด padding ซ้ายและขวาข้างละ 20 pixels IE จะใช้เนื้อที่จริง 300 pixels และเนื้อที่แสดงเนื้อหาเหลือแค่ 260 pixels ส่วน FireFox จะใช้เนื้อที่จริง 340 pixels และมีเนื้อที่แสดงเนื้อหา 300 pixels

ปัญหานี้สามารถแก้ไขได้โดยการกำหนด box model ให้เหมือนกันด้วย css เพื่อให้ตัว render หน้าเว็บ ทำงานไปในทางเดียวกัน สิ่งที่ต้องเพิ่มลงไปใน style ของ object ที่เราต้องการกำหนดคือ

-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;

การกำหนดค่าแบบนี้ จะเป็นการสั่งให้ browser คำนวณความกว้างของ content จากขอบของ container เหมือนกับที่ IE ทำนั่นเอง

เพื่อให้เห็นภาพได้ชัดเจนมากขึ้น ผมว่าเราลองไปดูตัวอย่างใน LIVE DEMO กันเลยดีกว่าครับ

Share

]]> http://blog.chonla.com/2010/02/%e0%b9%80%e0%b8%a3%e0%b8%b7%e0%b9%88%e0%b8%ad%e0%b8%87%e0%b8%a7%e0%b8%b8%e0%b9%88%e0%b8%99-%e0%b9%86-%e0%b8%81%e0%b8%b1%e0%b8%9a%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b8%81%e0%b8%b3%e0%b8%ab%e0%b8%99%e0%b8%94/feed/ 8 Animation กับ CSS Sprite http://blog.chonla.com/2008/10/animation-%e0%b8%81%e0%b8%b1%e0%b8%a2-css-sprite/ http://blog.chonla.com/2008/10/animation-%e0%b8%81%e0%b8%b1%e0%b8%a2-css-sprite/#comments Wed, 29 Oct 2008 17:36:55 +0000 chonla http://blog.chonla.com/?p=73 คราวก่อนนู้นได้พูดถึง CSS Sprite ทำให้ผมนึกถึงเกมขึ้นมา (เพราะคำว่า Sprite นี่แหละครับ – Sprite หมายถึงภาพตัวละครที่เรียงต่อกันในลักษณะเฟรม เมื่อนำมา Animate ให้เป็นภาพเดียว จะได้ภาพเคลื่อนไหว) ครั้งนี้ก็เลยหยิบเรื่อง CSS Sprite มาพูดต่อละกัน และแน่นอนครั้งนี้เราจะพูดถึงเรื่องการทำ Sprite Animation ด้วย CSS Sprite ครับ

อย่างที่เคยอธิบายไปแล้ว หลักการของการทำ CSS Sprite คือการกำหนดค่า Stylesheet ของ background-image และ background-position ให้มีเป็นภาพที่ตำแหน่งที่เราต้องการ และเราก็ใช้ container เช่น div มากำหนดขอบเขตที่จะแสดง ที่เหลือก็เป็นการนำ function ของ javascript ที่ชื่อว่า setTimeout มาทำให้ภาพเคลื่อนไหวได้เท่านั้นเองครับ ดูง่ายใช่มั๊ยครับ

ลองไปดู LIVE DEMO กันเลยครับ

Share

]]> http://blog.chonla.com/2008/10/animation-%e0%b8%81%e0%b8%b1%e0%b8%a2-css-sprite/feed/ 2 เร่งสปีดเว็บด้วย CSS Sprite http://blog.chonla.com/2008/10/%e0%b9%80%e0%b8%a3%e0%b9%88%e0%b8%87%e0%b8%aa%e0%b8%9b%e0%b8%b5%e0%b8%94%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b8%94%e0%b9%89%e0%b8%a7%e0%b8%a2-css-sprite/ http://blog.chonla.com/2008/10/%e0%b9%80%e0%b8%a3%e0%b9%88%e0%b8%87%e0%b8%aa%e0%b8%9b%e0%b8%b5%e0%b8%94%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b8%94%e0%b9%89%e0%b8%a7%e0%b8%a2-css-sprite/#comments Fri, 24 Oct 2008 18:54:58 +0000 chonla http://blog.chonla.com/?p=49 การลดจำนวนไฟล์ที่เว็บบราวเซอร์จะต้องโหลด เป็นวิธีหนึ่งที่จะทำให้การโหลดเว็บทำได้รวดเร็วยิ่งขึ้น วิธีหนึ่งที่ผมจะพูดถึงในครั้งนี้ เราเรียกว่า CSS Sprite

CSS Sprite สามารถช่วยให้จำนวนไฟล์ลดลงได้ โดยการรวมไฟล์ภาพเข้าด้วยกัน และนำไปใช้โดยการกำหนดผ่านค่า background-position ใน css นั่นเอง และการรวมไฟล์ภาพเข้าด้วยกันนี่เอง จากที่เราเคยจะต้องโหลดไฟล์หลาย ๆ ไฟล์ ก็จะสามารถลดลงมาใช้เพียง 1 หรือ 2 ไฟล์ บางกรณีการรวมไฟล์เข้าด้วยกันเป็นไฟล์เดียว ยังทำให้ขนาดไฟล์โดยรวมเล็กลงอีกด้วย

การใช้ CSS Sprite ส่วนใหญ่แล้ว จะพบเห็นได้บ่อยในการทำกรอบของข้อความ

การทำกรอบของข้อความ โดยปกติแล้ว การทำกรอบเราจำเป็นที่จะต้องใช้กรอบถึง 8 ไฟล์ด้วยกันคือ แต่ในที่นี้ เราสามารถ ลดเหลือ 2 ภาพได้ คือ และ

เราลองมาดูตัวอย่างกันใน LIVE DEMO ได้เลยครับ

Share

]]> http://blog.chonla.com/2008/10/%e0%b9%80%e0%b8%a3%e0%b9%88%e0%b8%87%e0%b8%aa%e0%b8%9b%e0%b8%b5%e0%b8%94%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b8%94%e0%b9%89%e0%b8%a7%e0%b8%a2-css-sprite/feed/ 1 การเปลี่ยน css ตอน runtime ด้วย jQuery http://blog.chonla.com/2008/10/hello-world/ http://blog.chonla.com/2008/10/hello-world/#comments Wed, 22 Oct 2008 06:57:10 +0000 chonla http://blog.chonla.com/?p=1 บังเอิญได้คุยกับเพื่อนที่ทำงานเรื่องการทำ theme ด้วย css สำหรับลูกค้าแต่ละเจ้าได้ยังไง ทำให้นึกถึงว่าเราจะเปลี่ยน css ทั้งหน้าโดยที่ไม่ต้องโหลดทั้งหน้าใหม่ได้มั๊ย เลยตัดสินใจลองใช้ jquery มาทำ ผลที่ได้คือ สามารถทำได้จริง ๆ และเขียน code แค่นิดเดียวเอง

ประเด็นหลักคือ การเปลี่ยน attribute href ใน <link> นั่นเอง เมื่อเอา jquery มาใช้ร่วมด้วยก็หวานหมูจริง ๆ ครับ

ลองไปดูตัวอย่างได้ที่ LIVE DEMO กันเลยครับ

Share

]]> http://blog.chonla.com/2008/10/hello-world/feed/ 3