{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?

Minimalistic Wallpaper for iPad

Tuesday, April 13, 2010 { 1 Comments }

This two weeks seams the whole world talk about one thing iPAd. So if you can't beat them join them. I feel that I’ve been brainwashed by this iPad thing :)

I decided to build wallpaper for the iPad. I’m not sure why I did it, iPad is not even arrived in Italy. I’m not sure that I’m going to buy it but I wanted to create my own iPad wallpaper.

I wanted to be book like and simple and to contain the golden proportion(I’m little obsessed about the golden proportion lately)


So here is the result (768px X 1024px 132dpi)




I used Helvetica like a font and white color to make contrast with the iPad black frame.

Here is how I used the golden proportions:



Enjoy

Photoshop glyphs tester

Thursday, April 08, 2010 { 4 Comments }

Three different project inspired me to this Photoshop tool.

Arial versus Helvetica, GLYPHS Palette petition by @ilovetypography and Web Font Specimen by Tim Brown

I needed a tool who can visualize and compare basic glyphs from the English Alphabet and can be easily extendible.

I didn’t find any tool on the market for comparing different fonts. So decided to build one. Photoshop like a most used graphical tool seems to be a logical choice for this project. So that is why I used Photoshop instead of Illustrator. Photoshop is everywhere :)

Every letter(glyph) is a different layer in Photoshop and all the glyphs from the same font make one Photoshop group(by default can be Red, Green and Blue). Every group(and all the glyphs inside that group) is exactly above or below the other group so we have perfect mach of all the letters(glyphs).

You can easily select and change the font or color of all the letters inside one group so you can compare any font installed on your computer.

By default are three web safe sans serif fons groups R ( red color 144px Arial), G(green color 144px Tahoma )B(blue color 144px Verdana). Feel free to change the font add new group or glyph.

>> Download Photoshop glyphs tester