CSS: Images (2021)

CSS: Images (2021)

2h 4mAdvanced2022-11-09

Authors

Morten Rand-Hendriksen

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

Introduction

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

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

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

Filters and Blending

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

Practical Use

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

Conclusion

  • Thanks
80,000 Toman