I'm using this gradient editor: http://www.colorzilla.com/gradient-editor/
But instead of displaying a smooth background like displayed, I get this: http://i.imgur.com/Ktk7fR7.png
I've tried setting background-repeat:repeat-y and x but it doesn't seem to help!
I am not sure if you need it to be an <img> or not, if not, you could make it a <div> and use the exact code which generated the gradient you saw on the mentioned tool.
<div style="-webkit-user-select: none; cursor: -webkit-zoom-in;background: background: #1e5799; /* Old browsers */background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 63%, #7db9e8 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(63%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 63%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 63%,#7db9e8 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 63%,#7db9e8 100%); /* IE10+ */background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 63%,#7db9e8 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */; /* FF3.6+ */;" width="713" height="300"></div>
instead of:
<img style="-webkit-user-select: none; cursor: -webkit-zoom-in;" src="http://i.imgur.com/Ktk7fR7.png" width="713" height="300">
to be specific. I am not sure how to get it to work with an <img>.
Example of code placing the gradient background on the body-tag to have a full-page gradient background:
<html>
<head>
<meta name="viewport" content="width=device-width">
<title>pcfOTC7.png (1312×602)</title>
</head>
<body style="position:absolute; margin: 0px;background: #1e5799; /* Old browsers */ background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 63%, #7db9e8 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(63%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 63%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 63%,#7db9e8 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 63%,#7db9e8 100%); /* IE10+ */ background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 63%,#7db9e8 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */;">
</body>
</html>
Related
Fiddle: http://jsfiddle.net/t4uujehb/1/
HTML:
<div style="overflow: hidden;">
<div class="theNum numOnly" style="float: left; cursor: pointer;">
45
</div>
<div class="theNum" style="float: left;">
<span>Provider(s) failed to update</span>
</div>
</div>
FireFox:
Chrome/IE 9/10:
How can I modify my CSS so styling is same in Chrome and IE (Or as close as possible for IE)
You must generate gradient also for other browsers (vendor prefixes) with tool such as ColorZilla. I tried and result is:
.theNum
{
background: #ededed; /* Old browsers */
background: -moz-linear-gradient(top, #ededed 0%, #dedede 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#dedede)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ededed 0%,#dedede 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ededed 0%,#dedede 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ededed 0%,#dedede 100%); /* IE10+ */
background: linear-gradient(to bottom, #ededed 0%,#dedede 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#dedede',GradientType=0 ); /* IE6-9 */
}
This question already has answers here:
Does IE9 support CSS linear gradients?
(3 answers)
Closed 7 years ago.
i want to show background image, with a color over it, but color have a opacity so that background image become visible. this worked in Chrome and Firefox with linear-gradient, but not in IE9. How it can work in ie.?
linear-gradient( rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.50) ), url(images/expand.jpg)
You can use following CSS code
note: the last line is hack for IE6 to IE9
CSS
.gradient {
background: #1e5799;
/* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1e5799), color-stop(50%, #2989d8), color-stop(51%, #207cca), color-stop(100%, #7db9e8));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
/* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0);
/* IE6-9 *
}
Support for full multi-stop gradients with IE9 (using SVG).
Add a "gradient" class to all your elements that have a gradient, and add the following override to your HTML to complete the IE9 support:
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
Single Ex:
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
Multi Ex:
background: #1e5799; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-8 */
I have problem with applying the gradient filter on my image. I want gradient beginning from black to full transparent from top to bottom and from bottom to top. I have definied css for div and with single color (background-color) works, but with image(background-image) it won't.
My style definition is:
#some_id{
background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 8%, rgba(0,0,0,0) 100%),
-moz-linear-gradient(bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 8%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(8%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0))),
-webkit-gradient(linear, left bottom, left top, color-stop(0%,rgba(0,0,0,1)), color-stop(8%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 8%,rgba(0,0,0,0) 100%),
-webkit-linear-gradient(bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 8%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 8%,rgba(0,0,0,0) 100%),
-o-linear-gradient(bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 8%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 8%,rgba(0,0,0,0) 100%),
-ms-linear-gradient(bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 8%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 8%,rgba(0,0,0,0) 100%),
linear-gradient(to top, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 8%,rgba(0,0,0,0) 100%); /* W3C */
background-image: url('../images/tla/tlo1.jpg');
}
Can You help me?
I have a button that has 2 different colors. I don't know about a way to color a button with 2 colors and I want to avoid from putting an image to be the background so I guess that I need 2 buttons (one under the other).
Both of the colors have to be changed when pressed (active).
Does anybody knows a way to make another button to be shown as active when the first one is pressed?
playground
<button>BUTTON</button>
button{
padding:10px 25px;
color:#fff;
border:0;
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #207cca 48%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(48%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#207cca 48%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#207cca 48%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#207cca 48%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#207cca 48%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}
button:active{
background: #b4ddb4; /* Old browsers */
background: -moz-linear-gradient(top, #b4ddb4 0%, #70aa7d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b4ddb4), color-stop(100%,#70aa7d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b4ddb4 0%,#70aa7d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b4ddb4 0%,#70aa7d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b4ddb4 0%,#70aa7d 100%); /* IE10+ */
background: linear-gradient(to bottom, #b4ddb4 0%,#70aa7d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4ddb4', endColorstr='#70aa7d',GradientType=0 ); /* IE6-9 */
}
Use the :active psudeo class:
input
{
color:red;
}
input:active
{
color:blue;
}
Fiddle here
I got a css class to separate the contents:
HTML:
<div class='seperator-gradient'></div>
css:
.seperator-gradient{
width: 100%;
height: 1px;
border-bottom:
background: #c4c4c4; /* Old browsers */
background: -moz-linear-gradient(left, #ffffff 0%, #e3e3e3 10%, #b8b8b8 50%, #e3e3e3 90%, #fcfcfc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(10%,#e3e3e3), color-stop(50%,#b8b8b8), color-stop(90%,#e3e3e3), color-stop(100%,#fcfcfc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); /* IE10+ */
background: linear-gradient(to right, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=1 ); /* IE6-9 */
}
this works fine, but now, I have a table, I'd like the bottom of each cells of this table has the same feature like the above. Is it possible to achieve this?
at the moment, I make the table's css to:
border-bottom: 1px solid;
but it doesn't have the same effect as the seperator-gradient class can achieve.
This is only supported in a few browsers at the moment:
-webkit-border-image: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(10%,#e3e3e3), color-stop(50%,#b8b8b8), color-stop(90%,#e3e3e3), color-stop(100%,#fcfcfc)) 0 0 1 1 repeat repeat;
Here's the browsers it's supported in: http://caniuse.com/#search=border-image
apply the class .seperator-gradient
property to all td tags of that particular table
In your css put
table td {
width: 100%;
height: 1px;
border-bottom:
background: #c4c4c4; /* Old browsers */
background: -moz-linear-gradient(left, #ffffff 0%, #e3e3e3 10%, #b8b8b8 50%, #e3e3e3 90%, #fcfcfc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(10%,#e3e3e3), color-stop(50%,#b8b8b8), color-stop(90%,#e3e3e3), color-stop(100%,#fcfcfc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); /* IE10+ */
background: linear-gradient(to right, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=1 ); /* IE6-9 */
}
Here is some usefull gradient effects.
http://css-tricks.com/examples/GradientBorder/