[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 82
  • 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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for 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

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

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