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.

80 Responses :)
  1. Time’s up for Flash.

  2. Que interesante el efecto, es muy parecido a la interpolación que se utiliza en flash.

  3. Above in [ENG]: “Interesting that the effect is very similar to the interpolation that is used in flash.”

  4. Holy *!@t. I dont know we can do that with only CSS? Its really great! Thanks for the eye opening… Surely i’ll explore these techs!

  5. Intersting , Awesome Tricks :D

    Thanks

  6. 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)

  7. @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.

  8. That was impressive! Let’s try something… =)

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

  10. This is so good and very interesting I want that also.

  11. 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

  12. By the way, what is $(“h31″) stand for, i mean what HTML Tag is it?

  13. Nvm about above comment

  14. 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.

  15. very cool effects………

  16. This is a very nice post! These are some cool effects. Thanks for sharing.

  17. Great !!!!

    I don’t believe that it can be done without the help of FLASH

  18. Hey i love dis site nd very helpfull for me…
    main thing is the logo is just ammaging..

  19. Great, motools or jquery + css3 mean great layout of website. I will try to include the script to my website. Thanks for sharing!

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

  21. 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″});
    }
    });

  22. Great!!!!!!!!

  23. Very nice and sleek.. :) Bookmarked!!!! must have info

  24. 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.

  25. Superb! Hope could make some more 3D effects

  26. 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

  27. Wow great !!! thanks for the tip

  28. Awesome work man….

  29. Nice article

  30. Very nice example.Thanks.

Leave a Comment