{"id":541,"date":"2018-08-08T13:22:24","date_gmt":"2018-08-08T20:22:24","guid":{"rendered":"https:\/\/actionsnippet.com\/?p=3245"},"modified":"2018-08-08T13:22:24","modified_gmt":"2018-08-08T20:22:24","slug":"css-fake-lighting-with-gradients-and-shadows","status":"publish","type":"post","link":"https:\/\/actionsnippet.com\/?p=541","title":{"rendered":"CSS Fake Lighting With Gradients and Shadows"},"content":{"rendered":"<p>Awhile back I thought it would be interesting to add some quick fake lighting to a personal project of mine &#8211; that for lack of a better description is a windows management system.<\/p>\n<p>Here is a screenshot of the windows management system with lighting turned on:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/actionsnippet.com\/imgs\/winman.jpg\" \/><\/p>\n<p>Here is a video of me using the system:<\/p>\n<p><iframe loading=\"lazy\" width=\"100%\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/n5h5RowbgrE\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen><\/iframe><\/p>\n<p>I whipped up this prototype (don&#8217;t mind the jQuery)<\/p>\n<p><iframe height='600' scrolling='no' title='CSS Lights' src='\/\/codepen.io\/ZevanRosser\/embed\/BjerGG\/?height=300&#038;theme-id=5318&#038;default-tab=result&#038;embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https:\/\/codepen.io\/ZevanRosser\/pen\/BjerGG\/'>CSS Lights<\/a> by Zevan Rosser (<a href='https:\/\/codepen.io\/ZevanRosser'>@ZevanRosser<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>There are really two keys that make this work. Getting the shadow in place and adjusting the gradient. All we really need is the angle and distance from a given `div` in relation to the &#8220;light&#8221;:<\/p>\n<pre lang=\"javascript\" line=\"1\">\r\nlet calcAng = function(x, y) {\r\n  let lightPos = light.position()\r\n  let dx = lightPos.left - x;\r\n  let dy = lightPos.top - y;\r\n  return -Math.atan2(dy, dx) \/ Math.PI  * 180;\r\n};\r\n\r\nlet calcDist = function(x, y) {\r\n  let lightPos = light.position()\r\n  let dx = lightPos.left - x;\r\n  let dy = lightPos.top - y;\r\n  return Math.sqrt(dx * dx,  dy * dy);\r\n};\r\n<\/pre>\n<p>Standard `atan2` and the pythagorean theorem get us this. Once we have those &#8211; we can use them to set our gradient and shadow values:<\/p>\n<pre lang=\"javascript\" line=\"1\">\r\n\/\/ warning (apparently this function is slightly speed coded)\r\nlet calcShade = function(x, y) {\r\n  let angle = calcAng(x, y);\r\n  let dist =  calcDist(x, y);\r\n  let sx = dist * Math.cos(-angle * Math.PI \/ 180) * -1;\r\n  let sy = dist * Math.sin(-angle * Math.PI \/ 180) * -1;\r\n  \r\n  sx = Math.min(20, Math.max(sx, -20));\r\n  sy = Math.min(20, Math.max(sy, -20));\r\n  let blur = Math.min(100, dist);\r\n  let hBlur = Math.min(50, blur) * 0.5;\r\n  \/\/ consider distance in the eq?\r\n  return {\r\n    bg: `-webkit-linear-gradient(${angle}deg, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.4) ${blur}%)`,\r\n    shadow: `${sx}px ${sy}px ${hBlur}px rgba(0, 0, 0, 0.15)`\r\n  };\r\n};\r\n<\/pre>\n<p>There are more videos of the windows management system on my youtube channel. Here&#8217;s another from a much earlier version of the system.<\/p>\n<p><iframe loading=\"lazy\" width=\"100%\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/5DoNraFXlXI\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen><\/iframe><\/p>\n<p>Maybe I&#8217;ll post more about that in the future&#8230;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Awhile back I thought it would be interesting to add some quick fake lighting to a personal project of mine &#8211; that for lack of a better description is a windows management system. Here is a screenshot of the windows management system with lighting turned on: Here is a video of me using the system: [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[101,33,114,161,160,121,94,13],"tags":[],"class_list":["post-541","post","type-post","status-publish","format-standard","hentry","category-3d","category-graphics","category-graphics-algorithms","category-html5","category-javascript","category-math","category-misc","category-motion"],"_links":{"self":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/541","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=541"}],"version-history":[{"count":0,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/541\/revisions"}],"wp:attachment":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=541"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=541"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=541"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}