Rabbit by Beard Chicken
I built this fun little animation from Beard Chicken’s Dribbble shot. (The animation will only run a couple of times here, but on CodePen it’s infinite… hypnotizing even.)
See the Pen Rabbit by Beard Chicken by Katy DeCorah (@katydecorah) on CodePen
I used only two elements for this project by putting
box-shadow to work.
The main element
.rabbit is the rabbit’s body. The
:before is the tail, but then I used
box-shadow to resize, recolor, and move the element’s shadow into making the rabbit’s eye. I added another
box-shadow and made the rabbit’s hind leg. Then I added a bunch of shadows to create the front leg.
Similarly, the rabbit’s
:after is one ear. By using
box-shadow, I was able to create the second ear.
I created one cloud using pseudo elements, but then used
box-shadow to display two more clouds.
The fourth value of
box-shadow controls the size of the shadow, or
spread-radius. Until today, I had severely under used this value.
box-shadow: <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;
More on box-shadow
spread-radius is optional, but the value is 0 unless specified. If the
spread-radius is greater than 0, then the shadow will grow. If the
spread-radius is less than 0, then the shadow will shrink. When shrinking the shadow, you have to use small units (especially in ems), otherwise the shadow will disappear.
So in the case of
... box-shadow: 5em 2em 0 -0.3em white, -2em 2em 0 white;
box-shadow creates a copy of the element, but is moved to the right
5em and down
2em. I slightly shrunk the new cloud, using -0.3em for the
spread-radius. Naturally, I set the color of the cloud to white. For the second
box-shadow, I moved it to the left
2em and down
2em, but kept it the same size. I set the
blur-radius to 0 for both shadows to avoid a blur and I receive a crisp cloud.
@keyframes just right took a bit of adjusting, but I loved how this rabbit came to life!