{Carrer web log} ←

CSS3 Action Framework

Tuesday, April 27, 2010 { 3 Comments }

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?

3 Responses to “CSS3 Action Framework”

1. //  Kevin Rapley // 4/29/2010

   'blue' for something that is blue in appearance rather than describing what the element actually does. You are describing an action rather than the semantics of an element. This is a nice concept, but I would keep it just for conceptual work rather than anything in production.  

2. //  Vladimir // 4/29/2010

   @Kevin: Yes is true this project is made mainly for teaching purpose. For production we don't have complete cross browser support. So JavaScript Library will work better. About the naming logic and syntax I almost always use technical description. I prefer to name the action (scale, hide) not the object (menu, buttons) the benefit is I can reuse this naming logic in any project. But this is just my personal choice :)  

3. //  Brett Widmann // 11/07/2010

   This has been very helpful. I've been trying to work more with different techniques in CSS.  

Post a Comment

<< Home