#search has an overwritten color and i can't seem to pinpoint it.
I've placed my search input next to my ul list that turns into a hamburger icon when it is in dev tools for a mobile phone. problem is that it seems to be inheriting a style. I've thought it was the #menu__box background-color but it isn't removing that color when i remove it. when i remove all colors it isn't updating it. its only when i move it away from the hamburger menu in html that it update the #search color back to white instead of gray. Also using !important does nothing for the color either. could any one tell me what i'm doing wrong? Code pen is bellow with image screen shot to show what it looks like.
https://codepen.io/Jwfrank3/pen/WNqBoWZ
24 Replies
this is why
75% brightness on the
nav
you probably meant to darken the background image
if that's the case, instead of filter, you can use backdrop-filter (https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter)
otherwise, just don't use filter on the entire navwhy does that influence the color? it worked i'm just curious to why it does that
because you're darkening EVERYTHING
color is part of it
i get it now because its inheriting the style from the parent
you're essentially saying "these elements are only at 75% brightness"
no no
that's not why
that's not what im saying
it's not inheriting the style
it's being affected by the
filter of the parent
that's a very important distinction, because both mean completely different thingsThat's what i meant to say my bad. still trying to learn these things.
if it inherits the style from the parent, then the property has the same value as the parent's property
for example, when you do
color: inherit, if the parent has color: red then the child will have color: red
in this case, if you read the background color, it's still #fff (or white)
but the filter is affecting how it is renderedits just has been dimmed to darker white looking gray
exactly
and that's because you've set the brightness to 75%
the problem is: you did it for the entire
<nav>is there a way to isolate the filter for the background image or color without effecting the siblings in the nav? i don't want to use filter anymore but i'm just curious
read this
i've explained how to do it for the background image
now, for everything else? no
will do.
try that and it should work
I appreciate your help now i just gotta marked this as solved. I'm not use to discord so this will take a minute lol
lol
you can add the solved tag
same place where you added the html and css tags
had to go to main menu and right click the post to edit tags 😄
yup, the ui is a bit funky
but, if i were you, what i would really do is to open the image in photopea, darken it to 75% brightness and save it
this saves you from having to use the
backdrop-filter propertyYeah i just sent this solution to my friend who was texting me cause he was trying to help me as well. he had the same reaction that he would just edit the image its self.
it's not the best option, but saves work from the device's gpu
it's also the easiest
i'm guessing it slows the rendering down when the webpage loads? not by a lot for my little site but i guess it adds up?
not on load, but very very very bad devices could struggle a bit
https://github.com/shadcn-ui/ui/issues/327 <-- here's a case where it caused performance issues very recently
apparently, the filter may be re-calculated at every scroll too 🤔 (i can't confirm or deny that)
in short, if you can avoid the
backdrop-filter and change the image, prefer that optionGood to know. Thanks for the heads up. I'll just image edit anything that needs to be changed like this
you're welcome
by the way, always keep the original image