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