cssvault - inspiring creativity

Styling form elements is probably one of the toughest challenges in CSS design, right up there with positioning and dealing with varying browser quirks. That is why I personally try to avoid styling form elements, unless absolutely necessary.

Probably one of the toughest elements to style is the input type=”file”. It’s that cute little input box with a browse button beside it. You normally encounter them when uploading photos and files on a website.

In a perfect world these form elements should look consistent on all platforms and across different browsers. But this is not a perfect world, and so those who seek to style their form elements are faced with the task of making these form elements look consistent. A not to difficult task for standard input boxes, text areas, and buttons, but as always there needs to be a single element that just would not cooperate and obey CSS rules. You got it: input type=”file”

So we resort to using tricks such as multiple div layering, making the input box invisible, and even JavaScript (to the rescue, as always). For the longest time my favorite reference is Michael McGrady’s technique, which you can read about here.

Then there are those who decide that the best way to deal with these ugly creatures would be to hide the input box completely, leaving only the browse button visible for file selection. Accessibility proponents will probably cringe at this suggestion, but it works and sometimes that’s all that matters to the designer.

Personally, I prefer none of the above. In fact, I actually prefer not to style form elements at all (gasp!) Okay I was exaggerating. To not style form elements would be utterly moronic. But I think I got the point across. Remember the 90’s where everyone thought changing the color of the scroll bar was cool? Now it’s as good as dead and shamefully forgotten.

Personally the best form design is where styling done at a minimal, often restricted to sizing, placement, and font styling only. Let the operating system handle drawing of backgrounds and borders and scroll bars. They were designed that way. Plus, you’ll have less problems and and sleep better.

Zebra striping—also known as candy striping or half-shadow—is the application of faint shading to alternate lines or rows in data tables or forms. Examples of websites that use zebra striping include the currency site XE, the CIA World Factbook, and Monster.com. Zebra striping on the web is actually a carryover from print days: one of the first mentions of the technique appeared in 1961 [1]. Unfortunately according to this article on A List Apart, there really is no proof which demonstrates zebra striping as having a large, significant benefit over the other.

This illustration of Homer Simpson was created using pure HTML and CSS. The source website is written in Spanish, and it doesn’t look like any explanation was given on the creative process. Looks like it took a lot of time to create though. Ingenious!

The resulting image displays properly across most modern browsers:

• Internet Explorer 5.5, 6 y 7
• Opera 9
• Firefox 2
• Safari 3

I have even tested it in Firefox 3 and it displays properly with no issues.

Here is the complete HTML code used to create CSS Homer:
(more…)

I have always been a huge fan of the minimalistic sign-up form. You know, the ones where all it takes to create an account is to provide 3 items: username, e-mail address, and password. Including the password confirmation box and that makes four. So, I was ecstatic when Luke Wroblewski’s article came out. Here he was telling us that there is actually a better approach which allows its visitors to plunge into the service without being stopped by a sign up and a login screen.

I tested one of the featured sites myself, Geni and behold, I never even saw a registration screen. I was converted from visitor to user in a snap.

Other featured sites included Jumpcut, TripIt, and Fidelity’s myPlan.

Now that is what you call thinking out of the box!

As a follow up to my recent article on CSS-only, tableless forms, do check out the CSS Form Garden, a gallery that showcases uniquely style forms utilizing the same forms technique.

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.

Lightview is an AJAX image viewer similar to the ever so famous Lightbox JS. It features very nice, PNG-less, customizable rounded corners, a slideshow mode, pulsing captions, and a very clean and smooth blackout animation and slideshow transition.

One thing that I really like about Lightview is that the image remains stationary when scrolling unlike in Lightbox where the image scrolls with the content.

Still, the script was implemented on Scriptaculous and Prototype, which, given the size of these things may not be the way to go for sites optimized for speed. For those looking for a lighter lightbox alternative, Slimbox may be the better choice.

Technique to build flexible CSS drop shadows applied to arbitrary block elements using plain and simple CSS and without using any images.

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.