MyBB Community Forums

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 !

http://css3please.com/ Or my favorite: http://prefixr.com/

(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!