Web design inspiration with CSS 3D
CSS web design
In my role as web segment editor for Adobe’s Inspire magazine and assistant editor for Appliness, I’ve gotten to work with Donovan Hutchinson, CSS developer extraordinare, on some articles about some cool CSS design techniques. Most recently, we published Creating 3D assets with CSS in the November 2013 issue of Inspire – be sure to check it out in the iPad edition! The fun thing about working on Donovan’s articles, aside from the amazing designs and effects he’s able to achieve through CSS, is that his work displays very well in the world of digital publishing. We use Indesign CC to layout an article in Inspire or Appliness, and then leverage functionality within Digital Publishing Suite to provide interactivity such as slideshows or web overlays directly within the article.
In the case of the Donovan’s Creating 3D assets article, he wrote a detailed how-to describing how to create an image of a computer completely in CSS and then apply 3D effects and animations to the image. A the appropriate points in the article, we were able to provide a web overlay to the Codepens that allow you to try the tips and tricks he’s describing directly within the article and see the effects of your changes right away.
One of my favorite articles to work on for Appliness was Donovan’s CSS Portals which appeared in the July 2013 issue. Not only are the visual assets and web examples visually compelling, but the interactivity of the web overlays make it an interesting article for the reader to more actively engage in.
If you are interested in getting started creating digital publications, check out this series of tutorials starting with Part 1: Workflow for Creative Cloud and Single Edition. If you’d like to get started creating interactive animations, check out the What is Edge Animate CC tutorial.
Recently, Donovan has started a project called Learnsome in which he shares some step-by-step instructions on how to do some of the web design secrets Donovan has learned over the years. This project is still in it’s early stages, so make sure to go to the website to get on the mailing list for updates.
About the header image
In 2004, I traveled throughout India for about three weeks while I was on sabbatical. I took so many pictures on my trip there, but I thought I’d start with the iconic image of the Taj Mahal. I won’t get into the beauty of the Taj Mahal, nor the awe I felt when seeing the famed white spires come into view for the first time because that’s been written about many times before, much more poetically than I can give it justice here.
When I look through my photos from my trip, most of the colors are muted because of the pervasive haze throughout India. So, my main goal with the picture of the Taj Mahal was to bring back the crispness of the white marble and the blueness of the sky. Since I am learning that my big challenge, outside of learning the development tools available, is that I really need to hone my artists’ eye to know what improvements I should really be making. I hope that by going through enough of these tutorials and watching enough pros touch up their photos, that I’ll start seeing what subtle changes go into making a really great photo over time.
For this photo, I thought I’d start at the beginning with Lightroom by following some of the tips recommended in the “Make non-destructive adjustments to your photos” in the Getting started with Lightroom tutorial. I was pretty excited when I saw the dramatic changes that I was able to make by making quick adjustments to the vibrance, white balance, exposure, highlights and whites adjustments. The crop tool allowed me to trim the image to remove some of the clutter around the edges and angle the composition a bit better than it was in my original shot.