Grow your CSS skills. Land your dream job.

CSS Lightsaber. What do you guys think?

  • # June 22, 2011 at 1:53 pm

    I spent quite a while making it. It’s actually caused me to change the way I develop websites lol

    http://css-plus.com/examples/2011/06/css-lightsabers/ (Best in Firefox4+)

    # June 22, 2011 at 1:57 pm

    I’ve said this before and i’d like to say it again, I simply love it!. Especially the assemble animation.

    # June 22, 2011 at 2:58 pm

    I tweeted about, it is just plain awesome :)

    Now I might rewrite it and use actual CSS3 Animations.

    # June 22, 2011 at 3:07 pm

    Very cool, Jamy!

    # June 22, 2011 at 9:12 pm

    nice

    # June 22, 2011 at 11:49 pm

    I like it! what new did you learn from doing this project?

    # June 23, 2011 at 3:55 am

    Thanks guys. It’s pretty weird. People seem to comment on the animation mostly when the hardest part was actually creating the hilts! Odd shapes all over the place.

    @isra26 There were a couple of things actually.

    I originally did everything with pseudo classes. My aim was to have as little elements as possible. That has just caused me to use :before and :after in projects all the time. For example: Under “Check this out!” in my sidebar there are arrows attached to each button. I don’t think they are 100% necessary, so I pretty much see it as progressive enhancement. Someone might point out they could be background images – This causes a problem if I want to use a sprite (due the padding difference on each item).

    After fighting to get the pseudo elements to work in Chrome I realized I could do the shadow I wanted to with one box-shadow property. I didn’t know this before. The property was:

    box-shadow: inset 0 0 5px #01fe32, 0 0 20px #08ff35, 0 0 30px #08ff35,0 0 20px #08ff35;

    By adding a comma you can apply a whole new shadow to the element. I now use that quite a bit.

    I also use CSS gradients whenever I have a chance! I provide a fallback image and everyone is happy. I now have the gradient syntax engrained in my head lol.

    Those are the major differences.
    - Pseudo elements wherever possible (as long as it’s progressive enhancement… It works on IE8 so you’ve got most IEs covered anyway),
    - Various box-shadows on an element and
    - CSS gradients all over the place :p

    # June 24, 2011 at 12:47 am

    that is pretty awesome, its amazing what people are coming up with these days now that CSS is becoming more like javascript :)

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".