From the course: CSS: Images
Unlock this course with a free trial
Join today to access over 22,600 courses taught by industry experts.
Custom shapes using SVG
- [Instructor] If you want to clip an image with a custom path like this heart here and you want that image to remain responsive you can't use to path shape in clip path. As you saw in the previous movie the path shape is not responsive so it'll shift around inside the crop and it simply won't look the way you want it to. But that doesn't mean you can't use a custom path to clip your image. It just means you have to involve a separate technology to get it to work. That technology is an SVG. You see, you can use the clip Path element of an SVG as the clip path in CSS and then take advantage of the responsive nature of the SVG to make the path responsive as a clip path in that CSS. Let me show you how this works. First, I need the path itself. You can create the path and any application that gives you a vector graphics. So I've used illustrator and exported it as an SVG. I placed the SVG inside a file called heart.SVG…
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
-
-
-
-