Lovely animation CSS3 and mootools button

1300781179 Download

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.

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

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'
                    'MozBorderRadius''8px 8px 30px 30px'
                    '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.

Source by: http://www.htmldrive.net/categorys/show/18/Buttons-Icons

Filed in: Buttons & Icons, Css / Css3 Plugins & Demos, HTML / HTML5 Plugins & Demos, Jquery Plugins & Demos Tags: 

Get Updates

Share This Post

Related Posts


Leave a Reply

You must be Logged in to post comment.

© 2016 Html Use. All rights reserved.