CSS: Images (2021)
2h 4mAdvanced2022-11-09
Authors

Morten Rand-Hendriksen
Senior Staff Instructor, Speaker, Web Designer, and Software Developer
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, instructor Morten Rand-Hendriksen shows you how much you can edit images in a browser using pure CSS. Morten explains the importance of proper HTML image markup and how to crop, fit, and position an image. He discusses how to use the clip-path property to create a variety of shapes. Morten shows how you can use and combine filters to edit and add effects to your image. He concludes by walking you through several practical examples of how to use what you learned, as well as some important best practices and caveats.
Skills covered
CSSWeb StandardsJavaScriptWeb DesignOracleFront-End Web DevelopmentWeb DevelopmentOpen SourceDeep Dive (X:Y)
Concepts
0. Introduction
- 01 - Working with images in CSS
- 02 - Exercise files
- 03 - Using GitHub Codespaces with this course
1. Basics
- 04 - Modern image markup
- 05 - Getting rid of the space underneath an image
- 06 - Fitting an image inside any container
- 07 - Create a square (or other proportion) image
- 08 - Position an image inside a container
- 09 - Use CSS to crop an image
- 10 - Fitting an image inside a grid cell
- 11 - Fitting an image inside flexbox
- 12 - Fitting background images to any container
- 13 - Position background image within a container
2. Shapes
- 14 - Rounded corners with border-radius
- 15 - Cropping images to a perfect circle
- 16 - Custom shapes using clip-path
- 17 - Clip-path - Circle
- 18 - Clip-path - Ellipse
- 19 - Clip-path - Polygon
- 20 - Clip-path - Inset
- 21 - Clip-path - Path
- 22 - Custom shapes using SVG
- 23 - Masking an image with another image
- 24 - Image text
- 25 - Browser compatibility
3. Filters and Blending
- 26 - Filtering and blending
- 27 - Filters overview
- 28 - Combining filters
- 29 - Using custom SVG filters
- 30 - Mix-blend-mode
- 31 - Experimenting with blend modes
- 32 - Background-blend-mode
4. Practical Use
- 33 - 45 grid gallery
- 34 - Animated effects
- 35 - Blend mode image enhancement
- 36 - Things to keep in mind
Conclusion
- 37 - Thanks