Example: Google CSS3 redesign
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.
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.
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?