Transparency has become a big hit in web design since most browsers can display it. Transparent elements are used to either set accents or draw attention to a certain area like images or text passages. But there are a few things that can go wrong while developing websites with transparent effects. Today we’ll show you what you should pay attention to. Let’s create a harmonious website with transparent elements, shall we?
Transparency in Web Design
There are two different ways to get transparency: by using transparent PNG files or pure CSS. The latter becomes more and more popular since all modern browsers can display transparency via CSS. Such effects help display certain areas clearer and add contrast, which draws your visitors’ attention to specific content. Using alpha transparent PNGs might be the easier way; however, most of the time CSS delivers better results. But it’s up to you which way you want to go. Especially in the developing stage, CSS3 is the faster and better option as you only need to adjust one line of code to get a quick result. This makes it easier to quickly change the transparency.
Apply Transparency Using CSS3
Transparency becomes more and more popular thanks to the support of CSS3 with its RGBa color definition. The “a” in RGBa represents the transparent channel. A value of, for example, 0.5 adds 50% transparency to the background color. But don’t forget older browsers if you need to support them. The CSS3 opacity can be applied to images, texts, backgrounds, div elements, etc. Pure CSS solutions perform faster and should be considered, for this reason. However, the most common way to apply transparencies still is the good old alpha transparent PNG.
Be Careful with Multi-Color Backgrounds
Working with multi-color backgrounds can be quite tricky, not only for web design beginners because you’ll sometimes get results which are rather lesser than perfect. Always be careful with images as this can quickly become a complete bomb. Here’s a list of example websites using transparencies. Some make good use of it, others not so much.
But let’s have a look at the beautifully designed homepage:
Only a closer look reveals that the transparent area is slightly too transparent. The mentioned “suboptimal” effect becomes apparent on a subpage with a multi-color background where the transparency has not been adjusted.
The readability suffers a bit due to the high transparency values. Less would have been more here.
The few transparent effects this template uses look pretty good, emphasize and clarify the impression of the image and message. Well done!
Blurb is a web design agency from Yorkshire, England. Their website is a good example of how to use transparency only as a supporting effect and putting the focus on the readability of the content.
There’s no such thing like perfect transparency. All new designs have something special to them and, therefore, require individual settings and transparencies. Experiment with the options CSS3 provides. It’s easy as a breeze because you can change and try out other transparency settings within seconds. You’ll surely find the transparency that works best for your website. If you want to apply transparency effects to several areas of your website, try out different levels of transparency because some projects require different settings even on the same page.
Generally speaking, you should focus on readability and user-friendliness. Otherwise, you may upset your visitors who will then turn their back on your website. When putting a content area on the main content, you should use low transparency to make sure that the content is readable. Here are some examples:
They did everything right. Many transparent areas alternate with animations – a funny concept that’s well implemented.
The subdued transparency of the main content area enhances the readability of the content. It does not only look good but is also user-friendly.
The following examples use carefully selected, subdued transparent areas. Sometimes to highlight certain things, sometimes to obtain a certain effect, like GO4 Events.
GO4 Events only has one transparent area on their website – in the header around the logo. This area, however, dovetails with the “normal” website elements and supports them with this little goody.
The illustrator Brad Colbow also relies on subdued transparent elements. He uses these areas to highlight titles, which works very well because the title elements accentuate this area without being too intrusive.
The Body Shop ATL uses transparency in three areas: the logo, the bar below the hero area (the large images), and the small area in the right half of the image containing the company’s telephone number. Here transparency is used to accentuate and not as an end in itself.
With all the possibilities it offers today, transparency is almost a must-have in web design. It should not be used as an end in itself but only for supportive reasons. This brings off the effects, and you’ll get what you’re after: an interesting website. I hope this article provides you some inspiration and helps you implement transparency correctly. I explained on one example what could have been made better. I’m sure you’ll strike a balance.
Ioanni Mitsakis is front-end developer at a major European automotive supplier and responsible for the look & feel of their internal cloud-based apps. As his employer works internationally with distributed teams world-wide, a rock-solid development foundation is what Ioanni aims for. He better should ;-)