CSS3 Transition Effects in My New Website

Having finished my MSci exams at UCL, I thought I would take this opportunity to "freshen up" the layout on my personal website. There was one nasty, looming problem with this idea, however - I suck at design.

Design work starts off a days-long cycle of me torturing myself. In stage 1, I accept/realize that I am bad designer with few capabilities and resign myself to "keeping it simple". Stage 2 sees me drawing half of a dozen paper sketches and mock-ups for this "simple design". These designs later inundate my hapless friends as I pester them for their opinions. By stage 3, I've accepted that half of my sketches are terrible, and that the other half require an on-screen mockup to judge. Thus I launch the Gimp and try to create a vector mockup, leading back to stage 1: realizing that I don't have the technical prowess to complete this design and resolving to do something simpler. After several days, this process takes its toll on my mental health and produces an unremarkable HTML product.

I went through this cycle this week (after promising myself that "freshening up" would only take a few hours) and settled on a design similar to my Reverse Job App awhile back. But when I began writing the actual HTML I decided I could torture myself a little more and complete the layout without any use of javascript or jquery. Instead, I relied solely on the new CSS3 gradient and transition effects. I decided to write this blog about the latter effect.

The CSS Effect

The front landing page of my has three boxes that link to the different sections of my website like such:



Each box has a neat hover effect where the shaded background drops down and changes color. While this effect is easy to implement in jquery, I was able to implement it in Firefox/Chrome/Safari without using one lick of javascript, and I'll show you how.

The HTML

< a href="http://www.blogger.com/maths" >
< div class="bg" >
<div class="filter" >
< p >maths. < /p >
< /div >
< /div >
< /a >

Two divs in an a tag? That's right. The top a tag is obviously the link. The outer div.bg tag gives us the background images and adjusts the size of the a element (this is possible without the div.bg, but I could only get the full background image to show if I used absolute positioning). The inner div.filter tag and p tag will be the subject of the transition effects. div.filter is a partially transparent box that gives us the shaded background. The p tag is the actual text of the link.

CSS Before Effects

Let's implement the above description.

* {margin:0; padding:0;}
a{
width:180px;
text-decoration: none;
}
a > div.bg {
height:216px;
width:180px;
border: 2px solid black;
background-image: url(maths.png);
}
a > div.bg > div.filter{
background-color: rgba(33, 33, 33, 0.5);
height:217px;
width:180px;
}
a > div.bg > div.filter > p{
display:block;
padding-top:90px;
padding-left:18px;
font-weight:bold;
color: #ffffff;
}

All pretty straightforward. Combining the above should yield a pretty simple website:



Now let's write down the CSS for the hover stage. We'll start by adjusting the above CSS to get an a tag with a darker filter that only covers the top of the image. This means we need to change the css for div.filter and p.

a > div.bg > div.filter
{
background-color:#000000;
background-color: rgba(0, 0, 0, 0.7);
height:145px;
margin-top:72px;
}
a > div.bg > div.filter > p{
display:block;
padding-top:18px;
padding-left:18px;
font-weight:bold;
color: #ffffff;
text-decoration:underline;
}

How do we get a hover effect? That's simple, we can combine these two descriptions using the :hover psuedo class. We'll use the first CSS we wrote, and append the second definitions after changing "a > " to "a:hover >", like so:

* {margin:0; padding:0;}
a{
width:180px;
text-decoration: none;
}
a > div.bg {
height:216px;
width:180px;
border: 2px solid black;
background-image: url(maths.png);
}
a > div.bg > div.filter{
background-color: rgba(33, 33, 33, 0.5);
height:217px;
width:180px;
}
a > div.bg > div.filter > p{
display:block;
padding-top:90px;
padding-left:18px;
font-weight:bold;
color: #ffffff;
}
a:hover > div.bg > div.filter
{
background-color:#000000;
background-color: rgba(0, 0, 0, 0.7);
height:145px;
margin-top:72px;
}
a:hover > div.bg > div.filter > p{
display:block;
padding-top:18px;
padding-left:18px;
font-weight:bold;
color: #ffffff;
text-decoration:underline;
}

CSS Transition Effects

We're nearly there! How do we get those cool transitions? The working draft for CSS3 provides two new attributes:

transition-property: [list of properties]
transition-duration: [number of seconds]

transition-property instructs the browser to do a default (read: linear) transition from the previous properties to the new properties in this definition. transition-duration is just the number of seconds the effect should last. You can read more about them at the Mozilla Development Network.

For div.filter, we're changing the background color, the height, and the margin-top, so we change the hover div.filter definition to:

a:hover > div.bg > div.filter
{
background-color:#000000;
background-color: rgba(0, 0, 0, 0.7);
height:145px;
margin-top:72px;
transition-property: background-color, height,margin-top;
transition-duration: 0.3s;
}

We'll want to add the same thing to the default div.filter definition as well, so we have a smooth transition from hover to non-hover states:

a > div.bg > div.filter{
background-color: rgba(33, 33, 33, 0.5);
height:217px;
width:180px;
transition-property: background-color, height,margin-top;
transition-duration: 0.3s;
}

Similarly, we need to change the padding-top property of the p tag, this is done with:

a:hover > div.bg > div.filter > p{
display:block;
transition-property:padding-top;
transition-duration: 0.3s;
padding-top:18px;
padding-left:18px;
font-weight:bold;
color: #ffffff;
text-decoration:underline;
}

But hold on! Since transition-property, et al, is still experimental, it requires a vender-prefix. E.g. for Firefox, it needs -moz-transition-property, et cetera, for webkit-based browsers, -webkit-, for opera, -o-. So our complete CSS is:

* {margin:0; padding:0;}
a{
width:180px;
text-decoration: none;
}
a > div.bg {
height:216px;
width:180px;
border: 2px solid black;
background-image: url(maths.png);
}

a > div.bg > div.filter
{
float: left;
background-color: transparent;
background-color: rgba(33, 33, 33, 0.5);
height:217px;
width:180px;
-moz-transition-property: background-color, height,margin-top;
-moz-transition-duration: 0.3s;
-webkit-transition-property: background-color, height,margin-top;
-webkit-transition-duration: 0.3s;
-o-transition-property: background-color, height,margin-top;
-o-transition-duration: 0.3s;

}
a > div.bg > div.filter > p{
display:block;
padding-top:90px;
padding-left:18px;
font-weight:bold;
color: #ffffff;
}
a:hover > div.bg > div.filter
{
background-color:#000000;
background-color: rgba(0, 0, 0, 0.7);
height:145px;
margin-top:72px;
-moz-transition-property: background-color, height,margin-top;
-moz-transition-duration: 0.3s;
-webkit-transition-property: background-color, height,margin-top;
-webkit-transition-duration: 0.3s;
-o-transition-property: background-color, height,margin-top;
-o-transition-duration: 0.3s;
}
a:hover > div.bg > div.filter > p{
padding-top:18px;
padding-left:18px;
font-weight:bold;
color: #ffffff;
text-decoration:underline;
-moz-transition-property:padding-top;
-moz-transition-duration: 0.3s;
-webkit-transition-property: padding-top;
-webkit-transition-duration: 0.3s;
-o-transition-property: padding-top;
-o-transition-duration: 0.3s;
}

There you have it, folks! CSS3 transitions for everyone! (except, possibly, IE users.)