css:
#eval ctHeaderC1 com.CssServlet.ctHeaderColor1;
#eval ctHeaderC2 com.CssServlet.ctHeaderColor2;
.cellTableHeader {
background: ctHeaderC1;
background: -moz-linear-gradient(top, ctHeaderC1 0%, ctHeaderC2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, ctHeaderC1 ), color-stop(100%, ctHeaderC2 ));
background: -webkit-linear-gradient(top, ctHeaderC1 0%, ctHeaderC2 100%);
background: -o-linear-gradient(top, ctHeaderC1 0%, ctHeaderC2 100%);
background: -ms-linear-gradient(top, ctHeaderC1 0%, ctHeaderC2 100%);
background: linear-gradient(to bottom, ctHeaderC1 0%, ctHeaderC2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='ctHeaderC1', endColorstr='ctHeaderC2',GradientType=0 );
}
i wont to replace all variables
but only "background: ctHeaderC1;" was replaced
:(
This has been fixed in GWT 2.5: http://code.google.com/p/google-web-toolkit/issues/detail?id=5771
Upgrade! ;-)
Related
I'd like to have a linear gradient for my entire website using HTML/CSS - starting from one color (say red) at the beginning to another (say blue) at the end. When users request the page, they first see a blue background turning gradually to a red background as they scroll down. The website should be separated by sections, each of them filling the entire screen.
The problem is that when I separate the website with sections using 100vh, the linear gradient repeats itself for each section - instead of linearly changing over the sections.
Here is the code I have used so far:
* {
margin: 0;
padding: 0;
}
body {
background-image: -ms-linear-gradient(bottom, #ffffff 0%, #202020 100%);
background-image: -moz-linear-gradient(bottom, #ffffff 0%, #202020 100%);
background-image: -o-linear-gradient(bottom, #ffffff 0%, #202020 100%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ffffff), color-stop(1, #202020));
background-image: -webkit-linear-gradient(bottom, #ffffff 0%, #202020 100%);
background-image: linear-gradient(to top, #ffffff 0%, #202020 100%);
background-repeat: no-repeat;
background-attachment: fixed;
}
section {
height: 100vh;
}
<section>
<div class="">first section</div>
</section>
<section>
<div class="">second section</div>
</section>
Any ideas on how to extend the linear gradient background over the sections?
Any help is appreciated!
This probably isn't exactly what you are after, but you might be able to achieve what you want by adjusting the gradient percentages. I have added different gradients to each section and set the background-attachment to static.
If you are after a different effect you may have to use Javascipt/jQuery.
* {
margin: 0;
padding: 0;
}
body > section:nth-child(1) {
background-image: -ms-linear-gradient(bottom, #ffffff 0%, #202020 100%);
background-image: -moz-linear-gradient(bottom, #ffffff 0%, #202020 100%);
background-image: -o-linear-gradient(bottom, #ffffff 0%, #202020 100%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ffffff), color-stop(1, #202020));
background-image: -webkit-linear-gradient(bottom, #ffffff 0%, #202020 100%);
background-image: linear-gradient(to top, #ffffff 0%, #202020 100%);
}
body > section:nth-child(2) {
background-image: -ms-linear-gradient(bottom, #39a7cc 0%, #ffffff 100%);
background-image: -moz-linear-gradient(bottom, #39a7cc 0%, #ffffff 100%);
background-image: -o-linear-gradient(bottom, #39a7cc 0%, #ffffff 100%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #202020), color-stop(1, #ffffff));
background-image: -webkit-linear-gradient(bottom, #39a7cc 0%, #ffffff 100%);
background-image: linear-gradient(to top, #39a7cc 30%, #ffffff 100%);
}
section {
height: 100vh;
background-repeat: no-repeat;
background-attachment: static;
}
<section>
<div class="">first section</div>
</section>
<section>
<div class="">second section</div>
</section>
Here is my css (for this gradient the code was copied from colorzilla). Nothing too special. If i remove all the gradient parts and stay with a solid color, the colored stripe renders in IE8 just fine. But the gradient is not displaying (in chrome everything looks correct). How to fix this? Thnks.
.hdr:after {
content: " ";
display: block;
position: absolute;
min-width: 960px;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background: #e7eff3;
background: -moz-linear-gradient(left, #e7eff3 0%, #1d667a 50%, #e7eff3 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #e7eff3), color-stop(50%, #1d667a), color-stop(100%, #e7eff3));
background: -webkit-linear-gradient(left, #e7eff3 0%, #1d667a 50%, #e7eff3 100%);
background: -o-linear-gradient(left, #e7eff3 0%, #1d667a 50%, #e7eff3 100%);
background: -ms-linear-gradient(left, #e7eff3 0%, #1d667a 50%, #e7eff3 100%);
background: linear-gradient(to right, #e7eff3 0%, #1d667a 50%, #e7eff3 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#e7eff3', endColorstr='#e7eff3', GradientType=1);
-ms-filter: 'progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7eff3', endColorstr='#e7eff3',GradientType=1 )';
}
I am writing a website as part of my college course, but I have came across a problem. I can't seem to fit whole screen.
Please visit here to see what I mean: http://jsfiddle.net/xiiJaMiiE/gM3yk/
html, body
{
background-image: -webkit-gradient(linear, right bottom, right top, color-stop(0, #5977FF),
color-stop(1, #59C5FF));
background-image: -o-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
background-image: -moz-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
background-image: -webkit-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
background-image: -ms-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
background-image: linear-gradient(to top, #5977FF 0%, #59C5FF 100%);
background-repeat:no-repeat;
background-size:cover;
background-
}
Thanks in advance
You need to set the height of html/body to 100%;
height: 100%;
http://jsfiddle.net/gM3yk/1/
Give parent height and width, and a suggested way is, to use background-size:100% 100%; rather than background-size:cover;
html, body {
background-image: -webkit-gradient(linear, right bottom, right top, color-stop(0, #5977FF), color-stop(1, #59C5FF));
height: 100%; /* added */
width: 100%; /* added */
background-image: -o-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
background-image: -moz-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
background-image: -webkit-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
background-image: -ms-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
background-image: linear-gradient(to top, #5977FF 0%, #59C5FF 100%);
background-repeat:no-repeat;
background-size:100% 100%; /* updated*/
}
Simply add
width: 100%;
height: 100%;
I am new for html and css. Here Is My css code:
background: -moz-linear-gradient(center top, #F9F9F9, #F0F0F0) repeat scroll 0 0 rgba(0, 0, 0, 0);
this background color effect not working in IE and Chrome How to change this code to work.
Vendor prefixes are no longer needed for gradients.
background: linear-gradient(to bottom, #F9F9F9, #F0F0F0);
Done.
The -moz- prefix is only used by Firefox - so you need to copy the exact line to use in the other browser-familys:
background: linear-gradient(center top, #F9F9F9, #F0F0F0) repeat scroll 0 0 rgba(0, 0, 0, 0);
background: -webkit-linear-gradient(center top, #F9F9F9, #F0F0F0) repeat scroll 0 0 rgba(0, 0, 0, 0);
background: -o-linear-gradient(center top, #F9F9F9, #F0F0F0) repeat scroll 0 0 rgba(0, 0, 0, 0);
You are doing a gradient only for Mozilla, you need to do it for IE and Chrome separately
Please check this site out as it will do the code for you but, provide comments so you get an idea how each browser responds to each line of code
http://www.colorzilla.com/gradient-editor/
Example code
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 */
Check the documentation https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient. It depends on javascript engine used by browsers.
As it states the doc for crossbrowser:
.grad {
background-color: #F07575; /* fallback color if gradients are not supported */
background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Chrome and Safari */
background-image: -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Fx (3.6 to 15) */
background-image: -ms-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For pre-releases of IE 10*/
background-image: -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Opera (11.1 to 12.0) */
background-image: linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */
}
-moz-linear-gradient is for Mozilla Browser(Firefox). You should use webkit-linear-gradient for chrome.
-moz is a prefix for Mozilla Firefox, please check this site:
http://colorzilla.com/gradient-editor/
and look through the code and comments:
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 */
I read that the syntax had updated to remove the prefix, but I tried all of the following and none of them are working:
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#82dc7b), to(#61a45c));
-webkit-linear-gradient(top, #82dc7b, #61a45c);
-moz-linear-gradient(top, #82dc7b, #61a45c);
-ms-linear-gradient(top, #82dc7b, #61a45c);
-o-linear-gradient(top, #82dc7b, #61a45c);
linear-gradient(to bottom, #82dc7b, #61a45c);
How about something like this?
background: #82dc7b; /* Old browsers */
background: -moz-linear-gradient(top, #82dc7b 0%, #61a45c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82dc7b), color-stop(100%,#61a45c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #82dc7b 0%,#61a45c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #82dc7b 0%,#61a45c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #82dc7b 0%,#61a45c 100%); /* IE10+ */
background: linear-gradient(to bottom, #82dc7b 0%,#61a45c 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82dc7b', endColorstr='#61a45c',GradientType=0 ); /* IE6-9 */
Check out the following resource for help: http://www.colorzilla.com/gradient-editor/
Try this:
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#82dc7b), to(#61a45c));
background: -webkit-linear-gradient(top, #82dc7b, #61a45c);
background: -moz-linear-gradient(top, #82dc7b, #61a45c);
background: -ms-linear-gradient(top, #82dc7b, #61a45c);
background: -o-linear-gradient(top, #82dc7b, #61a45c);
background: linear-gradient(to bottom, #82dc7b, #61a45c);
Also, check out http://colorzilla.com/gradient-editor/