Related
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.
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'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.
I have a really strange problem with Visual Studio 2010. When I add CSS properties for a gradient to my stylesheet, Visual Studio is going to delete it after some times of debugging.
Example of the code I add to my stylesheet:
.button
{
/* Firefox */
background-image: -moz-linear-gradient(top, #fff, #efefef);
/* Chrome, Safari */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #fff),color-stop(1, #efefef));
/* Modern Browsers*/
background-image: linear-gradient(top, #fff, #efefef);
/* IE */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#efefef');
}
Sometimes when I start debug, Visual Studio edits the CSS:
.button
{
/* Firefox */
background-image: linear-gradient(top, #fff, #efefef);
/* Chrome, Safari */
/* Modern Browsers*/
}
So Visual Studio seems to delete some attributes it doesn't know. That's really annoying. Any idea how I could stop that?
It's not a problem of CSS comments. It also happen without the comments.
Update
It seems that it happens by saving of files that included the css file. When I edit my Master Layout and save it, Visual Studio is gonna delete this properties I mentioned above in the linked css file.
And its NOT a CSS3 problem because it doesn't touch my border-radius classes and ids. So maybe it's the filter property. However I want stop Visual Studio changing my things in the css file without permissions.
Update 27. June 2014
Problem solved in Visual Studio 2013
https://connect.microsoft.com/VisualStudio/feedback/details/782677/visual-studio-is-deleting-css
Okay I found a temporary workaround for this:
The existence of the "filter:" style is what's causing all of the "background-image:" styles to disappear except the last one listed. It's not that it's removing what it doesn't know, it's just removing all but the last "background-image" style listed. Must be Microsoft (intended) way of making filter and an MS specific background-image style play nicely together, however they didn't code it up very well. Definitely a MS VS defect. To repro, just right click in the CSS class that has code similar to this:
background-color: #EBEBEB; /* Fallback background color for non supported browsers */
background-image: -webkit-gradient(linear, left top, right top, from(#FFFFFF), to(#DAD6E7));
background-image: -webkit-linear-gradient(left, #FFFFFF, #DAD6E7);
background-image: -moz-linear-gradient(left, #FFFFFF, #DAD6E7);
background-image: -ms-linear-gradient(left, #FFFFFF, #DAD6E7);
background-image: -o-linear-gradient(left, #FFFFFF, #DAD6E7);
background-image: linear-gradient(left, #FFFFFF, #DAD6E7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#DAD6E7', gradientType='1'); /* IE6 - IE9 */
and then select "Build Style...". Then click "OK" without changing anything and watch it remove all but the last background-image left. Try changing the order of the "background-image styles and leave webkit last and then see for yourself.
You'll notice that if you remove the "filter:" style the problem goes away, however we need that (for this example) so the solution seems to be moving the "filter:" style above all the "background-image:" lines. Once you do that, it leaves them alone and the problem goes away.
Changing the above CSS to this seems to aleviate the problem:
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#DAD6E7', gradientType='1'); /* IE6 - IE9 */
background-color: #EBEBEB; /* Fallback background color for non supported browsers */
background-image: -webkit-gradient(linear, left top, right top, from(#FFFFFF), to(#DAD6E7));
background-image: -webkit-linear-gradient(left, #FFFFFF, #DAD6E7);
background-image: -moz-linear-gradient(left, #FFFFFF, #DAD6E7);
background-image: -ms-linear-gradient(left, #FFFFFF, #DAD6E7);
background-image: -o-linear-gradient(left, #FFFFFF, #DAD6E7);
background-image: linear-gradient(left, #FFFFFF, #DAD6E7);
UPDATE:
The workaround above only works for when VS applies formatting when you're using the "Build Style..." --> "Modify Style" dialog because I just saw it again with the fix above in place so it must be from somthing else.
Gradients are CSS3 Properties.
Visual Studio do not support CSS3 and HTML5 and that might be the problem here.
But there is support for HTML5 & CSS3 in Visual Studio 2010 SP1
So, why don't you download Visual Studio 2010 SP1 and try?
In Visual Studio try: Tools > Options > Text Editor > CSS > Miscellaneous switch off Detect Errors. I did this and using a file with your sample above, ran the solution, closed the file, closed the solution and my code is still there :-)
I have experienced this same issue as well in VS2010, and can confirm that the problem does not affect CSS3 styles. The only work around I can suggest is to place a copy of the disappearing line above itself in a comment so at least it is easy to copy back again.
/* filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#efefef'); */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#efefef');
I do not have Visual Studio to test this, but reading the information from other comments and answers, it seems like you might try separating the filter out completely into a repeated selector definition. Like so:
.someClass {
background-color: #EBEBEB; /* Fallback background color for non supported browsers */
background-image: -webkit-gradient(linear, left top, right top, from(#FFFFFF), to(#DAD6E7));
background-image: -webkit-linear-gradient(left, #FFFFFF, #DAD6E7);
background-image: -moz-linear-gradient(left, #FFFFFF, #DAD6E7);
background-image: -ms-linear-gradient(left, #FFFFFF, #DAD6E7);
background-image: -o-linear-gradient(left, #FFFFFF, #DAD6E7);
background-image: linear-gradient(left, #FFFFFF, #DAD6E7);
}
.someClass { /* repeated to isolate filter */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#DAD6E7', gradientType='1'); /* IE6 - IE9 */
}
That is a real pain, but if it solves your problem until MS gets the bug worked out...
I've just had the exact same issue!
I had the DevX IDE tools installed, and uninstalling that seems to have resolved the issue for me. I did that a few days ago, and the issue hasn't recurred.
I realize this is an older thread, but I still have the same problem
I haven't yet found how to prevent it, but there is a much easier way to correct the CSS mess-up:
As soon as you notice VS2010 has messed up the CSS code, stop the debug, go to the CSS file tab and press the undo button. Your Css code is back to before VS2010 messed it up. Compile and it works.
I'm going to try out VS2012 soon, anyone know if it has been solved there?
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.