Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
  1. Web Design
  2. CSS

CSS3 vs Photoshop: Opacity and Transparency

Read Time:9 minsLanguages:
This post is part of a series called CSS3 vs. Photoshop.
CSS3 vs. Photoshop: Rounded Corners and Box Shadows
CSS3 vs Photoshop: Transforms

During this quick tutorial we'll get to grips with the concepts of Opacity and Transparency in HTML elements. We'll be playing with a set of effects which, before CSS3, could only be achieved by using several images created in Photoshop.

Note: All the following examples were tested on Mozilla Firefox, Safari and Chrome. If you want to get something similar in IE or any other browser leave a comment and I will be glad to help you.

Before We Get Started

In this tutorial we will use Gradient Backgrounds, Box Shadows and Multiple Images Backgrounds, topics covered in the first two tutorials of this series:

Step 1: Opacity

If you've ever used Photoshop or similar graphics package, you'll be familiar with the Opacity Value. This magic works by increasing or decreasing the transparency of any graphic element in a percentage value, from 0% (Completely invisible) to 100% (Fully visible). This percentage is the "Alpha" value, I'll explain how it works later on in the tutorial.

CSS3 includes the "opacity" property, ready to be implemented in all modern browsers, but how does it work? Imagine you have three Photoshop elements within a folder, as shown in the screenshot below: an image, a line of text and a solid square over a picture background. The Image, text and yellow square are inside a folder named "Section". By reducing the Opacity percentage of that folder all the layers within it will appear more transparent.

In CSS3 things works pretty much the same. The Folder has become an HTML container element (a div, a paragraph, a section etc.) Therefore, altering the "opacity" property of that element will (just as in Photoshop) increase or decrease the visibility of all the elements inside it. Take, for instance, this HTML markup:

Now, let's see the CSS for the previous markup.

As you see, changing opacity is really easy, but when would you use it? One very effective technique is increasing the opacity on the :hover pseudoclass:

But if you want a really impressive effect, you can throw in some transitions..

Transition Effects

A transition effect interpolates the intermediate states between two stages or instances of any HTML element style.

To keep things simple for now, let's look at the basic code of a transition effect (in a time lapse of 1 second).

-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;

Hint: To guarantee you're not missing out any of the various browser prefixes, check out Jeffrey Way's recently released Prefxr tool. It rocks.

You just need to attach this CSS rule to the element you want to animate with a transition effect, like this:

The "ease-in-out" style means that the opacity transition will happen on hover (increasing the opacity) and will revert (decreasing the opacity) back to the original value when the cursor moves outside the element.

View Demo

Step 2:Transparency

Every pixel of color can be created by combining three sets of values: Red, Green and Blue, each one from 0 to 255.

We usually use Hexadecimal values for colors in your stylesheets, for instance the basic colors:

  • Red: #FF0000
  • Blue: #0000FF
  • Green: #00FF00
  • Black: #000000
  • White: #FFFFFF

You can get the same colors using the RGB values in CSS, as follows: rgb(<red>, <green>,<blue>).

  • Red: rgb(255, 0, 0)
  • Blue: rgb(0, 0, 255)
  • Green: rgb(0, 255, 0)
  • Black: rgb(0, 0, 0)
  • White: rgb(255, 255, 255)

An easy way to get the RGB values of any color is by using the Color Picker from Photoshop, as shown in the image below.

And Where is the Transparency?

When applying the "opacity" property in CSS you affect the entire container and all the content within it. This is useful sometimes, but you may only want to have the background transparent and leave the text and the image 100% opaque. Here comes the "Alpha" value again.

CSS3 allows us to use an RGB color format including a fourth value named Alpha. This isn't a new concept, PNG images use the alpha channel to set the transparency of pixels on an image to a value from 0 to 1 (0% to 100%) . This creates a better transparency effect than GIF images manage, as they only set a visible/invisible value to the pixels.

Take for instance the following graphic:

Notice that I'm only changing the opacity on the yellow background layer.

For this kind of effects there is the "RGBA" (Red, Green, Blue, Alpha) color value:

rgba(<red>, <green>, <blue>, <alpha>) where alpha is a number between 0 and 1 setting the opacity of the color. If you want to use rgba color for a full visible background, you can do it like this:

And if you want to reduce the opacity of the background to make it translucent, it's as easy as changing the last value on the rgba color parameters.

As the rgba color behaves as a classic hexadecimal color you can use it on a Linear Gradient background.

And of course you can combine it with the opacity style to create nice transition effects.

View Demo

Step 3: Combine Several Styles to Create Outstanding Effects

Now, let's try something more complex. We'll combine multiple image backgrounds using transparency, a hover opacity effect, and rounded corners and box shadows to create a feeling of depth.

Let's start with photoshop, in the tutorial assets you will find the PSD of the following graphic:

We will try to get an exact result using only CSS3 styles. There'll be a couple of sample images for the thumbnail on the sections, and a pattern background (you're welcome to create your own). This time I used bgpatterns.com to create a repeating image.

Let's start with the HTML markup, nothing too complicated:

Now the fun part, the CSS. First reset the default styles, set the body typography and set the styles for the wrapper section:

Then set the body background, basically a repeating image (you can use any image you want)

Now, we will set the styles of another wrapper div called "page", this div will have basically the same width and height as the browser window, and more importantly, we will add a linear gradient background using RGBA colors.

Now, set the style of the container section, a rounded corner box with a translucent background.

It's starting to take shape. Now set the styles of the content boxes. Set the position, a rounded corner effect, a gradient translucent background and we'll combine it with a hover effect increasing the opacity on mouse over (for this enable the transition effects).

Now let's add the final touches, for the HTML elements inside the boxes. You can try adding more effects to the elements on static mode and hover, this time I will make a box shadow visible on the "img" tag when the mouse is over the "box" section:

And that's it, let's see how it looks in a browser:

View Demo


There is no limit to what can be made using transparencies and opacity effects combined with other CSS3 styles. Try it now!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.