Activate your free membership today | Log-in

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:

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

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

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

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

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

Related Content:

  • Altova updates data management product suite
    Altova, maker of XML, UML and Web services tools, has updated its product line with support for the Office 2007 Open XML document format and for the...
  • An Introduction to GMaps4JSF
    GMaps4JSF is one of the JSF Mashups libraries that enable JSF users to build Web 2.0 Mashup applications in JSF easily. In this article, I will...
  • Court says trade secrets are no free speech
    A US court has ruled that it is not a violation of free speech rights to ban the publication of computer code used to...
  • GMaps4JSF with Facelets
    In this article, I will show how the GMaps4JSF and Facelets can be used together to construct and customize maps easily using few lines of...
  • Finalizing maps with Report Builder 3.0
    Like an onion or parfait, maps in SQL Server Report Builder have many layers. Here you'll learn how to finish off a map by adding point and tile...

Posted by Brad Neuberg at 5:00 am
3 Comments

+++++
5 rating from 1 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.