Convert linear gradient from Mozilla to Chrome - css

I am having some problems converting a linear gradient for viewing in Chrome. It would be a bonus to see this gradient for full cross-browser too if you're willing, I'm developing a theme and it would help tremendously.
Here's the Mozilla version here:
background:
-moz-linear-gradient(center bottom , #401746 0%, rgb(255, 255, 255) 250%) repeat scroll 0% 0% #6e2778;

Go to http://www.colorzilla.com/gradient-editor/, import gradient, this is what you get. I do wonder how that %250 stop location would be handled cross browser, though. It might not strictly be valid across browsers.
background: #401746; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQwMTc0NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI1MCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #401746 0%, #ffffff 250%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#401746), color-stop(250%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #401746 0%,#ffffff 250%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #401746 0%,#ffffff 250%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #401746 0%,#ffffff 250%); /* IE10+ */
background: linear-gradient(to bottom, #401746 0%,#ffffff 250%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#401746', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
Edit: Nevermind about my color stop worries (see http://dev.w3.org/csswg/css3-images/, section 4.1.1. linear-gradient() syntax, second to last paragraph):
The gradient's color stops are typically placed between the starting point and ending point on the gradient line, but this isn't required - the gradient line extends infinitely in both directions. The starting point and ending point are merely arbitrary location markers - the starting point defines where 0%, 0px, etc are located when specifying color-stops, and the ending point defines where 100% is located. Color-stops are allowed to have positions before 0% or after 100%.
Emphasis, my own.

Related

Height set to 100% yet page not rendering properly

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

CSS3 radial gradient displaying different in different browsers

I'm trying to use a radial gradient background for my website, it displays alright in Firefox but it displays differently in Chrome and IE. Anyway below is how it looks in Firefox (what I want it too look like) and how it looks for IE and Chrome. I used the Ultimate CSS gradient generator to try and maintain cross-browser compatibility. This is the code I'm using for the gradient.
background: #0e0e0e; /* No gradient support */
background: -moz-radial-gradient(center, ellipse cover, rgba(234,211,0,0.6) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(234,211,0,0.6)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(234,211,0,0.6) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(234,211,0,0.6) 0%,rgba(255,255,255,0) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(234,211,0,0.6) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(234,211,0,0.6) 0%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ead300', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
Below is the result in different browsers:
Firefox
Chrome and IE
Does anyone know of any solutions to make it look similar in Chrome and IE?
Just a thought: can you just change the -moz first color value's color stop position to make it stronger yellow at the center?
background: -moz-radial-gradient(center, ellipse cover, rgba(234,211,0,0.6) 25%, rgba(255,255,255,0) 100%); /* FF3.6+ */
This is probably due to the way each browser renders the gradient you're using.
I think giving different gradient rules for each vendor prefix would do it.

How do I "stop" a gradient from flowing further down the page?

I think the easiest way to explain is simply linking to an example of what I want:
http://macrumors.com
At the top there's a small blue gradient that doesn't stretch very far.
I want to replicate this, but the only way I know how to do gradients in CSS3 is from top to bottom of the page, not stopping midway through. I looked around and couldn't really find anything, though I did see color-stop property, but I'm not sure if that's what I'm looking for.
Could anyone give me a hand?
#test {
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #e2e2e2 10px); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100px,#e2e2e2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#e2e2e2 100px); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#e2e2e2 100px); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#e2e2e2 100px); /* IE10+ */
background: linear-gradient(top, #1e5799 0%,#e2e2e2 100px); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#e2e2e2',GradientType=0 ); /* IE6-9 */
​}​
I have no idea what blue and hight is used on that background image, but you can easily insert in into code pasted above. Demo: http://jsfiddle.net/xyn4f/
You should also check online gradient generators. I used that one to generate the code.

cross-browser linear gradient rule

I used css3please to generate a top-to-bottom linear gradient rule that would work across all browsers that support this style and it gave me:
.box_gradient {
background-color: #75A319;
background-image: -webkit-gradient(linear, left top, left bottom, from(#75A319), to(#9FCC1D)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #75A319, #9FCC1D); /* Chrome 10+, Saf5.1+, iOS 5+ */
background-image: -moz-linear-gradient(top, #75A319, #9FCC1D); /* FF3.6 */
background-image: -ms-linear-gradient(top, #75A319, #9FCC1D); /* IE10 */
background-image: -o-linear-gradient(top, #75A319, #9FCC1D); /* Opera 11.10+ */
background-image: linear-gradient(to bottom, #75A319, #9FCC1D);
}
I'm a little suspicious of the last rule in this class:
background-image: linear-gradient(to bottom, #75A319, #9FCC1D);
Intuitively, one would expect:
background-image: linear-gradient(top bottom, #75A319, #9FCC1D);
Can someone confirm or allay my suspicions?
MDN explains the linear-gradient property here: https://developer.mozilla.org/en/CSS/linear-gradient
What you got from css3please is correct. to bottom specifies the angle. In this case, the angle is 180deg.

CSS create color gradient

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 */

Resources