{"id":29,"date":"2010-12-13T20:04:57","date_gmt":"2010-12-14T01:04:57","guid":{"rendered":"http:\/\/localhost\/aarontgrogg\/practicalcss3\/"},"modified":"2010-12-13T20:04:57","modified_gmt":"2010-12-14T01:04:57","slug":"background-gradient","status":"publish","type":"page","link":"https:\/\/aarontgrogg.com\/practicalcss3\/background-gradient\/","title":{"rendered":"background-gradient"},"content":{"rendered":"<p><code>background-gradient<\/code>, probably more than anything, brings the feeling of depth to a page.  And to date, images were how this was done, across the board.  Often very, very large images, because they had to repeat, repeatedly&#8230;  I will continue my thread of &#8220;is it necessary?&#8221;, but probably really only for either very subtle, or very small, gradients.  Otherwise, you&#8217;re really probably stuck with these.<\/p>\n<p>So, if you <em>do<\/em> need background gradients, here are ways to do it.<\/p>\n<h2>The Options<\/h2>\n<ul>\n<li>\n<h3><a href=\"internet-explorer-filters\">Internet Explorer Filters<\/a><\/h3>\n<h4>Pros:<\/h4>\n<ul>\n<li>Pure, valid CSS, no JS, no HTC, no tricks, no hacks!<\/li>\n<li>IE8 offers vendor prefix (-ms).<\/li>\n<li>IE6\/7 use non-proprietary <code>filter<\/code>, so can easily put that into IE-only stylesheet.<\/li>\n<li>For better or worse, IE6, 7, and 8 are pretty stable as they are, and so it is pretty easy to know which does, and doesn&#8217;t, do what.<\/li>\n<li>Easy to target specific browser versions if using HTML5 Boilerplate <code>&lt;head&gt;<\/code> conditional comments.<\/li>\n<\/ul>\n<h4>Cons:<\/h4>\n<ul>\n<li>Gradient filter goes from &#8220;A&#8221; to &#8220;B&#8221;, no stops allowed.<\/li>\n<li>Fairly limited set of <code>filter<\/code>s, and most look pretty crappy.<\/li>\n<li><code>filter<\/code> is invalid, so stylesheets will not validate, if you care about that.<\/li>\n<li>At least one more line of CSS for each feature&#8230;<\/li>\n<\/ul>\n<\/li>\n<li>\n<h3><a href=\"css3-pie\">CSS3 PIE<\/a><\/h3>\n<h4>Pros:<\/h4>\n<ul>\n<li>Able to use color-stops in gradients!<\/li>\n<li>Eliminates need for IE <code>filter<\/code>s.<\/li>\n<li>Translates vendor-prefix gradients, including stops.<\/li>\n<li>Comes as a single package, which also adds border-radius and drop-shadows to IE (only).<\/li>\n<li>Is IE-only, so non-IE browsers get no additional weight, and if you add via an IE-only stylesheet, the rest of your stylesheets will validate (if that matters to you).<\/li>\n<\/ul>\n<h4>Cons:<\/h4>\n<ul>\n<li>Comes as a single package, so if you <em>don&#8217;t<\/em> need those other features on a page, at 27.6kb, it&#8217;s a little heavy&#8230;<\/li>\n<li>Because it requires a non-standard <code>behavior<\/code> for implementation, the stylesheet used to add this will not validate (if that matters to you).<\/li>\n<li>Implementation requires JS; without JS, nothing happens.<\/li>\n<li>Not all servers permit HTC files.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2>The Bottom-Line<\/h2>\n<p>As long as you only need a 2-color gradient, I would say pure CSS (meaning IE filters) is always the way to go; if you need color-stops within your gradient, it&#8217;s going to have to be CSS3 PIE.  Both will break validation, so the only real advantage CSS3 PIE has in this case is being able to <em>not<\/em> use IE filters, which is really not that big of a deal.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>background-gradient, probably more than anything, brings the feeling of depth to a page. And to date, images were how this was done, across the board. Often very, very large images, because they had to repeat, repeatedly&#8230; I will continue my &hellip; <a href=\"https:\/\/aarontgrogg.com\/practicalcss3\/background-gradient\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":1,"comment_status":"open","ping_status":"closed","template":"","meta":{"webmentions_disabled_pings":false,"webmentions_disabled":false,"footnotes":""},"class_list":["post-29","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/aarontgrogg.com\/practicalcss3\/wp-json\/wp\/v2\/pages\/29","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aarontgrogg.com\/practicalcss3\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aarontgrogg.com\/practicalcss3\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aarontgrogg.com\/practicalcss3\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aarontgrogg.com\/practicalcss3\/wp-json\/wp\/v2\/comments?post=29"}],"version-history":[{"count":0,"href":"https:\/\/aarontgrogg.com\/practicalcss3\/wp-json\/wp\/v2\/pages\/29\/revisions"}],"wp:attachment":[{"href":"https:\/\/aarontgrogg.com\/practicalcss3\/wp-json\/wp\/v2\/media?parent=29"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}