What’s in your CSS armoury?
I was going through my bookmarks clearing out some dead links and taking a look at some of my CSS bookmarks and it got me thinking about other CSS tricks I might be missing out on. So I thought I would share some of my bookmarks here to hopefully get some of you to post your tips and tricks links.
I still refer to these links throughout web builds as no one can profess to keeping *every* CSS trick in their head as well as be super woman/man at writing valid well structured mark up, remembering project deaulines and feeding the cat, yourself and taking a shower! You get my point.
So here’s what’s in my CSS arsenal…
Layout
- Layout demos and more: pmob.co.uk/
Rounded corners
- Mountain top corners: alistapart.com/articles/mountaintop/
- Generate round corners: neuroticweb.com/recursos/css-rounded-box/index.php
CSS Drop shadows
- Dustan Orchard: demo.1976design.com/dropshadows/
- Fuzzy shadows: alistapart.com/articles/cssdrop2/
Image replacement
- Gilder/levin method: levin.grundeis.net/files/20030809/alternatefir.html
- Sifr: mikeindustries.com/sifr/
Styling links & navigation
- Custom underlines: alistapart.com/articles/customunderlines/
- Seamless rollovers: wellstyled.com/css-nopreload-rollovers.html
- Single image navigation: superfluousbanter.org/archives/2004/05/navigation-matrix-reloaded/
- Sliding doors – tabs: alistapart.com/articles/slidingdoors/
- Image maps:
Styling tables
- Stripey rows
- Table design icant.co.uk/csstablegallery/index.php
Forms
- Design and layout
CSS support has been well supported for years and with the release of IE7.0 it’s good to see we are progressing. But what about CSS3? Why not start implementing CSS3 techniques? That’s what I would like to ask. I have decided to start exploring opportunities where I can enhance my web layouts with CSS3 in a degradable fashion. Let’s start taking advantage of it now and start pushing more UA to support CSS3.
The most widely supported selectors from CSS3 are the attribute selectors, so let’s start playing with them. Hook an isolated css3.css file to your site and start tinkering. As long as the site works perfectly well without it, what’s stopping us from doing that? Pop over to Dante Evans site and check out the very nicely put together compatibility chart for more details on CSS3 support.
If anyone has seen some examples of CSS3 in use and not just for demos please let me know.
On a final note for links, don’t be without this helpful links page: Web developers handbook.:)
I didn’t get where I am today without Jon Hicks - particularly this nugget: http://www.hicksdesign.co.uk/journal/highlighting-current-page-with-css
Is this layout a redesign or a realign?
Oh the power of body ID’s!
Great one, such a simple idea yet I had to be pointed towards this too! So many uses for applying different layout templates.
hmm.. well I have to admit this was a bit of a realign and redesign. I wanted to jump out of the common Wordpress look but also reposition myself as a web pro.
I am looking to change a few things in my life over the coming months, (which I won’t divulge publicly on here) and this was the main motivation for the change. To hopefully aid these changes and expose my skills in interface design and usability. I wasn’t happy with some of the navigational elements on the old version.
You see, you got me waffling!
Randomly dropping by…
The problem with doing it Jon’s way is that the meaning is hidden in the CSS instead of being exposed in the markup. I’d always recommend wrapping the current item in an em or a strong to distinguish it semantically and use that as the hook for restyling too.
Like the design though!
Oh nice idea, not thought of that one. Makes perfect sense.
What is a web pro? This is apocalyptic stuff.
Hmm, good question, I tried to google it and nothing was there! You’re right, it’s a myth…