Solved

Question regarding image.

Posted on 2009-07-03
9
153 Views
Last Modified: 2012-05-07
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
Comment
Question by:Chriscup
  • 4
  • 3
  • 2
9 Comments
 
LVL 12

Expert Comment

by:kevin_u
ID: 24775140
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
 

Author Comment

by:Chriscup
ID: 24775662
I tried but no luck?:-(
0
 
LVL 12

Expert Comment

by:kevin_u
ID: 24775831
so when following their tutorial, during step 6, you are unable to click on the gradiant color picker?
0
Complete VMware vSphere® ESX(i) & Hyper-V Backup

Capture your entire system, including the host, with patented disk imaging integrated with VMware VADP / Microsoft VSS and RCT. RTOs is as low as 15 seconds with Acronis Active Restore™. You can enjoy unlimited P2V/V2V migrations from any source (even from a different hypervisor)

 
LVL 12

Expert Comment

by:kevin_u
ID: 24775873
The attached image illistrates what to click during step 6 of the tutorial:

6.jpg
0
 

Author Comment

by:Chriscup
ID: 24777768
Still I cannot obtain it.
0
 
LVL 12

Expert Comment

by:kevin_u
ID: 24777835
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
 
LVL 9

Accepted Solution

by:
statler01 earned 500 total points
ID: 24778893
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
 

Author Comment

by:Chriscup
ID: 24781717
Hmm, this look s good, but it does not have the right color. Ah man,
I am going nuts.
0
 
LVL 9

Expert Comment

by:statler01
ID: 24781777
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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

HOW TO CREATE A WEB 2.0 IMAGE WITH A REFLECTION I would like to start by saying I know Web 2.0 isn't a style. It is actually the practice of information sharing or  collaboration on the Web. It is also associated with the technology that is used …
Read about why website design really matters in today's demanding market.
In this tutorial viewers will learn how to correct colors in Photoshop using the Curves adjustment Open a photo for editing in Photoshop: Begin by creating a new adjustment layer by going to Layer > New Adjustment Layer > Curves: Select "OK" on the …
In this tutorial viewers will learn how to create a Photoshop action to apply adjustments and effects to multiple images. Open a photo for editing in Photoshop: Open the Actions window by going to Window > Actions: Start a new action by selecting th…

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question