It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
I can't say I use background-clip all that often. I'd wager it's hardly ever used in day-to-day CSS work. But I was reminded of it in a post by Stefan Judis, which coincidentally was itself a learning-response post to a post over here by Ana Tudor.
Here's a quick explanation.… Read article
One cool thing about CSS custom properties is that they can be a part of a value. Let's say you're using multiple backgrounds to pull off a design. Each background will have its own color, image, repeat, position, etc. It can be verbose!… Read article
You know how you can have multiple backgrounds?
body {
background-image:
url(image-one.jpg),
url(image-two.jpg);
}That's just background-image. You can set their position too, as you might expect. We'll shorthand it:
body {
background:
url(image-one.jpg) no-repeat top right,
url(image-two.jpg) no-repeat bottom left;
}I snuck background-repeat in there just for fun. Another one you might not think of setting for multiple different backgrounds, though, is background-clip. In this linked article, Stefan Judis notes that this unlocks some … 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
With CSS, you can control the background of elements. You can set a background-color to fill it with a solid color, a background-image to fill it with (you guessed it) an image, or even both:
body {
background-color: red;
background-image: url(pattern.png);
}