RickyH - Fun with CSS3 and mootools

These examples came about when experimenting with the extend property in MooTools. By extending the styles class I could add CSS3 properties into the Core MooTools framework and do CSS3 animations.

View Demo

The Extend Code

Bellow is the Mozilla code to extend MooTools with the Border-Radius and Box-Shadow:

var newStyles = new Hash({
     'MozBorderRadius': '@px @px @px @px',
     'MozBoxShadow': '@px @px @px rgb(@, @, @)'
});

$extend(Element.Styles, newStyles);

The WebKit code is slightly different. For some reason i couldn’t get the webkitBorderRadius to work without doing each corner individually. For more info on the differences read this

var newStyles = new Hash({
     'webkitBorderBottomLeftRadius': '@px @px',
     'webkitBorderBottomRightRadius': '@px @px',
     'webkitBorderTopLeftRadius': '@px @px',
     'webkitBorderTopRightRadius': '@px @px',
     'webkitBoxShadow': 'rgb(@, @, @) @px @px @px'
});

$extend(Element.Styles, newStyles);

The CSS3 Animation

For the animations we can now simply use the same MooTools FX and we would use with CSS2. Below is an example for FireFox:

     $("h31").set('morph', {
          duration: 300,
          transition: 'Sine:out'
     });

     $("h31").addEvents({
          'mouseover': function(){
	       this.morph({
                    'MozBorderRadius': '8px 8px 30px 30px'
               });
	   },
          'mouseout': function(){
               this.morph({
                    'MozBorderRadius': '30px 30px 8px 8px'
               });
	   }
       });

And that’s it really. Very simple to set up and the animations are smooth and stylish. The example will work on any WebKit browser including Chrome and Safari and Mozilla browsers including FireFox.