From the course: CSS: Images
Unlock this course with a free trial
Join today to access over 22,600 courses taught by industry experts.
Image text
- [Instructor] Knowing you can use custom paths to clip an image, the next question is usually, "Can I use text to clip images as well?" The answer is you can, if you use the SVG method, but then you have text inside an SVG. On the web, it's better to have text in a proper text element, in a document, like I have here. This is an H1 with some text. So, to make that knockout effect, where you see the background image inside the glyphs themselves, we need to actually use a background image, and then use the background-clip property. Background-clip was originally meant to position the background image in relation to the box. You remember we looked at this previously when we looked at positioning images, well this allows you to control how you clip the images relative to the box, either border box, padding box, or content box. But in addition, we also have background clip text, which allows you to use the text as the…
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
-
-
-
-