From the course: CSS: Images
Unlock this course with a free trial
Join today to access over 22,600 courses taught by industry experts.
Clip-path: Circle
- [Instructor] A clip path can be applied to any element and I'll clip that element to whatever path you define. But in most cases you will use it on images because it makes the most sense to clip images. In this first example, we'll look at clip path circle which creates a perfect circle every time. To apply a clear path, you simply select the element and say clip-path and then define whatever method you want to use. So in our case, we're going to use the circle method. This is a method you add parentheses at the end. And what you see is, if you don't define any size, it'll automatically set the radius of the circle to whatever is the shortest length in the current image. So if you have a square at lowest be a circle but if you had a rectangle image, you would find the shortest side. So either the height or the width whatever is shorter and then set the radius to that size because it'll create a circle. Once you've created a…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
Rounded corners with border-radius3m 23s
-
(Locked)
Cropping images to a perfect circle2m 37s
-
(Locked)
Custom shapes using clip-path44s
-
(Locked)
Clip-path: Circle3m 2s
-
(Locked)
Clip-path: Ellipse1m 36s
-
(Locked)
Clip-path: Polygon4m 33s
-
(Locked)
Clip-path: Inset2m 6s
-
(Locked)
Clip-path: Path2m 50s
-
(Locked)
Custom shapes using SVG4m 51s
-
(Locked)
Masking an image with another image2m 38s
-
(Locked)
Image text1m 48s
-
(Locked)
Browser compatibility3m 30s
-
-
-
-