css เป็นเครื่องมือที่ช่วยเว็บให้แสดงผลได้ตามต้องการ ส่วนใหญ่ฉันชอบใช้ css มากกว่าพวก Javascript หรือ Jquery
แต่ css มันมีข้อจำกัดในตัวมันเอง ดังนั้นการใช้ร่วมกับ Java หรือ Jquery จะทำให้มีประสิทธิภาพมากยิ่งขึ้น แต่สุดท้ายฉันก็ยังคิดว่า CSS เป็นทางที่ดีสำหรับเว็บอยู่ดี
1. CSS Gradient Text and Background
มันอาจจะไม่ดีมากหนักเหมือนคุณใช้ background image เป็น gradient แต่ css จะช่วยให้เว็บคุณโหลดได้เร็วมากขึ้น
- CSS Gradients
- Background gradients and CSS
การ Gradient Text ทำอย่างไร ?
- CSS Gradient Text Effect
- Pure CSS Text Gradient
2.Image Overlay Using Z-Index
property ของ z-index มันเป็นขั้นลำดับชั้นของ element คุณสามารถใส่รูปหรือ text ให้อยู่ด้านบนซึ่งกันและกัน
- Understading Z-Index
- CSS Z-index
3. Using the CSS Boder Creatively
- CSS Box Border test เว็บนี้เป็นประโยชน์มากมาย เพราะคุณสามารถสร้าง border ได้บนนี้ แล้วนำ css มาใช้งานได้เลย
- Border-images CSS3 เฉพาะ CSS3
- CSS Side Border ใช้ css ในการเรียก images
- Create a Scalable Star using using CSS border
- Border Slants
4. A Cool CSS Effect - Dashboard
- Dashboard สามารถสร้าง effect โดยใช้ css ได้
5. Creating 2D/3D buttons using CSS
สามารถสร้าง buttons สวย ๆ ขึ้นมาได้โดยใช้แค่ css อย่างเดียว
- 3D Rollover Button using CSS
- How to make sexy buttons with CSS
- CSS rollover buttons
6. Text Embossing/Shadow Technique With CSS
1. text-shadow: 0px 1px 0px #e5e5ee;
คุณสามารถนำเทคนิคนี้มาใช้ในการสร้าง text ให้เหมือน iPhone
- Text Embossing
- CSS Text Drop Shadows
7. Iconize Text links/Hyperlink with CSS
- Add icon to the hyperlink.
- Iconize Textlinks with CSS
8. CSS Curly Quotes
- Curly Quotes with Pure CSS
- Swooshy Curly Quotes Without Images
9. Using CSS Opacity for Various Cool Effects
- A CSS only fly-out menu with transparency
- CSS Menu using CSS opacity property
- Opacity Background Blending Effects
- Transparency Menu Watermark on an image
10. Blurry Background Effect
กูรู Chris Coyier
- how to create a blurry background using CSS
11. CSS Parallax Effect
- Examples of and How to Create the CSS Parallax Effect
- A parallax illusion with CSS: The Horse in Motion
12.Create a Lightbox effect only with CSS
นี้เป็นเป็นประโยชน์ที่อันหนึ่งที่ใช้ css และ javascript นิดหน่อย ที่ใช้สร้าง lightbox
- technique
13.CSS-Only Accordion Effect
- create Accordion using CSS
14. Add grunge Effect to Text Using Simple CSS
นี้เป็นการสอนสั้น ๆ คุณสามารถดูการ add effect ให้กับ text โดยใช้แค่หนึ่งรูปเท่านั้น
- tutorial
15.Create a Block Hover /Element Hover Effect
- Learn how to create a block hover effect for a list of links
- CSS element hover effect.
16. Simple Dither Effect using CSS
- dither effect
17. Create a liDock Menu
- Horizontal Menus That Grow on You
18. CSS Hover Swap Effect
- CSS swap hover effect
19. Polaroid effect using CSS
คุณชอบภาพแบบ Polaroid ไหม คุณสามารถสร้างรูปภาพให้เหมือน Polariod ได้
- Polaroid-izing photos with CSS and one Image.
20. CSS Magazine Style Layout
- Create a Magazine Type layout Using CSS
21. CSS Hoverbox Menu
นี้เป็น menu ที่เทห์จริงๆ เลย ใช้ image กับ css
- cool CSS Menu
22. CSS TABS - CSS Only “DOM TABS”
นี้ดีกว่า ใช้ css อย่างเดียวเลย ไม่มี jquery หรือ Javascript สักนิดเลย สุดยอด เราสามารถเอามาดัดแปลงได้เลย
- Create a Tabbed content
23. CSS Magic with Fixed Background-attachment
- shows a trick that reveals a magic
24. CSS tooltips
- Show a message when hovering over the links.
25. Pure CSS Preloader
- Add a “loading” icon to your larger images
