Go Premium for a chance to win a PS4. Enter to Win

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

blue border and header

Hi,

In CSS, I forget how to make a border around a div with a box  header that has a  gradient color blue.
If the browser cant handle the gradient color then I need it to still display a color.
Can someone give me an example please.
0
jagguy
Asked:
jagguy
1 Solution
 
GaryCommented:
Not sure what you mean exactly
Something like this?
http://jsfiddle.net/GaryC123/7k00kg3d/
0
 
GaryCommented:
Or something like this
http://jsfiddle.net/GaryC123/7k00kg3d/2/

div {
    height:200px;
    width:200px;
    border:5px solid blue
}
div div {
    height:35px;
    border:none;
    background: -webkit-linear-gradient(blue, lightblue);
    background: -o-linear-gradient(blue, lightblue);
    background: -moz-linear-gradient(blue, lightblue);
    background: linear-gradient(blue, lightblue);
}

Open in new window

0
 
jagguyAuthor Commented:
Yes the last one, with a heading in it

What happens if it cant display the gradient for older browsers?
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
jagguyAuthor Commented:
Also the div have class names ? as I need to reproduce it
0
 
GaryCommented:
If you are just worried about IE8 then add to the css

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='blue', endColorstr='lightblue', GradientType=0 );

Open in new window

You shouldn't need to worry about the other browsers as they tend to self update to the latest version anyway which all support CSS3
0
 
GaryCommented:
Then just add your class names and use them in the css instead of div
0
 
COBOLdinosaurCommented:
If you need a fallback for browser that don't support gradients just put background:blue; ahead of the gradient declarations and the browsers that can't do gradients will use the blue because they ignore the linear-gradient that they don't understand.

Cd&
0
 
HainKurtSr. System AnalystCommented:
just add another line inside css like this:

background-color:blue;
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now