cssvault - inspiring creativity

I have been receiving a couple of inquiries on how to create do CSS forms so let me direct you to Jeff Howden’s two year old CSS-Only, Table-less Forms article. Yes you heard me right folks: two years old! Yet it still displays properly on the newest browsers, which only shows how resilient the code is.

By now you must be wondering about the “almost perfect” part in the title. This is simply because the CSS code does not validate. The culprit? Of course, it’s IE again, with the JavaScript-in-CSS expression() hack.

Oh, and if you have questions or suggestions for articles, you may reach me via dennison [at] cssvault dot com

Have fun!

jQuery happens to be my favorite JavaScript framework, so I was very happy when Noupe came up with a list of 50+ Amazing Jquery Examples. The article has “Part 1″ attached to it so expect to see more. The list ranges from useful to awesome to just cool, such as the following:

• Date Picker - a flexible unobtrusive calendar component for jQuery
• Style Switcher - allows your visitors to choose which stylesheet they would like to view your site with. It uses cookies so that when they return to the site or visit a different page they still get their chosen stylesheet
• Table Sorter - turns your standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes
• Form Validation
• Image Galleries
• and more …

MooFlow is an image gallery that mimics the look of Apple’s iTunes Cover Flow. It runs on top of Mootools.

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.

Daniel Ott has come up with a handy tool for converting pixels to EMs. Forget about using the headaches of manually using a calculator and doing all the math. This bookmarklet can take care of it and will it will also calculate the pixel to em value relative to a specific element.

Here is the bookmarklet:

Thank you, Daniel Ott for this very useful tool!

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.

The Google Chart API allows you to easily create dynamic, professional-looking image (PNG format) charts with very little programming. Data can be encoded to provide up to 62 (with simple encoding), 1,000 (with text encoding), or 4096 (with extended encoding) different values.

Choose from a variety of charting styles including:

Line chars

Bar charts

Pie charts (2D and 3D styles available)

Venn diagrams

and

Scatter plots

Not only is the chart API is free to use, the best part is that it doesn’t come with advertisements. No, not even a Google logo gets embedded in the chart, though as far as I know this is the first of its kind to offer such a service, so there is really nothing out there to compare it to. So why are they offering such a great service — one that obviously consumes a lot of bandwidth — for free? I’m not part of Google, but I’m sure this is part of their grand scheme of taking over the world. In a good way, of course.

CSS guru Eric Meyer has spent some time rethinking CSS reset and has come up with a new stylesheet:


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}


This will probably change but for those who are looking for a good, understandable CSS reset, this is a good start.