Skip to main content
Topic: opacity? (Read 2850 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

opacity?

I changed the background image of my forum's header and now I want to fade this background image where the menu buttons are from clear to white or grey. So the nav_menu container (if it's the right point to start) should show the background image at the top and a white or grey color at the bottom. Can opacity be a solution?

God, I need to work on my english!  :-[

Re: opacity?

Reply #1

If I understand correctly you could use a linear-gradient going from transparent to some solid color. For example, here's a line from something I was playing around with a couple of years ago:

Code: [Select]
background-image: linear-gradient(to left, rgba(0,0,0,0) 800px, #090 1000px), url(images/head.jpg);

Re: opacity?

Reply #2

Yes .. that works with opacity ...
Give the image the css style opacity: 1;
And on the button:hover and button:focus the style opacity:0.5;transition:opacity 0.6s;
This means the image is dimmed to the half over 0,6 second if the mouse is moved over the buttons

Test it ...
Many are stubborn in relation to the path, a few in relation to the target.
Visit our new Forum Project on https://www.portamx.com

Re: opacity?

Reply #3

Apologies for the hijack, but that's a great looking site @Jorin‍.   Now back to the topic.   ;)

Re: opacity?

Reply #4

Based on @Frenzie suggestion I think something like this?
Code: [Select]
#top_section {
linear-gradient(to bottom, rgba(0,0,0,0) 170px, #f0f0f0 185px), url(../../images/bg_ep.png);
}
Bugs creator.
Features destroyer.
Template killer.

Re: opacity?

Reply #5

@Frenzie You did understand right. That's exactly what I wanted.  :)

@Feline Thank you, but not the buttons should fade but the background behind them.

@badmonkey Oh, thank you very much!  O:-)

@emanuele Thanks! I will try this!


Re: opacity?

Reply #7

Thanks, this worked:

Code: [Select]
#top_section {
background: linear-gradient(to bottom, rgba(0,0,0,0) 125px, rgba(210,210,210,1) 220px), url(../../images/bg_ep.png), #E6E6E6;
background-position: center;
box-shadow: 0 1px 4px #666;
border-top: 1px solid #5BA9D9;
border-bottom: 3px solid #5BA9D9;
}

But only when the header is not collapsed. When it is, the fading disappears. That's why I asked about the div.

I tried this:

Code: [Select]
.nav_menu {
background: linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(210,210,210,1) 95px), url(../../images/bg_ep.png);
}

and this:

Code: [Select]
#nav_menu {
background: linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(210,210,210,1) 95px), url(../../images/bg_ep.png);
}

Nothing happened. I am really not good at this!  :-[

Re: opacity?

Reply #8

Wouldn't that be #menu_nav unless you changed the ID?

Re: opacity?

Reply #9

Oh, such a shame! You are absolutely right!  :-[

It works like a charme with this code:

Code: [Select]
#top_section {
background: #E6E6E6;
background-image: url(../../images/bg_ep.png);
background-position: center;
box-shadow: 0 1px 4px #666;
border-top: 1px solid #5BA9D9;
border-bottom: 3px solid #5BA9D9;
}
#menu_nav {
background: linear-gradient(to bottom, rgba(0,0,0,0) 5px, rgba(200,200,200,1) 40px);
}

Great, thanks a lot!  :)

Re: opacity?

Reply #10

Quote from: Jorin – @Feline Thank you, but not the buttons should fade but the background behind them.
Sure .. but the action on the Buttons (clicked/active) should hide the image (I think) .. or I have not understand you ...

Fel
Many are stubborn in relation to the path, a few in relation to the target.
Visit our new Forum Project on https://www.portamx.com

 

Re: opacity?

Reply #11

Sure they should hide the background image. They do. So what's your point?