cssvault - inspiring creativity

Probably one of the toughest hills to climb for every CSS beginner is positioning, and this article introduces positioning in 10 very easy to understand slides, with an accompanying screen shot of each technique. Check it out at http://www.barelyfitz.com/screencast/html-training/css/positioning/

I’ve seen at least three submissions over here at CSS Vault of sites that use the “Step Carousel” effect. I did not even know what it was called until I saw this article, which outlines the steps needed to accomplish the effect using the jQuery library.

The result looks very nice and the animation is very smooth. The only issue is that this tutorial takes so many steps and makes use of inline JavaScript, though I suppose they can easily be converted to DOM-based JQuery statements, separating the presentation layer from the backend.

Stumbled into this article which presents alternative Mootools code for styling scrollbars.

Personally though I prefer jScrollPane, but that’s because I’m a JQuery user.

While surfing around today day I landed on FitFlash, a JavaScript solution to resize Flash animations “… to 100% width and 100% height when your browser window is greater than the minimum desired size and resizes flash to the minimum desired size when the browser window is smaller…”

FitFlash is a smart script that resizes your flash automatically if your browser window size is smaller or greater than your flash minimum desired size keeping it accessible independent of screen resolution.

It works seamlessly with SWFObject, which is great.

This technique uses CSS pseudo selectors to the drop cap effect without modifying the HTML code.

For the poor folks who use IE6, David Kaneka came up with a JavaScript (jQuery) based solution that we can use.

So go ahead and see how it’s done or check out the demo page.

WebDesignerWall has come up with a trick that uses nothing but a little CSS and PNG to apply gradient effect onto plain HTML text. The trick involves overlaying a blank block element that contains a translucent PNG gradient on top of the regular text.

As can be seen in this demo page, it actually looks pretty good.

There are a few limitations to this, of course. One being that the gradient will have to use the same color as the text’s background. Second, the background will have to be a solid color.

Finally, it requires the PNG hack to work on IE6, which relies on JavaScript. So, if the viewer happens to have JavaScript turned off, be prepared to see some cross-browser uglyness:

All in all a novel idea, but I’m not so sure I want to risk the chance of loosing a visitor though an accidental flash of ugly design.

Another article demonstrating what could be done by combining effects such as opacity, shadows, and tiger striping.

Currently they are claiming that only Opera 9.5 beta renders the demo correctly — not really useful right seeing that Opera has been stuck at ~1.5% market share, and I am sure only a handful of them actually use the beta.

Posting this from my sleek and super fast Mozilla Firefox 3 Beta 2.

Update: Link to the article (thanks, mediter!)

I personally am not a big fan of frameworks, but if you work with a team enforcing frameworks is a good way of getting things done consistently and getting everyone up to par when it comes to CSS standards. This article highlights the pros and cons of using frameworks, and is a good reference for the top CSS frameworks available on the net.

Comprehensive tutorial that covers just about everything you need to know about floated CSS elements.

CSS Text Wrapper is a tool that generates CSS for text wrapped by custom-defined edges. It can generate three types of code that will achieve this effect: inline CSS, XHTML with external CSS classes, and JavaScript. It’s a really nice tool to have, especially for those aiming to create “something different”.

Check out the website and the examples page.