ch-cha-ch-cha.css

Creation Date

October 13, 2013

Using reference book indices as inspiration, the goal here was to take an existing image (mine was Ferdinand Hodler’s “Auszug der deutschen Studenten in den Freiheitskrieg von 1813,” shown below) and create an index of it.

My thought process was basically, “Indexes…words…reference points…programming…yes!” I actually giggled as I typed the whole thing. It went over quite well, and I got multiple suggestions to create a series of programming-as-art. I may just do that, and I’ll update this space if that concept comes to light.

The final CSS—as it were—is a blend of real code, real-looking code, and obviously fake code. In creating this, I imagined the image as a website, and the different parts as elements to be styled.

ch-cha-ch-cha.css

Yes, the window screenshot is the final piece. Originally, the 1.0 version was made in Windows 7 at a fairly low resolution. The spacing was a bit cramped, and the legibility wasn’t quite there. The 2.0 version, made on December 20, 2018, utilizes Windows 10 at a high resolution to avoid stitching screenshots together. The spacing is improved, as is the legibility.

“Auszug der deutschen Studenten in den Freiheitskrieg von 1813”

Ferdinand Hodler’s “Auszug der deutschen Studenten in den Freiheitskrieg von 1813,” painted in 1908–1909.

/*
    Author: Sierra Randolph
    Version: 2.0
    License: Creative Commons Attribution-NonCommercial-ShareAlike 3.0
*/

body {
    background-image: url('hodler.jpg');
}

h1 {
    soldier-repeat: repeat-x rtl;
    soldier-spacing: soldier;
    soldier-decoration: accent-acute-rifle;
    soldier-shadow: soldier(3) 25% parallax-center;
}

h2 {
    soldier-repeat: no-repeat;
    soldier-spacing: horse;
    soldier-decoration: none;
    soldier-shadow: none;
}

h2.soldier:1 {
    align: horse-left(white1);
    direction: ltr dtu;
    define: facehidden climb;
}

h2.soldier:2 {
    align: horse-rear(brown1);
    direction: rtl;
    define: backup-dancer;
}

h2.soldier:3 {
    align: horse-right(white2);
    direction: btf;
    define: late-to-party good-morning;
}

h2.soldier:4 {
    align: horse-right(brown2);
    direction: ltr ftb;
    define: fabulous;
}

/*
    Copyright Sierra Randolph 2013
*/

The raw code for the piece. Figuring out which snippets to use and which snippets to abuse was quite fun.