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

0. Introduction

01 - Working with images in CSS
02 - What you should know
03 - Using GitHub Codespaces with this course

1. Basic Image Fitting and Positioning

04 - Modern image markup
05 - Removing space underneath an image
06 - Fitting an image inside any container
07 - Fitting and positioning a background image in a container
08 - Creating square and proportionate images
09 - Fitting an image inside a grid cell
10 - Fitting an image inside a flexbox

2. Clip Masks, Paths, and Custom Shapes

11 - Rounded corners with border-radius
12 - Custom shapes using clip-path
13 - Creating circles and ellipses with clip-path
14 - Creating straight-lined shapes with polygon
15 - Creating rectangles with clip-path
16 - Creating custom paths with clip-path
17 - Creating custom shapes with SVG
18 - Using an alternative to clip-path - mask-image
19 - Creating a text knockout effect with background-clip

3. Filtering and Blending

20 - Filtering and blending
21 - Looking at the filter property
22 - Combining filters
23 - Using custom SVG filters
24 - Mix-blend-mode
25 - Experimenting with blend modes
26 - Background-blend-mode

4. Transformations and Animations

27 - Translate, scale, rotate, and manipulate perspective
28 - Animated effects with transitions
29 - Keyframe animations for image effects
30 - Important notes on using animations

5. Image Optimization and Performance

31 - Delivering responsive images
32 - Optimizing performance
33 - Ensuring cross-browser compatibility

Conclusion

34 - Next steps