Escape by Carla Corrales

code | January 15, 2014

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

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

.marker

The main element, .marker, is the map marker shape. The :before is the inner circles and the :after is the dial.

element diagram

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.

See the Pen Escape -- Observe 1 by Katy DeCorah (@katydecorah) on CodePen.

Demonstration of map marker style.

: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.

See the Pen Escape -- :before -- demonstration by Katy DeCorah (@katydecorah) on CodePen.

Demonstration of linear and radial gradients.

: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!

See the Pen Escape -- :after -- demonstration by Katy DeCorah (@katydecorah) on CodePen.

Demonstration of :after style.

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!

Did you enjoy this post? Support SisterSong. SisterSong strengthens and amplifies the collective voices of indigenous women and women of color to achieve reproductive justice by eradicating reproductive oppression and securing human rights.