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.
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.
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.
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.
I welcome you all to the new version of my hideout on the web, formerly known as warnis.com. As old visitors will noticed, things have changed drastically here.
I’ve gone for a complete overhaul of the site. The name, branding and theme of the site are all brand new. The time felt right for a face lift, and in this case, a big one. I wanted a site that put more emphasis on me than my old one, while having a brand that wouldn’t be as closely connected to my name as the old name was.
Flexibility was another very important aspect to me when building this site. I wanted to create a solid foundation to be able to build further upon if I had the need to, which the old design didn’t quite give me. This led to me writing less and paying less attention to it, which I regret in hindsight.
When creating the design I had two goals. To pay as much attention to detail as possible and to add minor functionality that improve the overall experience. It’s got lots of small javascript enhancements that aim to make the user experience as pleasant as possible.
The other goal was to not feel restricted by the limitations of browsers and CSS when creating it, which I really feel as I’ve accomplished (transparent columns in IE6, anyone?).
I’m very satisfied with the end result and I hope you all will like it as much as I do.
I’ve exported the old posts from warnis.com that people seemed interested in reading (which pretty much means the posts that got search engine traffic). You can find them in the archives.
I’m going to focus more on writing articles on web development and use it less as a blog (hence the name “Articles” instead of Journal or Blog). I’m going to publish thoughts, tips and reflections on web development, web design, user experience and programming. This means that I won’t publish anything new unless I have something of importance (to me, at least) to say.
You can expect some articles on creating this site in the coming days
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.
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!
Nik Ainley, who also go under the pseudonym shinybinary recently published a list of Photoshop shortcuts that he finds useful and uses frequently in his workflow.
It’s a really great read, and even if I knew most of them, I learned a few (like holding the ALT-key when using the text-tool and then pressing the left/right arrow allows you to adjust the kerning between individual letters).
I’d like to add a few myself, which I find invaluable in my workflow:
Have you got any good tips for a smoother Photoshop workflow? Feel free to share them in a comment!
Oh, and by the way, don’t forget to check out his art – amazing stuff!
This site is built with WordPress running on DreamHost. Crafted using love, CSS, jQuery and XHTML. Thanks flies out to SquidFingers for the background pattern.
If you're looking for older posts, have a look in the archives.
Everything written on this site, and any image that is in an article, is licensed under a Creative Commons license as long as I'm the author of the material.
Entries (RSS)
and Comments (RSS).