CSS:图像

CSS:图像

CSS是用于图像处理的工具箱。无论你要创建独特的视觉效果还是简单地充分利用可用带宽,使用CSS中的图像处理选项都可以创建可重用的图形解决方案。在本课程中,讲师Morten Rand-Hendriksen向你展示了使用纯CSS在浏览器中可以编辑图像的方式。Morten解释了正确的HTML图像标记的重要性以及如何裁剪、缩放和放置图像。他讨论了如何使用clip-path属性创建各种形状。Morten展示了如何使用和组合滤镜来编辑图像并为图像添加效果。最后,他通过一些实际示例向你介绍了如何使用所学到的知识,以及一些重要的最佳实践和经验。

课程信息

  • 英文名称:CSS: Images
  • 时长:1小时56分
  • 字幕:英语

课程目录

  1. Working with images in CSS
  2. Exercise files
  3. Modern image markup
  4. Getting rid of the space underneath an image
  5. Fitting an image inside any container
  6. Create a square (or other proportion) image
  7. Position an image inside a container
  8. Use CSS to crop an image
  9. Fitting an image inside a grid cell
  10. Fitting an image inside flexbox
  11. Fitting background images to any container
  12. Position background image within a container
  13. Rounded corners with border-radius
  14. Cropping images to a perfect circle
  15. Custom shapes using clip-path
  16. Clip-path: Circle
  17. Clip-path: Ellipse
  18. Clip-path: Polygon
  19. Clip-path: Inset
  20. Clip-path: Path
  21. Custom shapes using SVG
  22. Masking an image with another image
  23. Image text
  24. Browser compatibility
  25. Filtering and blending
  26. Filters overview
  27. Combining filters
  28. Using custom SVG filters
  29. Mix-blend-mode
  30. Experimenting with blend modes
  31. Background-blend-mode
  32. 45° grid gallery
  33. Animated effects
  34. Blend mode image enhancement
  35. Things to keep in mind
  36. Thanks!

评论