Consistent Forms with Formalize CSS

As designers, we are used to having quite a bit of control over how things are displayed in a browser. Sure, differing rendering engines don’t always agree on everything, but for the most part we can at least find ways to mitigate variance through workarounds, or by writing for the lowest common denominator.

By far, one of the most frustrating parts of dealing with browser inconsistencies has got to be forms. There are two distinctively differing schools of thought regarding (not) styling form elements. For the longest time, we’ve had people on both sides of the proverbial fence, neither group being particularly pragmatic.

Formalize CSS bridge the gap between various browsers and OS’s, taking the best ideas from each, and implementing what is possible across the board. For the most part, this means most textual form elements have a slight inset, and all buttons look consistent, including the button tag.

Nice CSS3 Buttons

This is a collection of buttons that show what is possible using CSS3 and other advanced techniques, while maintaining the simplest possible markup. These buttons look best in Chrome and Safari (especially on OSX). They look almost as good in Firefox, with all other browsers falling back to a less-styled button.

cssSandpaper – a CSS3 JavaScript Library

The cssSandpaper JavaScript library looks at the stylesheets in an HTML document and, where possible, smooths out the browser differences between CSS3 properties like transform, opacity, box-shadow and others.  This script is not only useful for developers who want to support CSS3 in IE (which doesn’t support it in IE natively) but in other browsers which implement their own vendor-specific variants of these properties.

Polaroids with CSS3

Using some awesome CSS2 and CSS3 to turn an unassuming list of images into a full-blown set of polaroid pictures.

CSS3 Menu – Create CSS menu free!!

Creating a nice looking menu no longer needs all the code and time it use to, thanks to CSS3. Using this FREE CSS3 Menu you can create great looking buttons using just CSS3 in a few clicks.

CSS3 is changing how we build websites. Even though many of us are still reluctant to start using CSS3 due to the lack of support in some browsers, there are those out there that are moving forward and doing some amazing stuff with its cool new features. No longer will we have to rely on so much JavaScript and images to create nice looking website elements such as buttons and menu navigations.

You can build a cool rounded navigation menu, with no images and no Javascript, and effectively make use of the new CSS3 properties border-radius and animation. This menu works perfectly well with Firefox, Opera, Chrome and Safari. The dropdown also works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow will not be rendered. CSS3 transitions could one day replace all the fancy jQuery animation tricks people use.

Menu Features

No Javascript is required
Works in browsers with disabled Javascript or if a browser has no Javascript support at all.

Cool CSS3 properties
Multi-level dropdown menu is created using CSS3 rounded corners, CSS3 shadow (box-shadow and text-shadow).
Opacity, backround and font colors, linear gradient and radial CSS3 gradient are also supported.

SEO friendly
Search engines and text-only browsers friendly.

100% CSS-driven designs
The menu is based on HTML list of links (UL/LI structure) and CSS only. No additional non-css params are used.

Small size
Immediate loading of the menu. Doesn’t use additional files.

Browser support
Supports all modern browsers (except IE6).

GUI interface
Visual design user interface allows you to create your menus without the need for complex hand coding. Use the preview window to view your menu design while you are developing and customizing.

BonBon Sweet CSS3 Buttons

CSS buttons that are sexy looking, really flexible, but with the most minimalistic markup as possible.

CSS3 Playground

Use this web application to experiment and learn about new css3 capabilities. The styles applied when changing the different settings should follow the principles of progressive enhancements and will work in all browsers that support the setting.
Just change the settings and see how the rectangular box changes according to your changes.

Sencha Touch – The HTML5 Mobile App Framework

Sencha Touch allows your web apps to look and feel like native apps. Beautiful user interface components and rich data management, all powered by the latest HTML5 and CSS3 web standards and ready for Android and Apple iOS devices.

CSS for iPhone 4 (Retina display)

CSS for iPhone 4 (Retina display)

Pure CSS speech bubbles

Speech bubbles are a popular effect but many tutorials rely on presentational HTML or JavaScript. Given tutorial contains various forms of speech bubble effect created with CSS2.1 and enhanced with CSS3. No images, no JavaScript and it can be applied to your existing semantic HTML.