This question already has answers here:
CSS3 cross browser linear gradient
(4 answers)
Closed 8 years ago.
I'm trying to get gradient in DIV using the CSS3 like on the image:
Using:
.bar-header {
background: linear-gradient(to bottom top, yellow , blue) !important;
}
But without luck, what is the right syntax to get result like on the image above?
Thanks for any advice.
A bit longer code could provide better cross-browser support. Note that not all of these are needed. I've also added a border on the top, not quite sure if you need it.
.bar-header {
background: #409be8; /* Old browsers */
background: -moz-linear-gradient(top, #409be8 0%, #4883e6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#409be8), color-stop(100%,#4883e6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #409be8 0%,#4883e6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #409be8 0%,#4883e6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #409be8 0%,#4883e6 100%); /* IE10+ */
background: linear-gradient(to bottom, #409be8 0%,#4883e6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#409be8', endColorstr='#4883e6',GradientType=0 ); /* IE6-9 */
border-top: 2px solid #545de4; /* Border displayed above */
width: 808px; /* For the demo, to make it visible */
height: 100px; /* For the demo, to make it visible */
}
<div class="bar-header"></div>
Use some add-on like Color Picker/ColorZilla and etc to get colors on top/middle/bottom of the image and use this data in some "CSS Gradient Generator". To find any of these programms use Google search.
Related
Unable to use gradient along with image.
This works:
background: red url("/Style Library/Images/Recurr.png") center no-repeat
This wont work:
background: linear-gradient(black, white) url("/Style Library/Images/Recurr.png") center no-repeat
How to use gradient along with image.
You can use it.
See this:
background: #6cab26;
background-image: url(/Style Library/Images/Recurr.png); /* fallback */
background-image: url(/Style Library/Images/Recurr.png), -webkit-gradient(linear, left top, left bottom, from(#6cab26), to(#6ceb86)); /* Saf4+, Chrome */
The key is to use background-image for image and background for gradient.
I have included redundancies for other browsers.
.Blue{
background:#47b; /* Old browsers */
background:-webkit-linear-gradient(top,#47b 0%,#249 100%); /* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,#47b 0%,#249 100%); /* Opera 11.10+ */
background:-ms-linear-gradient(top,#47b 0%,#249 100%); /* IE10+ */
background:linear-gradient(to bottom,#47b 0%,#249 100%); /* W3C */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4477bb',endColorstr='#224499',GradientType=0); /* IE6-9 */
background-image: url("/Style Library/Images/Recurr.png") center no-repeat;
}
Here's a link to my page: http://mobile.sheridanc.on.ca/~vecanski/
The problem that I am having is that height is set to 100% and yet i can still scroll down and see the light blue, even though there is nothing on the page except floating bubbles. Does anyone knows as to why I am able to scroll down? Also I have a gradient effect, here is the code:
background: #4094d1; /* Old browsers */
background: #4a97ce; /* Old browsers */
background: -moz-linear-gradient(top, #4a97ce 0%, #2687cc 22%, #1080cc 48%, #0c0c02 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4a97ce), color-stop(22%,#2687cc), color-stop(48%,#1080cc), color-stop(99%,#0c0c02)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4a97ce 0%,#2687cc 22%,#1080cc 48%,#0c0c02 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4a97ce 0%,#2687cc 22%,#1080cc 48%,#0c0c02 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #4a97ce 0%,#2687cc 22%,#1080cc 48%,#0c0c02 99%); /* IE10+ */
background: linear-gradient(to bottom, #4a97ce 0%,#2687cc 22%,#1080cc 48%,#0c0c02 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a97ce', endColorstr='#0c0c02',GradientType=0 ); /* IE6-9 */
What I don't understand is why does the gradient not go all the way, even if it is scrollable, why does it restart at the end of the page?
So 2 questions really:
How do I remove the scroll-able part of the page?
If I were to leave the scroll-able part of the page in, how do I force the gradient to extend to the very end and not restart?
you can figure out the problems like this by using browser inspect element
by the way, to fix this:
Remove #bubbles padding:100px 0
OR
Add overflow:hidden to the #container
I have a problem with radial gradient and texture. I have something like this:
background-image: url('../img/texture.png');
/* fallback */
background: -moz-radial-gradient(rgba(253,253,253,0.1) 0%, rgba(237,237,242,0.7) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, color-stop(0%,rgba(253,253,253,0.1)), color-stop(100%,rgba(237,237,242,0.7))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(rgba(253,253,253,0.1) 0%,rgba(237,237,242,0.7) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(rgba(253,253,253,0.1) 0%,rgba(237,237,242,0.7) 100%); /* Opera 11.10+ */
background: -ms-radial-gradient(rgba(253,253,253,0.1) 0%,rgba(237,237,242,0.7) 100%); /* IE10+ */
background: radial-gradient(rgba(253,253,253,0.1) 0%,rgba(237,237,242,0.7) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1adb7c64', endColorstr='#b3dd532f',GradientType=0 ); /* IE6-9 */
but I get radial gradient without that background texture(../img/texture.png). Anyone know how to do this? Thanks in advance for your answers
You are overriding the background-image property by assigning new values to background immediately after.
to keep both backgrounds in each case, you should specify both backgrounds in every re-declaration of background, using comma separated notation
example:
background: -webkit-radial-gradient(rgba(253,253,253,0.1) 0%,rgba(237,237,242,0.7) 100%),
url('../img/texture.png');
The problem is hard do describe without a screenshot...
I've styled the column view headers of views in xpages using this css just to get an gradient in all browsers:
.xspPanelViewColumnHeader {
background: #58a8cd; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU4YThjZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzBjODNiMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzBmNmM5NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMjdkYWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #58a8cd 0%, #0c83b2 50%, #0f6c95 51%, #127daa 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#58a8cd), color-stop(50%,#0c83b2), color-stop(51%,#0f6c95), color-stop(100%,#127daa)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #58a8cd 0%,#0c83b2 50%,#0f6c95 51%,#127daa 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #58a8cd 0%,#0c83b2 50%,#0f6c95 51%,#127daa 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #58a8cd 0%,#0c83b2 50%,#0f6c95 51%,#127daa 100%); /* IE10+ */
background: linear-gradient(to bottom, #58a8cd 0%,#0c83b2 50%,#0f6c95 51%,#127daa 100%); /* W3C */
background-position: left top;
color: #FFFFFF;
padding: 4px 4px 4px 4px;
font-weight: bold;
}
Works fine so far. But if the column view header does not have a label there's a problem with the gradient in IE9 (not in Firefox).
In IE9 the gradient does not fill the full size of the header - i can see two blocks (one horizontal and on vertical) but both only a few pixels wide. But the rest of the column header stays white.
As soon as I enter a label (and even if it is only a ".") the header will be displayed as usual (full height and full width with the gradient).
This way works:
<xp:viewColumnHeader id="viewColumnHeader1" value="."></xp:viewColumnHeader>
This doesn't:
<xp:viewColumnHeader id="viewColumnHeader1"></xp:viewColumnHeader>
So the question is (if anybody could follow my description): How can I edit the css to prevent the column header to shrink with no defined label?
Is there a way to create a color gradient in CSS without using an image file?
I am trying to give a DIV a background with a color gradient so that it looks glossy.
Safari (Webkit) supports it:
http://webkit.org/blog/175/introducing-css-gradients/
Firefox 3.6+ supports it:
https://developer.mozilla.org/en/CSS/-moz-linear-gradient
W3 spec defines support for it:
http://dev.w3.org/csswg/css3-images/#gradients-
And you can use Modernizr to detect support and fall back on an image:
http://www.modernizr.com/docs/#cssgradients
Try this if you are using or can use PHP
http://snipplr.com/view/26070/multicolor-gradient-generator/
http://www.designdetector.com/2005/09/css-gradients-demo.php
See javascript solutions here
jQuery gradient plugin?
http://www.bennadel.com/blog/1014-Creating-Transparent-Gradients-With-jQuery.htm
Some gradient image generator
http://www.roundedcornr.com/
http://gradient-maker.com/
http://www.grsites.com/generate/group/4000/
http://tools.dynamicdrive.com/gradient/
http://www.allcrunchy.com/Web_Stuff/Gradient_Generator/
71 Gradient Resources for Web Design
http://vandelaydesign.com/blog/tools/gradient-resources/
Sure Is (using color: Royal Blue, Hex Code: #002366 as an example (example taken from: http://www.99colors.net/name/royal-blue):
<div class="gradient">[Your DIV text and what not]</div>
/* CSS Background Gradient */
.gradient
{
background-color: #628AD9;
/* For WebKit (Safari, Chrome, etc) */
background: #628AD9 -webkit-gradient(linear, left top, left bottom, from(#001640), to(#628AD9)) no-repeat;
/* Mozilla,Firefox/Gecko */
background: #628AD9 -moz-linear-gradient(top, #001640, #628AD9) no-repeat;
/* IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#001640, endColorstr=#628AD9) no-repeat;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#001640, endColorstr=#001640)" no-repeat;
}
Webkit browsers support pure-CSS gradients like this (see this example in Safari or Chrome) - but practically speaking for a cross-browser implementation you'll need to use images.
Go to http://www.colorzilla.com/gradient-editor/#ffffff+0,e5e5e5+100;White+3D
You will see it generates the following code for the displayed glossy gradient there. You can change the gradient and copy the new code.
background: rgb(255,255,255); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNWU1ZTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-8 */