css

การทำยันต์ 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…
อ่านต่อ

Gradiator เขียน css3 gradient ได้ง่ายๆบน ubuntu

gradiator เป็น app ที่เหมาะสำหรับคนที่พัฒนาเว็บไซต์อย่างมากครับ เพราะมันเอาไว้ช่วยให้เราเขียนโค็ดพื้นหลังแบบไล่สี (gradient) ในส่วนของ css ได้ง่ายขึ้น จะไล่เฉกสีบนลงล่าง, ซ้ายไปขวา, มุมซ้ายไปมุมขวา หรือจะเพิ่มจุดสีของเฉกก็สามารถทำได้ง่าย และเมื่อเราปรับแต่งจนพอใจแล้วกด get code มันก็จะ copy to clipborad ให้เราเลย สวดยอดฮะ... วิธีติดตั้ง…
อ่านต่อ

เพิ่ม css ให้กับ ie ใน drupal 7

หลายๆคนถ้าได้แก้ไข theme คงปวดหัวไม่ใช่น้อยกับ browser ie(internet explorer) เพราะมันจะแสดงผลไม่เหมือน browser ชาวบ้านขาวช่องเขา -_- ซึ่งมันหลีกเลี่ยงไม่ได้เลยว่าเราจำเป็นต้องเขียน css ขึ้นมาอีกชุดเพื่อให้แสดงผลกับ ie โดยเฉพาะ โดยใน drupal 7 เราสามารถเพิ่ม css ให้กับ browser ie ได้โดยการเพิ่ม funtion เข้าไปดังนี้ครับ [php] /** * Implements…
อ่านต่อ

CSS3 Help Sheet

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

เพิ่ม id ให้กับ body ใน drupal

ผมหามานานครับสำหรับวิธีเพิ่ม id ให้กับ tag body ใน theme drupal ที่เราใช้งานอยู่ ถามว่าเพิ่มทำไม? มันมีประโยชน์สำหรับการเล่น css เพื่อออกแบบ theme ของเราครับ โดยในกรณีนี้จะเอาประโยชน์ของ pathauto มาเป็น id ให้กับ body ใน theme ของเรากล่าวคือใน tag body นั้นทุกๆหน้าเราจะได้ id ที่ชื่อด้วย url alias ของเรา  โดยให้เราไปแก้ไขไฟล์ page.tpl.php ใน…
อ่านต่อ

CSS hacks

พอดีรับงาน freelane เขียนเว็บมาครับ แล้วก็เจอปัญหาเดิมๆกับ css ก็คือว่า ie6 จะแสดงผลออกไม่เหมือนชาวบ้านชาวเมืองเขามันเป็นปัญหาอยู่ทุกวันนี้ - -! แล้วผมก็แก้ไม่ตก พอดีไม่ได้มืออาชีพซะเท่าไร ก็เลยถามจารย์กู้ไปเรื่อยร่วมชั่วโมงเว็บฝรั่งก็อ่านแล้วไม่เข้าใจซะเท่าไร โชดดีไปเจอบล็อกที่เขาอธิบายเกี่ยวกับเรื่องนี้พอดี เลยนำมาปรับใช้สรุปได้ผลครับ…
อ่านต่อ

เอกสารอบรม Web standard และ CSS ตอนที่1

คือพอดีว่าผมได้ไปอบรมเกี่ยวกับเรื่องของ web standard และ CSS มาเลยว่าจะเอาเอกสารที่ผมได้มา มาปล่อยให้คนอื่นที่สนใจนำไปอ่านกันบางน่ะครับ อันนี้คือชุดแรกน่ะครับ เดียวรอสัปดาห์หน้าผมเรียนอีกครั้ง จะเอามาปล่อยให้อีกชุด เอกสารอบรม Web standard และ CSS ชุดสุดท้าย
อ่านต่อ