picpost

Share |

ท่านใดที่นำบทความนี้ไปเผยแพร่ที่เว็บหรือบล็อกของท่านกรุณาทำลิงค์กลับมายังบทความต้นฉบับด้วยนะคะ ขอบคุณค่ะ

เทคนิคดีๆ สำหรับการปรับแต่งเว็บไซต์ ด้วย JQuery และ CSS



By : Admin

Date write : 2010-02-18 23:02:00   Date update : 2010-02-18 23:27:12





เทคนิคดีๆ สำหรับการปรับแต่งเว็บไซต์ ด้วย JQuery และ CSS

มี tips หลายอันอยู่เหมือนกัน พอดีไปเจอมาจากเว็บฝรั่งค่ะ

เก็บเอามาแนะนำสำหรับคนทำเว็บ



1. Warp Speed : เหมือนตอนคลิก comment ใน facebook โดยใช้ CSS และ jQuery

Demo:
http://www.jankoatwarpspeed.com/examples/adaptableview/example2.html

How to:
http://www.jankoatwarpspeed.com/post/2009/07/07/Adaptable-view.aspx

dropdown


2. Setting Equal Heights with jQuery : เซตให้ DIV  มีความสูงเท่าๆกัน ด้วย jQuery

Demo:
http://www.filamentgroup.com/examples/equalHeights

How to:
http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery

equal heights with jquery and css


3. CSS Large Background : เทคนิคการใช้ รูปใหญ่ๆ เป็น Background ในเว็บ

Demo:
http://www.webdesignerwall.com/demo/large-background/bad-example.html

How to:
http://www.webdesignerwall.com/tutorials/how-to-css-large-background

css large background



4. Smart Columns ด้วย CSS & jQuery : จะทำยังไงเมื่อ columns ไม่เป็นไปอย่างที่ต้องการ


Demo:
http://www.sohtanaka.com/web-design/examples/smart-columns

How to:
http://www.sohtanaka.com/web-design/smart-columns-w-css-jquery

css and jquery


5. Slideshow Gallery ด้วย CSS & jQuery : สไลด์แสดงสินค้า หรือแสดงรูปภาพ

Demo:
http://demo.tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow/demo.html

How to:
http://tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow

slide show jquery css


6. Greyscale Hover Effect : สำหรับการแสดงรูปภาพ เมื่อเอาเมาส์วาง แล้วภาพเปลี่ยนเป็นสีเทา

Demo:
http://www.sohtanaka.com/web-design/examples/hover-over-trick

How to:
http://www.sohtanaka.com/web-design/greyscale-hover-effect-w-css-jquery

show gallery by jquery


7. Perfect signin dropdown box likes Twitter : การทำกล่องสำหรับล็อกอิน เหมือนกับ Twitter (เมื่อคลิกแล้วถึงจะโชว์กล่อง log in)

Demo:
http://aext.net/example/twitterlogin

How to:

http://aext.net/2009/08/perfect-sign-in-dropdown-box-likes-twitter-with-jquery

login box like twitter



8. Facebook Style Footer Admin Panel : เหมือนกับ Chat Panel ใน Facebook

Demo:
http://www.sohtanaka.com/web-design/examples/footer-panel

How to:
http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-2

chat box like facebook



" ความคิดเห็นใหม่อยู่ด้านบนค่ะ "

 

คอมเมนต์ แสดงความคิดเห็น

โดย*   Guest  [ Login | สมัครสมาชิกที่นี่]
รายละเอียด*
รหัสป้องกันสแปม*   ขอรหัสใหม่


กรอกตัวอักษรตามรูปด้านบน
   
 
 



แว่นตาแฟชั่น แว่นสายตาแฟชั่น แว่นตามิกกี้เมาส์ แว่นตาแบบ อั้ม พัชราภา แว่นตาแบบ ชมพู่ อารยา แว่นตาทรงกลม แว่นตาแฟชั่น
แว่นแฟชั่น