{"id":7799,"date":"2010-11-02T08:12:21","date_gmt":"2010-11-02T15:12:21","guid":{"rendered":"http:\/\/css-tricks.com\/?p=7799"},"modified":"2010-11-02T08:12:21","modified_gmt":"2010-11-02T15:12:21","slug":"css-gradients-for-ie9","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/css-gradients-for-ie9\/","title":{"rendered":"CSS Gradients for IE9"},"content":{"rendered":"

This article by Robert Biggs goes into a solution for using SVG for gradients in Internet Explorer 9, because it doesn’t support CSS3 gradients. The core benefit being that the SVG image format is XML and actually rather similar in structure to how you create a -webkit-gradient<\/code>. Thus you get the benefit of programatic declaration of colors and ease of updating. <\/p>\n

Earlier in the article, Biggs also makes a good point about transitions and why doing them through CSS is better than JavaScript:<\/p>\n

The single-threaded nature of JavaScript makes it inefficient for complex animations. Offloading style animations to the browser\u2019s CSS rendering engine frees up JavaScript and allows the browser to use threads and hardware acceleration for better optimization.<\/p><\/blockquote>\n

I’d argue that (animations\/transitions == visual design == CSS territory) so it’s appropriate regardless of the benefit to freeing up JavaScript.<\/p>\n","protected":false},"excerpt":{"rendered":"

This article by Robert Biggs goes into a solution for using SVG for gradients in Internet Explorer 9, because it doesn’t support CSS3 gradients. The core benefit being that the SVG image format is XML and actually rather similar in structure to how you create a -webkit-gradient. Thus you get the benefit of programatic declaration […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[17],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":157914,"url":"https:\/\/css-tricks.com\/animated-svgs\/","url_meta":{"origin":7799,"position":0},"title":"Animated SVGs","date":"December 7, 2013","format":false,"excerpt":"Mike Fortress explains animation with with a specific example involving charts on Sprout. It's funny how SVG has all these great features like gradients and filters and animations that we have in CSS, but the syntax is so different. I think it would be cool if there was some kind\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":175074,"url":"https:\/\/css-tricks.com\/mega-list-svg-information\/","url_meta":{"origin":7799,"position":1},"title":"A Compendium of SVG Information","date":"July 22, 2014","format":false,"excerpt":"A huge pile of information about SVG. How to Use SVG These are overview articles covering lots of stuff relating to SVG. Why to use it and the basics of how to use it. Mostly: , background-image, , , and \/. Using SVG by me SVG on the Web \u2014\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":351302,"url":"https:\/\/css-tricks.com\/grainy-gradients\/","url_meta":{"origin":7799,"position":2},"title":"Grainy Gradients","date":"September 13, 2021","format":false,"excerpt":"Browse through Dribbble or Behance, and you\u2019ll find designers using a simple technique to add texture to an image: noise. Adding noise makes otherwise solid colors or smooth gradients, such as shadows, more realistic. But despite designers\u2019 affinity for texture, noise is rarely used in web design. In this article,\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/noisy-gradient.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":149995,"url":"https:\/\/css-tricks.com\/controlling-css-animations-transitions-javascript\/","url_meta":{"origin":7799,"position":3},"title":"Controlling CSS Animations and Transitions with JavaScript","date":"September 17, 2013","format":false,"excerpt":"The following is a guest post by Zach Saucier. Zach wrote to me telling me that, as a frequenter on coding forums like Stack Overflow, he sees the questions come up all the time about controlling CSS animations with JavaScript, and proved it with a bunch of links. I've had\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":160266,"url":"https:\/\/css-tricks.com\/myth-busting-css-animations-vs-javascript\/","url_meta":{"origin":7799,"position":4},"title":"Myth Busting: CSS Animations vs. JavaScript","date":"January 13, 2014","format":false,"excerpt":"The following is a guest post by Jack Doyle, author of the GreenSock Animation Platform (GSAP). Jack does a lot of work with animations in the browser and has discovered that the generic opinion that \"CSS is faster\" just isn't true. It's more than that, as well. I'll let him\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":351146,"url":"https:\/\/css-tricks.com\/fire-svg-animations-smil-when-the-svg-is-visible\/","url_meta":{"origin":7799,"position":5},"title":"Fire SVG animations (SMIL) when the SVG is visible","date":"September 7, 2021","format":false,"excerpt":"When requirements read \"when visible\" your brain should go straight to IntersectionObserver. That's exactly what Zach is doing here to kick off an animation when it scrolls into view. Except this animation is an SVG SMIL animation: an situation. SMIL animations have some kinda cool things they can do,\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/zach-leatherman-smil.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/7799"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=7799"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/7799\/revisions"}],"predecessor-version":[{"id":7801,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/7799\/revisions\/7801"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=7799"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=7799"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=7799"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}