{"id":39,"date":"2010-12-13T20:15:57","date_gmt":"2010-12-14T01:15:57","guid":{"rendered":"http:\/\/localhost\/aarontgrogg\/practicalcss3\/"},"modified":"2010-12-13T20:15:57","modified_gmt":"2010-12-14T01:15:57","slug":"box-shadow","status":"publish","type":"page","link":"https:\/\/aarontgrogg.com\/practicalcss3\/box-shadow\/","title":{"rendered":"box-shadow"},"content":{"rendered":"<p>Right alongside <code>background-gradient<\/code>, <code>box-shadow<\/code> (CSS-speak for drop-shadows) gives a page depth.  And, like <code>background-gradient<\/code>s, images were usually how this was done.  Either very, very large images, or unnecessary <code>div<\/code>s and annoying sprites&#8230;  &#8220;Are they necessary?&#8221;  Probably.<\/p>\n<p>So, if you <em>do<\/em> need drop-shadows, 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) and IE6\/7 use the 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>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>Eliminates need for IE <code>filter<\/code>s.<\/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>I would say pure CSS (meaning IE filters) is always the way to go, but both IE Filters and CSS3 PIE will break validation, so, your call.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Right alongside background-gradient, box-shadow (CSS-speak for drop-shadows) gives a page depth. And, like background-gradients, images were usually how this was done. Either very, very large images, or unnecessary divs and annoying sprites&#8230; &#8220;Are they necessary?&#8221; Probably. So, if you do &hellip; <a href=\"https:\/\/aarontgrogg.com\/practicalcss3\/box-shadow\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":3,"comment_status":"open","ping_status":"closed","template":"","meta":{"webmentions_disabled_pings":false,"webmentions_disabled":false,"footnotes":""},"class_list":["post-39","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/aarontgrogg.com\/practicalcss3\/wp-json\/wp\/v2\/pages\/39","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=39"}],"version-history":[{"count":0,"href":"https:\/\/aarontgrogg.com\/practicalcss3\/wp-json\/wp\/v2\/pages\/39\/revisions"}],"wp:attachment":[{"href":"https:\/\/aarontgrogg.com\/practicalcss3\/wp-json\/wp\/v2\/media?parent=39"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}