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.
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
http://css-plus.com/examples/2011/06/css-lightsabers/ (Best in Firefox4+)
Now I might rewrite it and use actual CSS3 Animations.
@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: 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