ทำปุ่มเมนู CSS ขอบมนโดยใช้รูปเดียว

menu ก่อนที่ผมจะรู้จัก CSS นั้น การทำปุ่มเมนูในรูปแบบนี้ นั้นต้องใช้ รูป ถึง 3 รูปเลยทีเดียว คือ รูปขอบด้านซ้าย รูปพื้นที่ตรงกลาง และรูปขอบมนด้านขวา แต่ตอนนี้เราสามารถใช้ CSS ช่วยโดยใช้รูปเพียงรูปเดียว ประหยัดเวลา ประหยัดแบนวิธ ใช้ง่าย ในทุกที่ ยืดได้ แม้ ประโยคจะยาว ลองมาดูวิธีกันครับ

Image

bg
ด้านบนนี้คือตัวอย่างรูป ที่เราจะใช้กัน แต่ผมจะไม่บอกวิธีการทำรูปนะครับ ดาวน์โหลด .psd ไปศึกษาหรือปรับเปลี่ยนกันดูเองนะครับ menubutton.psd
อ่านต่อ คลิกที่นี่ »

Comments (9)

แนวทางการดีไซน์บล็อกยุคใหม่

ในการออกแบบบล็อก จะสังเกตได้ว่าการออกแบบส่วนประกอบต่าง ๆ จะมีความแตกต่างกัน ในบทความนี้ผมจะแยกส่วนประกอบพวกนี้ออกเป็น 9 ส่วน หากคุณให้ความสนใจในแต่ละส่วนมากเท่าไหร่ ภาพรวมของบล็อกที่ออกมาจะดูดีมากเท่านั้น

  1. ส่วนหัว(Header)
  2. ส่วนเนื้อหา(Content Area)
  3. เมนูหลัก(Primary Navigation)
  4. เมนูรอง(Secondary Navigation)
  5. หัวเรื่อง(Headlines)
  6. ส่วนแสดงความคิดเห็น(Comments)
  7. ส่วนท้ายของบทความ(Post’s Footer)
  8. ส่วนท้ายของบล็อก(Footer)
  9. โฆษณา(Advertisements)

1.ส่วนหัว(Header)

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

ตัวอย่างส่วนหัวที่ดี

1. Octwelve

Octwelve เป็นตัวอย่างที่ดีของการใช้ตัวอักษรที่สวยงาม ในส่วนหัวเพื่อทำให้ส่วนหัวแตกต่างจากส่วนอื่น ๆ ของบล็อกอย่างเห็นได้ชัด และยังทำให้คุณรู้ว่าบล็อกนี้มีเนื้อหาเกี่ยวกับอะไร

2. Cult foo

ผมชอบส่วนหัวของ Cultfoo ตรงที่รูปภาพทะลุออกมาจากกรอบ ที่เดิมทีจะเป็นกรอบโค้งและกรอบเหลี่ยม การออกแบบแบบนี้เรียกร้องความสนใจให้บล็อกได้เป็นอย่างดีทีเดียว

อ่านต่อ คลิกที่นี่ »

Comments (7)

Street Fighter IV:action trailer

มาดูกราฟฟิคเอนิเมชั่นสวยๆ จาก Street Fighter IV กัน สุดยอดเกมส์ ที่น้อยคนที่จะไม่รู้จัก ผมเล่นมาตั้งแต่เด็กๆเลย ตั้งแต่ ภาค 2 ตู้เกมส์โน่น มี 2 คลิปครับ ดูกันเลย

Street Fighter IV: A New Beginning


อ่านต่อ คลิกที่นี่ »

Comments

ทำ SEO ให้ URL โดยใช้ Mod_Rewrite

Mod_Rewrite คืออะไร?
Mod_Rewrite คือการแปลง URL ที่ดูยากให้อยู่ในรูปแบบที่เราต้องการ เพื่อประโยชน์หลายด้าน (ซึ่งจะกล่าวถึงต่อไป) และการแปลงเพื่อประโยชน์ด้าน SEO ก็เป็นอีกอันนึงที่มีการนำเอา Mod_Rewrite มาใช้ เพราะเรารู้กันดีว่า Search Engine ไม่ค่อยชอบ pages ที่เป็น dynamic ที่มี query string ยาวเฟื๊อย

ตัวอย่าง URL ที่ยาว และซับซ้อน
โค้ด:

http://www.site.com/viewcatalog.asp?category=hats&prodID=53

เมื่อผ่านการแปลง เราสามารถทำให้สั้นลงได้ดังนี้
โค้ด:

http://www.site.com/catalog/hats/53/

เริ่มทำ Mod_Rewrite
บาง Server ไม่สามารถจะทำ Mod_Rewrite ได้เนื่องจากไม่ได้ติดตั้ง Module Mod_Rewrite ดังนั้นถ้าเราจำเป็นต้องใช้ Mod_Rewrite ก็ต้องตรวจสอบดีๆก่อนเช่า host

.htaccess ไฟล์สำคัญในการทำ Mod_Rewrite
เราจะใช้ไฟล์นี้ในการกำหนด Rule ของการทำ Mod_Rewrite
เริ่มต้นด้วยคำสั่ง

RewriteEngine on

เพื่อเปิดการทำงาน เขียนไว้ในบรรทัดแรกสุดของไฟล์

ต่อไปจะเป็นการนำเอา Mod_Rewrite ไปให้งาน ซึ่งผมจะเริ่มด้วยตัวอย่างง่ายๆ และเขียน Rewrite Rule ง่ายก่อน แล้วก็ยกตัวอย่างต่อไปเรื่อยๆนะครับ
อ่านต่อ คลิกที่นี่ »

Comments (10)

วอลเปเปอร์ Ironman

Comments (2)

« ก่อนหน้านี้
email

จัดส่งถึงที่ โดย

ลิ้งค์สำหรับ rss reader

advertise
advertise
ติดต่อ cssmaster@divland.com
IDOL Beautifulidol.com ASTORE Astoreblog.com
MUSIC Hfonemusic.com POST Postigg.com LOAD uploadtoday.com