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.
Spread-radius
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>;
The 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 .clouds:
.clouds {
... box-shadow: 5em 2em 0 -0.3em white, -2em 2em 0 white;
}
The first 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.
Getting the @keyframes just right took a bit of adjusting, but I loved how
this rabbit came to life!