Clipping images or html elements to be used on a website can be tricky. Like choosing the best color for your website, selecting the right font or the ideal hero image, techniques like clipping images could visually enhance your website.
I will explain some of the main aspects to take into account when you are working with clipping paths, from concepts to syntaxes, editors and compatibilities.
What it is Clippath
Do you remember clipping paths in Photoshop or Illustrator? Well, the same applies but for CSS. The Clippath is a CSS property to allow specific a region of an element to show or hide other parts. The portions of the element that are shown or hidden are determined by a clipping path.
It works with any element, like a divs, images or even texts.
Sintaxis
The variety of shapes to create is infinite, we can do circles, rectangles, or polygon areas.
.clip-path-element {
clip-path: rectangle(x, y, width, height, rounded-x, rounded-y)
}
.clip-path-element {
clip-path: inset(from top, from right, from bottom, from left, rounded-x, rounded-y)
}
.clip-path-element {
clip-path: polygon(a, bunch, of, points)
}
.clip-path-element {
clip-path: circle(radius at x, y)
}
.clip-path-element {
clip-path: ellipse(radius-x, radius-y at x, y)
}Compatibility
The clippath property don’t work on all browsers, below we can see the complete list of compatible browsers or visit this link: http://caniuse.com/#feat=css-clip-path
In our experience, thats works perfectly with Chrome, to make work in Firefox, additional steps are needed.
Editors
Some editors can help us to acelerate the process to calculate the correct values, here some online editors:
Bennettfeely.com
Cssplant.com
How it works with Browsers
The compatibility with browsers is something to pay close attention to. While in some browsers this is not a concern, they are other browsers where compatibility require fine tuning. I will mention two of the most popular: Firefox and Chrome.
Firefox is not perfect, we need the support from a external SVG file. The first step is add the following line on the CSS class, under the clippath like this:
.clip-path-element{
width: 370px;
height: 397px;
-moz-clip-path: url(http://www.domain.com/wp-content/themes/genesis-child/lib/clippath.svg#absolute_path);
clip-path: url(http://www.domain.com/wp-content/themes/genesis-child/lib/clippath.svg#absolute_path);
-webkit-clip-path: polygon(3% 100%, 2% 87%, 2% 81%, 2% 74%, 3% 60%, 7% 45%, 16% 31%, 26% 21%, 39% 11%, 61% 0, 65% 0, 77% 13%, 84% 22%, 90% 31%, 93% 38%, 95% 45%, 96% 53%, 98% 67%, 98% 76%, 98% 84%, 98% 100%);
clip-path: polygon(3% 100%, 2% 87%, 2% 81%, 2% 74%, 3% 60%, 7% 45%, 16% 31%, 26% 21%, 39% 11%, 61% 0, 65% 0, 77% 13%, 84% 22%, 90% 31%, 93% 38%, 95% 45%, 96% 53%, 98% 67%, 98% 76%, 98% 84%, 98% 100%);
}Firefox code
-moz-clip-path: url(http://www.domain.com/wp-content/themes/genesis-child/lib/clippath.svg#absolute_path);
clip-path: url(http://www.domain.com/wp-content/themes/genesis-child/lib/clippath.svg#absolute_path);Chrome code
-webkit-clip-path: polygon(3% 100%, 2% 87%, 2% 81%, 2% 74%, 3% 60%, 7% 45%, 16% 31%, 26% 21%, 39% 11%, 61% 0, 65% 0, 77% 13%, 84% 22%, 90% 31%, 93% 38%, 95% 45%, 96% 53%, 98% 67%, 98% 76%, 98% 84%, 98% 100%);
clip-path: polygon(3% 100%, 2% 87%, 2% 81%, 2% 74%, 3% 60%, 7% 45%, 16% 31%, 26% 21%, 39% 11%, 61% 0, 65% 0, 77% 13%, 84% 22%, 90% 31%, 93% 38%, 95% 45%, 96% 53%, 98% 67%, 98% 76%, 98% 84%, 98% 100%);We need both codes at the same time.
Creation of SVG with Illustrator
A quick way to create a SVG is with the help of Illustrator. The process is simple, only is needed draw the same shape done with the editors and obtain the code with the export options and choose SVG file, after we can see a button with the SVG code.
As a result is a code like this:
We should save the code on a file. Take care about the ID, the clippath ID (absolute_path on this case) should be the same that named on CSS clip-path property.
Conclusions
As you can see, there are a few things to consider when you choose to use clipping paths and SVG format in your website design: from proper code syntax to editors and browser compatibility. A bit technical I know, but I hope the article was of some interest. Feel free to contact us if you need hire a company for a more specialized job.