• June 27th, 2007
• Filed in
  • CSS
  • Web Design
  • Web Development

Whenever I feel the need to use transparency it always seems like I am dealing with tones. Make this a little darker, give this a bit softer tone. Couple this with the fact that I’m always looking for easy and reusable ways of doing things and you have Easy-Bake Background Transparency.

It’s nothing fancy really just a collection of white and black PNG’s that are grouped by their transparency 10% – 90%. Saves fellow designers the 15 minutes it took to create all the images! (background color added for display purposes)

PNG’s are 5x5px that should be tiled. Example of use:

.w10 {
background: url("/images/w10.png") repeat;
}

Download » Easy-Bake Transparents Set

• June 10th, 2007
• Filed in
  • CSS
  • Web Design
  • Web Development
  • jQuery

IE6 lacks CSS 2 support and as a CSS guy – this generally sucks to deal with. One particular pain point is when stylizing form elements. Sometimes overlooked – it has become one of the first things I usually attack when developing a website. I can’t stand unstylized forms. I tend to leave buttons alone, but slapping a 1px border on input,textarea and select elements can work wonders. But due to lack of CSS 2 support in IE6 there is no easy way to differentiate html elements like these:

<input type="text"/>
<input type="submit" value="submit"/>

This leads to a term Jeffery Zeldman coined as “classititisâ€? – the extraneous use of class assignments in markup. To deal with IE6 I previously would create markup such as this:

<input class="text" type="text" />
<input class="submit"  type="submit" value="submit" />

to give myself the proper style hooks required to differentiate the elements.

With browsers that support CSS2 – Firefox, IE7, Safari, etc (basically every one nowadays except IE6) it is easy to use proper CSS2 selectors

input[type=text] { /* styles /}
input[type=submit] { / styles */}

However, leveraging jQuery and some simple rules can cleanup our markup and avoid classititis. We can even add in sharp focus/blur based styling behaviors for an enhanced prettification of otherwise boring form elements.

Enter jQuery

I am a huge fan of jQuery. I’ve used quite a javascript frameworks but none of them stuck more than jQuery. Between the thriving community, excellent documentation, and plethora of plugins – you can’t go wrong.

I frequently reuse code snippets of useful functions and css rules that I’ve accrued over time (more on my CSS toolkit another time). Here is code that allows me to avoid the trap of classititis due to lack of CSS2 support in IE6:

$(document).ready(function() { 
        $("input[@type=password], input[@type=text]").addClass("text");

    $("input[@type=password], input[@type=text], textarea").focus(function() {
        $(this).addClass("focus"); 
                //focus class provides a hook to alert the user 
    });
    
    $("input[@type=password], input[@type=text], textarea").blur(function(){
        if ($(this).find(".focus")) {
            $(this).removeClass("focus");
        }
    });
});

input type=”text” try typing in some text and taking focus off the input box

textarea This is a textarea element with some content

CSS that will pull it all together

input.text, textarea, select {
  color: #777;
  padding: 2px 5px;
  font-size: 110%;
  border: 1px solid #333;
  background: #fafafa;
}
.focus {
  background: #fff !important;
  color: #000 !important;
}

Be sure to check out 456bereastreet for an excellent article on CSS 2.1 selectors.