English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 1h 56m | 396 MB
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.
Table of Contents
Introduction
1 Working with images in CSS
2 Exercise files
Basics
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
Shapes
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
Filters and Blending
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
Practical Use
32 grid gallery
33 Animated effects
34 Blend mode image enhancement
35 Things to keep in mind
Conclusion
36 Thanks
Resolve the captcha to access the links!