CSS3 Action Framework
Join the DZone community and get the full member experience.
Join For FreeExample: 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:
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?
Opinions expressed by DZone contributors are their own.
Comments