Clipping and masking have been round for some time now in CSS and even have fairly first rate browser assist. I not too long ago labored on a undertaking that wanted to make use of a clipping method for tooltips displaying above hyperlinks in textual content.
These tooltips have two designs primarily based on their content material:
You may not suppose the textual content tooltip requires any clipping in any respect. A pseudo-element might be positioned on the backside so as to add the little notch, proper? You’re certainly completely proper! As a result of the background of the tooltip is a a plain shade, there’s actually no want for CSS trickery and whatnot.
However clipping the picture within the second design is the place issues get fascinating…
Right here’s the thought course of my thoughts adopted once I began the duty.
Thought 1: clip-path & polygon
The CSS clip-path property permits us to outline a customized polygon with share values to make the trail we would like.
This resolution is commonly sufficient if the form of your path is easy sufficient. Within the demo beneath, I’m utilizing calc() values to ensure the clip is totally responsive, whereas the little triangle stays the identical measurement regardless of how stretched the mum or dad is.
.tooltip {
clip-path: polygon(
0% 0%, // High left level
100% 0%, // High proper level
100% calc(100% – 10px), // Backside proper level
calc(50% + 10px) calc(100% – 10px), // Heart proper of the triangle
50% 100%, // Tip of the triangle
calc(50% – 10px) calc(100% – 10px), // Heart left of the triangle
0% calc(100% – 10px) // Backside left level
);
}
This resolution could be very clear however, in my case, not adequate as I don’t have a straight triangle notch, however moderately a customized form.
Thought 2: clip-path and SVG
Utilizing an SVG path appeared like resolution. First, you export your SVG clipping path, then use it in your CSS with the url(#clipPathId) worth.
Verify the demo beneath. Do you see any subject with the trail?
The arrow is stretched primarily based on the picture ratio. For the reason that little notch is a part of the entire path form, it’s as stretched because the rectangle a part of the trail stretches in measurement.
Thought 3: mask-image
Now right here is the factor I found with the CSS mask-image property in CSS: You possibly can mix masks layers! Give it some thought like a background-image in CSS. You possibly can apply a number of gradients or photographs on a single ingredient. Now, what for those who mix all these layers to generate the ultimate masks you want?
That is precisely what we’re going to do right here with two layers:
A big rectangle that cowl the entire block aside from a stripe on the backside (proven in inexperienced)A picture of the arrow (proven in pink)
With that resolution, the rectangle can stretch in line with our tooltip’s dimensions, and the arrow will all the time preserve its fastened measurement.
All of the code and demos beneath are prefix free and the demos are utilizing Autoprefixer. On the time I’m writing this text, Edge, Chrome & Safari require prefixes.
Simply as we might with background properties, we’re going to use three totally different masks properties to outline our two layers:
mask-image: This property lets us draw the rectangle with a linear background and the arrow with an inline SVG.mask-position: The rectangle doesn’t want a place (because it begins from the top-left), however the arrow must be positioned on the center-bottom.mask-repeat: We have to keep away from repeating each layers; in any other case, the linear gradient would cowl the entire ingredient when it repeats.
.tooltip {
mask-image:
linear-gradient(#fff, #fff), /* Rectangle */
url(‘knowledge:picture/svg+xml;utf8,’); /* Backside arrow mask-position: */
0 0, /* Rectangle */
50% 100%; /* Backside arrow */
mask-size:
100% calc(100% – 18px), /* Rectangle */
38px 18px; /* Backside arrow */
mask-repeat: no-repeat;
}
Tada! Change the tooltip dimensions or exchange the picture and the underside arrow will preserve its authentic ratio.
Extra complicated shapes
Let’s get a bit of fancy and go deeper with this system. I used to be impressed by the iMessage app on iOS and tried to breed the identical tooltips with this masking method.
I had to attract extra layers for my masks to render each rounded nook:
The total code goes to be a bit longer as now we have extra layers to attract, however the logic stays the identical. The corners are drawn utilizing 4 radial gradients. To fill the rectangle, we want two rectangles (one vertical, one horizontal) as proven above. And at last, our little arrow that’s utilizing an inline SVG.
.tooltip {
–radius: 25px;
mask-image:
radial-gradient(#fff (var(–radius) – 1), #fff0 var(–radius)), /* High left nook */
radial-gradient(#fff (var(–radius) – 1), #fff0 var(–radius)), /* High proper nook */
radial-gradient(#fff (var(–radius) – 1), #fff0 var(–radius)), /* Backside left nook */
radial-gradient(#fff (var(–radius) – 1), #fff0 var(–radius)), /* Backside proper nook */
linear-gradient(#fff, #fff), /* Horizontal gradient */
linear-gradient(#fff, #fff), /* Vertical gradient */
url(‘knowledge:picture/svg+xml;utf8,’); /* Backside proper icon */
mask-position:
0 0, /* High left nook */
100% 0, /* High proper nook */
0 100%, /* Backside left nook */
100% 100%, /* Backside proper nook */
0 var(–radius), /* Horizontal gradient */
var(–radius) 0, /* Vertical gradient */
100% 100%; /* Backside proper icon */
mask-size:
(var(–radius) * 2) (var(–radius) * 2), /* High left nook */
(var(–radius) * 2) (var(–radius) * 2), /* High proper nook */
(var(–radius) * 2) (var(–radius) * 2), /* Backside left nook */
(var(–radius) * 2) (var(–radius) * 2), /* Backside proper nook */
100% calc(100% – #{var(–radius) * 2}), /* Horizontal gradient */
calc(100% – #{var(–radius) * 2}) 100%, /* Vertical gradient */
(39px / 2) (25px / 2); /* Backside proper icon */
mask-repeat: no-repeat;
}
As you see, we are able to create a model with the arrow on the left or proper by utilizing a flipped model of the arrow and positioning it in a special nook. The trick is working high-quality on tooltips with out photographs too. However like I mentioned originally of this text, you most likely don’t want that a lot CSS for those who solely have a plain background to fashion.
If you wish to be taught extra about clipping and masking in CSS, there are many different nice articles proper right here on CSS-Tips price testing.
Article
on
Nov 6, 2016
Clipping and Masking in CSS
Article
on
Jun 7, 2017
Masking vs. Clipping: When to Use Every
Article
on
Mar 2, 2019
Masks Compositing: The Crash Course
Article
on
Mar 6, 2018
CSS Methods and Results for Knockout Textual content
Video
on
Could 13, 2020
#185: Taking part in with CSS Masks
▶ Operating Time: 23:32
on
Oct 27, 2015
33: Clipping and Masking
The publish Excellent Tooltips With CSS Clipping and Masking appeared first on CSS-Tips.
You possibly can assist CSS-Tips by being an MVP Supporter.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!