MyBB Community Forums

Full Version: use cross browser gradient support
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hi All,
how can implement gradient support for most browsers ?

Chrome displays
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#203446), to(#BBBBBB))
correctly but firefox and ie do not

firefox displays
-moz-linear-gradient(top,  #203446,  #BBBBBB)
correctly but Chrome & ie do not

I have not set the variable 'top' to anything so I guess it will be take a default 'null' or '0'
so the question is :-
is there a way of testing the user agent (browser) and using the correct css code ? currently I have been developing using values in global.css (adjusting the values to the browser I am testing with) but I guess to adjust these values 'on the fly' will require code in templates. With my legacy programming knowledge the ideal thing to use would be a case statement but I have not found a php/html equivalent nor a way to test the users browser ... can anyone help ?

N.B I don't use windows so I have no real way of testing how IE displays the code but users have given feed back that gradient is not displayed correctly
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image:    -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
  background-image:     -ms-linear-gradient(top, #444444, #999999); /* IE10 */
  background-image:      -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */
  background-image:         linear-gradient(top, #444444, #999999);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6–IE9 */

http://lmgtfy.com/?q=cross+browser+css3+gradients
(2011-09-14, 06:27 PM)euantor Wrote: [ -> ]
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image:    -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
  background-image:     -ms-linear-gradient(top, #444444, #999999); /* IE10 */
  background-image:      -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */
  background-image:         linear-gradient(top, #444444, #999999);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6–IE9 */

http://lmgtfy.com/?q=cross+browser+css3+gradients
yes that is the code to use but is that just used in a css sheet or within the templates when the class is defined ?
Use it in the CSS style sheet. For example:

.someClass {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image:    -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
  background-image:     -ms-linear-gradient(top, #444444, #999999); /* IE10 */
  background-image:      -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */
  background-image:         linear-gradient(top, #444444, #999999);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6–IE9 */ 
}
I use this tool, if it helps.
http://www.colorzilla.com/gradient-editor/
(2011-09-15, 07:01 AM)Sama34 Wrote: [ -> ]I use this tool, if it helps.
http://www.colorzilla.com/gradient-editor/

Thats great thanks, just what the doctor ordered !Smile
(2011-09-15, 07:01 AM)Sama34 Wrote: [ -> ]I use this tool, if it helps.
http://www.colorzilla.com/gradient-editor/
This is fantastic. Thanks for the link!