How to add saturation to a background gradient?
This gradient is inside body{}.
54 Replies
hsla() - CSS: Cascading Style Sheets | MDN
The hsla() functional notation expresses a given color according to its hue, saturation, and lightness components. An optional alpha component represents the color's transparency.
you can just change the second property of that if you want to change the saturation. IIRC vscode can translate between rgba and hsla, but if that doesn't work I'm sure there's a million translation tools on google
you can use alpha values in hsl no need for hsla 🙂
alternatively you can use blend mode to fake a saturation filter: https://css-tricks.com/apply-a-filter-to-a-background-image/
Chris Coyier
CSS-Tricks
Apply a Filter to a Background Image | CSS-Tricks
You can apply a filter to an entire element quite easily with the filter property. But what if you want to apply a filter just to the background of an
keep in mind that the blend mode here uses the alpha channel, so that
linear-gradient(black, black) they're using needs to be black, transparent and not black, white if you want a fading saturation effect@jochemm it applies the saturation to everything on the page. I only want the the background gradient to change and not the logo.
then just use hsl
am i doing the correct thing? bc i see no changes @jochemm
you can change the second percentage in both and it will desaturate the gradient
I used hsl instead of hsla because you just had both alpha channels set to 1
thanks man you are lifesaver
@jochemm I do have one more issue. See this gradient just repeats itself but not the nav. I tried many things but it didnt work
put it in a codepen, then I can take a look
okke
you have to save it first
wait not this one
im use to autosave haha
Its being caused by the percentage margin on your heading
but if i remove the margin, it wont aligned properly?
you would use a wrapper so that the parent has a width to work off of, and then you can use margin inline auto, or alternatively something like flex/grid
i dont fully understand css cuz i just started so idk what that means.
havent started flexbox or grid yet
Id advise checking out kevins courses on it, they are super useful - here is an example on what i was on about https://codepen.io/gashydev/pen/MWXMYop
the repeating gradient issue was fixed after removing the margin but now its not center anymore
you can just stick
text-align: center on that section tagThat as well
though probably not just using section {}, but with a class
it did solve the issue but i dont know how so yeah i'll check out his courses
I just went with an example of treating it like a normal block instead of specifically a text one, Jochems solution is the better approach in this use case
do i have to give a class? cuz i want this styling to apply to all headings on each page and there is one per page.
generally it's better to use classes than to apply directly to elements, but you don't have to.
but it didnt work without a class
did you remove the margins and the translate?
and add
text-align: center to the section?yeah
update the codepen then
and I'll take another look
yeah its fixed now, i just added class to the headings
@jochemm @gashy Thanks for the help!
np
No worries!
@jochemm @gashy This is a small bug, i feel like im going in the right direction but im missing smth and idk what
https://codepen.io/Aman-sghh/pen/LYrKERr
I want to add active class to the link that is currently active
but i only get the effect when i click on it
when i let go, it goes back to normal, the styling dont stay forever
you have no
btn-active class in your css
class="btn-active" does not match .btn:active
the :active pseudo-class only covers active interaction by the user, and won't highlight the page you're on automatically eitherbcs its all btn for links, i forgot to update
https://codepen.io/Aman-sghh/pen/LYrKERr
its updated now
thats how they did it on w3school and yt but there was some js too
you can't do that without js as far as I know
you can't just follow half a tutorial and expect it to work 😛
i can only use css in this project thats why i ignored the js part
you can't have automatically changing active links with only css, and that's not what the
:active pseudo element is forSo this effect is impossible without js?
you could manually edit each page and set a class on the appropriate link, but that's it
ok well thanks anyways
I'm curious, why can't you use javascript?
there's almost no situation I can imagine where you couldn't just include a script tag at the bottom of the page, short of maybe an email template and this isn't that
Im in college and currently in semester 1 so they only taught us html and css, thats why we are not allowed to use javascript
im just gonna ask the lecturer to do it without css😁
If its not an SPA you should just be able to add the class to the respected link like Jochem suggested
i did give it a class but its 80% complete
so the the link is active only when i click on it nd changes background but as soon as i let go it goes back to normal
i want to be able to see which page im currently on by just looking at the navbar
and this must be done without js
here's an example but i dont get really get it
Like jochem said
:active is not what this use case is for
You need to add a class to the specific element itself, on each individual page
so for example you have 4 pages and 4 links - home, contact, about, blog
- in home.html you need to add a class to the home link element in the navigation
- in contact.html you need to add a class to the contact link element in the navigation
- in about.html you need to add a class to the about link element in the navigation
- in blog.html you need to add a class to the blog link element in the navigation
:active is for the state of a button or link whilst the user is clicking on the element, as soon as the user has finished clicking this, its no longer active (in its simplest form)ah i added the same class to every element, ig thats the issue