CSS Box Shadow

วันนี้มาดูการทำให้เว็บของเราดูน่าสนใจขึ้นด้วยการใส่เงา (Shadow) ลงไปให้กับวัตถุกัน ซึ่งเทคนิคนี้ ผมชอบใช้นะ มันดูมีมิติดี..

โค้ด css ก็ไม่มีอะไรมาก ตามนี้

ค่าต่างๆ จะประกอบด้วย

  1. The horizontal offset : ขนาดของเงาตามแนวนอน
  2. The vertical offset : ขนาดของเงาตามแนวตั้ง
  3. The blur radius : ค่าความเบลอของเงา
  4. The spread radius : ค่าความฟุ้งกระจาย ถ้าค่าเป็นบวกมากๆ ก็จะเข้มขึ้นเรื่อยๆ โดยค่าเริ่มต้นคือ 0px (ศูนย์)
  5. Color : ค่าสี ใช้ได้ทั้งชื่อสีโดยตรง หรือ hex code หรือ rgb value ก็ได้ทั้งนั้น อ้อ ใส่ alpha ไปด้วยก็ไม่ผิดกติกานะ
  6. ถ้าอยากให้มีเงาเกิดขึ้นด้านใน ก็ใส่ค่า inset ลงไปนะ แบบนี้ box-shadow: 3px 3px 5px 6px #ccc inset;

 

สำหรับ Internet Explorer จะพิเศษหน่อย

 

 

ไปดูเพิ่มได้ที่บล็อกของนาย Chris Coyier ได้ที่นี่ http://css-tricks.com/snippets/css/css-box-shadow/

หรือลองสร้าง css เองเลยที่นี่ http://css3gen.com/box-shadow/

วิธีเอาฟอนท์มาใช้งานบนเว็บไซต์ ผ่าน @font-face

ในบรรดาคนทำเว็บไซต์ด้วยกันแล้ว คงจะมีไม่น้อยที่มีปัญหากับการใช้ฟอนท์บนเว็บไซต์ เนื่องจากเว็บไซต์เป็นอะไรที่เป็นสื่อสาธารณะ และมีมาตรฐานอยู่ระดับนึง ดังนั้นการใช้ฟอนท์พิสดาร หรือฟอนท์สวยๆ บนเว็บไซต์นั้น เป็นไปได้ค่อนข้างยาก และลำบากมาก หากจะใช้วิธีการอ้างชื่อฟอนท์นั้นๆ โดยตรงเลย เช่น

ชื่อฟอนท์ “TH SarabunPSK” เป็นฟอนท์จาก สำนักงานส่งเสริมอุตสาหกรรมซอฟต์แวร์แห่งชาติ(องค์การมหาชน) จากโครงการ 13 ฟอนท์แห่งชาติ ซึ่งเผยแพร่ และแจกฟรีให้ประชาชน และหน่วยงานต่างๆ ได้ใช้ ตามมติ ครม. (อ้างอิง: http://www.sipa.or.th/ewt_news.php?nid=481&filename=index)

แต่ปัญหาก็คือ ฟอนท์ TH SarabunPSK นั้น ไม่ได้รับการติดตั้งไว้ในเครื่องคอมพิวเตอร์โดยทั่วไป ทั้งในประเทศไทย และทั่วโลก ซึ่งหากมีคนเปิดเว็บไซต์ของเรา แล้วในเครื่องคอมพิวเตอร์ของเขาไม่มีฟอนท์นี้อยู่ ตัวโปรแกรม Web Browser จะเลือกฟอนท์มาตรฐานขึ้นมาใช้งานโดยอัตโนมัติ เช่น Arial หรือ Tahoma เป็นต้น

ทีนี้จะทำยังไงดีล่ะ ? เรามีวิธีการผนึกฟอนท์สวยๆ ของเราให้แสดงผลได้อย่างถูกต้อง และเหมือนกันไม่ว่าคุณจะเปิดเว็บไซต์จากที่ใดๆ ก็ตาม ดังนี้

Continue reading “วิธีเอาฟอนท์มาใช้งานบนเว็บไซต์ ผ่าน @font-face”

Hack CSS IE6 IE7 IE8

“ปัญหามาปัญญาเกิด” โบราณเข้าว่านั้นจริง ทำโปรเจค ในที่สุดเจอปัญหา เดิมคือ เจ้า IE6 IE7 IE8 หน้จอแสดงผลไม่เหมือนกัน เราจะทำอย่างไรมันมีวิธีง่ายๆเลย ดังนี้

อธิบายนิดนึงว่า

ถ้าเรา ใส่ \9 ไว้นั้นหมายถึง IE6 IE7 IE8 จะอ่านทั้งหมด

ถ้าเรา ใส่ * ไว้นั้นหมายถึง IE6 IE7 จะอ่าน IE8 ไม่อ่าน

ถ้าเรา ใส่ _ ไว้นั้นหมายถึง IE6 จะอ่าน IE7 IE8 ไม่อ่าน

ไม่ใส่อะไรเลยคืออ่านทุก Browser (FF Corme ไม่ค่อยมีปัญหา)

แถมสำหรับ opera safari เกิดมีปัญหามันทุก Browser เลย

Continue reading “Hack CSS IE6 IE7 IE8”

ทำวัตถุให้โปร่งบนเว็บด้วย css

วันนี้มีปัญหาเกี่ยวกับ css อย่างนึง คือ อยากให้ object นั้นแค่ transparent ไปเฉยๆ โดยที่ object นั้น มันไม่ใช่ image ที่ทำเป็นไฟล์ png เจาะโปร่งๆ ได้ เลยต้องมาหา solution ในการจัดการ ซึ่งก็มาลงตัวกับ css script อันนี้

โดยที่ css script อันนี้ สามารถใช้ได้กับทุก browser ทั้ง IE 6,7,8   Firefox   Safari   Chrome

Ref : http://css-tricks.com/css-transparency-settings-for-all-broswers/