[wp-trac] [WordPress Trac] #16461: CSS3 gradient replacements for images and rework existing

[WordPress Trac]

#16461: CSS3 gradient replacements for images and rework existing
-------------------------------------+-----------------------
 Reporter:  cyberskull               |       Owner:  ocean90
     Type:  task (blessed)           |      Status:  accepted
 Priority:  normal                   |   Milestone:  3.5
Component:  Performance              |     Version:  3.1
 Severity:  normal                   |  Resolution:
 Keywords:  has-patch needs-refresh  |
-------------------------------------+-----------------------

Comment (by ocean90):

 After a chat with helenyhou and sabreuse our prefred syntax is:


 {{{
 .grad-to-top {
         background: #fff;
         background-image: -webkit-gradient(linear, left bottom, left top,
 from(#fff), to(#000);
         background-image: -webkit-linear-gradient(top, #fff, #000);
         background-image:    -moz-linear-gradient(top, #fff, #000);
         background-image:      -o-linear-gradient(top, #fff, #000);
         background-image: linear-gradient(to bottom, #fff, #000);
 }

 .grad-to-bottom {
         background: #fff;
         background-image: -webkit-gradient(linear, left top, left bottom,
 from(#fff), to(#000));
         background-image: -webkit-linear-gradient(bottom, #fff, #000);
         background-image:    -moz-linear-gradient(bottom, #fff, #000);
         background-image:      -o-linear-gradient(bottom, #fff, #000);
         background-image: linear-gradient(to top, #fff, #000);
 }


 .grad-to-bottom-with-color-stops {
         background: #fff;
         background-image: -webkit-gradient(linear, left top, left bottom,
 color-stop(0, #fff), color-stop(1, #000));
         background-image: -webkit-linear-gradient(bottom, #fff 0%, #000
 100%);
         background-image:    -moz-linear-gradient(bottom, #fff 0%, #000
 100%);
         background-image:      -o-linear-gradient(bottom, #fff 0%, #000
 100%);
         background-image: linear-gradient(to top, #fff 0%, #000 100%);
 }
 }}}

 References:
 *
 [http://developer.apple.com/library/safari/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html#//apple_ref/doc/uid/TP40008032-CH10-SW34
 developer.apple.com/library/safari/#documentation/…]
 * https://developer.mozilla.org/en/CSS/-moz-linear-gradient
 * http://blogs.msdn.com/b/ie/archive/2012/06/25/unprefixed-css3-gradients-
 in-ie10.aspx
 * https://developer.mozilla.org/en/CSS/-moz-linear-
 gradient#Browser_compatibility
 * http://make.wordpress.org/core/handbook/coding-standards/css/#property-
 ordering

-- 
Ticket URL: <http://core.trac.wordpress.org/ticket/16461#comment:43>
WordPress Trac <http://core.trac.wordpress.org/>
WordPress blogging software