I learned two nice little tricks today, and thought I'd write a short article on them.
The challenge
Often, we have background images t...
For further actions, you may consider blocking this person and/or reporting abuse
Nice usage of custom css properties! But I'm worried about the example with
box-shadow- it could be really heavy for mobile devices.I'd rather avoid that one, and keep it just as an example of how many possible ways we have ;)
Yeah I was wondering if it would cause any perf issues. I’ll add a note about it :-)
This is really great! I just spent waay too long trying to accomplish this using the "old way"--you're a life saver.
Just one question: where do you learn about these sorts of modern CSS approaches? There are a lot of mediocre resources out there (I'm looking at you, W3Schools) and it's hard to know what's worth reading through
Hi! I’m glad you found it useful!
To be honest, most of these techniques I’ve read about in blogs and other non-structured places of learning.
MDN is great as a reference, css-tricks.com is great for picking up techniques, and tympnus is great for inspiration.
and css.christmas is great for, well, small tips and tricks - that was our project for Christmas last year 😄
Thanks for the suggestions!
I have already started reading through css.christmas--very funny! I look forward to reading the rest of it.
This is very clever! Thank you for sharing.
Just one question, how well supported is the var(--image-url) method?
I can't seem to find it on caniuse.com.
Cheers!
It’s not supported in IE, unfortunately, since it doesn’t support css dynamic properties. Otherwise, it’s well supported.
Ahhh, that darn web browser! haha
That's great news it's supported by modern browsers.
Thanks again, really appreciate the knowledge :-)
Thank you. Save me.
Could the same result be also archived by CSS filters?
Great question! Yeah, you'd think that by adding a
filter: brightness(0.5), you'd end up with something similar. Unfortunately, that darkens everything, including the content in front of the background image.Here's a codepen showing what I mean:
Awesome! This really helped me a lot!
Thanks for letting me know! 🥳
Somehow it doesn't work for me with grid. I only get the invalid property value on the style="--........
sorry to hear! Are you using React or something? I'd love to help, but there's not a lot I can do with the information provided ☹️
hi!
truth be told this is my first website and I am a bit in the dark. I have nested grids applied and very minimal styles (just some font, plus the necessary for the grid to map out the grid areas)
I just wanted a nice overlay for the background pic so the text would be more readable (and it would look a bit fancier too)
I must apologize.
one word: TYPO
it doesn't matter how many times I read my code I could not find it. I made my partner read it, and bang!
lesson learned!!
people! make others read your code too!!
I'm sorry, it's working fine!!!
This is really helpful and working perfectly! Thank you so much!
I'm glad you found it helpful! :)
What a wonderful article, THANK YOU!
Thanks for letting me know! 🎉
Thnx dude that was helpfull