ClearYourMind is our company blog about business, the Internet and everything a "web-guy" loves by Javier Cabrera, owner and principal of Emastudios, a tiny web design agency based in the beautiful caribbean-like Buenos Aires, Argentina.

April 29, 2008

CSS Magic: The Ultimate Guide

I’m so tired of having to search on Google those little CSS tips we use every week at the job don’t you? It will be nice to have a page where the best of them (and more frequently updated) are shown for us to have. That’s why I created this quick reference list with all the CSS Tricks & Magic I usually end up using over the week. Of course, they are not all in here, but the ones that have cross-browser support, are easy to use and are updated often enough to catch up with all this crazyness (IE) we see around the web. Here they are:

Boxes with Rounded Corners

Need to have those little boxes with rounded corners around your blog or web site? here’s how:

  • Nifty Corners Cube (http://www.html.it/articoli/niftycube/index.html
    Fear no more, nifty Corners Cube is here. You no need to have corner images to make rounded corners anymore; this CSS/Javascript does it all. Simple to use and works in any browser.
  • Spiffy Corners Generator (http://www.spiffycorners.com)
    Want to just copy & paste? shame on you! but here’s the solution you’ve been looking for: a simple rounded corners generator; can’t be easier to get it now isn’t it?
  • Rounded Cornr Generator (http://www.roundedcornr.com/)
    Another way of doing a men’s work. With this generator is even easier to have rounded corners on your website. Fully customizable!

  • Spanky Generator from SitePoint (http://tools.sitepoint.com/spanky/)
    This comes from a forum I used to read a lot. SitePoint is one of the largest communities for web developers in the world, worth a look (no elite egomaniacs there. I’m looking at you 9rules guy!). This is definitely one of the best rounded corner generators I’ve ever seen.
  • Anti Aliasded Nifty Corners (http://acko.net/blog/anti-aliased-nifty-corners)
    Based on the Nifty Corners, this is one hell of a job. Although Nifty Corners was good, it left round borders with a slight “pixelated” effect; now that’s in the past. Anti-Aliased Nifty Corners is a pretty damn good technique and easy to apply.

CSS Drop Shadow

Yes! because you also need to drop shadows sometimes on images, divs, or whatever.

  • A List Apart CSS Drop Shadow (http://www.alistapart.com/articles/cssdropshadows/)
    This one is fantastic! isn’t quite easy to use the first time, and it has it’s pros and cons, but you will end up loving it once you get used to the code scheme.
  • ALA CSS Drop Shadows (http://www.wubbleyew.com/tests/dropshadows.htm)
    This is one hell of script: basically is the same script than the one from Sergio Villareal (the A List Apart CSS Drop Shadow one) but with some tweaks that make it much more easier to handle.
  • CSS Shadow Kerfuffle (http://theshapeofdays.com/2005/11/29/my-contri…)
    There are many CSS Shadow techniques out there, most of the use javascripts or strange css; this one uses images and css only; it’s almost as good as the other two on this list but it’s up to you to find out which one works better for you

CSS Tabbed Navigation

Do I need to say more? how many hours did you spend going through some tabs you invented only to find out someone made it easier before you? go ahead, grab one; they are all free!

  • Navigation Matrix Reloaded (http://superfluousbanter.org/archiv…)
    This is the one apple is using I suspect; it gather all your tabs in one single image and then the CSS does all the work. Once your 20kb image has been loaded, you have unlimited tab power.
  • Sliding Doors (http://alistapart.com/articles/slidingdoors/)
    Considered by many (me included) the father of all tabbed navigation links, Sliding Doors is one of the few real css gems out there. Once you learn this one; your level goes +50. The only “problem” with this technique is that requires to be left or right floated.
  • Centered Sliding Doors (http://24ways.org/2005/centered-tabs-with-css)
    A wise men said once: “give me a problem and I shall give you a solution”. Sliding Doors works only if it’s floated left or right; but the guys at 24 ways solved this with a little tweak; give it a look.
  • CSS Mini Tabs (http://www.simplebits.com/bits/minitabs.html)
    SimpleBits mini tabs. This one is not just simpler to use, but it also looks great. Minimalism in all it’s greatness

CSS Forms

One of the most horrible things to fight with in the CSS world is with forms. Most of the time, doing them with tables is what’s right and easier; but there are other times you just need to do them with CSS (accessibility, etc). For those times, here’s the list:

  • Pretty And Accessible Forms (http://www.alistapart.com/articles/prettyaccessibleforms)
    One of the things you gotta love is the hard work the AListApart guys put into their tutorials. Here’s a nice and easier (as it can) way of having CSS forms in a couple of minutes.
  • Accessible CSS Forms (http://www.websiteoptimization.com/speed/tweak/forms/)
    Long (and accessible…yes, I know…) tutorial for having real accessible forms in our web sites using just CSS and HTML (no tables inside!).
  • Wufoo CSS Forms Generator (http://wufoo.com/)
    This is basically a service which has a free account plan where we can build up to 3 forms. If you like this service, you can also have pay plans; but I don’t think that’s really necessary (build your own forms!)
  • Rediscovering the Button Element (http://particletree.com/features/redisco…)
    I must admit I didn’t knew this one at the moment of writing this reference post. Now that I know it, I will apply it to every one of the sites I’m working it because it’s an AMAZING way of showing your submit buttons.
  • Fancy Form Elements (http://lipidity.com/fancy-form/)
    I love beautiful designed forms, and this trick over here uses some Javascript to do one of the most coolest radio/check boxes I have seen in a while. The down side of this technique is that uses little CSS and a lot of JS… but can work for some special projects.

That’s it for today. I will update this list when I find more interesting CSS tricks to place here so check it out regularly (or bookmark it!)

Follow us on Twitter for more productivity, business and Internet posts at the "DonCabrera" tweet!

Viewing 100 Comments

 
close Reblog this comment
Powered by Disqus · Learn more
blog comments powered by Disqus


This work is licensed under a Creative Commons License permitting non-commercial sharing with attribution.
Copyright EmaStudios 2008 | Legal notice