2008
11.23

Webkit css: transformation and radius

Category: Nerd stuff / Tag: , , ,  / Add Comment

Today i changed my layout a little. I came around some webkit only css functions: Transformations. Webkit is the browser engine for Apple’s Safari and Google’s Chrome. Its still awaiting CSS3 approval so it wont work in other browsers yet.

In my menu i’ve added : 

.menu a {
  -webkit-transition: -webkit-transform 0.2s ease-out;
}
.menu a:hover {
  color: #9ED728;
  -webkit-transform: scale(1.2);
}

Check my menu for the result!

I also added some rounded corners on the date box. This will work for Mozilla and Webkit browsers:

dl.date {
	-moz-border-radius:10px;
	-webkit-border-radius: 10px;
}

You can als rotate and translate your block items, check this post at The Art of Web for more cool stuff!