Came across this thread:
CSS superfriends! Have you seen examples of how to do multi-line padded text like this article on @css (https://t.co/2j8p4jmaT4), but with a gradient that doesn't reset for each line? pic.twitter.com/MVPdAjxt1W
— Dan Mall (@danmall) December 3, 2018
My first thought process was:
- The lines are padded, and that's tricky enough to pull off.
box-decoration-breakis probably our friend here.
But it turns out we need a litttttle extra trickery to make it happen.… Read article
Let's say you need a gradient border around an element. My mind goes like this:
- There is no simple obvious CSS API for this.
- I'll just make a wrapper element with a
linear-gradientbackground, then an inner element will block out most of that background, except a thin line of padding around it.
Perhaps like this… Read article
What I mean by "CSS images" is images that are created using only HTML elements and CSS. They look as if they were SVGs drawn in Adobe Illustrator but they were made right in the browser. Some techniques I’ve seen used are tinkering with border radii, box shadows, and sometimes
clip-path. You can find a lot of great examples if you search daily css images" on CodePen. I drew some myself, including this Infinity Gauntlet, but in … Read article
I first got the idea to CSS something of the kind when I saw this gradient infinity logo by Infographic Paradise. The gradient doesn't look like in the original illustration, as I chose to generate the rainbow logically instead of using the Dev Tools picker or something like that, but other than that, I think I got pretty close—let's see how I did that!
Back in 2012, Internet Explorer 10 came out and, among other things, it finally supported CSS gradients and, in addition to that, the ability to animate them with just CSS! No other browser supported this at the time, but I was hopeful for the future.
Sadly, six years have passed and nothing has changed in this department. Edge supports animating gradients with CSS, just like IE 10 did back then, but no other browser has added support for this. And … Read article
Radial gradients are pretty dang cool. It's amazing we can paint the background of an element with them so easily. Easily is a relative term though. It's certainly easier than needing to create a graphic in third-party software to use as the background, and the syntax is highly learnable. But it's also not that easy to remember if you don't use it often, and it's more complicated than
I figured I'd put together a page of reference examples, … Read article
Repeating gradients take a trick we can already do with the creative use of
color-stops on the
radial-gradient() notations, and bakes it in for us.
The idea is that we can create patterns out of the gradients we create and allow them to repeat infinitely.… Read article