Leadership Letters by Jeroen van Eerden

code | March 14, 2014

See the Pen Leadership Letters #2. by Jeroen van Eerden by Katy DeCorah (@katydecorah) on CodePen.

Leadership Letters #2. by Jeroen van Eerden

I recreated Leadership Letters #2. by Jeroen van Eerden using Hugo Giraudel’s items in a circle Sass mixin and generous use of the border property.

Border control

The project has eight block elements, .item, nested in a container. Each .item is supposed to resemble the letter ‘L’. (In my first commit I totally wrote that it was the number ‘7’, re: title.) To get the shape, I assigned the top and right border-color colors, while I gave the bottom and left border-color transparent values.

See the Pen Leadership Letters demo 1 by Katy DeCorah (@katydecorah) on CodePen.

Creating the shape with border

At first, I didn’t use the bottom or left borders at all. Instead, I used box-shadow to cast a white lip around the broadside of each element providing space between each .item. By doing that I had to increment the z-index to keep each element’s nose underneath the previous. Unfortunately, the first element in the z-index stack was then on top of the last element. I scratched my head for a while, until I removed the box-shadow and clipped each element’s nose with a transparent left border.

Two cheers for simple code.

Circling

Next, I needed to get each .item on a circle and rotated about 45 degrees to achieve the cascading effect. I tweaked the items on a circle mixin until each element fell into place. I’ve used the mixin before, but I must not have examined the code. I didn’t realize that you can assign more than one rotate values in one transform rule. (I learned something new today /air guitar/).

transform: rotate(0deg) translate(0.875em) rotate(45deg);

Using the two rotates, I balanced out the items onto the circle and then locked them into position.

:nth-of-what

I used :nth-of-type to alternate the colors of my Sass list, $colors. I thought I had the :nth selector game figured out, but it took me a few tries to alternate the colors among the items.

:nth-of-type(4n + 2)
:nth-of-type(4n + 3)
:nth-of-type(4n + 4)

The above will then compute as:

(I think that this makes sense to me. Hi, I’m insecure about :nth.)

The first and fifth elements take the initial style from .item.

Border animation

Once I had the project built out, I started playing around with a few of the properties. I found that by increasing the border-bottom-width each element would appear to tuck its tail in, which created a beautiful inner circle. I added an animation to bounce from sharp edges to smooth edges to capture all the shapes.

Did you enjoy this post? Support RAICES. RAICES promotes justice by providing free and low-cost legal services to underserved immigrant children, families, and refugees.