Smashing Magazine - we smash you with the information that will make your life easier. really.
53 CSS-Techniques You Couldn’t Live Without
CSS is important. And it is being used more and more often. Cascading Style Sheets offer many advantages you don’t have in table-layouts – and first of all a strict separation between layout, or design of the page, and the information, presented on the page. Thus the design of pages can be easily changed, just replacing a css-file with another one. Isn’t it great? Well, actually, it is.
Over the last few years web-developers have written many articles about CSS and developed many useful techniques, which can save you a lot of time – of course, if you are able to find them in time. Below you’ll find a list of techniques we , as web-architects, really couldn’t live without. They are essential and they indeed make our life easier. Let’s take a look at 53 CSS-based techniques you should always have ready to hand if you develop web-sites. Links checked: June/11 2008.
You might want to take a look at the article Powerful CSS-Techniques For Effective Coding.
3. CSS Tabs
4. CSS Bar Graphs (CSS For Bar Graphs)
5. Collapsing Tables: An Example
6. Adam’s Radio & Checkbox Customisation Method
8. CSS Shadows (CSS Shadows Roundup)
9. CSS Rounded Corners Roundup (Nifty Corners)
10. Drop Cap – Capital Letters with CSS
11. Define Image Opacity with CSS
12. How to Create a Block Hover Effect for a List of Links
13. Pullquotes with CSS (Automatic Pullquotes with JavaScript and CSS
14. CSS Diagrams
15. CSS Curves
16. Footer Stick allows for the footer of a Web page to appear either at the bottom of the browser window or the bottom of the Web page content – whichever is visually lowest.
17. CSS Image Map
18. CSS Image Pop-Up
19. CSS Image Preloader
20. CSS Image Replacement for Buttons
21. Link Thumbnail
22. CSS Map Pop
23. PHP-based CSS Style Switcher
24. CSS Unordered List Calender (CSS Styled Calender)
25. CSS-Based Forms: Techniques
26. CSS-Based Tables: Techniques
27. Printing Web-Documents and CSS
28. Improved Links-Display for Print-Layouts with CSS
30. CSS Teaser Box
31. CSS Tricks for Custom Bullets
33. CSS Zooming
34. Creating a Star Rater using CSS
35. The ways to style visited Links
36. PDF, ZIP, DOC Links Labeling
37. Displaying Percentages with CSS
38. Image Floats without the Text Wrap
39. Let visitors decide, whether or not will they open link in a new window
40. Simple accessible external links
41. Zebra Table with JavaScript and CSS
42. Vertical Centering with CSS (Horizontal and Vertical Centering with CSS
44. Image Caption with CSS (Styled Images with Caption)
47. Hierarchical Sitemap with CSS
48. Snook’s Resizable Underlines
49. Switchy McLayout: An Adaptive Layout Technique
50. StyleMap: CSS+HTML Visual Sitemap
Vitaly Friedman, editor-in-chief of Smashing Magazine (www.smashingmagazine.com), an online magazine dedicated to designers and developers.
(6 votes, average: 4.67 out of 5)
Loading ...- 326 Comments
- 251
- 252May 8th, 2008 9:36 am
I am about to embark on a CSS learning curve of excellence thanks to this list!
- 253May 20th, 2008 11:05 am
Great and excellent article it’s realy helpful. Thanks again.
- 254May 22nd, 2008 1:56 pm
Tons of resources here. Thanks!!
- 255May 28th, 2008 11:25 pm
Thx a lot for another great resource. I am again surprised how much benefit a webdesigner can get out ouf your magazine.
- 256May 30th, 2008 3:51 am
it’s really a great stuff !
- 257June 3rd, 2008 12:48 am
Thanks for very interesting article. I really enjoyed reading all of your articles. Keep up the good work. See You
- 258June 9th, 2008 1:54 am
wow ! … i think i will have to brush up my skills … thnx
- 259June 14th, 2008 4:01 am
very useful tricks! Thank you! but in CSS I prefer to use as little pics as design can.
- 260June 17th, 2008 1:18 am
cool techniques . Keep up the good work.
- 261July 2nd, 2008 11:32 pm
This list is orgasmic. Bookmarking in every single social bookmarking service I have an account with. I cannot afford to lose this!!
- 262July 10th, 2008 11:55 am
Good TEchniques!
- 263July 18th, 2008 10:04 am
Great list, but I’d like to see some better examples of some table-based forms as well. Not everyone wants to spend 3 weeks styling a “pure” css form with multiple columns.
- 264July 23rd, 2008 6:37 am
excellent collection!
- 265July 29th, 2008 3:24 am
I Will use this in my website.
- 266August 1st, 2008 6:32 am
great source!
- 267August 18th, 2008 1:11 am
Great work! the 300+ responses says it all!
I will be back for more….
Thank you.
- 268August 18th, 2008 10:29 pm
You definitely put a lot of work into collecting a bunch of tutorials. There is a ridiculous amount of “wow” commenting here and at the risk of getting lost in the mix I really have to stress that everyone starts moving towards some web standards and check out the jQuery library.
- 269September 8th, 2008 3:30 pm
Great list… i’ll bookmark your site… thanks
- 270September 9th, 2008 6:52 pm
it ’s powerfull!
Thank you so much! - 271September 16th, 2008 3:26 pm
thank you so much 2!aa
- 272September 25th, 2008 12:39 pm
Considering alot of these use and NEED Javascript, i wouldn’t call them CSS Techniques… CSS is just handy to manipulate via JS but these are not a OUT of the Box working tricks of pure CSS, they just plain need JS to work, but still handy to have that option.
- 273October 4th, 2008 5:37 am
Thank You
- 274October 6th, 2008 11:09 pm
really is tremendous work in css i was so excitted to learn css really
really really really thanks… - 275October 7th, 2008 11:56 am
:O
mega list :)
juz wiem co bede siekal przez kilka dni :D
- 276October 8th, 2008 1:18 am
Thanks so much
- 277October 13th, 2008 4:46 am
Wonderful !
- 278October 22nd, 2008 4:18 am
Wow what a fantastic inventory, you’ll be saving me a shed load of time, much appreciated!
- 279October 29th, 2008 11:21 pm
wow !!
great !!
thank U !!
gogo~book mark~
——–in korean
와우 !!
멋져요!!
고마워요!!
북마크 고고씽~ - 280November 1st, 2008 9:26 am
really awesome work……. a good collection of work. i have made use of lot of technique given here to create my personal page with admiring styles. thanks to all the persons behind this collection……
- 281November 5th, 2008 12:43 am
Excellent collection of CSS. Its helps me a lot in knowing more about CSS. I hope for more collections in future.
In the end, Great Job!!!!! - 282November 7th, 2008 2:57 am
Great list! Very interesting things.
Thank you very much for this great work!!!
- 283November 7th, 2008 7:47 am
Excellent list, very helpful for me. Many CSS techniques were unknown for me and will surely help me on some future projects! :)
- 284November 18th, 2008 10:25 pm
Gr8 work indeed..
Cool CSS tricks & Nice techniques…. right here!!!అదిరింది గురూ!
(in telugu) - 285November 20th, 2008 5:09 am
its great work……………
can i have a code of this?????
its really excellent…….. great!!!!!!!!!!! - 286December 4th, 2008 11:21 pm
really very helpful tutorial
- 287December 9th, 2008 12:05 am
Its very great work.
can i have a code of this samples????? - 288December 11th, 2008 6:28 pm
great collection, thanks…
- 289December 14th, 2008 11:12 pm
nice
- 290December 16th, 2008 9:19 am
I’m the #1000 comment!
- 291December 18th, 2008 8:06 pm
really fantastic….and usefull…thanks for this
- 292December 26th, 2008 2:33 am
YOU ! ARE ! AWSOME ! THANKS !
- 293December 29th, 2008 2:44 am
This very wonderful tutorial.
- 294December 30th, 2008 5:25 am
impressive.
- 295January 2nd, 2009 7:27 pm
Awesome list! I didn’t even know you could do some of this stuff with CSS!
- 296January 3rd, 2009 7:35 am
Finally a useful article with useful information!! Thanks :-)
- 297January 12th, 2009 3:50 am
That’s wat i’m talking about , Smashing , Just one word
Awesome
Thanks , we need alot of this cool posts - 298January 12th, 2009 4:11 am
Finally, someone who puts all the knowledge in one place.
i My self am a web designer for some time now (Since 1999) and i wanted to launch a page like that for CSS a long time ago, but i became lazy.
Thumbs up, really good job, just keep it posted. - 299January 18th, 2009 2:41 am
Fantastic!
- 300January 18th, 2009 9:41 pm
Really great.Thanks a lot. We needed them so much.
- 301February 2nd, 2009 11:29 am
Thank you!! Great list to keep as a reference.
- 302February 3rd, 2009 8:09 am
great lists ! got some new tricks even .. thanks for sharing …
- 303February 4th, 2009 12:32 am
Excellent list..
- 304March 4th, 2009 8:26 am
Great list to keep as a reference.
- 305April 6th, 2009 12:33 am
Still a great list! Where’s the “even more CSS techniques” :)
- 306April 13th, 2009 3:17 am
no.1000
very nice and useful list. thx
- 307April 21st, 2009 7:50 am
nice tutorial :)
- 308April 25th, 2009 6:28 am
Great !! Thanks !
- 309April 29th, 2009 9:26 am
gracias ^^
thanks - 310June 17th, 2009 4:03 am
Great Article …….. Thanks a lot
- 311June 27th, 2009 10:12 pm
thank you! this is exactly what i needed!
- 312July 11th, 2009 3:42 am
lot of thanks for these usefull informations!!!
- 313July 20th, 2009 4:36 pm
love this! nice compilation… really helpful… thanks so much… :)
- 314July 22nd, 2009 12:09 am
That’s cool!
- 315August 8th, 2009 10:27 am
Great compilation of CSS Tecnhiques
- 316August 24th, 2009 4:52 am
really nice techniques
thanks - 317August 28th, 2009 6:55 am
Great list, very helpful, thanks a lot!
- 318September 14th, 2009 1:58 am
it’s just great collection of CSS , Wonderfull i was not knowing many of thsi tecniques can u provides sources for all
Moinuddin
KSA - 319September 22nd, 2009 5:59 am
The 19th technique (CSS Image Preloader) dont work and will not work. If you repeat an antribute in CSS, it will every time take just the last one…
- 320September 24th, 2009 3:38 pm
The link to number 37 is: http://www.barenakedapp.com/the-design/displaying-percentages. Check it out and leave your thanks on the thread.
- 321October 29th, 2009 8:03 am
Nice list, looks like the one i’m using :-) good post
- 322November 1st, 2009 7:48 am
Great list! Lots of useful info here.
- 323November 8th, 2009 4:31 am
I likes to farts while traveling 40 mph.
- 324November 17th, 2009 9:09 am
Hi, nice post, very usefull!
There are some links are broken, or dont exists anymore:
I don’t look to everyone, but these are some of them:- 4. CSS Bar Graphs: http://www.khmerang.com/index.php?p=118
- 12. How to Create a Block Hover… Correct link is: http://www.smileycat.com/miaow/archives/000230.php
- 14. CSS Diagrams: http://www.surfare.net/~toolman/temp/diagram.html
- 29. CSS-Submit Buttons: http://www.ukthoughts.co.uk/journal/css-submit-buttons - 325November 18th, 2009 11:06 pm
tanx for techniques…these are very useful to me…:D
- 326November 18th, 2009 11:07 pm
tanx for techniques…these are very useful to me…:D
- 00
There are no trackbacks at this time. If you are interested in leaving a trackback, please use this URL.
Leave a Comment
Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!
Interact
Popular
- 100 Wordpress Themes
- Photoshop Tutorials
- Fantastic Wallpapers
- 40+ Excellent Freefonts
- Dual-Screen Wallpapers
- Wordpress Themes for 2009
- Illustrator Tutorials
- Incredible Free Icon Sets
- High-Quality Free Fonts
- 30 Scripts For Galleries
- Photoshop Text Effects
- Useful Icon Sets
- Web Design Trends
- iPhone Wallpapers
- Before Launching a Website
- CSS Layouts And Templates
- Photoshop Actions
- Stunning Pictures and Photos
- Fantastic HDR Pictures
- Logo Design Tutorials
- Free Design Templates
- 10 Mistakes In Logo Design
- Photoshop Custom Shapes
- 40 Creative Design Layouts
- 8 Layout Solutions
- 53 CSS Techniques
- Photography Techniques
- Black & White Photography
- Styling Design Elements
- CSS-Based Forms
- 50 jQuery Techniques
- 50 Portfolio Websites
- 50 CSS Techniques
- Creative Logo Designs
- Desktop Wallpapers
- 25 Open Source Mac Apps
- 50 Free Icon Sets
- The Big Showcase Of Online T-Shirt Stores - http://bit.ly/5Tq8uA
- @ilmv oh ok then ;)
- @ilmv no, the SM Book will not be out of date :) We made sure it contains universal design, usability and marketing principles.
- Apple ad bombing Windows 7 on Google - http://bit.ly/28ctPq
- Atatonic - a fresh CSS framework - http://bit.ly/4oOV2w (via @umutm)
- @HrvojeKC yes, that's an interesting idea. Maybe when the waiting is over, we'll write a detailed post about it.
ohh….wonderfull………….