I have the following CSS:
.main {
padding-right: 15px;
padding-left: 15px;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U1ZTVlNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+)top;
background: -moz-linear-gradient(top, rgba(229,229,229,1) 0%, rgba(255,255,255,0) 100%)top; /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(229,229,229,1)), color-stop(100%,rgba(255,255,255,0)))top; /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%)top; /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%)top; /* IE10+ */
background: linear-gradient(to bottom, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%) top; /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#00ffffff',GradientType=0 )top; /* IE6-8 */
background-size: Auto 200px;
background-repeat: repeat-x;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U1ZTVlNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+)bottom;
background: -moz-linear-gradient(top, rgba(229,229,229,1) 0%, rgba(255,255,255,0) 100%)bottom; /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(229,229,229,1)), color-stop(100%,rgba(255,255,255,0)))bottom; /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%)bottom; /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%)bottom; /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%)bottom; /* IE10+ */
background: linear-gradient(to bottom, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%) bottom; /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#00ffffff',GradientType=0 )bottom; /* IE6-8 */
background-size: Auto 200px;
background-repeat: repeat-x;
padding-top: 50px;
min-height:600px;
}
And here is a live example: http://jsfiddle.net/ZtJmM/
I want that one gradient be at the top, and one at the bottom of the element. Is that possible?
Thanks!
Yes, use them in the same statement like:
background: linear-gradient(to bottom, rgba(229,229,229,1) 0%,
rgba(255,255,255,0) 100%) top,
linear-gradient(to bottom, rgba(229,229,229,1) 0%,
rgba(255,255,255,0) 100%) bottom;
Related
I currently am trying to use a linear-gradient from CSS3 as the background of a site, and from what I can tell, am following the spec to comply with Internet Explorer right, but I can't tell what's not working here.
body {
padding: 0px;
margin: 0px 0px 0px 0px;
background: rgb(0,0,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(26,42,132,1) 40%, rgba(33,29,155,1) 50%, rgba(26,42,132,1) 60%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(40%,rgba(26,42,132,1)), color-stop(50%,rgba(33,29,155,1)), color-stop(60%,rgba(26,42,132,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(26,42,132,1) 40%,rgba(33,29,155,1) 50%,rgba(26,42,132,1) 60%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(26,42,132,1) 40%,rgba(33,29,155,1) 50%,rgba(26,42,132,1) 60%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(bottom, rgba(0,0,0,1) 0%,rgba(26,42,132,1) 40%,rgba(33,29,155,1) 50%,rgba(26,42,132,1) 60%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(26,42,132,1) 40%,rgba(33,29,155,1) 50%,rgba(26,42,132,1) 60%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
We are using following CSS in one of our projects and it works on Chrome, Firefox and IE11.
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
background-image: -webkit-linear-gradient(#000, transparent);
background-image: -moz-linear-gradient(#000, transparent);
background-image: -o-linear-gradient(#000, transparent);
background-image: linear-gradient(#000, transparent);
See this Fiddle as well: http://jsfiddle.net/3ck72fbc/
I'm using the following CSS to try to get a vertical background gradient to display in most browsers.
It works fine in Firefox but is not displaying in Chrome.
You can see where I'm trying to apply the gradient in the footer section of http://blog.bmxboss.com
background: -moz-linear-gradient(top, #222222 0%, #111111 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#222222), color-stop(100%,#111111)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #222222 0%,#111111 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #222222 0%,#111111 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #222222 0%,#111111 100%); /* IE10+ */
background: linear-gradient(to bottom, #222222 0%,#111111 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#111111',GradientType=0 ); /* IE6-9 */
How can I make this work in Chrome?
Using a tool I made to generate CSS gradients, this is the CSS for a gradient from #222222 to #111111, with support for all browsers:
background: #222222;
background: -moz-linear-gradient(top, #222222 0%, #111111 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#222222), color-stop(100%,#111111));
background: -webkit-linear-gradient(top, #222222 0%,#111111 100%);
background: -o-linear-gradient(top, #222222 0%,#111111 100%);
background: -ms-linear-gradient(top, #222222 0%,#111111 100%);
background: linear-gradient(to bottom, #222222 0%,#111111 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#111111',GradientType=0 );
Here is a working JSFiddle.
Ok my problem is that in firefox my hover gradient is showing up as black to white. Black being the top color and white as the bottom. Here is the css hover code I'm using. It doesn't make sense to me because I'm not even using the color codes for black or white. Any help would be greatly appreciated!
nav a {
color: #fff;
background: #b9b9b9; /* Old browsers */
background: -moz-linear-gradient(top, #b9b9b9 0%, #616161 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b9b9b9), color-stop(99%,#616161)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b9b9b9 0%,#616161 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b9b9b9 0%,#616161 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b9b9b9 0%,#616161 99%); /* IE10+ */
nav a:hover, nav a:active {
background: #b9b9b9; /* Old browsers */
background: -moz-linear-gradient(bottom, #4f4f4f, #b9b9b9 ); /* FF3.6+ */
background: -webkit-linear-gradient(top, #b9b9b9 0%,#4f4f4f 99%); /*
background: -o-linear-gradient(top, #b9b9b9 0%,#4f4f4f 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b9b9b9 0%,#4f4f4f 99%); /* IE10+ */
background: linear-gradient(to bottom, #b9b9b9 0%,#4f4f4f 99%); /* W3C */
You are missing your closing braces.
Your code works otherwise: http://jsfiddle.net/66QQV/
nav a
{
color: #fff;
background: #b9b9b9; /* Old browsers */
background: -moz-linear-gradient(top, #b9b9b9 0%, #616161 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b9b9b9), color-stop(99%,#616161)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b9b9b9 0%,#616161 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b9b9b9 0%,#616161 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b9b9b9 0%,#616161 99%); /* IE10+ */
}
nav a:hover, nav a:active
{
background: #b9b9b9; /* Old browsers */
background: -moz-linear-gradient(bottom, #4f4f4f, #b9b9b9 ); /* FF3.6+ */
background: -webkit-linear-gradient(top, #b9b9b9 0%,#4f4f4f 99%); /*
background: -o-linear-gradient(top, #b9b9b9 0%,#4f4f4f 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b9b9b9 0%,#4f4f4f 99%); /* IE10+ */
background: linear-gradient(to bottom, #b9b9b9 0%,#4f4f4f 99%); /* W3C */
}
This is assuming that you intend to put an <a> element inside of a <nav> element ... if you meant for this to be a class or an ID (such as <span class="nav"> or <div id="nav">), you need to use .nav or #nav instead, respectively.
I am trying to get The degree of color of the box in the picture
http://i46.tinypic.com/iefcpl.png
i like the box in the picture and i want make similar one
This is my code, and i can't make similarty
<style>
.b{
background:-moz-linear-gradient(top, #fff, #ebebeb);
height:25px;
border:1px #efefef solid;
}
</style>
<div class="b">
</div>
.b{
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #ebebeb 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#ebebeb)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#ebebeb 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#ebebeb 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#ebebeb 100%); /* IE10+ */
background: linear-gradient(top, #ffffff 0%,#ebebeb 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ebebeb',GradientType=0 ); /* IE6-9 */
height:25px;
border:1px #DDDDDD solid;
}
I used Ultimate CSS Gradient Generator to generate the gradient for all browsers.
DEMO
Other browers like chrome shows up fine. IE9 just shows the gradients no images.
Code CSS
body {
background:
url('../images/adventure/background.png')
background: url('../images/adventure/background.png'), -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 40%, rgba(149,147,160,1) 100%); /* FF3.6+ */
background: url('../images/adventure/background.png'), -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(40%,rgba(255,255,255,0.4)), color-stop(100%,rgba(149,147,160,1))); /* Chrome,Safari4+ */
background: url('../images/adventure/background.png'), -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.4) 40%,rgba(149,147,160,1) 100%); /* Chrome10+,Safari5.1+ */
background: url('../images/adventure/background.png'), -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.4) 40%,rgba(149,147,160,1) 100%); /* Opera 11.10+ */
background: url('../images/adventure/background.png'), -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.4) 40%,rgba(149,147,160,1) 100%); /* IE10+ */
background: url('../images/adventure/background.png'), linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.4) 40%,rgba(149,147,160,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#9593a0',GradientType=0 ); /* IE6-8 */
You need a closing semicolon (;) on the first background like this:
background: url('../images/adventure/background.png');