{"id":3322,"date":"2024-08-01T09:35:32","date_gmt":"2024-08-01T14:35:32","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=3322"},"modified":"2024-08-01T09:35:33","modified_gmt":"2024-08-01T14:35:33","slug":"so-you-think-you-know-box-shadows","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/so-you-think-you-know-box-shadows\/","title":{"rendered":"So you think you know box shadows?"},"content":{"rendered":"\n<p><a href=\"https:\/\/dgerrells.com\/lists\/youtube\">David Gerrells has a bunch of fun<\/a> rendering far too many CSS <code>box-shadow<\/code>s for things that <code>box-shadow<\/code> was never meant to do. <\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>I found out my m1 can render a stupid number of these bad boys and so I set out to see just how far you can push them and boy did I.<\/p>\n<\/blockquote>\n\n\n\n<p>Because <code>box-shadow<\/code> mimics the shape of the original element, doesn&#8217;t have to have any blur at all, and can be colored any color, they <em>can<\/em> be a way to draw anything you want wherever you want with a single DOM element. Doing faux ray-tracing as David does at the end is not something I thought I&#8217;d ever see.<\/p>\n\n\n\n<p>I found it fun looking at the DevTools while the demos were cooking.<\/p>\n\n\n\n<!--more-->\n\n\n\n\t\t<figure class=\"wp-block-jetpack-videopress jetpack-videopress-player\" style=\"\" >\n\t\t\t<div class=\"jetpack-videopress-player__wrapper\"> <iframe title=\"VideoPress Video Player\" aria-label='VideoPress Video Player' width='500' height='712' src='https:\/\/videopress.com\/embed\/r7TnApby?cover=1&amp;autoPlay=0&amp;controls=1&amp;loop=0&amp;muted=0&amp;persistVolume=1&amp;playsinline=0&amp;preloadContent=metadata&amp;useAverageColor=1&amp;hd=0' frameborder='0' allowfullscreen data-resize-to-parent=\"true\" allow='clipboard-write'><\/iframe><script src='https:\/\/v0.wordpress.com\/js\/next\/videopress-iframe.js?m=1674852142'><\/script><\/div>\n\t\t\t\n\t\t\t\n\t\t<\/figure>\n\t\t","protected":false},"excerpt":{"rendered":"<p>David Gerrells has a bunch of fun rendering far too many CSS box-shadows for things that box-shadow was never meant to do. I found out my m1 can render a stupid number of these bad boys and so I set out to see just how far you can push them and boy did I. Because [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3326,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[29],"tags":[220,7],"class_list":["post-3322","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-the-beat","tag-box-shadow","tag-css"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/08\/Screenshot-2024-08-01-at-7.32.41%E2%80%AFAM.png?fit=986%2C728&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/3322","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=3322"}],"version-history":[{"count":1,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/3322\/revisions"}],"predecessor-version":[{"id":3327,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/3322\/revisions\/3327"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/3326"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=3322"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=3322"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=3322"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}