CSS: Images

Course details

CSS is a toolkit for image manipulation. Whether you want to create distinctive visual effects or simply make the most of available bandwidth, the options for manipulating images in CSS will let you create reusable graphics solutions. In this course, designed for front-end web developers, instructor Carrie Dils covers essential CSS techniques for images, from basic fitting and positioning to advanced effects and optimization. Get started by learning how to position images within containers and grids, followed by creating custom shapes with clip paths and masks. Explore blending, filters, and animations to add visual impact, as well as how to apply optimization techniques to deliver more responsive, performant images across browsers.

Learning objectives
Modify any image to fit a desired container and position within that container.
Use clip paths and masks to create custom shapes.
Apply filters and blend modes to change the appearance of images.
Create interesting effects and interactions with transitions, transforms, and animations.
Develop responsive and performant images.

Concepts

Introduction

Working with images in CSS
What you should know
Using GitHub Codespaces with this course

Basic Image Fitting and Positioning

Modern image markup
Removing space underneath an image
Fitting an image inside any container
Fitting and positioning a background image in a container
Creating square and proportionate images
Fitting an image inside a grid cell
Fitting an image inside a flexbox

Clip Masks, Paths, and Custom Shapes

Rounded corners with border-radius
Custom shapes using clip-path
Creating circles and ellipses with clip-path
Creating straight-lined shapes with polygon
Creating rectangles with clip-path
Creating custom paths with clip-path
Creating custom shapes with SVG
Using an alternative to clip-path - mask-image
Creating a text knockout effect with background-clip

Filtering and Blending

Filtering and blending
Looking at the filter property
Combining filters
Using custom SVG filters
Mix-blend-mode
Experimenting with blend modes
Background-blend-mode

Transformations and Animations

Translate, scale, rotate, and manipulate perspective
Animated effects with transitions
Keyframe animations for image effects
Important notes on using animations

Image Optimization and Performance

Delivering responsive images
Optimizing performance
Ensuring cross-browser compatibility

Conclusion

Next steps