I have another single element project! I explored the Dribbble shot Escape by Carla Corrales.
The main element,
.marker, is the map marker shape. The
:before is the inner circles and the
:after is the dial.
I created the marker shape by using a
border-radius: 100% 100% 0;. Then I rotated the element 45 degrees, making it sit on its point. I used a linear gradient for the two-toned look of the background.
I used the
:before element for the inner background. I created the inner rings by using two gradients, linear and radial. Initially I used inset
box-shadow to create the rings, but I lost a section of the two-toned background. Layering the radial gradient on top of the linear gradient worked better in this case and gave me a reason to tinker with gradients.
Below is a demonstration of the linear and radial gradients coming together.
I used the
:after element for the dial. First, I created a rectangle using
border. I used border because the dial is four-toned and I can set each border side to a different color. Next, I skewed and rotated the element. I skewed it until I squashed the height and elongated the width.
The results were… dial-shaped!
This baby is scalable. Open it up in CodePen and change the
$size (easter egg: try a number less than 5em).
One last thing, did you give it a hover yet? Scroll back up there and do it. Yes, I am bossing you.
I wanted to give this Pen a little more pizazz by making the dial spin immediately and then spin again on hover. To make this happen, I needed to trade in my
animation, but more importantly, I needed to learn more about
animation-play-state. I had never thought to use this property until I read Lea Verou’s, Smooth state animations with animation-play-state.
Starting out, I added the
.marker:after and I added
.marker:hover:after. I wanted the animation to play and then play again on
:hover. After trying out all of the values and combinations of values, I finally began to understand this property. I like to think about
animation-play-state like watching a movie and the remote is my
For my first try, I used the value
running. Nothing happened. The animation was already running and then on
:hover, I asked it to run again.
If I’m watching a movie and press play then my action won’t be productive.
Next, I tried the alternate value,
paused. It kind of worked. The animation didn’t play when I was hovering, but it played once I hovered off of the target.
If I’m watching a movie and I press pause, the movie will pause. I’m guessing that the animation restarted because it triggered the original
.marker:after to run again. (I need to look into this.)
animation-play-state: paused, running;
A little confused with my previous tries, I checked out MDN. I read that both values can be used, which led me to try
paused, running. This value worked great! The dial spun on
I was watching a movie, I paused it and then played it again.
This example might be a little stilted; I definitely plan on exploring