Special offers now — see discounted courses.
day
:
hour
:
min
:
sec
See special offers
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

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

Related courses

Related learn paths

About us

LyndaKade is a leading learning platform that helps people learn business, software, technology, and creative skills to achieve personal and professional goals.

Phone numberAparat ChannelTelegram SupportTelegram ChannelInstagram Page

All rights to this site belong to LyndaKade.

Terms of Service|Privacy Policy

نماد الکترونیک enamad در صورت اتصال با آی‌پی داخل کشور، نمایش داده خواهد شد.
logo-samandehi - لوگو ساماندهی
zarinpal
zibal