Jeroen Wellner

Webkit css: transformation and radius

Nov 23, 2008 in Nerd stuff by jeroen | No Comments

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!

You can follow any responses to this entry through the RSS feed. You can leave a response, or trackback from your own site.

Tagged chrome, css, safari, webkit