21 Amazing CSS Techniques You Should Know
Jul 30th, 2009 - 50 Comments »
Posted in CSS
Cascading Style Sheets(CSS) is one of the building blocks of modern web design without which websites would have been ugly just like they were a decade ago. With time, the quality of CSS tutorials out there on the web has increased considerably. Here are 21 amazing CSS Techniques that you might not have thought could be done by CSS.
1. Cross Browser CSS SlideShow
Amazing demonstration of how to create a cross browser image gallery using just CSS.
2. CSS Based Image Maps
This tutorial demonstrates a crazy way to create an image map using just CSS.
3. No JavaScript LightBox Using CSS
Create a lighbox using just CSS with no JavaScript required.
4. Image Replacement for Buttons
Replace the submit buttons with images using CSS, degrades back to submit button if CSS is disabled.
5. Animated Navigation Menu using CSS
Amazing tutorial on how to create an animated navigation menu using just CSS.
6. Tree Like Navigation Using CSS
Create a tree like navigation from nested lists of links. Very useful for creating sitemaps.
7. CSS Gradient Text Effect
Create eye-catching titles with nice gradient effect using just CSS.
8. CSS Menu List Design
Very easy to understand tutorial on how to create a menu list using either CSS border-style or background-image property.
9. Creating Liquid Layouts With Negative Margins
Amazing way to create a liquid layout using negative margins
10. Making Your Footer Stay Put With CSS
This might occur to you some time when a content page has not enough content to fill the page, so footer also moves up due to this. This tutorial shows you how to deal with this and make footer stay at bottom even when content is not enough.
11. Simple, Scalable CSS Based BreadCrumbs
Create a nice scalable breadcrumb navigation
12. Snazzy Pullquotes for Your Blog
Make the blockquotes in your content or blog posts standout from rest of content. Very useful to highlight major points in long content pages.
13. CSS Stacked Bar Graphs
Display graphs on your website using just CSS without any JavaScript or other heavy plugins.
14. How To Create a Block Hover Effect For List of Links
15. Multi-Column Lists
This article shows all possible ways you can use to stack up an unordered list into multiple columns.
16. Date Display Technique with Sprites
If you have ever visited Learning jQuery then you might have noticed the awesome date display next to each blog post. This tutorial will show you how to achieve that using CSS Sprites.
17. Date Badges and Comment Bubbles for your Blog
Display date and comments on your blog posts in a nice way that takes less space.
18. How To Build a CSS Image Viewer The Clever Way
Create a nice image viewer using CSS that will work even if user has disabled flash and JavaScript in the browser.
19. Creating a CSS Image Preloader
Use the CSS background-image property to preload images without any javascript required.
20. Fade Out The Bottom of Pages
This tutorial shows you how to make page content fade away into the bottom of the page just like the fortuito.us blog.
21. Creative and Cool Uses of the CSS Border Property
This article shows you how the CSS Border property can be used to achieve some cool effects. You’ll be surprised to know how cool the CSS Border property is.
Share
Subscribe to Full RSS Feed
If you found this article
useful, then consider subscribing to our
RSS Feed or
e-mail updates to stay updated with
latest Web Design/ Development articles. You can also follow @webdevplus on twitter for latest updates.
15 Ways to Improve CSS Techniques Using jQuery
25 Amazing & Free Flash Based Image Galleries
30+ Fresh & Amazing jQuery Plugins & Tutorials
50 Responses (Add Your Comment)
Comments are closed for this post.
12 Lesser Known But Useful WordPress Hacks
25 Incredibly Useful CSS Tricks You Should Know
Great resources. Especially the date badges & comment bubbles are totally new for me. Stumbled!!
Interesting. Some of these I have not seen before!
wow.. amazing list..
Good list. Nice to have it all in one place!
Amazing list. Must read for any serious web developer.
there’s a better technique for number 16 at snook.ca
Nice list ! thx
maja aa gaya (hindi) .. means .. i am thrilled and thankful
Terrific list, the “Making Your Footer Stay Put With CSS” tutorial is a must read for developers.
very useful resources. thanks for sharing these techniques.
Very Nice~~ thank you for shared…
My head asplode. I really need to learn CSS.
oh this is just perfect.
right what i need.
thx for sharing.
Wow what a list! short but very useful information
Great post!
Great collection of techniques! Thanks!
Photoshop. NOT PhotoShop
Wow, some awesome CSS ideas here! Thanks for this post, very useful.
yes very useful technical,
The date sprite technique is outstanding. Fantastic list for that alone!
I’ve added this one, and also the jquery article to my bookmarks. I will be planning to implement some of these in phpLD. Nice website!
Great help for the webmaster thanks
Beautiful list! Number 8 is my favorite right now. I’ve tried creating lists like that in the past, and this blows mine out of the water. I do still prefer Ryan Fait’s CSS footer over Fortyseven Media’s (#10), though.
Cheers
an adorable collection … thank you so much for sharing it
Great compilation! I found some which are really helpful. Thanks
Very nice collection. Thanks!