CSS And You: Building From Imagination

In the early days of HTML, site design was limited by what could be achieved with simple tables and frames. With the birth of primitive CSS in 1993, was the ability to build more unique sites. Though CSS1 was fairly counter intuitive, the following version CSS2, was much easier to use and was built with HTML tag coding in mind.

CSS2 brought with it many new tips and tricks. Using CSS2, a web designer could create fully interactive menus and transitions previously only achieved within the confines of flash animations and software programming. This meant web designers could fulling flesh out their design imaginations and build some fairly impressive designs.

CSS2, which is referred to now simply as CSS, has become a corner stone of modern design. Through CSS, server load times and page loads have been reduced drastically. Using “Hide Overflow” one image containing all the elements of a navigation could serve as multiple.

As CSS has grown over the years, more and more innovations have been developed. No longer is CSS just used for site creations, more experimental CSS is being developed. Today I am going to show you one of those examples. This experiment is the Flipbook or flick animation. The idea behind this is simple enough. Using a large image with a hide overflow, we are going to build an animation based on mouse position not unlike the mouse rollover.

To create this, you need to build an animation and split each frame to a file. Let’s begin, to start we need to build our starting point. To do this you need state your initial grouping as below:

#bloodelf {

position:absolute;

background:transparent url(http://images.ientrymail.com/nowcss/Bloodelf/Bloodelf_fstart.gif) no-repeat 0 0;

width:304px;

height:300px;

background-position:50px 0;

z-index:100;

overflow:hidden;

left:150px;

top:60px;

}

This section serves to house our CSS animation. Now we need to build in CSS the basic settings for our animation. To this we need to set up an unordered list or UL:

#bloodelf ul {padding:0; margin:0; }

Then we need to give the LI or list tags their definition:

#bloodelf li {list-style-type:none;}

The next step is to build the a tag styling for base set up. Here we set up the position, size, spacing of our a links. In this case the links will roughly be 10px by 3px and stationary:

#bloodelf a, #bloodelf a:visited {position:absolute; width:10px; background-position:-100px -100px; height:3px; padding-top:3px; overflow:hidden; z-index:100; cursor:default;}

Now that we have our a links set up we need to create our definitions, or what the html needs to do when the a links are hovered on. Here is an example of the first 10 in the sequence:

#bloodelf a#f1

{top:0; left:0; background:transparent url(http://images.ientrymail.com/nowcss/Bloodelf/Bloodelf_f01.gif) -100px -100px; z-index:100;}

#bloodelf a#f2

{top:3px; left:0; background:transparent url(http://images.ientrymail.com/nowcss/Bloodelf/Bloodelf_f02.gif) -100px -100px; z-index:100;}

#bloodelf a#f3

{top:6px; left:0; background:transparent url(http://images.ientrymail.com/nowcss/Bloodelf/Bloodelf_f03.gif) -100px -100px; z-index:100;}

#bloodelf a#f4

{top:9px; left:0; background:transparent url(http://images.ientrymail.com/nowcss/Bloodelf/Bloodelf_f04.gif) -100px -100px; z-index:100;}

#bloodelf a#f5

{top:12px; left:0; background:transparent url(http://images.ientrymail.com/nowcss/Bloodelf/Bloodelf_f05.gif) -100px -100px; z-index:100;}

#bloodelf a#f6

{top:15px; left:0; background:transparent url(http://images.ientrymail.com/nowcss/Bloodelf/Bloodelf_f06.gif) -100px -100px; z-index:100;}

#bloodelf a#f7

{top:18px; left:0; background:transparent url(http://images.ientrymail.com/nowcss/Bloodelf/Bloodelf_f07.gif) -100px -100px; z-index:100;}

#bloodelf a#f8

{top:21px; left:0; background:transparent url(http://images.ientrymail.com/nowcss/Bloodelf/Bloodelf_f08.gif) -100px -100px; z-index:100;}

#bloodelf a#f9

{top:24px; left:0; background:transparent url(http://images.ientrymail.com/nowcss/Bloodelf/Bloodelf_f09.gif) -100px -100px; z-index:100;}

#bloodelf a#f10

{top:27px; left:0; background:transparent url(http://images.ientrymail.com/nowcss/Bloodelf/Bloodelf_f10.gif) -100px -100px; z-index:100;}

For each new frame we have to create a new frame tag in this case I chose f1 – f72. The more frames, the more frame tags you need to build. For each new frame we need to define the positioning since each a tag is 3 pixels tall you need to position each frame link 3 pixels below the previous. Then all the other settings are the same as above depending on your animation image size.

The last part part of the CSS actually gives the a link the information of what needs to be displayed when hovered over.

#bloodelf a#f1:hover {height:300px; width:304px; padding-top:300px; top:0; left:0; background-position:50px 0; z-index:50;}

#bloodelf a#f2:hover {height:300px; width:304px; padding-top:300px; top:0; left:0; background-position:50px 0; z-index:50;}

#bloodelf a#f3:hover {height:300px; width:304px; padding-top:300px; top:0; left:0; background-position:50px 0; z-index:50;}

#bloodelf a#f4:hover {height:300px; width:304px; padding-top:300px; top:0; left:0; background-position:50px 0; z-index:50;}

#bloodelf a#f5:hover {height:300px; width:304px; padding-top:300px; top:0; left:0; background-position:50px 0; z-index:50;}

#bloodelf a#f6:hover {height:300px; width:304px; padding-top:300px; top:0; left:0; background-position:50px 0; z-index:50;}

#bloodelf a#f7:hover {height:300px; width:304px; padding-top:300px; top:0; left:0; background-position:50px 0; z-index:50;}

#bloodelf a#f8:hover {height:300px; width:304px; padding-top:300px; top:0; left:0; background-position:50px 0; z-index:50;}

#bloodelf a#f9:hover {height:300px; width:304px; padding-top:300px; top:0; left:0; background-position:50px 0; z-index:50;}

#bloodelf a#f10:hover {height:300px; width:304px; padding-top:300px; top:0; left:0; background-position:50px 0; z-index:50;}

Then the final part is building the html for the css to command. Your HTML should set up like below:

<div id="bloodelf">

<ul>

<li><a id="f1" href="#">Frame 1</a></li>

<li><a id="f2" href="#">Frame 2</a></li>

<li><a id="f3" href="#">Frame 3</a></li>

<li><a id="f4" href="#">Frame 4</a></li>

<li><a id="f5" href="#">Frame 5</a></li>

<li><a id="f6" href="#">Frame 6</a></li>

<li><a id="f7" href="#">Frame 7</a></li>

<li><a id="f8" href="#">Frame 8</a></li>

<li><a id="f9" href="#">Frame 9</a></li>

<li><a id="f10" href="#">Frame 10</a></li>

</ul>

</div>

Here is the final version with all the animation created:

Topics: CSS, Design, Web Development