Join Morten Rand-Hendriksen for an in-depth discussion in this video Interaction design through CSS, part of Learning Responsive Web Design in the Browser.
We have yet to define either a hover…or focus state for these links.…Following modern flat design principles we can add…a drop shadow to these boxes when they're interacted with,…so they appear to lift off the page…and above the background.…And to make it more interactive, we'll do this gradually…through a transition, so it literally looks like the box…lifts off the page and then slides down again onto the page.…
In this course, Morten Rand-Hendriksen explains his approach to designing in the browser, which starts well before he even starts coding. He shows how to define the layout on paper and create a "language" for the site, and then builds a baseline document with HTML5. Then he uses CSS to guide the look of the site and the layout, using media queries and Flexbox to add responsive behaviors. In chapter 3, Morten improves the site's interactivity using CSS transitions and transforms. Finally, he reveals how to use these techniques to build WordPress themes in the browser.
Each step involves design strategies, best practices, and actual code examples that will turn the web browser into your new favorite design tool.
- Use the browser as a design canvas
- Draft layouts with pen and paper
- Modularizing the design
- Create a baseline document with HTML5
- Create responsive layouts with Flexbox
- Applying CSS transitions and transforms
- Building WordPress themes in the browser