An effect that makes the Crikkket web app unique is it’s crisp 1px highlights. I’ve always heard these described as specular highlights, but I don’t believe that’s the correct term. Anyhoo, I was just playing with CSS3 and I thought I’d have a crack at animating the same effect on a button. So here you go! Demo and Source are on JSFiddle. You will notice that the highlight width is locked off, because I think if it scaled with long buttons the effect wouldn’t be as believable. I also know that I could have done this with pseudo elements like ::before, but sometimes it’s good to see exactly what’s going on in the DOM. Disclmaier: Webkit only. No images used.
Pop-upView Separately

An effect that makes the Crikkket web app unique is it’s crisp 1px highlights. I’ve always heard these described as specular highlights, but I don’t believe that’s the correct term. Anyhoo, I was just playing with CSS3 and I thought I’d have a crack at animating the same effect on a button. So here you go!

Demo and Source are on JSFiddle.

You will notice that the highlight width is locked off, because I think if it scaled with long buttons the effect wouldn’t be as believable. I also know that I could have done this with pseudo elements like ::before, but sometimes it’s good to see exactly what’s going on in the DOM.

Disclmaier: Webkit only. No images used.

32 Notes/ Hide

  1. trampoline6s reblogged this from taitems
  2. istoselidon2f reblogged this from taitems
  3. hawaii-web-design reblogged this from taitems
  4. randylien reblogged this from taitems
  5. taitems posted this

Recent comments

Blog comments powered by Disqus