Search

Nalezeno "background": 14

Creating Colorful, Smart Shadows


A bona fide CSS trick from Kirupa Chinnathambi here. To match a colored shadow with the colors in the background-image of an element, you inherit the background in a pseudo-element, kick it behind the original, then blur and filter it. … The post Creating Colorful, Smart Shadows appeared...

Taming Blend Modes: `difference` and `exclusion`


Up until 2020, blend modes were a feature I hadn’t used much because I rarely ever had any idea what result they could produce without giving them a try first. And taking the “try it and see what happens” approach … The post Taming Blend Modes: `difference` and `exclusion`...

More Control Over CSS Borders With background-image


You can make a typical CSS border dashed or dotted. For example: .box { border: 1px dashed black; border: 3px dotted red; } You don’t have all that much control over how big or long the dashes or gaps are. And you certainly can’t give the dashes slants, fading, or animation!...

Creative Background Patterns Using Gradients, CSS Shapes, and Even Emojis


You can create stripes in CSS. That’s all I thought about in terms of CSS background patterns for a long time. There’s nothing wrong with stripes; stripes are cool. They can be customized into wide and narrow bands, criss-crossed into a checked pattern, and played with in other ways using the idea...

How to Repeat Text as a Background Image in CSS Using element()


There’s a design trend I’ve seen popping up all over the place. Maybe you’ve seen it too. It’s this sort of thing where text is repeated over and over. A good example is the price comparison website, GoCompare, who used it in a major multi-channel advertising campaign. Nike has used it as well...

Background Scale Hover Effect with CSS Clip-path


A simple recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip-path. Background Scale Hover Effect with CSS Clip-path was written by Mary Lou and published on Codrops

Nested Gradients with background-clip


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 consistently was itself a learning-response post to a post over here by Ana Tudor. Here's a quick explanation. You've probably seen...

Creating a Maintainable Icon System with Sass


One of my favorite ways of adding icons to a site is by including them as data URL background images to pseudo-elements (e.g. ::after) in my CSS. This technique offers several advantages: They don't require any additional HTTP requests other than the CSS file. Using the background-size property...

Smooth Scrolling Image Effects


A small set of ideas on animating images and other elements while smooth scrolling a page. Smooth Scrolling Image Effects was written by Mary Lou and published on Codrops

Managing Multiple Backgrounds with Custom Properties


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 a design. Each background will have its own color, image, repeat, position, etc. It can be verbose! You have four images: body { background-position: ...

Multiple Background Clip


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, ...

Ambient Canvas Backgrounds


Five ambient webpage backgrounds created using the HTML5 Canvas API and jwagner's Simplex Noise library. Ambient Canvas Backgrounds was written by Sean Free and published on Codrops

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