Advertisement

CSS3 vs Photoshop: Opacity and Transparency

by
Student iconAre you a student? Get a yearly Tuts+ subscription for $45 →
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:

 	<section class="box opaque">
    <img src="images/thumb.jpg" width="180" height="180" alt="Thumb">
    This is a 100% Opaque element, everything inside this tag is fully visible
    </section>
    
<section class="box translucent60">
    <img src="images/thumb.jpg" width="180" height="180" alt="Thumb">
    This is a 60% Opaque element, you notice that this text is hard to read because Opacity affects the entire element and all the content inside it. </section>

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

/*Full page image background */
body.image{
	background-image:url(images/bg.jpg);
	background-position:top center;
	background-attachment:fixed;
	background-repeat:no-repeat;
}

/*Opacity Test*/
.opaque{
	opacity: 1;
}

.translucent60{
	opacity: 0.6;
}

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:

.translucent_on_hover{
	opacity: 0.4;
}

	.translucent_on_hover:hover{
		opacity: 0.9;
	}

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:

  .translucent_transition{
  opacity: 0.4;
  
  -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;
  }
  
  .translucent_transition:hover{
  opacity: 0.9;
  }

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:

.opaque{
	background-color:rgba(255, 150, 0, 1); /*Alpha = 1 means 100% opaque*/
}

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.

.translucent{
	background-color:rgba(255, 150, 0, .6); /*Alpha = .6 means 60% opaque*/
}

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

.translucent_gradient{	
	background-image:-moz-linear-gradient(top, rgba(255, 150, 0, .9), rgba(255, 150, 0, .1));
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 150, 0, .9)), to(rgba(255, 150, 0, .1)), color-stop(1,rgba(255, 150, 0, .1)));
}

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

.translucent_transition{
	opacity: 0.4;
	
	-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;
	
	background-image:-moz-linear-gradient(top, rgba(255, 150, 0, .9), rgba(255, 150, 0, .1));
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 150, 0, .9)), to(rgba(255, 150, 0, .1)), color-stop(1,rgba(255, 150, 0, .1)));
}

	.translucent_transition:hover{
		opacity: 1;
	}

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:


<div class="page">
	<div class="wrapper">
        <section class="container">
            <section class="box">
            	<img src="images/pic1.jpg" />
                <hr /><h2><span>Transparency and Opacity</h2>
                <p>Some text here</p>
            </section>
            
            <section class="box">
            	<img src="images/pic2.jpg" />
                <hr /><h2><span>Transparency and Opacity</h2>
                <p>Some text here</p>
            </section>
        </section>
    </div>
</div>

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

/* Reset */
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td, img{
    margin: 0;
    padding: 0;
	border:0px;
}

header, section, footer, aside, nav, article, figure {
    display: block;
}
/* End of Reset */

body{
	font-family:Arial, Helvetica, sans-serif;
	color:#333;
}

html{
	height:100%; /* To add a full page body CSS3 gradient you need to set this height to 100% */
}

.wrapper{ margin:0px auto; width:960px; padding:60px 0px 60px 0px;}

.left{ text-align:left;}

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

/* Body image background */
body{
	height:100%;
	background: url(images/bg.png); /*Image Background*/
}

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.

/* Transparent Gradient */
.page{
	width:100%;
	height:100%;
	background: -moz-linear-gradient(top, rgba(15,20,5,0.75) 0%, rgba(15,20,5,0) 50%, rgba(15,20,5,0.75) 100%); /*Transparent Gradient*/
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(15,20,5,0.75)), color-stop(0.5, rgba(15,20,5,0)), to(rgba(15,20,5,0.75)));/*Transparent Gradient*/
}

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

/* RGBA transparent background */
.container{
	width:770px;
	padding:15px;
	height:460px;
	margin:0px auto;	
	
	/*Translucent Background*/
	background:rgba(89, 113, 29, 0.5);
	
	/*Border Radius*/
	border:1px solid #71941D;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	-khtml-border-radius: 20px;	
	border-radius: 20px;
	
	/*Get rid of Bleed*/
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
	
	/*Box Shadow*/
	box-shadow: 0px 0px 25px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 25px rgba(0,0,0,0.75);
	-webkit-box-shadow: 0px 0px 25px rgba(0,0,0,0.75);
}

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).

.box{
	/*Position*/
	padding:10px;
	margin-bottom:20px;
	min-height:200px;
	
	/*Translucent Gradient Background*/
	background: -moz-linear-gradient(top, rgba(26,35,8,0), rgba(26,35,8,0.85)); /*Transparent Gradient*/
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(26,35,8,0.15)), to(rgba(26,35,8,0.85)));/*Transparent Gradient*/
	
	/*Rounded Corners*/
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;	
	border-radius: 5px;
	
	/*Fix the bleed*/
	-moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
	
	/*Hide it a little bit until mouse over*/
	opacity: 0.4;
	
	/*Enable Transition effects*/
	-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;
}
	.box:hover{
		opacity:1;
	}

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:

.box img{
	float:left;
	margin-right:20px;
	
	border:1px solid #71941D;
}

	.box:hover img{
		box-shadow: 5px 5px 5px rgba(0,0,0,0.50);
		-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.30);
		-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.30);
	}

.box h3{
	font-size:14px;
	font-weight:bold;
	color:#8eb548;
	text-transform:uppercase;
	padding-bottom:20px;
}

.box p{
	color:#c0cf9d;
	font-size:11px;
	line-height:150%;
}

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

View Demo


Conclusion

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

Advertisement