CSS: Images

Learn how to manipulate images and shapes to create distinctive visual effects in CSS.

Introduction

• Working with images in CSS
• Exercise files
• Using GitHub Codespaces with this course

1. Basics

• 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

2. Shapes

• 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

3. Filters and Blending

• Filtering and blending
• Filters overview
• Combining filters
• Using custom SVG filters
• Mix-blend-mode
• Experimenting with blend modes
• Background-blend-mode

4. Practical Use

• 45° grid gallery
• Animated effects
• Blend mode image enhancement
• Things to keep in mind

Conclusion

• Thanks!