Full Width [alt+shift+f] Shortcuts [alt+shift+k]
Sign Up [alt+shift+s] Log In [alt+shift+l]

Improve your reading experience

Logged in users get linked directly to articles resulting in a better reading experience. Please login for free, it takes less than 1 minute.

More from Identity Designed

WHEN

Designed by Universal Favourite, Sydney.

3 months ago 80 votes
Mountainview Brewing

Designed by Memory, Salt Spring Island.

5 months ago 76 votes
Ashton

Designed by LG2, Quebec.

9 months ago 95 votes
The Dinner Ladies

Designed by Universal Favourite, Sydney.

10 months ago 91 votes
Apex

Designed by Gold Front, San Francisco.

10 months ago 112 votes

More in design

Elios innovative honey by Margo Pavlova

Packaging of innovative honey, where there are different flavors. name of innovative honey Elios (in ancient Greek mythology, the solar...

yesterday 1 votes
Building as gardening

Although I've never had a garden

yesterday 3 votes
Louis Vuitton store by Peter Marino

Following a three-year renovation, the Louis Vuitton store in Milan timely reopened its doors during this year’s Salone del Mobile,...

yesterday 1 votes
Background Image Opacity in CSS

The other day I was working on something where I needed to use CSS to apply multiple background images to an element, e.g. <div> My content with background images. </div> <style> div { background-image: url(image-one.jpg), url(image-two.jpg); background-position: top right, bottom left; /* etc. */ } </style> As I was tweaking the appearance of these images, I found myself wanting to control the opacity of each one. A voice in my head from circa 2012 chimed in, “Um, remember Jim, there is no background-opacity rule. Can’t be done.” Then that voice started rattling off the alternatives: You’ll have to use opacity but that will apply to the entire element, which you have text in, so that won’t work. You’ll have to create a new empty element, apply the background images there, then use opacity. Or: You can use pseudo elements (:before & :after), apply the background images to those, then use opacity. Then modern me interrupted this old guy. “I haven’t reached for background-opacity in a long time. Surely there’s a way to do this with more modern CSS?” So I started searching and found this StackOverflow answer which says you can use background-color in combination with background-blend-mode to achieve a similar effect, e.g. div { /* Use some images */ background-image: url(image-one.jpg), url(image-two.jpg); /* Turn down their 'opacity' by blending them into the background color */ background-color: rgba(255,255,255,0.6); background-blend-mode: lighten; } Worked like a charm! It probably won’t work in every scenario like a dedicated background-image-opacity might, but for my particular use case at that moment in time it was perfect! I love little moments like this where I reach to do something in CSS that was impossible back when I really cut my teeth on the language, and now there’s a one- or two-line modern solution! [Sits back and gets existential for a moment.] We all face moments like this where we have to balance leveraging hard-won expertise with seeking new knowledge and greater understanding, which requires giving up the lessons of previous experience in order to make room for incorporating new lessons of experiences. It’s hard to give up the old, but it’s the only way to make room for the new — death of the old is birth of the new. Email · Mastodon · Bluesky

2 days ago 3 votes
Managing friction

I thought lately about what has changed in my life over the years. People change (even if they don't admit it). And there are always some sort of triggers that cause these changes. Some people start a habit of running, maybe; some start hanging out with friends who

2 days ago 4 votes