Dowemo


Question:

I have the following css code:

-webkit-gradient(linear, left bottom, left top, from(#5AE), to(#036));


Which displays the background very nicely in Chrome. Internet explorer just displays a white background. I tried applying CSS 3 pie, which didnt change anything.

Following is my css:

body {


  behavior: url(css3pie/PIE.htc);


    color: #000000;


    font-family: Arial, Helvetica, sans-serif;


    margin: 0px;


    padding: 0px;


    /*background:url("../image/bg.png") repeat scroll 0 0 transparent;*/


    background: -webkit-gradient(linear, left bottom, left top, from(#5AE), to(#036)); 


}


Thanks


Best Answer:


-webkit-gradient() is for webkit browsers only (Safari, Chrome, etc). This means it will not work in Firefox, Internet Explorer, Opera, or any other browser that does not support -webkit-gradient().

If you want to get gradient in all modern browsers, try the following code:

Generated at http://projects.korrelboom.com/gradient-generator/:

/* SVG fallback(Opera 11.10-, IE9) */


background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2JhKDAsNTEsMTAyLDEpOyIgLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0eWxlPSJzdG9wLWNvbG9yOnJnYmEoODUsMTcwLDIzOCwxKTsiIC8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgZmlsbD0idXJsKCNncmFkaWVudCkiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiIC8+PC9zdmc+);



/* Opera 11.10+ */


background: -o-linear-gradient(top, rgba(0,51,102,1), rgba(85,170,238,1));



/* Firefox 3.6+ */


background: -moz-linear-gradient(top, rgba(0,51,102,1), rgba(85,170,238,1));



/* Chrome 7+ & Safari 5.03+ */


background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,51,102,1)), color-stop(1, rgba(85,170,238,1)));



/* Newer Browsers */


background: linear-gradient(top, rgba(0,51,102,1), rgba(85,170,238,1));



/* IE5.5 - IE7 */


filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FF003366,EndColorStr=#FF55AAEE);



/* IE8 */


-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FF003366,EndColorStr=#FF55AAEE)"


Note: You don't need any external JavaScript library to get gradients in IE. Simply use the CSS from above ;) However, for your own sanity, I would suggest using a preprocessor such as LESS or SASS so you can have all of the browser-specific versions automatically generated.




Copyright © 2011 Dowemo All rights reserved.    Creative Commons   AboutUs