Learn how to manipulate images and shapes to create distinctive visual effects in CSS.
Overview
Syllabus
Introduction
- Working with images in CSS
- Exercise files
- Using GitHub Codespaces with this course
- Modern image markup
- Getting rid of the space underneath an image
- Fitting an image inside any container
- Create a square (or other proportion) image
- Position an image inside a container
- Use CSS to crop an image
- Fitting an image inside a grid cell
- Fitting an image inside flexbox
- Fitting background images to any container
- Position background image within a container
- Rounded corners with border-radius
- Cropping images to a perfect circle
- Custom shapes using clip-path
- Clip-path: Circle
- Clip-path: Ellipse
- Clip-path: Polygon
- Clip-path: Inset
- Clip-path: Path
- Custom shapes using SVG
- Masking an image with another image
- Image text
- Browser compatibility
- Filtering and blending
- Filters overview
- Combining filters
- Using custom SVG filters
- Mix-blend-mode
- Experimenting with blend modes
- Background-blend-mode
- 45° grid gallery
- Animated effects
- Blend mode image enhancement
- Things to keep in mind
- Thanks!
Taught by
Morten Rand-Hendriksen
