The other day I came across the Dribbble shot Cross by Helvetic Brands. I loved the pixels and the animation, so I started to code it out. I used a single element to create the first pixel and then used
box-shadow to generate the rest. I started to add the animation, but I spun myself in another direction.
I cloned the
box-shadow, creating two sets of dots and had the pair square dancing, as seen above.
1 dot + box-shadow = 16 dots
With the single element,
.dot, I used its pseudo elements to house each set of dots. The actual element serves as container. The
height of the element adjusts to the
$size of the dots, the number of
$dots, and the number of dot
Each pseudo element creates the first initial dot, the upper-most, left-most dot. The dot sets the precedent for the
box-shadow dots using
box-shadow to spin out 4 rows and 4 columns of dots. I admit that I first wrote out the shadow values by hand (more on that later). Instead of assigning the color value of the
box-shadow, I used the
color property within each pseudo element to control the color.
I created an animation
cross that translates the pseudo elements around a rigid square (down, right, up, left). At first I calculated the
translate values by hand. Then I figured out how to replace the values with a variable using
$size to make the animation scalable.
I created a second animation
criss to apply to the second pseudo element. Then I remembered that I had seen that you can use a negative value on the
animation-delay to give the animation a head start. I nixed the
criss animation, duplicated the original rule, and added a negative delay.
Square dancing dots!
dotMama: The Sass Function
I had the project finished, but I wanted to optimize my code.
I sent myself on a mission to write a Sass function to output the
box-shadow values. I had never written a Sass function before, but I found a post about creating Sassy Text Shadows by Adam Stacoviak. I borrowed the bones of the function and started hacking at it.
Even though my function needed to loop through a small set of value, I started to confuse myself. I kept getting in my head about it. Maybe it was the complex function I was altering or the fact that I was playing with a new syntax. Whatever the reason, I decided to switch languages for a hot minute.
I thought to my myself, “How would I write this at work?” I am limited to ColdFusion at work. Yeah, it’s not sexy, but its the language that I’m currently pounding away at daily, thus it’s freshest in my mind.
Within a couple minutes, I wrote the following loop in ColdFusion using absolute values:
Next, I translated the ColdFusion to Sass and added in my relative values.
I am the proud creator of the Sass function,
(p.s. holy hell, I used modulus!)
I tried my darndest to make this whole project scalable. Try changing the
$rows in the Sass. You will find that the dots do a great job of following your orders.