Rediscovering the Button Element

Building consistency on the web is especially tough because the visual rendering differences across browsers and operating systems are wildly different and almost arbitrary in what can and cannot be done. No where does this become more apparent than when you’re dealing with form elements and the biggest loser of them all in the battle for a standardized look is the infamous Submit button.

As is, the input with the type=”submit” is either too ugly (Firefox), a little buggy (Internet Explorer) or completely inflexible (Safari). The solution for most is to use image inputs and create the damn things ourselves. What we need is something better – something more flexible and meant for designers. Lucky for us, the solution already exists and all it needs is a little love. My friends, let me introduce you to my little friend : the “button” element…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

CSS Backgrounds: 12 Solutions To Common Questions

CSS backgrounds are an important part of web design. The property is where you add the colors and images that sit behind your content, which controls much of the aesthetics of your site. Remove your CSS backgrounds and your site will probably be text on a white background. While relatively easy to understand, CSS backgrounds often lead to some questions and confusion when it comes to pulling off specific techniques. Let’s see if we can clear up some of that confusion and then answer a few of those technique specific questions…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

To CSS Reset or Not to CSS Reset

Question: Which Global Reset for CSS Should I Use? The short answer is the simplest one possible. The slightly longer answer is that you should reset some styles, but do so with a good reason. The long answer is that the exact CSS reset you choose will depend on the needs of your design…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Cross-browser Drop Shadows Using Pure CSS

There’s an awful lot of noise at the moment regarding dropping IE6 and forging ahead with CSS3 properties for the finer touches on web layouts. One such example is adding drop shadows to content blocks. There are countless ways of achieving this, most requiring additional HTML markup and one or more PNG images. Not to mention hacks for IE6 to get render PNGs properly.

CSS3 provides the box-shadow property to achieve just that. Thankfully Safari/Webkit has supported this for some time, and Firefox more recently with Firefox 3.5. Internet Explorer provides a DropShadow filter but this provides a hard-edged shadow unlike its CSS3 counterpart. By combining the Glow and Shadow filters however, we can achieve something that fairly closely resembles the rendered CSS3 shadow…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

5 Simple, But Useful CSS Properties

This post is about 5 useful CSS properties that you should be very familiar with, but will most likely rarely use. I’m not talking about the new fancy CSS3 properties. I’m referring to the old CSS2 properties such as: clip, min-height, white-space, cursor, and display that are widely supported by all browsers. So, don’t miss this post because you might be surprised how useful they are…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

How to Create Perfect Pre Tags

If you operate a website that features lots of code examples, you know how important it is to spend some quality time styling the “pre” element. When left unstyled, wild “pre” tags will mangle your preformatted content and destroy your site’s layout. Different browsers treat the “pre” tag quite differently, varying greatly in their default handling of font-sizing, scrollbar-rendering, and word-wrapping. Indeed, getting your preformatted code to look consistent, usable, and stylish across browsers is no easy task, but it certainly can be done. In this article, I’ll show you everything you need to create perfect “pre” tags…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

Introducing the Flexible Box Layout Module

One aspect of CSS3 that hasn’t received a lot of attention so far is the Flexible Box Layout module. Already implemented in the Gecko and WebKit engines, in this alternative box model the children of a box are laid out either horizontally or vertically, and unused space can be assigned to a particular child or distributed among the children by assignment of ‘flex’ to the children that should expand. Here’s how this works…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Manipulating CSS Classes With jQuery

In this lesson I want to illustrate you how to use some useful jQuery methods that allow you to manipulate easily CSS classes. In particular I prepared some examples to explain the following methods: toggleClass, hasClass, addClass and removeClass…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Quickie CSS3 Tricks with Fallbacks

CSS3 can do some seriously neat stuff. Just check out some of the crazy 3D stuff you can do in WebKit. But as we all know, we need to be careful with what we choose to do with it. The most cutting edge techniques are fun to play with, but since since only a sliver of browsers support them fully, we can only use them in circumstances where they fall back to otherwise perfectly acceptable styling. Let’s look at a couple of quick, simple examples…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)