Behold the CSS Lightsaber

Note: Check out the demo before reading. I’ve been working on CSS lightsabers lately. I remember seeing one a while back and liking the concept, however I thought it could be greatly improved. I’ve also been itching to create animation out of CSS transitions. By “animation” I mean one event followed by another event. Transitions can mimic full blown animation by transitioning multiple elements at the same time with different delays. This gives the effect of an element being animated. Very simply they all occur simultaneously, but the initial delay make the events appear to follow each other.

The sabers were both very carefully crafted with CSS alone. With Yoda’s saber I focused on having different options. Switch on, increase power and increase length. It was a bit of a work around to get the options to work with each other since only one transition can occur on an element at any given time. This would mean that in order to keep the Saber on, decrease power and decrease length is == to power up.

I’m pretty sure people will mention that some of this could be done with the CSS keyframe animations. Yes, it can and should, however, I started this a couple of weeks back (Firefox5 was only released yesterday with support for the CSS property) and I don’t really like working in Webkit.

Firefox loves lightsabers

This demo looks best in Firefox by far. Everything is rendered absolutely perfectly. In other browsers? Not so much.

Chrome

The demo doesn’t work as it should in Chrome and there were two main problems with this demo. The transition can be applied to pseudo elements. I started of animating pseudo elements all over the place, but I stopped because I wanted Webkit to at least partially support the demo. Also, Webkit doesn’t seem to handle transitions very well yet. Have a look yourself. Go to the demo: Click on “Higher”, then on “Longer”. It refuses to do the transition. It seems like Webkit has a problem when going from one transition into another. In order to get it to work you have to use a transition, clear it and then fire off another transition. In comparison to Firefox, the shadows look a bit… Hard.

Opera

Opera has a different set of issues. It animates (along with a few rendering bugs here and there) from transition to transition, however, a transition on the box-shadow property doesn’t seem to take.

IE10

I haven’t tested this yet. If you have IE10 and you test it, let me know what the problems were.

That’s about it

This took me a fair amount of time to complete and iron out the major bugs. Let me know if you have any questions and what you think.

Any questions or comments?

  1. Piet says:

    George Lucas should’ve hired you to do the CG in Star Warsin CSS! :)

    Do you think CSS can be used as a substitute for minor Flash animations?

    1. Jamy Golden says:

      Yeah, definitely! CSS is slowly replacing what we previously used javascript for. With the help of CSS keyframes, you will be able to replace things like gifs, javascript and flash with either HTML, images and vector graphics. Very exciting :)

  2. Matthew says:

    Looks really awesome! I’m running Chromium 13.0.782.107 (Developer Build 94237 Linux) and all animations work really smoothly… Perhaps could you include the version numbers of FF, Chrome and Opera you were using to test with?

    1. Jamy Golden says:

      Yeah, that’s a great idea :)
      I think I’ll include that sometime this evening.

  3. John says:

    Hey Jamy, I love your site because it has many practical tips and also some really cool blogs like this one about your “CSS Lightsaber”. You have taken an original idea and not just made it your own, but also improved upon it tenfold.

    For example, when you zoom into the “original” image the edges become rough while yours remains completely smooth. I also like the detail on yours… the sense that the handle is made from some sort of metal alloy and that it does not appear 2D but rather 3D.

    Thanks for sharing all this information freely.

    I hope you have other cool graphical ideas that you will be sharing with us soon. Do you?

  4. vincent says:

    hey I know i’ll seem retarded but,
    how did you get to make the transitions between pages?
    i’ve found tutorials (for begginers like me) that teach you how to make transitions like … in divs….
    but i exactly need to make it between pages….
    what kind of resource for learning can you recommend me?

    many thanks in advance!!!

    1. Jamy Golden says:

      Hey, have a look at this article: Dynamic page replacing content

  5. vincent says:

    Hello again!

    I’m following that article but i’m not very good at javascript. I was wondering if theres a way to combine the dynamic page load from the article with the use of css transitions to produce something as the demo of the lightsabbers.

    thanks again!

    1. vincent says:

      besides, i’d like it to get activated with buttons outside the too…

Leave a Reply to vincent Cancel reply