{"id":281,"date":"2014-06-25T00:16:49","date_gmt":"2014-06-25T05:16:49","guid":{"rendered":"http:\/\/promincproductions.com\/blog\/?p=281"},"modified":"2014-08-14T17:47:58","modified_gmt":"2014-08-14T11:47:58","slug":"css-shadows","status":"publish","type":"post","link":"https:\/\/promincproductions.com\/blog\/css-shadows\/","title":{"rendered":"CSS Shadows"},"content":{"rendered":"
\"Adding<\/a>
Adding CSS Shadows can add some great style to your website!<\/figcaption><\/figure>\n

 <\/p>\n

 <\/p>\n

Coming from a graphic design and video production background, I’m used to using drop shadows and personally love them (despite the criticism they can get from some… \u00a0So the day I learned that you can do these in CSS, I about feel over! \u00a0How cool! \u00a0And when you are asked to do a design change, bam it’s done in the code, not re-editing countless images, hoping that your CDN and browsers don’t cache the image for too long, or maybe you should use a new name? \u00a0Too much headache.<\/p>\n

\"\"
Courtesy of http:\/\/designshack.net\/<\/figcaption><\/figure>\n

 <\/p>\n

Anyway, I wanted to post just a few cool resources for CSS shadows. \u00a0I’m not the expert and am not going to claim that I am, so just posting links to those who are true authorities on the subject.<\/p>\n

Keep in mind that CSS shadows are part of the CSS3 spec, so not all browsers will work with these, but thankfully all modern browsers are now compliant.<\/p>\n

One thing of note though, you’ll see some CSS properties have the -webkit- or -moz- prefixes. \u00a0These are actually legacy properties that support older Webkit (Chrome, Safari) or Mozilla (Firefox) browsers. \u00a0To ensure optimal browser compliance, I’d suggest using them still, but just saying technically they are going away – for some CSS properties at least. \u00a0Here is more info about that though from someone you knows more of what is going on than me.<\/p>\n

Do I need the moz and webkit css prefixes?<\/a><\/p>\n

CSS Box Shadow<\/h2>\n

Browser Compatibility<\/a><\/p>\n

CSS Box Shadow Generator<\/a><\/p>\n

CSS Text Shadow<\/h2>\n

Browser Compatibility<\/a><\/p>\n

CSS Text Shadow Generator<\/a><\/p>\n

CSS Inner Shadow<\/h2>\n

CSS Inner Shadow Tutorials<\/a><\/p>\n

Layering a CSS Inner Shadow over an Object like an Image<\/a><\/p>\n

 <\/p>","protected":false},"excerpt":{"rendered":"

    Coming from a graphic design and video production background, I’m used to using drop shadows and […]<\/p>\n","protected":false},"author":1,"featured_media":306,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"wprm-recipe-roundup-name":"","wprm-recipe-roundup-description":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[48,5],"tags":[],"class_list":["post-281","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-website-development"],"jetpack_featured_media_url":"https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2014\/06\/CSS3-Shadows3.png","jetpack_shortlink":"https:\/\/wp.me\/p4BbcR-4x","jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts\/281","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/comments?post=281"}],"version-history":[{"count":6,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts\/281\/revisions"}],"predecessor-version":[{"id":432,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts\/281\/revisions\/432"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/media\/306"}],"wp:attachment":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/media?parent=281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/categories?post=281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/tags?post=281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}