I love trying to find different ways to get a job done. Especially when it means using a certain piece of technology in an unexpected way. Maybe the job is silly, but it’s the problem solving that I really, truly dig.
At first glance, I knew I wanted to somehow play around with the Dribbble shot Heroes Queue by Antonas Deduchovas and I was definitely thinking single element for each character, but with tons of
box-shadow. However, I also knew that I didn’t want to do the grunt work. So I opened up a spreadsheet in Google Drive.
Google spreadsheets to the rescue
In a new spreadsheet, I resized the rows and columns to 25 and turned word text off. Now I had a grid, unscathed by lengthy text. I opened the shot in Photoshop and added a grid to closely match each bit of the image.
Format > Conditional formatting
Before this project, I had known about a cool feature in Google Spreadsheets, conditional formatting. You can set conditions in the spreadsheet to style a cell based on a string or digit. If there is a match then the background color or font color of that cell will change according to your rule.
Variables as conditions
I set up my color variables as conditional formatting. For example, in any cell that had
$bg, the condition called for that cell to be the background color I selected. I added more rules for other variables such as
$shirt. This step isn’t necessary, but it improves the experience.
Writing out the characters
With one eye in Photoshop and another in Google Drive, I started typing my variables into the spreadsheet. As I entered a variable that matched a condition, the background instantly changed. It only took a few minutes to assign a color variable to each cell. Plus, spreadsheets allow for mass select and paste, it was a snap.
I ended up creating each character on a 26×26 grid or in spreadsheet terms A1:Z26. This grid size came in handy later when concocting the formula.
You might notice that I didn’t need to include
$bg. I could have left those cells blank, because in the end I’m just going to ignore those cells because the
body background can make up for it. I’m a visual person, so putting those values in worked for me.
Once I had the character ready, it was time for formula magic to output my
=ArrayFormula(if(A1:Z26<>"$bg","("&column(A1:Z1) -1 &" * $width) (" & ROW(A1:Z26) -1 &" * $width) 0 0 "&A1:Z26&",",""))
I entered this formula in the first cell after the last column, AA:1. This formula went through A1:Z26 and transposed all of the cell data, but I carefully defined the output so that each cell declares its own
The formula does the following:
- If any cell within A1:Z26 doesn’t equal “
$bg”, then reformat the cell, but if it does then do “” (create a blank cell — so yes, the variable is superfluous as previously stated).
- To reformat the cell, as seen in the second set of double quotes, each permitted cell generates the following
<offset-x> <offset-y> <blur-radius> <color>,. Each cell dynamically adjusts the
offset-yvalues of the shadow according to its position in the spreadsheet. I set the
blur-radiusto 0 and used the existing cell data for the
colorof the shadow.
Initially, I had used static values, for example:
9em 0em 0 $red,, but that meant I couldn’t scale the character because this was based on 1em. Instead, I made the values relative:
(9 * $width) (0 * $width) 0 $red,. Now whenever I adjust the
$width the character will stay in perfect proportion.
Gimme all the box-shadows
Once I entered the formula into cell AA:1, the character was automatically transposed into
box-shadow values. From there I selected all AA1:AZ26 cells, copied, and pasted as the value of
box-shadow: into my CSS. And done!
Feel free to check out the spreadsheet that I used to create these characters.
(I highlighted AA1 to indicate that that cell holds the formula.)
When I pasted the code it had some undesirable spaces and returns, but I quickly regex replaced that sucker into a dreamy column.
This code is heavy. So heavy. I know it’s irresponsible for every day wear, but it’s fun and this is one of my favorite ways to learn new things. I spend my work days creating web-based trainings that must be pristine in IE7. For that reason, I crave projects that push boundaries.
I tried to get the same animation in the Dribbble shot with the characters bouncing up and down. Unfortunately, the animation didn’t take too kindly to all the values. It rendered a trippy, slapping of box-shadows, that was sure to melt a computer into liquid, Alex Mack style. I settled with a hover, so did you hover?