I am working on a website which uses scales for showing stats.
I have created background gradients for each scale using CSS3 and the HTML5 meter element as in this tutorial:
HTML5-Meter-Shim
It works on all browsers expect Chrome and Opera, which show the default color.
Is this possible in Chrome and Opera, or is there any other solution?
Here's my work:
http://jsfiddle.net/KRnUd/2/
Use RGB color syntax, background-image instead of background, and meter attributes to get it fully working in Chrome and partially working in Opera:
<!doctype html>
<html lang="en">
<head>
<title>Meter Usage</title>
<style type="text/css">
meter {
display: inline-block;
height: 16px;
width: 200px;
overflow: hidden;
background-color: rgb(237,237,237);
background-image: -webkit-linear-gradient(top, rgb(237,237,237),rgb(187,187,187) 36%,rgb(247,247,247) ); /* Chrome10+,Safari5.1+ */
background-image: -o-linear-gradient(top, rgb(237,237,237),rgb(187,187,187) 36%,rgb(247,247,247) ); /* Opera 11.10+ */
}
</style>
</head>
<body>
<meter min="1024" max="10240" low="2048" high="8192" value="9216"/>
</body>
</html>
Related
I try to display a svg icon on a html page.
On chrome and other browser that works fine but on edge and internet explorer the icon don't appear.
I made it witk mask in css.
body{
background: #000;
}
.default {
background-color: #fff;
width:45px;
height:45px;
}
.icon {
mask:url('./icons/network.svg') no-repeat center center;
-webkit-mask: url('./icons/network.svg') no-repeat center center;
mask-size:90px auto;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="./style.css">
<title>Icons</title>
</head>
<body>
<image class="default icon"></image >
</body>
</html>
On internet explorer it displays a white square ( i think is the default class in css).
Thanks in advance !
According to caniuse.com Internet Explorer does not support mask at all and edge only partially supports this feature. Have a look here: https://caniuse.com/#search=mask
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
So I'm trying to color a div part of my html with a background gradient that i got from a color generator but for some reason this code won't work.
I'm following css/html tutorials and i'm replicating what their doing but it's not working out for me when i make my own tweaks. See my code below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Let's Play</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="mainbg">this part should have a colored gradient</div>
</body>
</html>
my css is..
<style type ="text/css">
#mainbg{
background: -webkit-linear-gradient(left, #e4efc0 0%,#abbd73 100%); /* Chrome10+,Safari5.1+ */
/* background-color: rgb( 149, 206, 145); */
}
</style>
not even a plain background is showing up.. thanks in advance
Remove the <style type ="text/css"> and </style> tags from your CSS file leaving you with:
#mainbg{
background: -webkit-linear-gradient(left, #e4efc0 0%,#abbd73 100%); /* Chrome10+,Safari5.1+ */
/* background-color: rgb( 149, 206, 145); */
}
You say that your css is:
<style type ="text/css">...
I think the style tag is causing the issue as I don't see anything wrong with your css code.
This seems to cover just about everything with regards to css3 gradients.
You will definitely want to add:
-moz filter
-ms-filter
-ms-
-o-
etc.
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);
The body-Tag of a HTML-File does have a background-image applied:
body {… background: #fff url(./img/bg-body.jpg) no-repeat 0 82; …}
everything works just fine with WebKit (Safari, Chrome…) and even Trident (IE) … BUT the background-image is not showing in Gecko (Firefox) … and if I add the DOCTYPE to the document, it doesn't work anywhere.
<html>
<head>
<style type="text/css">
body {… background: #fff url(./img/bg-body.jpg) no-repeat 0 82; …}
</style>
</head>
<body>
…
</body>
</html>
It does also not work with no divs, no content, no nothing…
Any ideas?
You need to specify the unit for your background position
body{ background: #fff url(./img/bg-body.jpg) no-repeat 0 82px }
it seems to work in webkit without it. But gecko needs a unit. Then it should work.