Inspired by Andy

Posted 2 days ago

I read Andy Clarke’s latest article on CSS Tricks today, Revisiting Image Maps. I have long admired Andy and been inspired by his work, his articles, his talks, and his books. One thing I have always appreciated about Andy is that he looks for ways to push the tools and the medium to the limits to come up with “expressive” experiences, through both design and interaction.

I thought about his books Transcending CSS and Hardboiled Web Design. I enjoyed reading both of those books and was inspired by the examples that he shared. Both of those helped me to bring more creativity into my work and look for ways to push the limits of HTML and CSS.

“I would be hard-pressed to think of another book that has been as influential on my career as Transcending CSS. The semantically structured code I write every day contains the fingerprints that came from the inspiring examples in this work. I am still quick to embrace the “transcending spirit” to expand the creative possibilities of the sites I build.”

Testimonial I wrote for transcending CSS Revisited

I enjoyed reading Andy’s article today. It was familiar feeling of being inspired like when I read one of his books or listened to one of his conference talks back in the day when those were released as audio files. I enjoyed listening to those talks on my commute and being inspired before going to work or after the workday.

Andy’s example in his article reminded me of a project I did with the Canadian Embassy several years ago. It had a map that the user could choose a state to view a modal of facts about Canada’s trade relationship to that state. I used an inline SVG in the code. I also learned with that project that you can use filter:drop-shadow to create a shadow on a PNG image that follows the contours of the image. A box-shadow will put a shadow on the box (everything is a box in CSS). I had a lot of fun building out that solution and it remains one of my favorites.

The live site has changed the page. The SVGs link to separate pages instead of modals. You can see the current page at https://connect2canada.com/canada-u-s-relationship/state-trade-map/. One of the things we added was that the other objects like the cows would fade out when you hover so that you can make sure to target the correct state. My original solution included selects that allowed the user to select the state with either the map or the select and on smaller screens, you would only see the selects. The current page does not include that and I am not sure it functions on mobile.