Join Morten Rand-Hendriksen for an in-depth discussion in this video Experimentation through image filters, part of Learning Responsive Web Design in the Browser.
- [Voiceover] Advanced CSS has started moving beyond…merely styling and transforming containers…to changing the appearance and behavior…of the contents within those containers.…One such example that will become more and more prevalent…in the next while is the filter property.…Filter allows us to augment the output of elements…before they are rendered in the browser by applying…filters you typically expect to see in an image editor.…Blur, contrast, drop shadow, grayscale opacity,…sepia, and other options.…These filters can be applied to images,…backgrounds, and borders.…
The filter property gives us a whole new level…of design control in the browser, and let's us experiment…with things like colors and contrast before making…final decisions about what to display in the site.…Let me show you an example.…Let's say I'm considering displaying the images…in the three boxes in grayscale, and then transitioning them…to color when they're hovered over or focused.…I can do this using the filter property.…Because the filter property is still considered…
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