Search

Nalezeno "clipping": 20

Another Stab at Truncated Text

3.9.2024
Seems like we’re always talking about clipping text around here. All it takes is a little browsing to spot a bunch of things we’ve already explored. Article on Sep 19, 2012 Multi-line Text Overflow Ellipsis accessibility content...

CSS Grid and Custom Shapes, Part 3

11.11.2022
After Part 1 and Part 2, I am back with a third article to explore more fancy shapes. Like the previous articles, we are going to combine CSS Grid with clipping and masking to create fancy layouts for image … CSS Grid and Custom Shapes, Part 3 originally published on CSS-Tricks, which...

Cool CSS Hover Effects That Use Background Clipping, Masks, and 3D

26.5.2022
We’ve walked through a series of posts now about interesting approaches to CSS hover effects. We started with a bunch of examples that use CSS background properties, then moved on to the text-shadow property where we technically didn’t use … Cool CSS Hover Effects That Use Background...

What Would it Take to Prevent CSS Tooltips From Overflowing?

12.1.2022
Say you have an elements with CSS tooltips and you’re going to position those tooltips such that it opens up next to the element on hover (or probably better: when clicked/tapped). Next to it where? Above it? What if the … What Would it Take to Prevent CSS Tooltips From Overflowing?...

Embracing Asymmetrical Design

20.9.2021
I’ll never forget one of Karen McGrane’s great lessons to the world: truncation is not a content strategy. The idea is that just clipping off text programmatically is a sledgehammer, and avoids the kind of real thinking and planning that … The post Embracing Asymmetrical Design...

Cutouts

16.8.2021
Ahmad Shadeed dug into shape “cutouts” the other day. Imagine a shape with another smaller shape carved out of it. In his typical comprehensive way, Ahmad laid out the situation well—looking at tricky situations that complicate things. The first thing … The post Cutouts appeared...

Perfect Tooltips With CSS Clipping and Masking

17.6.2021
Clipping and masking have been around for a while now in CSS and even have pretty decent browser support. I recently worked on a project that needed to use a clipping technique for tooltips showing above links in text. Those … The post Perfect Tooltips With CSS Clipping and Masking appeared...

Hexagons and Beyond: Flexible, Responsive Grid Patterns, Sans Media Queries

3.6.2021
A little while back, Chris shared this nice hexagonal grid. And true to its name, it’s using —wait for it — CSS Grid to form that layout. It’s a neat trick! Combining grid columns, grid gaps, and creative clipping … The post Hexagons and Beyond: Flexible, Responsive Grid Patterns, Sans Media...

Clipping Scrollable Areas On The inline-start Side

19.2.2021
On a default left-to-right web page, “hanging” an element off the right side of the page (e.g. position: absolute; right: -100px;) triggers a horizontal scrollbar that scrolls as far as needed to make that whole element visible. But if … The post Clipping Scrollable Areas On...

clipPath vs. mask

27.12.2020
These things are so similar, I find it hard to keep them straight. This is a nice little explanation from viewBox (what a cool name and URL, I hope they keep it up). The big thing is that clipPath (the element in SVG, as well as clip-path in CSS) is vector and when it is applied, whatever you...

Excluding Emojis From Transparent Text Clipping

2.9.2020
CSS-Tricks has this pretty cool way of styling hovered links. By default, the text is a fairly common blue. But hover of the links, and they’re filled with a linear gradient. 😍 Pretty neat, right? And the trick isn’t all that complicated. On hover… give the link a linear...

CSS background-repeat: round

23.6.2020
The CSS spec is full of gems that sneak their way past most of us web designers and developers. Stuff like :focus-within, prefers-reduced-motion, and prefers-color-scheme suddenly make their way into CSS without us really finding out for months or years. One such example is background-repeat:...

Clipping, Clipping, and More Clipping!

8.10.2019
There are so many things you can do with clipping paths. I've been exploring them for quite some time and have come up with different techniques and use cases for them — and I want to share my findings with you! I hope this will spark new ideas for fun things you can do with the CSS clip-path...

Animate a Blob of Text with SVG and Text Clipping

6.2.2019
I came across this neat little animation in a designer newsletter — unfortunately, I lost track of the source, so please give a shout out if you recognize it! In it, a block of text appears to bleed into view with a swirl of colors, then goes out the same way it came in. It’s a slick effect and...

Better rendering for variable fonts

26.6.2018
I was messing around with a variable font the other day and noticed this weird rendering issue in the latest version of Chrome where certain parts of letterforms were clipping into each other in a really weird way. Thankfully, though, Stephen Nixon has come to the rescue with a temporary hack...

Nahoru
Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tímto souhlasíte. Další informace