Thursday
CSS
-
วิธีเปลี่ยนหน้าเว็บเป็นโทนสีขาว ดำ (3,975)
นำ CSS code ใส่ไว่ระหว่าง lt head gt lt head gt
lt style gt
body {
filter progid DXImageTransform Microsoft BasicImage grayscale 1 IE
webkit filter grayscale 1 Chrome Safari
filter grayscale 1 Firefox
}
lt style gt
-
กับการกำหนด padding ใน chrome ie firefox safari ด้วย CSS (2,760)
ได้มีโอกาสเขียนเว็บโดยใช้ CSS เป็นหลักแล้วเจอปัญหาเกี่ยวกับการกำหนด padding ใน ปัญหานี้สามารถแก้ไขได้โดยการกำหนด box model ให้เหมือนกันด้วย css เพื่อให้ตัว render หน้าเว็บ ทำงานไปในทางเดียวกัน สิ่งที่ต้องเพิ่มลงไปใน style ของ object ที่เราต้องการกำหนดคือ webkit box sizing border box moz box sizing
-
เครื่องมือนักพัฒนาของ Firefox ใช้สิ แล้วคุณจะขาดมันไม่ได้ (4,133)
นสมัยก่อนนั้น Firefox มีส่วนขยายตัวนึงที่ชื่อว่า Firebug เป็นเครื่องมือพื้นฐานสำหรับคนทำเว็บเลยก็ว่าได้ ชนิดที่ว่าถ้านักพัฒนาคนไหนใช้ Firebug ไม่เป็นก็ไม่ใช่นักพัฒนาเว็บ และในปัจจุบัน Firefox ก็ได้ใส่เครื่องมือนักพัฒนา มาให้แล้วใน Firefox แค่คลิกที่ปุ่ม Firefox แล้วไปที่ นักพัฒนาเว็บ ก็จะเจอเลยซึ่งใ
-
css reset คืออะไร และการเริ่มใช้งาน (3,726)
เคยมั้ย ที่ทำเว็บขึ้นมาแล้ว เปิดดูด้วย firefox internet explorer 6 internet explorer 7 internet explorer 8 google chrome safari แล้วมันแสดงผลแตกต่างกัน มากบ้างน้อยบ้างในหลายจุดทั่วทั้งเว็บ แล้วพอเราแก้ จนอันนึงดูดี อันอื่นๆก็เพี้ยนอยู่เหมือนเดิมหรือหนักกว่าเดิมแต่หลายคนก็มีความสามารถมากพอ ที่จะ
-
กำหนดความสูงให้เท่ากับหน้าจอ (4,425)
หลายคนคงกำหนดความกว้างให้เต็มหน้าจอได้ โดยใช้ width 100% แต่หากจะทำให้ความสูงเต็มหน้าจอ เราแค่
กำหนดให้เป็น [code]height 100vh[ code] เท่านั้นเองครับ
-
CSS Position ซักหน่อย (4,750)
CSS Position มี 4 อย่าง static relative absolute fixed
[b]static [ b] โดยพื้นฐานของ element ใน document ของเราจะเป็น static อยู่แล้ว
เราไม่ต้องไปแตะก็ได้ นอกจากจะ override มันครับ
[b]relative [ b] คือการจัดตําแหน่งของ element โดยกําหนด top right bottom left เพียงแต่ว่า เวลาที่เราใช้ r
-
เปรียบเทียบ margin กับ padding (4,622)
ผมเชื่อว่าทุกคนที่หัดเขียน CSS ใหม่ๆจะต้องมีอาการมึนๆงงๆกับเจ้าคำสั่ง margin กับ padding กันทุกคน และผมก็เป็นหนึ่งในนั้น กว่าผมจะเข้าใจความแตกต่างและใช้ได้ถูกต้อง ก็ต้องใช้งมโข่งอยู่นานเหมือนกัน แต่ถ้าคุณได้อ่านหลักการง่ายๆที่ผมอธิบายในบล็อกนี้จะรู้เลยว่าไม่ได้ยากอะไรเลย จริงๆ การที่เราจะเข้าใจความแ
-
display ใน css ที่ใช้กันบ่อยๆ (8,358)
display ที่ใช้กันบ่อยๆ มี
[code]display block แสดงผลเป็นลักษณะกล่อง ขึ้นบรรทัดใหม่
display inline แสดงผลเป็นบรรทัดเดียวต่อกัน ไม่ขึ้นบรรทัดใหม่
display none ซ่อน ไม่แสดงผล[ code]
Tag H p ul li จะเป็น block element คือมี display block แฝงอยู่ พอเขียนเรียงกันแล้ว จะขึ้นบรรทัดใหม่
-
รวม Tools สำหรับทำ Responsive Navigation Menu (14,021)
การสร้างเว็บไซต์ให้รองรับการใช้งานจากอุปกรณ์หลากหลายรูปแบบมีความสำคัญมากในปัจจุบันนีั เพราะผู้ใช้งานไม่ได้ใช้งานคอมพิวเตอร์ตั้งโต๊ะในการใช้เว็บเพียงอย่างเดียวแล้ว แต่ผู้ใช้งานยังมีอุปกรณ์อื่นๆอีก เช่น Smart Phone และ Tablet เป็นต้น และอุปกรณ์พวกนี้มีปริมาณเพิ่มขึ้นอย่างมาก เมื่อเทียบกับคอมพิวเตอร์ตั
-
การใช้งาน css จัดตำแหน่ง ซ้อนข้อความบนรูปภาพอย่างง่าย (8,535)
ตัวอย่างโค้ดและคำแนะนำต่อไปนี้ เป็นวิธีการใช้งาน [b]css[ b] ในการกำหนดตำแหน่ง
ของข้อมูลที่ต้องการแสดง ซ้อนทับ บนรูปภาพที่ต้องการ โดยสามารถนำไปประยุกต์
เพิ่มเติมให้เหมาะกับรูปแบบตามต้องการได้
[code]
holder wrap{
position relative
margin auto
display block
height 120px