[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 162
  • Last Modified:

Question regarding image.

I have a vertical line that creates a bar menu.

I would like the same blue I have in my image of the menu bar however I would like it to be shaded
like the red button in http://gvdating.com/search_results.php but using the blue color I have in the image.

#header-menu-bar
{
   font-weight: bold;
   font-size  : 1.0em;
   font-weight  :bold;
   font-family   : Arial, Serif;
   width : 100%;
   height: 23px;
   text-align: center;
   background: #65ACD7 url(../../Images/Header/bar.gif);
   color: white;
   padding-top: 10px;
   table-layout  :fixed;
}
This is the tutorial I got it from:

http://www.tutcity.com/view/aqua-blue-menu.10580.html
font.png
bar.gif
0
Chriscup
Asked:
Chriscup
  • 4
  • 3
  • 2
1 Solution
 
kevin_uCommented:
In the tutorial, step 6 is where you choose the blue color.
To change the color of the gradiant, click (or maybe double click) on the little pointer on the bottom left of the graidant.   Change it to your shade of red.

Also, in step 8, instead of making the rectangle black, make it a shade of the color you want.

You should be able to create any bar you like.
0
 
ChriscupAuthor Commented:
I tried but no luck?:-(
0
 
kevin_uCommented:
so when following their tutorial, during step 6, you are unable to click on the gradiant color picker?
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
kevin_uCommented:
The attached image illistrates what to click during step 6 of the tutorial:

6.jpg
0
 
ChriscupAuthor Commented:
Still I cannot obtain it.
0
 
kevin_uCommented:
I'm not sure what to tell you.  Perhaps someone else would be able to help.  You should consider clicking Request Attention to get it back to the top of the list.
0
 
statler01Commented:
There's more than one way to skin a cat...

The gradient on the buttons that you referenced is pretty simple, it's not as complicated as the neon style gradient you've been working on.

Here's a simple method to match the gradient style of those buttons:

Start a new image, with whatever pixel dimensions you desire. Fill the background layer (or layer 1) with the blue color that you like. (Image 1)

Create a new layer and fill it with black. (Image 2)

Use the rectangular marquee to select most of the center part of the black layer (Image 3), then cut it out. (Image 4)

Apply a gaussian blur to the black layer. Use whatever blur amount looks best for your desired effect. (Image 5)

If desired, try reducing the opacity of the black layer just a bit to soften the edges. (Image 6)


1.png
2.png
3.png
4.png
5.png
6.png
finish.gif
0
 
ChriscupAuthor Commented:
Hmm, this look s good, but it does not have the right color. Ah man,
I am going nuts.
0
 
statler01Commented:
You can do it yourself with whatever color you want. That was just an example...

In step one of the above, fill the background with whatever color you like.
0

Featured Post

2018 Annual Membership Survey

Here at Experts Exchange, we strive to give members the best experience. Help us improve the site by taking this survey today! (Bonus: Be entered to win a great tech prize for participating!)

  • 4
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now