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
