Monday, August 23rd, 2010

Pure Pulsing CSS Map Markers

Category: CSS

<p>Via Zachary Johnson (aka the Zachstronaut) comes a cool experiment using pure CSS to generate pulsing rings/map markers. He’s put together a nice video explaining the concept:

He has a cool demo (Chrome or Safari + Snow Leopard only) of the effect:

The pulsing effect, for example, is generated by a CSS3 Animation:

  1. @-webkit-keyframes ringpulser
  2.     {
  3.         0%
  4.         {
  5.             opacity: 1.0;
  6.             -webkit-transform: scale(0.2);
  7.         }
  8.        
  9.         80%
  10.         {
  11.             opacity: 0.0;
  12.             -webkit-transform: scale(1.0);
  13.         }
  14.        
  15.         100%
  16.         {
  17.             opacity: 0.0;
  18.             -webkit-transform: scale(0.2);
  19.         }
  20.     }

The map itself is rotated to a 3D angle using a CSS 3D Transform:

  1. #map
  2.     {
  3.         position: absolute;
  4.         top: -430px;
  5.         left: 50px;
  6.         background: url(planis-map.jpg) top left no-repeat;
  7.         width: 800px;
  8.         height: 548px;
  9.         -webkit-transform-style: preserve-3d;
  10.         -webkit-transform: rotateX(60deg) translate3d(0, 0, -500px);
  11.         opacity: 0.75;
  12.     }

While the pin, marker, and pinhead themselves are a combination of CSS 3D, CSS Transforms, CSS Gradients, and more:

  1. .marker
  2.     {
  3.         position: absolute;
  4.         width: 100px;
  5.         height: 100px;
  6.         -webkit-perspective: 600;
  7.     }
  8.    
  9.     .pin
  10.     {
  11.         position: absolute;
  12.         top: 10%;
  13.         left: 52%;
  14.         border-left: 2px solid transparent;
  15.         border-right: 2px solid transparent;
  16.         border-top: 40px solid #666;
  17.         -webkit-transform: rotate(9deg);
  18.         width: 0;
  19.         height: 0;
  20.     }
  21.    
  22.     .pinhead
  23.     {
  24.         position: absolute;
  25.         top: 8%;
  26.         left: 49%;
  27.         width: 15px;
  28.         height: 15px;
  29.         -webkit-border-radius: 15px;
  30.         background: #999 -webkit-gradient(
  31.             radial, 95% 40%, 5, 85% 40%, 10, from(rgba(0, 0, 0, 0.40)), to(rgba(0, 0, 0, 0))
  32.         )

Posted by Brad Neuberg at 5:00 am
3 Comments

+++--
3 rating from 4 votes

3 Comments »

Comments feed TrackBack URI

That’s really cool; this is the first time I’ve seen custom animations used with the @-webkit-keyframes rule. Very cool stuff, and a nice slick effect.

For those who are interested in keyframe custom animations in webkit, (but were scratching their heads at the odd syntax) there’s a good post on the Surfin Safari blog: http://webkit.org/blog-files/bounce.html

Comment by christopherscott — August 23, 2010

Wow, it’s like a modern <blink> tag! Awesome!

Comment by Skilldrick — August 23, 2010

As cool as this is, I honestly don’t feel it is the role of CSS do do animations like this. Maybe just the purist in me… I must be getting old.. as a JS advocate, it just feels wrong and dirty somehow… get off my lawn.

Comment by tracker1 — September 1, 2010

Leave a comment

You must be logged in to post a comment.