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
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
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
29. CSS-Submit Buttons
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
Sarah
May 8th, 2008 9:36 amI am about to embark on a CSS learning curve of excellence thanks to this list!
bilard
May 20th, 2008 11:05 amGreat and excellent article it’s realy helpful. Thanks again.
sara
May 22nd, 2008 1:56 pmTons of resources here. Thanks!!
Roland Schupp
May 28th, 2008 11:25 pmThx a lot for another great resource. I am again surprised how much benefit a webdesigner can get out ouf your magazine.
sachin khobragade
May 30th, 2008 3:51 amit’s really a great stuff !
Pattern Crochet
June 3rd, 2008 12:48 amThanks for very interesting article. I really enjoyed reading all of your articles. Keep up the good work. See You
Jaspal Singh
June 9th, 2008 1:54 amwow ! … i think i will have to brush up my skills … thnx
ildvr
June 14th, 2008 4:01 amvery useful tricks! Thank you! but in CSS I prefer to use as little pics as design can.
moovendan
June 17th, 2008 1:18 amcool techniques . Keep up the good work.
Vera
July 2nd, 2008 11:32 pmThis list is orgasmic. Bookmarking in every single social bookmarking service I have an account with. I cannot afford to lose this!!
Dimitar
July 10th, 2008 11:55 amGood TEchniques!
Ivan
July 18th, 2008 10:04 amGreat 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.
Tilemahos Manolatos
July 23rd, 2008 6:37 amexcellent collection!
rajesh
July 29th, 2008 3:24 amI Will use this in my website.
wangtao
August 1st, 2008 6:32 amgreat source!
Mulli Bahr
August 18th, 2008 1:11 amGreat work! the 300+ responses says it all!
I will be back for more….
Thank you.
RegEx
August 18th, 2008 10:29 pmYou 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.
oaken
September 8th, 2008 3:30 pmGreat list… i’ll bookmark your site… thanks
Hero
September 9th, 2008 6:52 pmit ‘s powerfull!
Thank you so much!
Diablo
September 16th, 2008 3:26 pmthank you so much 2!aa
wtf
September 25th, 2008 12:39 pmConsidering 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.
Üzeyir özkol
October 4th, 2008 5:37 amThank You
Rahul
October 6th, 2008 11:09 pmreally is tremendous work in css i was so excitted to learn css really
really really really thanks…
stefan
October 7th, 2008 11:56 am:O
mega list :)
juz wiem co bede siekal przez kilka dni :D
mrRo
October 8th, 2008 1:18 amThanks so much
Mauro Castaldi
October 13th, 2008 4:46 amWonderful !
Anthony Mark
October 22nd, 2008 4:18 amWow what a fantastic inventory, you’ll be saving me a shed load of time, much appreciated!
yubs
October 29th, 2008 11:21 pmwow !!
great !!
thank U !!
gogo~book mark~
——–in korean
와우 !!
멋져요!!
고마워요!!
북마크 고고씽~
siva
November 1st, 2008 9:26 amreally 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……
rohit mehra
November 5th, 2008 12:43 amExcellent 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!!!!!
Ralf Merz
November 7th, 2008 2:57 amGreat list! Very interesting things.
Thank you very much for this great work!!!
Max
November 7th, 2008 7:47 amExcellent list, very helpful for me. Many CSS techniques were unknown for me and will surely help me on some future projects! :)
Chary
November 18th, 2008 10:25 pmGr8 work indeed..
Cool CSS tricks & Nice techniques…. right here!!!
అదిరింది గురూ!
(in telugu)
Anuradha Joshi
November 20th, 2008 5:09 amits great work……………
can i have a code of this?????
its really excellent…….. great!!!!!!!!!!!
teknoloji
December 4th, 2008 11:21 pmreally very helpful tutorial
kavitha
December 9th, 2008 12:05 amIts very great work.
can i have a code of this samples?????
Steve
December 11th, 2008 6:28 pmgreat collection, thanks…
francis.augustin
December 14th, 2008 11:12 pmnice
Daan Walraven
December 16th, 2008 9:19 amI’m the #1000 comment!
Bibi
December 18th, 2008 8:06 pmreally fantastic….and usefull…thanks for this
ali
December 26th, 2008 2:33 amYOU ! ARE ! AWSOME ! THANKS !
Jaikumar
December 29th, 2008 2:44 amThis very wonderful tutorial.
plecho
December 30th, 2008 5:25 amimpressive.
Amber Weinberg
January 2nd, 2009 7:27 pmAwesome list! I didn’t even know you could do some of this stuff with CSS!
Mr. Jones
January 3rd, 2009 7:35 amFinally a useful article with useful information!! Thanks :-)
eAi-nEt
January 12th, 2009 3:50 amThat’s wat i’m talking about , Smashing , Just one word
Awesome
Thanks , we need alot of this cool posts
Ofer
January 12th, 2009 4:11 amFinally, 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.
Daisy
January 18th, 2009 2:41 amFantastic!
Javaid
January 18th, 2009 9:41 pmReally great.Thanks a lot. We needed them so much.
CSD
February 2nd, 2009 11:29 amThank you!! Great list to keep as a reference.
saurabh
February 3rd, 2009 8:09 amgreat lists ! got some new tricks even .. thanks for sharing …
sourav sen
February 4th, 2009 12:32 amExcellent list..
strony internetowe wrocław
March 4th, 2009 8:26 amGreat list to keep as a reference.
Me
April 6th, 2009 12:33 amStill a great list! Where’s the “even more CSS techniques” :)
Manuel
April 13th, 2009 3:17 amno.1000
very nice and useful list. thx
strony internetowe
April 21st, 2009 7:50 amnice tutorial :)
Gemedj89
April 25th, 2009 6:28 amGreat !! Thanks !
paztel
April 29th, 2009 9:26 amgracias ^^
thanks
moovi
June 17th, 2009 4:03 amGreat Article …….. Thanks a lot
Armig Esfahani
June 27th, 2009 10:12 pmthank you! this is exactly what i needed!
NotAlame
July 11th, 2009 3:42 amlot of thanks for these usefull informations!!!
ardyonline
July 20th, 2009 4:36 pmlove this! nice compilation… really helpful… thanks so much… :)
Balian
July 22nd, 2009 12:09 amThat’s cool!
Brad Sherrill
August 8th, 2009 10:27 amGreat compilation of CSS Tecnhiques
satish Borkar
August 24th, 2009 4:52 amreally nice techniques
thanks
Ana Astobieta
August 28th, 2009 6:55 amGreat list, very helpful, thanks a lot!
moinuddin
September 14th, 2009 1:58 amit’s just great collection of CSS , Wonderfull i was not knowing many of thsi tecniques can u provides sources for all
Moinuddin
KSA
Petr Komárek
September 22nd, 2009 5:59 amThe 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…
juders
September 24th, 2009 3:38 pmThe link to number 37 is: http://www.barenakedapp.com/the-design/displaying-percentages. Check it out and leave your thanks on the thread.
Xtence
October 29th, 2009 8:03 amNice list, looks like the one i’m using :-) good post
Jon
November 1st, 2009 7:48 amGreat list! Lots of useful info here.
barry eagan
November 8th, 2009 4:31 amI likes to farts while traveling 40 mph.
Andrey Viana
November 17th, 2009 9:09 amHi, 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:
- 12. How to Create a Block Hover… Correct link is: http://www.smileycat.com/miaow/archives/000230.php
- 29. CSS-Submit Buttons: http://www.ukthoughts.co.uk/journal/css-submit-buttons
j
November 18th, 2009 11:06 pmtanx for techniques…these are very useful to me…:D
web assassin
November 18th, 2009 11:07 pmtanx for techniques…these are very useful to me…:D
Jeevanath
December 23rd, 2009 11:33 pmGreat list. tons of thanks
this is more like a joke
December 24th, 2009 10:53 amhi mate,
Great effort to put up an article. Your doing it not well at all. Some of the sample u showed, need javaxcript to run. So this should be call css and javascript techniques.
Sonfishdesign
January 9th, 2010 8:19 pmThis is a great list. Can you add “sticky footer” to this list?
Jose Anibal
January 25th, 2010 10:57 amWow, thas very wonderful, i trying to learn css, that example, will help me.
Milind
February 2nd, 2010 6:54 amWhat can I say about this great work !!! … superb … absolutely superb
AlMubdi
February 11th, 2010 2:42 amThis are great techniques . Keep up the good work. & thanks for sharing
Markus
February 17th, 2010 6:13 amThanks!!!!!!!!!
Madhukar
February 20th, 2010 8:50 pmNice links very useful for designers. please inform to me any new updates are added.
Atestate
February 22nd, 2010 4:03 amI will use some of this tips on my site atestatinfo.ro
balaji
March 22nd, 2010 11:50 pmNice collection.
Useful for designers.
üzeyr özkol
March 30th, 2010 10:15 pmHi!
number 37 subject “Displaying Percentages with CSS” I could not understand it :(
sam
April 2nd, 2010 3:08 amwow.. amazing, thanks a lot
mohammad
May 5th, 2010 10:46 pmvery very very very veryyyyyyyyyyyyyyyyy thanks
Farghana
May 11th, 2010 5:34 amSimply amazing and awesome!
rakesh adnal
May 24th, 2010 12:19 amThx a lot for another great resource. I am again surprised how much benefit a webdesigner can get out ouf your magazine.
samat
June 15th, 2010 12:59 amnice…………..
mantrla srinivas yadhav
July 2nd, 2010 2:58 amhi technical guides yours new tips and new creative designs are very good and excellent css optimizing tips.
Reghu
July 13th, 2010 8:16 amgood one… great
sekar
July 14th, 2010 5:27 amuseful resource. I bookmarked it
ivan
July 14th, 2010 4:23 pmvery nice collection, i add some others recently i´ve posted on my website if you want a deep study check it out, its on spanish btw
Andrew Henderson
September 2nd, 2010 11:01 amAwesome list here. Some really useful stuff. I would recommend anyone wanting to learn CSS go down the line and try these tutorials. Thanks for collecting them!
Mat Marlow
September 6th, 2010 12:20 pmThe link on number 8 is flagged as a reported attack page in Firefox.
imrz
September 29th, 2010 1:55 amYou have written a very informative post about logo design tips. I came across your blog while searching via google.com . I have bookmarked your site and sent the link to some of my colleagues are will also find that useful.
mike
September 29th, 2010 2:14 amI have gone through the list and that’s really a great list. I will save this link for future reference.
Elli Granados
November 7th, 2010 8:07 amThis is really one of many improved content connected with those that I have please read on this kind of matter nowadays. Great do the job.
admec
November 30th, 2010 3:38 amnice tips, I enjoyed completely. post something more on css 3.0 also.
Thanks a lot,
from ADMEC Multimedia Mentors
Brett Widmann
December 9th, 2010 8:04 amThese are perfect! I nwo have so many new ideas.
web dizajn bih
December 9th, 2010 9:53 amGreat CSS techniques! THX
Preston Racette
December 17th, 2010 1:20 pmFor # 25. (CSS-Based Forms: Techniques) I think it looks amazing… so simple yet stylish and proffestional. The other articles are amazing too. Keep up the good work!
prestonracette.com/
Prakash
January 10th, 2011 2:03 amGreat Excellent CSS techniques, Thanks a lot for improve my CSS Knowledge… Keep it up and add something more I am waiting for new….
spinner chief
January 17th, 2011 1:02 pmKeep it up, your writing is consistently a pleasure to read that I perhaps told my friends. Just enjoying this!
Andre Moves
January 25th, 2011 3:52 pmman and van this is great for me i didnt know few thisnk mentioned here thanks
designerbooster
February 3rd, 2011 3:17 pmThanks for these css tips. Was looking for a batch list like this well done.
sachin patil
February 14th, 2011 4:16 amHi,
I want to use same like( “50. StyleMap: CSS+HTML Visual Sitemap”). but here I cant find specified link. its showing Page is not available. so could you please help me to get that simmillar page. Thanks in advenace. 50. StyleMap: CSS+HTML Visual Sitemap
Ulises Bolivar
March 2nd, 2011 4:08 pmINTERESANTE APORTE
veeresh
April 12th, 2011 11:39 pmvery nice collection
Prem
June 6th, 2011 1:44 amSimply Great Article
Thanks
youtube
June 29th, 2011 3:23 amtahnks for share
vishal
August 25th, 2011 10:29 pmany thing new related to image rounded corners.
daxa
September 7th, 2011 9:13 amHi its vary good. i would also like to share one basic css website http://cssproperty.com
Curtis
October 8th, 2011 1:19 pmHi there, outstanding site. Is extremely good design. I recently got done with cosmetic classes and would like to start-up my site. I appreciate you for the good write-up!
yawer
October 28th, 2011 11:39 pmwonderful info for me…
Joshua Phillips
December 5th, 2011 11:36 pmAny news about A defector’s mystical disappearance?
Flo Perce
December 11th, 2011 11:32 pmGood post, Love it. Keep it up. I appreciate it.
Minta Aragones
December 11th, 2011 11:53 pmYou have pretty nice blog here. Not bad keep it up. I will mention about this in my own blog. All the best
Jan Cooper
February 13th, 2012 7:14 amThis is a very useful reference – thanks for sharing