From the course: CSS: Images
Unlock this course with a free trial
Join today to access over 22,500 courses taught by industry experts.
Browser compatibility
- [Instructor] A quick word on browser compatibility. Throughout this course, I'm using Firefox to demonstrate all of these different features because Firefox has to broadest support. However, if you're following along using Chrome, there's a chance you will encounter some things not working properly. Case in point, clipping paths from external SVGs. In Firefox, it works fine, and you can see the heart here, but if I jump to Chrome, no heart is displayed, and that's in spite of the same code being passed. So if we inspect the element, you see it says clip-path: url and it's pointing at heart.svg and heart, but for some reason, it's not working in Chrome. This is a classic case of one browser being farther ahead than another. For a myriad of reasons, the WebKit browsers, including Chrome, have not implemented all of these features completely yet, and as a result, we need to build in work-arounds. For the clip path, 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
-
Cropping images to a perfect circle2m 37s
-
Custom shapes using clip-path44s
-
Clip-path: Circle3m 2s
-
Clip-path: Ellipse1m 36s
-
Clip-path: Polygon4m 33s
-
Clip-path: Inset2m 6s
-
Clip-path: Path2m 50s
-
Custom shapes using SVG4m 51s
-
Masking an image with another image2m 38s
-
Image text1m 48s
-
Browser compatibility3m 30s
-
-
-
-