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