I'm trying to get an elliptical gradient in chrome. I've tried
background-image:
-webkit-gradient(ellipse, center top, 0, center top, 50, from(rgba(0,0,0,0)), to(rgba(0,0,0,.5))),
-webkit-gradient(linear, 50% 100%, 50% 0%, from(#0A6B9A), to(#29ABE2));
No luck. I've tried a few other things I've found on the net and in some books and it all just fails or comes out as circles.
Its easy to do through firefox (cool effect for those interested):
background-image:
-moz-radial-gradient(40% 0%, circle, rgba(0,0,0,0), rgba(0,0,0,.5)),
-moz-linear-gradient(50% 100%, #0A6B9A, #29ABE2);
Is this possible in chrome? It should be possible according to the planned specs for gradients I've seen. Maybe Chrome just hasn't supported it yet.
**Edit
Oh and I've checked, the style is not being overwritten or any such jazz
-moz is a CSS property reserved just for Firefox - that's why it doesn't work in Chrome (and in any other browser).
To be more specific, every CSS property started with - is not standard and will work just for specific browsers. It's used only for compatibility. If browser doesn't understand what the property means, it just skips it, that's why in CSS files there are multiple properties, and it's the same reason -moz and -webkit will not work everywhere (not only for you).
For CSS3-compatible browsers it should be tone in W3c convention, like
background: radial-gradient(ellipse at center, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%);
(the colours are different, just note background: radial-gradient(ellipse ...)
You may use http://www.colorzilla.com/gradient-editor/ or any onther CSS gradient generator for this, just set orientation to radial.
Related
So I snatched a bit of CSS for my page style, does it's thing and gives me a nice old rainbow gradient background.
background-color:#ff0000;
background-image: -moz-linear-gradient( left, #ff0000, #ffa500 13.0%,#ffff00 26.0%,#0000ff 39.0%,#008000 52.0%,#4b0082 65.0%,#ee82ee 78.0%);
background-image: -webkit-linear-gradient( left, #ff0000, #ffa500 13.0%,#ffff00 26.0%,#0000ff 39.0%,#008000 52.0%,#4b0082 65.0%,#ee82ee 78.0%);
background-image: -o-linear-gradient( left, #ff0000, #ffa500 13.0%,#ffff00 26.0%,#0000ff 39.0%,#008000 52.0%,#4b0082 65.0%,#ee82ee 78.0%);
background-image: -ms-linear-gradient( left, #ff0000, #ffa500 13.0%,#ffff00 26.0%,#0000ff 39.0%,#008000 52.0%,#4b0082 65.0%,#ee82ee 78.0%);
background-image: linear-gradient( left, #ff0000, #ffa500 13.0%,#ffff00 26.0%,#0000ff 39.0%,#008000 52.0%,#4b0082 65.0%,#ee82ee 78.0%)
What I'm struggling with though is how is this -moz and -webkit etc that prefix the linear gradient field. Must it be this way? Is there no thing where you can set it so it speaks to every browser? Ya feel me?
You could use a CSS preprocessor to cut down your workload such as:
http://compass-style.org/examples/compass/css3/gradient/
#include background-image(linear-gradient(red, blue));
The W3C recommends vendor prefixes until a feature has been implemented to a recommend spec.
http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords
Other than that, no there is no way to avoid vendor prefixes.
Some interesting reading: CSS vendor prefixes considered harmful
Originally, the point of vendor prefixes was to allow browser makers
to start supporting experimental CSS declarations.
Let’s say a W3C working group is discussing a grid declaration (which,
incidentally, wouldn’t be such a bad idea). Let’s furthermore say that
some people create a draft specification, but others disagree with
some of the details. As we know, this process may take ages.
Let’s furthermore say that Microsoft as an experiment decides to
implement the proposed grid. At this point in time, Microsoft cannot
be certain that the specification will not change. Therefore, instead
of adding grid to its CSS, it adds -ms-grid.
The vendor prefix kind of says “this is the Microsoft interpretation
of an ongoing proposal.” Thus, if the final definition of grid is
different, Microsoft can add a new CSS property grid without breaking
pages that depend on -ms-grid
The browser prefixes are required until they become part of the spec. For example, we used to have to do webkit-border-radius and now simply border-radius works. They will be phased out as support increases, but they're good to use to make your users happy.
I've been looking for a solution to background gradients that work in modern browsers and versions of IE down to 7. If someone has a best practice that works, I would appreciate the method as I keep running into solutions that break on a certain browser or version. It should atleast work in IE7-9, Firefox, Safari, Opera, and Chrome.
This is a quite complete gradient generator
colorzilla
Anyway for now there isn't a clear standard in css. We hope it will arrive asap !
If you would like to see some gradient even in Explorer 6-8 using a CSS3-like approach (for ex. linear-gradient(#EEFF99, #66EE33), and without using Explorer proprietary filter) you can try Css PIE. I used it extensively, it's an amazing piece of software based on HTML Component (.htc), expecially good for buttons, but in my experience has some problem when your page rely on many ajax effects, particularly if you redim the size of the frame/page, because not always the buttons/gradients are updated. (anyway CSS Pie is used even in important sites)
Css PIE
Use this tool to generate your gradient
Old browsers (< IE7) don't have support to css gradient properties. You can use css3 to make gradient backgrounds and then set a solid color to old browsers.
No ie7, but this is a good start
background: -moz-linear-gradient(-45deg, rgba(150,150,150,0.2) 1%, rgba(80,80,50,0.5) 52%, rgba(20,20,20,0.8) 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(1%,rgba(150,150,150,0.2)), color-stop(52%,rgba(80,80,50,0.5)), color-stop(100%,rgba(20,20,20,0.8)));
background: -webkit-linear-gradient(-45deg, rgba(150,150,150,0.2) 1%,rgba(80,80,50,0.5) 52%, rgba(20,20,20,0.8) 100%);
background: -o-linear-gradient(-45deg, rgba(150,150,150,0.2) 1%,rgba(80,80,50,0.5) 52%, rgba(20,20,20,0.8) 100%);
background: -ms-linear-gradient(-45deg, rgba(150,150,150,0.2) 1%,rgba(80,80,50,0.5) 52%, rgba(20,20,20,0.8) 100%);
background: linear-gradient(-45deg, rgba(150,150,150,0.2) 1%,rgba(80,80,50,0.5) 52%, rgba(20,20,20,0.8) 100%);
/* FF3.6+ */
/* Chrome,Safari4+ */
/* Chrome10+,Safari5.1+ */
/* Opera 11.10+ */
/* IE10+ */
/* W3C */
As other have said, CSS3 is compatible with FF, Chrome etc.
For IE9, you can use their official CSS Gradient Background Maker, which will generate an inline SVG image, supported also by most of modern browsers (although it give some issues on Safari).
For IE8, you can use
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#000000, GradientType=1);
Reference
For IE 5.5 - 7:
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#FFFFFF, endColorStr=#FFFFFF, GradientType=1);
Reference
startColorStr and endColorStr are pretty self-explanatory. GradientType is 1 for horizontal and 0 for vertical. There's no such thing as radial nor diagonal gradients before IE9.
I strongly suggest you not to use an htc solutions (like css3pie) as they give a lot of side effects.
It's not really easy to implement, but if you need a polyfill there's cssSandpaper.
My answer is not related to HTML or CSS. This is a another way that if you know basics of creating gradient images using MS Paint or GIMP then this technique will work for all type of browsers.
I am working on a project where the button needs to have a certain style such as the one posted on the blog below:
http://joeygallegos.tumblr.com/
The button is visible only in Chrome, Safari, Android and iPhone/iPod touch. And I would like to make it available in cross-browser format. I am good at hand writing CSS, but I am not quite able to understand cross-browser gradients. If somebody could please help me to better grasp it that would be much appreciated. Bellow is the snippet I used to make the gradient:
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #8fc2e8), color-stop(0.5, #54a1d9), color-stop(0.5, #126aa9), color-stop(1, #2ddef2));
If possible I would like it to be like Google's markup with the attributes such as -webkit, -moz, -ms, -o, linear:
background-image: -webkit-gradient(linear,left top,left bottom,from(
#4D90FE),to(#357AE8));
background-image: -webkit-linear-gradient(top,#4D90FE,#357AE8);
background-image: -moz-linear-gradient(top,#4D90FE,#357AE8);
background-image: -ms-linear-gradient(top,#4D90FE,#357AE8);
background-image: -o-linear-gradient(top,#4D90FE,#357AE8);
background-image: linear-gradient(top,#4D90FE,#357AE8);
If it is possible that you could list it in the same colors as the ones listed above it would be a tremendous help. Thank you!!
The first version of gradient support was made available in webkit browsers in the following form:
-webkit-gradient( linear, x y, x y, from( color ), [color-stops...,] to( color ) )
Which is where you use:
background: -webkit-gradient(linear,left top,left bottom,from(#4D90FE),to(#357AE8));
But then the web decided that was too complex and simplified it to this (which is what most browsers use now):
-prefix-linear-gradient( direction|angle, color-stops... )
Which is where you use:
background-image: -webkit-linear-gradient(top,#4D90FE,#357AE8);
background-image: -moz-linear-gradient(top,#4D90FE,#357AE8);
background-image: -ms-linear-gradient(top,#4D90FE,#357AE8);
background-image: -o-linear-gradient(top,#4D90FE,#357AE8);
background-image: linear-gradient(top,#4D90FE,#357AE8);
IE feels it needs to be different, so it uses filters and has not upgraded to this new better way of expressing gradients until IE10. So, what you have is fine. If you want IE7-IE9 support, use this too:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#4d90fe",endColorstr="#357ae8");
There are many tools out there too to help you make gradients and generate the cross-browser code for you (Google is yo friend). Colorzilla has a good one.
As well as defining the different background images, you should define a plain background-color for browsers that don't support any kind of gradient.
The only one you appear to be missing is the one for older IE, where you use filter to produce a gradient.
I've recently upgraded my desktop PC to Win 8 Release Preview. Before I used the Consumer Preview, and I really like both of them to be honest.
Anyways, in Consumer Preview I had no problems with the websites I was making. Everything worked as it should in IE10, IE9, Chrome, Firefox, Safari. It all looked pretty much the same, except for the small differences each browser have. So all in all, no problem.
But after I upgraded to Release Preview, and therefor a new version of IE10, some stuff on the same sites I was working on in Consumer Preview didn't behave as it should.
What I'm talking about is a hover effect on in some tables I have.
The CSS for the tables is just a plain table, and whenever I move my mouse over one of the rows, a hover effect is presented.
CSS for the hover is:
table.Green tr:not(:first-child):hover {
background:#dddddd; /* Old browsers */
background:-webkit-linear-gradient(top, #FFFFFF 0%, #dddddd 100%);
background:-moz-linear-gradient(top, #FFFFFF 0%, #dddddd 100%);
background:-o-linear-gradient(top, #FFFFFF 0%, #dddddd 100%);
background:-ms-linear-gradient(top, #FFFFFF 0%, #dddddd 100%);
background:linear-gradient(top, #FFFFFF 0%, #dddddd 100%); /* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF ', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */
}
Nothing fancy. The first row, which have the headers of the columns should not be affected by this, but every other row should.
And as I said, this worked perfectly in the recent IE10, and all other browsers. But not in the new IE10.
I've attached an image so you can see what I mean (Working in Chrome, not working in IE10 Release Preview):
As you can see, the first picture, there are only to cells that are affected by the mild gradient (Which both contains links. The Customer name and the little icon under Deal), and in the 2nd Picture, the entire row is affected by the gradient.
I don't know why. But only the cells where there is some form of actual link it will show the hover effect, and sometimes it even have problem responding to the mouseover effect. So some rows will get the hover effect, but other rows, in the same table, will not, even though there is the excact same content in every row. It's like it's very random which row it wants to activate :/
So, is this something I should ignore, and hope that will get fixed by Microsoft, or is it an essential flaw in my HTML/CSS that suddenly appears in IE10 Release Preview only ?
Hope someone could help me with this :)
Thanks in advance
Regards
The unprefixed linear-gradient syntax is not the same as it used to be in prefixed modes.
See:
https://developer.mozilla.org/en/CSS/linear-gradient
http://blogs.msdn.com/b/ie/archive/2012/06/06/moving-the-stable-web-forward-in-ie10-release-preview.aspx
A quote from the second link:
What It Means For Your Code CSS gradients
While broadly interoperable, the prefixed gradient syntax supported by
all modern browsers reflects a now obsolete draft version of the
specification. This earlier syntax is incompatible with the current
Candidate Recommendation. For example, if you have declared the
following gradient:
background: -ms-linear-gradient(left, yellow, red);
Then producing the unprefixed equivalent is not simply a matter of
removing the ‑ms‑ prefix. Because IE10's unprefixed linear gradient
function conforms to the latest specification, it should become:
background: linear-gradient(to right, yellow, red);
A future blog post will cover IE10’s support for CSS gradients in more
detail.
In your case, you should change in background:linear-gradient(top ... instead of top, use to bottom.
Here's my rule:
#element {
background: -moz-linear-gradient(center top, #FFF 8px, #F2F2F2 24px, #F2F2F2 100%) repeat scroll 0 0 #F2F2F2;
}
I want to take that rule and apply it to all of the browsers that support a linear gradient. What would this rule's syntax look like for Chrome, Safari, and ... Internet Explorer?
I'm considering making a super simple web app that will take a CSS file with Mozilla rules and kick out the other browser's implementations of the rules as well.
Here are the gradients as requested...
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -moz-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);
This site do the trick : http://www.colorzilla.com/gradient-editor/
Choose "Import from css" from the "CSS" zone and paste your code !!!
You can try with something like "background: -moz-linear-gradient(center top, rgb(216,54,33), rgb(112,5,7));" for exemple.
Be carefull : code must be formated a certain way... if there is space after comma (", ") for exemple this do not work...
It's not too hard... But this website (css-tricks.com) can explain it much better than I can.
What you're looking for is already available here: CSS3 Gradient Generator - that works for Mozilla and Webkit-based (Safari/Chrome) browsers.
As for IE, MSDN should help you.
I usually use something along the lines of
// Firefox
background: -moz-linear-gradient
// Chrome & Safari
background: -webkit-gradient
background: -webkit-linear-gradient
// Opera
background: -o-linear-gradient
// IE
background: -ms-linear-gradient
It's probably as crossbrowser solution as you're going to get - but then again CSS is not my forte.