Greetings all,
I'm using a gradient background with -webkit-gradient. It's not working on Chrome 8.0.552.224 on Windows 7, but I could swear it was recently working on Chrome-OS X. It's Monday so perhaps I'm missing something obvious, but if so I can't figure it out. I'd appreciate your taking a look. The sample code here will work on Firefox but doesn't display a gradient in Chrome:
Thanks,
-Northk
<!DOCTYPE html>
<html lang="en">
<head>
<title>Gradient test </title>
<style>
.main-header
{
padding-top: 50px;
min-height: 50px;
background: -webkit-gradient(linear, 0%, 0%, 0%, 100%, from(#fff), to(#000));
background: -moz-linear-gradient(top, #fff, #000);
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="main-header">
THIS WORKS ON FIREFOX BUT DOESN'T WORK ON CHROME-WINDOWS 7!
</div>
</body>
</html>
Seems I just got the syntax wrong. Here's how it should be:
background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#000));
Be aware in Chrome 16.0.912.75m still has a small CSS bug/issue when parsing style:
background:-webkit-linear-gradient (top,gray 0,#A0A0A0 100%);
This will not work, because of spaces between -webkit-linear-gradient and start bracket.
Deleting additional spaces will solve the issue as well as minifying CSSs.
Try this
background: -webkit-linear-gradient(#DDDDDD, #ffffff);
Related
Recently I have been coding a clicker game, and have found the need to use a meter to display progress. I wanted the meter to have a gradient that goes from light pink to cyan, and it works perfectly on chrome. However, when I used my home computer and booted up firefox; the gradient was no longer displayed; and the meter was a dull shade of green.
.pastrymeter::-webkit-meter-optimum-value {
background : linear-gradient(90deg, lightpink, cyan);
}
This is the styling for the meter; and nothing that I have changed fixes it. I tried adding the moz prefix to the background tag; which did nothing. I also tried changing background to background-image to see if it was an element thing; but that also did nothing.
What can I do to fix this?
Looks like you are targeting a non-standard feauture -webkit-meter-optimum-value, that isn't supported in Firefox.
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-meter-optimum-value
Try this, it is cross-browser compatible.
background: -moz-linear-gradient(90deg, lightpink, cyan);
background: -webkit-gradient(linear, left top, left bottom, from(#cfddac), to(#fff));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cfddac', endColorstr='#ffffff');
background: -o-linear-gradient(rgb(207,221,172),rgb(255,255,255));
Change the values as you may require
Can you try this second method ?
<div style="background-image: -webkit-linear-gradient(bottom, #FE1C4A 22%, #AB244A 61%);
background-image: -moz-linear-gradient(bottom, #FE1C4A 22%, #AB244A 61%);
width: 200px; height: 100px; text-align: center;">
</div>
I have some rules for my div "Border" It works in all other browsers but not in IE 10.
Anybody have any idea why this could be happening?
Thank you.
.border {
background: white;
border: 8px solid transparent;
-moz-border-image: -moz-linear-gradient(top left, white 50%, #3a4ed5 100%);
-webkit-border-image: -webkit-linear-gradient(top left, white 50%, #3a4ed5 100%);
border-image: linear-gradient(to bottom right, white 50%, #3a4ed5 100%);
border-image-slice: 1;
}
.border {
background-color: white;
display: block;
height: 50px;
width: 150px;
text-align: center;
transform: skewX(-15deg);
}
<div class="border">
<div>
You said that you have the meta tag set to emulate IE10.
Border images are not supported by IE10, only IE11. (You can confirm here: http://caniuse.com/border-image/embed/.)
So if you set IE11 to emulate IE10, it will stop supporting border images.
To resolve the problem, you need to remove the IE10 emulation. The best thing to do here is to explicitly tell IE to use it's best available mode. This can be done as follows:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Simply swap out your existing meta tag for this one, and the border image problem will be solved.
However, before you make that change you should check to confirm if there is any other reason why your site might have wanted to be in IE10 mode. I'm guessing there isn't any reason, but it's worth checking.
I was reading this article http://www.sitepoint.com/using-unprefixed-css3-gradients-in-modern-browsers/ .I created this little demo of what this article teaches.
<html>
<head>
<title>Css Gradients</title>
<style>
.demo{
height: 200px;
width: 400px;
margin-bottom: 10px;
background: linear-gradient(to right,red,yellow);
/*background: linear-gradient(23deg,red,yellow);*/
}
#radial{
/*background: radial-gradient(at center,red,yellow);*/
background: radial-gradient(circle closest-corner,red,yellow);
}
</style>
</head>
<body>
<div class="demo"></div>
<div class="demo" id="radial"></div>
</body>
</html>
Now the problem is,Firefox is rendering the background gradient correctly but Google Chrome(version 22) is not rendering the background gradient at all.See the screenshots
At the moment (Chrome 24 / Safari 6) Webkit still have not added support for unprefixed css3 gradients yet.
This is a bit sad, if you consider the fact that even IE10(!) uses unprefixed syntax already.
Reference: http://caniuse.com/#search=grad
I am in the process of learning HTML.
What is the best way to create a gradient background for an HTML page?
So far this is what I have as a background:
body style="background-color:Powderblue"
I know this is not a gradient.
This cannot be done in html but it can in css (specifically css3).
You would have to add a class to the body of your page or a div within it that surrounds all of your content. You can use a css gradient generator to get the code to put in your css class.
Here is a simple example on a div: http://jsfiddle.net/8fDte/
You can do the following as well if you want it on the body. Note you have to link to the css file that will store you styles.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<LINK href="PathToCss.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY class="MyGradientClass">
</BODY>
</HTML>
CSS
This code can be generated by a css gradient generator like the one linked above.
.MyGradientClass
{
height:200px;
background-image: linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
background-image: -o-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
background-image: -moz-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
background-image: -webkit-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
background-image: -ms-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.25, rgb(113,61,62)),
color-stop(0.63, rgb(147,92,93)),
color-stop(0.82, rgb(177,120,121))
);
}
Edit:
As Rory mentioned, CSS3 is not fully supported by all modern browsers. However, there are some tools such as PIE CSS to help IE to accept some CSS3 functionality.
It's not possible to make a gradient with HTML alone. There are new features in CSS3 which allow you to create a gradient, however these are not fully supported by all browsers.
If you'd like to read some more about CSS3 gradients, read this article
There is also a handy online tool which will create the CSS code to create a gradient of your specification, here.
Styling in external sheets is a much easier, faster and more efficient way to style your web pages especially if you have several pages that link to your style sheet(s). This allows you to change the entire styling of all of your pages at the same time with one line of code. It is ok however if you have a single page that you have up or if you need a simple page to look different by itself, inline styling is sufficient but not common. See below for quick example.
(inline styling for each page)
<!doctype html>
<html>
<head>
<title>THIS WOULD GET AGGRAVATING IF DONE ON 10 PAGES!</title>
<style="text/css">
body {background: blue; font-family: Arial, Georgian, Sans-serif; font-size: 19px;}
h1 {text-align: center, font-weight: bolder;}
p {text-indent: 20px; line-height: 25px;}
</style>
</head>
<body>
</body>
</html>
....or it would b like this
<!doctype html>
<!doctype html>
<html>
<head>
<title>THIS CHANGES SAME PARAMETERS ON 100 PAGES WITH SAME LINK INSTANTLY!</title>
<link rel="stylesheet" href="/cssfolder/yourcssheet.css" />
</head>
<body>
</body>
and your "yourcssheet.css" style sheet would look like this
/*BEGINNING OF STYLESHEET, NO OTHER CODING NECESSARY BUT SOME MIGHT PUT #meta charset utf-8 AT THE TOP BUT IS NOT NEEDED TO FUNCTION*/
body {background: blue; font-family: Arial, Georgian, Sans-serif; font-size: 19px;}
h1 {text-align: center, font-weight: bolder;}
p {text-indent: 20px; line-height: 25px;}
/*END OF STYLESHEET*/
Now instead of going through every style on each individual page head, you can simply change it all with a simple external sheet all linked together by the following.
Hope this helps. jhawk2k14#gmail.com
Use this http://www.colorzilla.com/gradient-editor/
CSS should be applied in a separate stylesheet... never apply styling inline.
There are many online tools that create Gradients. Either you can use them or you can create your own
Simply check here: http://www.cssmatic.com/gradient-generator
Also you can create your own by this way
CSS
background-image: -webkit-linear-gradient(bottom, rgb(color_code) 25%, rgb(color_code) precent%, rgb(color_code) percent%);
background-image: -moz-linear-gradient(bottom, rgb(color_code) 25%, rgb(color_code) precent%, rgb(color_code) percent%);
background-image: -ms-linear-gradient(bottom, rgb(color_code) 25%, rgb(color_code) precent%, rgb(color_code) percent%);
background-image: -o-linear-gradient(bottom, rgb(color_code) 25%, rgb(color_code) precent%, rgb(color_code) percent%);
background-image: linear-gradient(bottom, rgb(color_code) 25%, rgb(color_code) precent%, rgb(color_code) percent%);
I know that Internet Explorer has some proprietary extensions so that you can do things like create divs with a gradient background. I can't remember the element name or it's usage. Does anyone have some examples or links?
The code I use for all browser gradients:
background: #0A284B;
background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887));
background: -webkit-linear-gradient(#0A284B, #135887);
background: -moz-linear-gradient(top, #0A284B, #135887);
background: -ms-linear-gradient(#0A284B, #135887);
background: -o-linear-gradient(#0A284B, #135887);
background: linear-gradient(#0A284B, #135887);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
zoom: 1;
You will need to specify a height or zoom: 1 to apply hasLayout to the element for this to work in IE.
Update:
Here is a LESS Mixin (CSS) version for all you LESS users out there:
.gradient(#start, #end) {
background: mix(#start, #end, 50%);
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="#start~", EndColorStr="#end~")";
background: -webkit-gradient(linear, left top, left bottom, from(#start), to(#end));
background: -webkit-linear-gradient(#start, #end);
background: -moz-linear-gradient(top, #start, #end);
background: -ms-linear-gradient(#start, #end);
background: -o-linear-gradient(#start, #end);
background: linear-gradient(#start, #end);
zoom: 1;
}
Look at the custom CSS filters IE can handle
http://msdn.microsoft.com/en-us/library/ms532847.aspx
The filter style should work for IE8 and IE9.
.gradientClass
{
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e6e6e6', endColorstr='#CCCCCC');
}
A significant gotcha when it comes to gradients in IE is that although you can use Microsoft's filters...
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FCCA6D', endColorstr='#FEFEFE');
zoom:1;
...they kill clear type on any text covered by the gradient. Given that the purpose of gradients is normally to make the UI look better, that's a show stopper for me.
So for IE I use a repeating background image instead. If the background image css is combined with the gradient CSS for other browsers (as per Blowsie's answer), other browsers will ignore the background image in favour of the gradient css, so it will only end up applying to IE.
background-image: url('/Content/Images/button-gradient.png');
There are plenty of sites you can use to quickly generate a gradient background; I use this.
Great tool from Microsoft, allows you to examine colors real-time and generates CSS for all browsers:
http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html
/* IE10 */
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);
/* Opera */
background-image: -o-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(3, #B7B8BD));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);
/* Proposed W3C Markup */
background-image: linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);
Just thought I'd add this useful link: http://css3please.com/
Shows how to get gradients working in all browsers.
Note that IE10 will support gradients as follows:
background: -ms-linear-gradient(#017ac1, #00bcdf);
Right from ScriptFX.com article:
<body bgcolor="#000000" topmargin="0" leftmargin="0">
<div style="width:100%;height:100%; filter: progid:
DXImageTransform.Microsoft.Gradient (GradientType=1,
StartColorStr='#FF006600', EndColorStr='#ff456789')">
Your page content goes in here ...... at the end of all the page content, you must close the <div> tag, immediately before the closing <body> tag.... as below
</div>
</body>
Try this:
.red {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e02a42', endColorstr='#a91903', GradientType=0); /* IE6-9 */
height: 0; /* gain layout IE5+ */
zoom: 1; /* gain layout IE7+ */
}
Two things I discovered while struggling with IE 9 gradient.
The -ms-filter did not work for me. I had to use simply filter.
I had to add height: 100% to my class for IE to use the gradient.
In my case I inserted it on header section
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
then in style section insert it
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#49708f', endColorstr='#293f50');
zoom: 1;