Leadership Letters 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
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.
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.
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-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:
- 4 (0) + 2 = 2, 4 (1) + 2 = 6
- 4 (0) + 3 = 3, 4 (1) + 3 = 7
- 4 (0) + 4 = 4, 4 (1) + 4 = 8
(I think that this makes sense to me. Hi, I’m insecure about
The first and fifth elements take the initial style from
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.