bits&pixels

Since I got so many email requests from people asking me how I created the effects on my header image and menu, I put together a little tutorial describing how I did it over at Swedish Fika. I hope you enjoy it and learn something from it!

PS. If you haven’t checked out or heard of PicLens I strongly advise you to. It’s the coolest Firefox plugin I’ve seen! Image browsing has never been more fun!

Transparency is an effect that, unfortunately, haven’t gotten much use during the web’s history. One of the biggest reason for this is the lack of support for PNGs with alpha channels in IE6. This is starting to change with IE7 and Firefox gaining more and more ground on Windows systems.

As most web developers are aware o it’s possible to use PNGs with alpha channels, but this is filled with lots of problems and doesn’t work very well when you place content on top of them.

There is a way to make content transparent, using the opacity tag and a proprietary opacity filter in IE-based browsers. The problem with this CSS-property is that all children to the transparent element will be transparent as well, which often isn’t the desired effect.

Knowing all this, how do we create transparent columns that can work in all browsers? What if we could use the opacity property but still have the content opaque?

This is possible using some clever use of CSS-positioning. What we’ll be doing is having a parent element that contains two children. One transparent background that fills the entire width and height of the parent, and one child that contains the content. This way we can have a transparent background while the content remains opaque.

Let’s get working

The basic markup we will be using is as follows:

<div id="column-1" class="container">
  <div class="overlay"></div>
  <div class="content">
    <h2>Content</h2>
  </div>
</div>

First we want to set the container to position: relative; float: left; this allows us to use relative absolute positioning and makes the parent to contain all children if they are floated.

#column-1 {
  position: relative;
  float: left;
  width: 500px; /* remember to set a width */
}

Not let’s take care of the transparency on the “overlay”-div.

.overlay{
  position: absolute;
  top: 0; /* These positions makes sure that the overlay */
  bottom: 0;  /* will cover the entire parent */
  left: 0;
  width: 100%;
  background: #000;
  opacity: 0.65;
  -moz-opacity: 0.65; /* older Gecko-based browsers */
  filter:alpha(opacity=65); /* For IE6&7 */
}

Ok. Now let’s style the content. It’s important to set a fixed width.

#column-1 .content {
width: 460px;
padding: 20px;
}

Ok, almost done. As you may have noticed (if you’re following me, that is) the text is placed under the transparent overlay div. To fix this, we set the content to position: relative;

.content {
  position: relative;
}

Ok, now it works in all browsers except for IE6. Let’s fix that. Enter the following CSS expression:

/* Lets use the * html hack so only IE6 reads the rule */
* html #column-1 .overlay {
  height: expression(document.getElementById("column-1").offsetHeight);
}

If you plan on using it on a live site, you may want to use conditional comments instead of the star html hack. But for this example it will suffice.

Drawbacks

It’s also noteworthy that it won’t work in IE6 if javascript is disabled, but it degrades gracefully. Given the last survey of IE6 I saw which was about 32% and the (roughly) 10% that surf the web without Javascript, only 3% of your visitors will even notice this, which I find totally acceptable.

Another downside is that each column needs it’s own id and it’s own CSS rule for IE6. I can live with that though.

Conclusion

And there you have it! Here’s a working example. Cross-browser transparent columns. This is the same technique as I use on this site. Floats work too - which makes it possible to create multi-column transparent-column layouts.

Download the source-file transparent-columns.zip.

Translations

Spanish
Russian

Alright, today we’re going to create glossy OSX/Web2.0 style buttons. But we’re going to take a different, more flexible approach to creating them.

The most usual techniques (that I’ve seen, at least), usually require some form of blending and use of the select-tool to for creating the gloss. This quickly becomes a bit tedious when you want to create multiple buttons with different forms, sizes and colours. So let’s take a different approach to creating these buttons.

Using layer styles

Alright. Let’s create some good looking buttons from just one layer! Grab your rounded rectangle tool (U) on the keyboard and then select the rectangle. A corner radius of 20px will do well, also remember to make sure anti-aliasing is checked! Create a new layer and draw a rectangle on it in any colour you wish (we’ll change this later anyway).

Alright, now let’s get on to create a little more depth to it. Use fairly dark shades of gray, like so:

Ok, now for the trick which will provide us an easy way to change the button’s colour later on. Add a “Color Overlay” layer style, chose whichever colour you wish (bright shades, saturated shades work the best) and change the blending mode to Linear Dodge.

Alright, let’s get some more depth on that button, and combine it with a nice glossy effect. Add a “Bevel and Emboss” layer style, either use my settings or have a play with them yourself.

There’s an alternative way of adding a gloss (the results aren’t quite as good though) which I’ll show you later on.
Now let’s add an inner and outer glow to define the button’s edges a tad.

Alright, now let’s add a drop shadow and adjust the blending options a bit, and we’re all set!

Alright, here’s the alternative way of creating the gloss. First of all, uncheck “Bevel and Emboss”. Then add an “Inner Shadow” using these settings.

Alright, now that we’ve got our layer style, let’s save it so we can user it whenever we wish without having to go through this entire process all over again.

Alright, now we’ve got glossy buttons in multiple colours and shapes with the click of a button. Have fun using them!

I’ve uploaded the .psd containing the layer style if you’re too lazy to make it yourself. You can grab it here.

If you like this article, please digg it to help spread the word!