CSS3 Action Framework

It all started when I wanted to do Google CSS3 redesign. The propose of that redesign was to use as much as possible CSS3. I wanted to maintain Google minimalistic style with little Apple flavor and Bing background style. Also to use only pure CSS and CSS3. And the result was:

Example: Google CSS3 redesign

CSS3 is really powerful tool and many of the things that early were done with some JavaScript library now can be done with CSS3.

When I write CSS I usually extract all the best practices and try to make little library so in the next project I will not write the same code over and over again . Don't repeat yourself.

After the Google CSS3 experiment I decided to spend little more time and make little CSS3 action library(framework).

The library is based on :hover, :active and :target and mainly on CSS3 transforms.

Here are some examples:

• Hover


• Active


• Target


• All in one

About the code syntax



If you have multiple .h-scale values you can personalize your values.



How the system works?

About :hover(mouse over) and : active(mouse click) is very easy to understand. The HTML element will perform some action(scale, rotate, hide ..) on mouse over or mouse click.

Example:

This div will scale on mouse over and rotate on mouse click

<div class=" h-scale a-rotate ">…. </div>

The :target is also simple to understand, meaning with a click of some link you can trigger event on another HTML element.

Example:

The click of the link will trigger scale event on the image. Everything is possible because of href=”#a” calls id=”a” of the image.

<a href=”#a”>Some link</a>
<img id=”a” class=”t-scale” src=”” />

But the best way to learn is to play around with the CSS file and the examples. The code will work mainly in latest version of Firefox , Chrome, Safari and Opera. The cool thing is that even if this CSS doesn’t work in some browsers(mainly IE) the page will look exactly the same, obviously all the events will be off in the older browsers.

Please feel free to add more functionality to this library, new events, new features extended browser support ( I was lazy to optimize for IE8 and lover), change or extend the naming system if you don’t like my naming conventions.

I hope that this project can help you understand some of the new CSS3 features. Principally is made for teaching purpose but can also used in production.

This project is hosted on Google Code

Download the code & examples

I will leave you with this thought: CSS3 is powerful make up tool, do you want to look pretty?