/index

Ettudis (n) A graphic site offering freebies ranging from website designs, tumblr themes to textures and other graphic resources.

about
designer
contact

terms of use

content
resources

links
sitemap

tagboard

heart(s)

CSS animated sidebar

This tutorial is very brief and simple as it assumes that you are quite familiar with HTML and CSS. The effect uses the CSS :hover selector and div tags/selectors to create the animated effect in sidebars. This effect works on Opera, Safari, Chrome and Firefox. Has not been tested on IE.

This tutorial is going to be exploring the simple but very cool effect of having animation (in specific, static animation, due to the request of an anon) on top of the sidebar, like in this example. However, keep in mind as you continue to follow the tutorial, that the animation can be ANYTHING, as long as it’s a gif/animated image. See this other example to see what I’m talking about.

Images:

** Just choose ONE static image (I googled all of them) and if you are using a background image from an artist, remember to credit!

What we’re going to do is create two div layers one on top of another where one contains the static sidebar and the other contains the image/colour underneath. We’re going to name one div layer “bottom” and the other “top” (with respect to how they’re placed, ie: the static animation will be in the top layer). First, insert the codes for the div layers in the HTML.

<div id="bottom"></div>
<div id="top"></div>

Next we are going to look at the CSS.
#top, #bottom{
background: url(sackcloth-ashes.png);
position: absolute;
height: 100%;
width: 350px;
left: 0px;
top: 0px;
}
#top{
background: url(black-static-cool-layout.gif);
opacity: 0.2;
filter:alpha(opacity=20);
-moz-opacity: 0.2;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
}
#top:hover{
opacity: 0.6;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
}

The first “#top, #bottom” specifies the position, size and background of the bottom layer, and the position and size of the top layer. Thus, just fill in the position, height and width accordingly. Left and top refers to where it should be placed (ex: in the example, it is 0px from the left and 0px from the top)

The second “#bottom” specifies the background, opacity and transitions of the top layer. Evidently, since this effect is having a static animation, upload a static animation background and insert the url. As for opacity and transitions, I’ve explained this earlier in my tutorial about gradual fade effects.

The third “#top:hover” specifies the effect of when you hover over the sidebar (and in this case, it becomes more opaque). This part is absolutely optional. In this example, I have made it so that it is not 100% visible so that you can still see the bottom layer’s background.

Now, you have officially finished making the static animated effect. Next part is the more complex thought of where and how to put in the text. There are two ways depending on the size of your sidebar. In the example, I have put the sidebar as full height of the window… and in this case, I recommend using tables so that your text aligned in the center of your sidebar. On the other hand, you could have the sidebar at only a certain height and position… in that case, you do NOT need to use tables.

METHOD 1. NO TABLES! THE EASY WAY!
EXAMPLE – best for when you have a certain size and position in which you want your sidebar and text to appear in. As well, the static does not “cover” the text. For this, you will need to add another div layer specifically for the text (or sidebar content). First, in the html, you need to add the div layer (which I will ID “sidebartext”)

<div id="sidebartext"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p></div>

Of course, the dummy text can be replaced with whatever you would like. Then, in the CSS, it will look somewhat like the following:

#bottom, #top{
background: url(sackcloth-ashes.png);
position: absolute;
height: 500px;
width: 350px;
left: 150px;
top: 50px;
}
#sidebartext{
background:#000000;
padding:15px;
font: 9px Georgia, "Times New Roman", Times, serif;
color:#FFFFFF;
position: absolute;
height: auto;
width: 320px;
left: 150px;
top: 250px;
}
#bottom{
background: url(black-static-cool-layout.gif);
opacity: 0.2;
filter:alpha(opacity=20);
-moz-opacity: 0.2;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
}
#bottom:hover{
opacity: 0.6;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
}

As you can see, the position of the #bottom and #top layer is different. And I have added properties for the sidebartext div layer that specifically dictates the position and style of the div layer.

METHOD 2. WITH TABLES! THE MORE COMPLICATED WAY!
EXAMPLE – best if your sidebar is full height of the window (height: 100%) and you want your sidebar content to be centered in the sidebar. This uses tables and is slightly more complicated. Furthermore, if you decide to add a hover effect (to make it more opaque) then the static animation will “cover” the text. First, in the HTML, it will look like the following:

<div id="top"><table width="100%" border="0" height="100%">
<tr>
<td valign="middle">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

</td>
</tr>
</table></div>
<div id="bottom">

Notice how I’ve added in a table with 100% width and height. And in the vertical alignement (valign), I specified for the content to be “middle”. This is very important as this allows the content to be centered in the sidebar. Then in the CSS:

#bottom, #top{
background: url(sackcloth-ashes.png);
position: absolute;
height: 100%;
width: 350px;
left: 0px;
top: 0px;
font: 9px Georgia, "Times New Roman", Times, serif;
color:#FFFFFF;
padding:15px;
}
#top p{
background:#000000;
padding:15px;
}
#bottom{
background: url(black-static-cool-layout.gif);
opacity: 0.2;
filter:alpha(opacity=20);
-moz-opacity: 0.2;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
}
#bottom:hover{
opacity: 0.6;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
}

Notice how I’ve specifically added font, colour and padding specifications for #bottom and #top. And I’ve also added another selector, “#top p“, which allows each paragraph in the sidebar to have a black background and a padding of 15px.

Evidently, you can add other things to the sidebar (via HTML) such as images, more text and headers. This tutorial is very simple and basic and if you’re good enough with HTML and CSS, there’s so much you can do!

For more reference about CSS, please take a look at the w3school and my CSS basics tutorial.

I wrote this quite quickly and on the assumption that those reading this is very familiar with HTML so I did not go into detail much. Thus, if you have any questions (or if I did not explain something clearly), do not hesitate to comment and ask!

6 Comments »

  1. Pingback by xhtml css templates – ettudis – v16 » CSS static animated sidebar | XHTML CSS - Style sheet and html programming tutorial and guides — September 14, 2011 @ 8:54 pm

    […] here to see the original: ettudis – v16 » CSS static animated sidebar Share and […]

  2. Pingback by Hover codes | Heavyhandent — September 15, 2011 @ 5:59 am

    […] ettudis – v16 » CSS static animated sidebar […]

  3. Comment by arthur — January 21, 2012 @ 10:24 pm

    where will you put the html ??

  4. Comment by ans — February 16, 2012 @ 2:25 am

    Hi Arthur, you put it after the body tag, <body>

  5. Comment by Effe — October 1, 2012 @ 11:26 am

    This is so amazing,I have no words!
    Thank you so much for your hard work, I have just started a web developer course and all thanks to you! Life is just too short for not following the things we are interested into. I have never though about a job like this before coming here on your site and your tumblr.
    You literally changed my life.
    I wish you all the best in everything you’re going to do in your life and I also wish you to inspire other people as well.
    :’) Thank you,thank you and thank you.

  6. Comment by dota 2 wallpaper crystal maiden — October 8, 2014 @ 5:14 am

    Howdy are using WordPress for your site platform? I’m new to the
    blog world but I’m trying to get started and set
    up my own. Do you require any html coding knowledge to make your own blog?
    Any help would be really appreciated!

RSS feed for comments on this post. TrackBack URL

Leave a comment

*

6 Comments