I first learned about CSS/style tags as a better way to apply colors to fonts, control the hover effects of a hyperlink, and add more variety to tags so that <STRONG> isn't the same as <B>.
But it was http://www.glish.com and the CSS tutorials there that opened my eyes to the layout possibilities of CSS. This site has gone through a couple major style revamps, always moving from HTML-based design to a more CSS-based approach.
So I decided to 'give back' a little by adding some of my own experiments, with instructions on how to re-create them yourself. You may have noticed the squares along the right edge of this screen stay on the right edge even when you resize the window, and they don't scroll with the rest of the page. This is just one example of CSS 'eye candy'. The squares are useless and meaning less, they only serve to add visual interest and make the page stand out a bit more in the w3 ocean.
I've created several others--usually they start with a phrase like "I wonder if I could do that with CSS" or "I wonder how that would look if...". But didn't want to keep changing my page design to use these new ideas, so no one else ever saw them. Till now.
The pages below represent some of my better successes and starting techniques for you to design your own. All the graphics used are displayed on the page for easy saving (a checkered background indicates transparency, and is not really part of the image if you save it. Putting a checkered background under the transparent parts of an image is another fun CSS trick...), and sample CSS is given to get you started (all the relevant CSS is in the source too, if you wanna look; but it's slightly altered to be switched on-the-fly with JavaScript, and you probably don't need to do that.)
I don't claim that any of this is ground-breaking or jaw dropping (you want jaw-dropping CSS? Check out the everchanging CSS Zen Garden.) The ideal result of visiting a page like this is that you'll come away with a new idea, a thought on how you can adapt something here to fit what you want your page to look like.
If you use any of the graphics or ideas here, I'd appreciate you dropping me a line with the address of the page you made--'cause I'd just like to see it! A link back to http://www.blueknot.com or this page would be greatly appreciated too!
Note: CSS itself doesn't require Javascript, but the pages below DO use JS to change the style of the page so that each page is several samples in one. All of the script is visible in 'View Source' if you're the careful type.
Learning to Fly
Fundamentals of CSS. Some familiarity with this material is assumed in the other sections.
Starter Kit - Tackling the questions of Why, What, and Where...
Inside the Box - Basics of the CSS box model
CSS vs. the <FONT> Tag - Guess who wins...
Decorating with CSS - Borders, backgrounds, colors, URLs and more
Graphics on the Edge
Re-inventing an old dog with a new trick
Left Edge - Improving on an old trick
Right Edge - Here's a effect most people haven't seen before
Both Edges - Well if I didn't show you someone was gonna ask
Middle Edge(?) - It's different, anyway
Left/Right Edge w/ Background Texture - Best of both worlds
Both Edges w/ Background Texture - Just keep piling on the DIVs
Middle Edge(?) w/ Background Texture - Warning: Pun Construction Ahead
Special Effects
The fancy or just plain unusual.
The Impossibly High Fence - You have to see it to believe it
The Halftone Illusion - Eye-twisting edges
I'll add some more later, plus I'm always tinkering around. When I come up with other interesting effects they'll be posted here. Or, if you see something on the site and can't figure out how I did it, ask and maybe I'll add it to this part of the site.
P.S. - I should also mention http://alistapart.com/, another great CSS site. The elegant floating thumbnails on the Tiled Graphics pages are a variation on one of their ideas.
