- This topic is empty.
-
AuthorPosts
-
June 22, 2011 at 1:53 pm #33222jamygoldenMember
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 #82088chrisburtonParticipantI’ve said this before and i’d like to say it again, I simply love it!. Especially the assemble animation.
June 22, 2011 at 3:07 pm #82099TheDocMemberVery cool, Jamy!
June 22, 2011 at 9:12 pm #82165Chris CoyierKeymasternice
June 22, 2011 at 11:49 pm #82167isra26ParticipantI like it! what new did you learn from doing this project?
June 23, 2011 at 3:55 am #82181jamygoldenMemberThanks 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 :pJune 24, 2011 at 12:47 am #82252mshort1985Memberthat is pretty awesome, its amazing what people are coming up with these days now that CSS is becoming more like javascript :)
-
AuthorPosts
- The forum ‘Other’ is closed to new topics and replies.