strimble

Often times, maps seem to need beacons to display where the location you’re headed to is located. So, I’ve created this quick little tutorial on creating a beacon using only some CSS.

Here’s the HTML that we’ll be working with:

<div class="map">
          <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/03/BlankMap-World6.svg/200px-BlankMap-World6.svg.png" alt="SVG World Map">
          <div class="marker"></div>
    </div>

1. Create a point on the map

   First, we’ll create a point on the map. To do this, we’re using a div, absolutely positioned in a relatively positioned container. Then we’ll add a height, width, and border. Last, round the corners with a border-radius, to make a circle.

   <style type="text/css">
   .map {
       position: relative;
       margin: 10px 110px;
   }
   .map .marker {
       border: 3px solid rgb(123, 66, 84);
       border-radius: 3px;
       -webkit-border-radius: 3px;
       height: 0;
       left: 30px;
       position: absolute;
       top: 28px;
       width: 0;
   }
   </style>
   

   

2. Create a keyframe animation

   All we need to do for the animation is make the beacon change opacity, padding, radius, and position at certain intervals.

   <style type="text/css">
   .map {
       position: relative;
       margin: 10px 110px;
   }
   .map .marker {
       border: 3px solid rgb(123, 66, 84);
       border-radius: 3px;
       -webkit-border-radius: 3px;
       height: 0;
       left: 30px;
       position: absolute;
       top: 28px;
       width: 0;
   }
   @-webkit-keyframes beacon {
       0%        {
           border-color: rgba(123,66,84,1);
           border-radius: 3px;
           -webkit-border-radius: 3px;
           padding: 0;
       }
       100%    {
           border-color: rgba(123,66,84,0);
           border-radius: 25px;
           -webkit-border-radius: 25px;
           left: 9px;
           padding: 21px;
           top: 7px;
       }
   }
   </style>
   

   

3. Add the animation to the point

   Last, you just add the animation to the beacon.

   <style type="text/css">
   .map {
       position: relative;
       margin: 10px 110px;
   }
   .map .marker {
       border: 3px solid rgb(123, 66, 84);
       border-radius: 3px;
       -webkit-border-radius: 3px;
       height: 0;
       left: 30px;
       position: absolute;
       top: 28px;
       width: 0;
       -webkit-animation-name: beacon;
       -webkit-animation-delay: 1s;
       -webkit-animation-duration: 2s;
       -webkit-animation-iteration-count: infinite;
   }
   @-webkit-keyframes beacon {
       0%        {
           border-color: rgba(123,66,84,1);
           border-radius: 3px;
           -webkit-border-radius: 3px;
           padding: 0;
       }
       100%    {
           border-color: rgba(123,66,84,0);
           border-radius: 25px;
           -webkit-border-radius: 25px;
           left: 9px;
           padding: 21px;
           top: 7px;
       }
   }
   </style>