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.

Space carousel

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.

90 thoughts on “Fun with CSS3 and mootools”

  1. Thanks to CSS3 Transitions you won’t need JS at all to do such things, just will just need :hover ^^ but only WebKit and FireFox 3.7 (nightly) supports that)

  2. @Shadowriver Yeah CSS3 Transitions are going to be really cool. I just hope the IE9 team introduce them and the Moz team get the Z plane working.

  3. wow ! this will be the future of gaming too I bet, allowing people more unique control over the experience – really class stuff..

  4. Hi Ricky. First of all, thank you so much for the code, and because of you, I actually started using Mootools. So now I use both Mootools and JQuery. Now, I have a question: If I am going to use this code in my website, do I have to create a comment and reference your website for this code, (Copyright Issues), because I don’t see anything that says “copyright RickyH”. Thank you so much.

    Aero

  5. Hi Aero,

    A comment reference would be great thanks!
    Oh and I think you realised that $(“h31”) was the element ID and not the tag.

  6. doesn’t seem to work in mootools-1.3.2.
    keep saying unable to parse -moz-box-shadow.

  7. It’s more than likely ff4 rather than mootools 1.3.2 they dropped the -moz prefix. so just use

    var newStyles = new Hash({
    ‘borderRadius’: ‘@px @px @px @px’,
    ‘boxShadow’: ‘@px @px @px rgb(@, @, @)’
    });

    and:

    $(“element”).addEvents({
    ‘mouseover’: function(){
    this.morph({‘boxShadow’: “0px 0px 0px #1e3541”});
    },
    ‘mouseout’: function(){
    this.morph({‘boxShadow’: “5px 5px 0px #1e3541”});
    }
    });

  8. hola a todos esta muy interesante tus conocimientos en css3 … mi pregunta es como haces una animacion tan buena como la del logo de tu web me interesa aprender hacerla.. gracias.

  9. A very nice show of things you can do with css and mootools, however can you please show some example of logo design and effects

  10. Pingback: CSS3 Tutorials

Leave a Reply

Your email address will not be published. Required fields are marked *