Escape by Carla Corrales

I have another single element project! I explored the Dribbble shot Escape by Carla Corrales.

See the Pen Escape by Carla Corrales by Katy DeCorah (@katydecorah) on CodePen.

.marker

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.

:before

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.

:after

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.

Updated 01/18/2014

I wanted to give this Pen a little more pizazz by making the dial spin and then spin again on hover. To make this happen, I needed to trade in my transition for 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 animation to .marker:after and I added animation-play-state to .marker:hover:after. I wanted the animation to play and then play again on :hover. After trying out all 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 :hover target.

animation-play-state: running;

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.

animation-play-state: paused;

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 animation on .marker:after to run again. (I need to look into this.)

animation-play-state: paused, running;

A little confused with my earlier 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 :hover.

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 animation-play-state more!