ch-cha-ch-cha.css

Using reference book indices as inspiration, the goal here was to take an existing image (mine was Ferdinand Hodler’s “Aufbruch der Jenenser Studenten in den Freiheitskrieg,” 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.

Yes, the window screenshot is the final piece. The only Photoshop manipulation is the removal of the blinking text cursor.

Ferdinand Hodler’s “Aufbruch der Jenenser Studenten in den Freiheitskrieg,” painted in 1813. (English: “Jena Students Depart for the War of Liberation”)

/*
        Author: Sierra Randolph
        Version: 1.0
        License: Creative Commons Attribution-NonCommercial-ShareAlike 3.0
*/
 
body {
        background-image: url('11.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.

Share this Project