cssvault - inspiring creativity

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’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.

iBegin has just released iBox, a “lightweight, fast, and flexible” lightbox script.

It supports the following content types:

Images
It supports image overlaying and will automatically scale down the window if the browser’s viewpane is too small.

Documents
Displays linked documents in a similar fashion as Images.

Inline Containers
iBox can also display containers (e.g. hidden DIVs) within the same page.

YouTube Videos (Flash Video)
iBox’s architecture supports plugins. Images, Documents, and Inline Containers are all plugins, and YouTube Videos is provided as an example for developers to make their own plugins.

One notable aspect of iBox is its support for non-JavaScript capable browsers. It supports a target attribute which specifies the target document to be loaded, so that you can specify a different value for the HREF attribute. Very nifty.

Links:

• iBox Homepage
• iBox Support Forum
• iBegin Labs

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 …

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.

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.

Shadowbox is a lightbox-style multimedia viewer inspired by LightWindow. This includes images, Flash videos, Quicktime, Windows Media Player, and even webpages.

From the website:

Shadowbox is a cross-browser, cross-platform, cleanly-coded and fully-documented media viewer application written entirely in JavaScript. Using Shadowbox, website authors can display pictures and movies in all major browsers without navigating away from the linking page.

Aside from support for Firefox 1.5+, Safari 2+ and IE 6+, it comes with adapters for most widely adapted JavaScript frameworks, allowing for easy integration and optimized code execution.

• Yahoo! User Interface Library
• Ext (standalone)
• Prototype + Scriptaculous
• jQuery
• MooTools (requires Fx.Styles and its dependancies)
• Dojo Toolkit (thanks Peter Higgins)

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.

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.