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 …

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.

swIR uses JavaScript and Flash to dynamically apply visual effects to images on a web page, using a method similar to sIFR (Scalable Inman Flash Replacement). Probably the most interesting feature of this is the ability to scale an image long with the text. It reportedly crashes Opera, though.

It is also incompatible with other JS libraries like Prototype or MooTools and doesn’t work with hot-linked images (because of security restrictions in Flash), and you can sometimes get a FOUC (flash of unstyled content) when the image loads before JavaScript replaces it.

Given that CSS 3 can already do almost all of these effects, I am eager to explore other possibilities with Flash-based image replacement. While I expect the adoption of CSS 3 enabled browsers to come slowly, I hope the maintainers of this project will not loose interest and keep it alive with fresh ideas that cannot be done with CSS or CSS 3. How about dynamic image composition, or creating interesting button effects with the images?

Fawnt is a free font resource site that features nicely designed AJAX-driven interface for its main gallery. Beware though as the main gallery links to external sites which may no longer be working. The main gallery appears to host files on the same server, so they should all be working.

PHP + CSS Dynamic Text Replacement is a JavaScript-free version of the Dynamic Text Replacement method originally created by Stewart Rosenberger.
(more…)

CoolTips replaces regular browser tooltips with fully stylable tool tips. It uses lightweight and unobtrusive JavaScript to replace conventional web-browser tooltips.

CoolTips automagically gets contents from the title attribute by utilizing the Prototype JavaScript framework. It uses script.aculo.us for animation. Both frameworks will need to be initialized to for it to work.

Link: CoolTips homepage

Nothing can be more disappointing than discovering that all those hours you spent laboriously getting your website to display properly on Firefox and IE7 does not work on IE6. As developers we definitely need to have IE6 and IE7 running side by side on the same machine. That’s how I discovered Multiple IE.
(more…)

I have no idea where it gets its icons or how this site came to be but Iconfinder seems to be a very decent resource for quickly finding free icons.

My only annoyance is that it doesn’t show the license type right away and I have to click a button which brings up an AJAX-ed overlay which is sometimes delayed. It would be so much better if the license type were displayed beside the icon in the search results page. An alternative would be having an advanced search page where users can specify the license type, icon size, etc.

The site should also benefit from having an “icon submission” page where people can contribute though I can understand if the reason this hasn’t been built in yet is because submissions will need to be moderated, and that takes time especially with the amount of spam online forms receive nowadays. I know this for a fact, because 99% of site submissions and comments we receive here at CSS Vault are from spambots.

Alternatively you can check out this blog post on 31 sources of quality, free icons.

Devlounge has compiled a good list of 30 high quality fonts, both free and premium. It’s a very good list, though it is composed mostly of seriff fonts.