{"id":16811436,"url":"https://github.com/noomorph/approximate-box-shadow-using-border","last_synced_at":"2025-03-17T10:46:30.765Z","repository":{"id":147375016,"uuid":"117421149","full_name":"noomorph/approximate-box-shadow-using-border","owner":"noomorph","description":"When you are limited to use solid border, but need to emulate box-shadow property, this project will come to the rescue! ","archived":false,"fork":false,"pushed_at":"2018-03-10T14:24:27.000Z","size":625,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-23T20:27:51.875Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://noomorph.github.io/approximate-box-shadow-using-border/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/noomorph.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-01-14T10:34:42.000Z","updated_at":"2018-03-09T15:56:36.000Z","dependencies_parsed_at":null,"dependency_job_id":"d34b71d0-d501-4c71-9316-707c8568d07b","html_url":"https://github.com/noomorph/approximate-box-shadow-using-border","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noomorph%2Fapproximate-box-shadow-using-border","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noomorph%2Fapproximate-box-shadow-using-border/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noomorph%2Fapproximate-box-shadow-using-border/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noomorph%2Fapproximate-box-shadow-using-border/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/noomorph","download_url":"https://codeload.github.com/noomorph/approximate-box-shadow-using-border/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244021334,"owners_count":20385122,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-13T10:18:45.471Z","updated_at":"2025-03-17T10:46:30.759Z","avatar_url":"https://github.com/noomorph.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# What does it solve?\n\nThere is a transparent borderless *Button A* which is styled using `box-shadow` CSS property.\nYou have to create *Button B* which should look as similar as possible to *Button A* without using `box-shadow`.\nUnfortunately, the only CSS properties you can use are either `border` or `outline`.\n\nIn our days it is common to search answers or ask smart people on **StackOverflow**, [but sometimes nobody is interested or able to answer your question, like in my case](https://stackoverflow.com/questions/48097129/how-to-approximate-css-box-shadow-property-using-solid-border-only).\nFortunately, I had some time and luck to conduct my own research and you came here in time, when I've got some useful results for you.\n\n### Demo\n\n\u003ciframe id=\"demo-iframe\" src=\"demo/index.html?rnd=5\" width=\"100%\" height=\"460\" allowtransparency=\"true\" frameborder=\"0\" scrolling=\"no\"\u003e\u003c/iframe\u003e\n\n### The Useful Code\n\n```javascript\nconst SHADOW_APPROXIMATION_MAP = [\n              /*blur=00*/ /*blur=01*/ /*blur=02*/ /*blur=03*/ /*blur=04*/ /*blur=05*/ /*blur=06*/ /*blur=07*/ /*blur=08*/ /*blur=09*/ /*blur=10*/ /*blur=11*/ /*blur=12*/ /*blur=13*/ /*blur=14*/ /*blur=15*/\n/* size=00 */ [ 0, 0.00], [ 1, 0.27], [ 1, 0.32], [ 1, 0.35], [ 2, 0.27], [ 2, 0.30], [ 2, 0.32], [ 3, 0.27], [ 3, 0.29], [ 3, 0.30], [ 3, 0.31], [ 4, 0.27], [ 4, 0.28], [ 4, 0.29], [ 4, 0.30], [ 5, 0.27],\n/* size=01 */ [ 1, 1.00], [ 1, 0.73], [ 2, 0.49], [ 2, 0.49], [ 2, 0.48], [ 2, 0.48], [ 3, 0.40], [ 3, 0.40], [ 3, 0.41], [ 4, 0.35], [ 4, 0.36], [ 4, 0.37], [ 4, 0.37], [ 5, 0.33], [ 5, 0.34], [ 5, 0.35],\n/* size=02 */ [ 2, 1.00], [ 2, 0.86], [ 2, 0.78], [ 3, 0.60], [ 3, 0.59], [ 3, 0.57], [ 3, 0.56], [ 4, 0.47], [ 4, 0.47], [ 4, 0.47], [ 4, 0.47], [ 5, 0.42], [ 5, 0.42], [ 5, 0.42], [ 5, 0.42], [ 6, 0.38],\n/* size=03 */ [ 3, 1.00], [ 3, 0.91], [ 3, 0.85], [ 3, 0.81], [ 4, 0.67], [ 4, 0.65], [ 4, 0.63], [ 4, 0.62], [ 5, 0.53], [ 5, 0.53], [ 5, 0.52], [ 5, 0.51], [ 5, 0.51], [ 6, 0.46], [ 6, 0.46], [ 6, 0.45],\n/* size=04 */ [ 4, 1.00], [ 4, 0.93], [ 4, 0.89], [ 4, 0.85], [ 4, 0.82], [ 5, 0.71], [ 5, 0.69], [ 5, 0.67], [ 5, 0.65], [ 5, 0.64], [ 6, 0.57], [ 6, 0.56], [ 6, 0.55], [ 6, 0.55], [ 7, 0.50], [ 7, 0.49],\n/* size=05 */ [ 5, 1.00], [ 5, 0.94], [ 5, 0.91], [ 5, 0.88], [ 5, 0.86], [ 5, 0.83], [ 6, 0.73], [ 6, 0.71], [ 6, 0.70], [ 6, 0.68], [ 6, 0.67], [ 7, 0.60], [ 7, 0.59], [ 7, 0.58], [ 7, 0.58], [ 8, 0.53],\n/* size=06 */ [ 6, 1.00], [ 6, 0.95], [ 6, 0.92], [ 6, 0.90], [ 6, 0.88], [ 6, 0.85], [ 7, 0.76], [ 7, 0.75], [ 7, 0.73], [ 7, 0.72], [ 7, 0.70], [ 7, 0.69], [ 8, 0.63], [ 8, 0.62], [ 8, 0.61], [ 8, 0.60],\n/* size=07 */ [ 7, 1.00], [ 7, 0.96], [ 7, 0.93], [ 7, 0.91], [ 7, 0.89], [ 7, 0.87], [ 7, 0.85], [ 8, 0.78], [ 8, 0.76], [ 8, 0.75], [ 8, 0.73], [ 8, 0.72], [ 8, 0.71], [ 9, 0.65], [ 9, 0.64], [ 9, 0.63],\n/* size=08 */ [ 8, 1.00], [ 8, 0.96], [ 8, 0.94], [ 8, 0.92], [ 8, 0.91], [ 8, 0.89], [ 8, 0.87], [ 8, 0.85], [ 9, 0.78], [ 9, 0.77], [ 9, 0.76], [ 9, 0.75], [ 9, 0.73], [ 9, 0.72], [10, 0.67], [10, 0.65],\n/* size=09 */ [ 9, 1.00], [ 9, 0.96], [ 9, 0.95], [ 9, 0.93], [ 9, 0.91], [ 9, 0.90], [ 9, 0.89], [ 9, 0.87], [10, 0.80], [10, 0.79], [10, 0.78], [10, 0.77], [10, 0.75], [10, 0.75], [10, 0.73], [11, 0.68],\n/* size=10 */ [10, 1.00], [10, 0.97], [10, 0.95], [10, 0.94], [10, 0.92], [10, 0.91], [10, 0.89], [10, 0.88], [10, 0.87], [11, 0.81], [11, 0.80], [11, 0.78], [11, 0.77], [11, 0.76], [11, 0.75], [11, 0.74],\n/* size=11 */ [11, 1.00], [11, 0.97], [11, 0.95], [11, 0.94], [11, 0.93], [11, 0.92], [11, 0.90], [11, 0.89], [11, 0.88], [12, 0.82], [12, 0.81], [12, 0.80], [12, 0.79], [12, 0.78], [12, 0.77], [12, 0.76],\n/* size=12 */ [12, 1.00], [12, 0.97], [12, 0.96], [12, 0.95], [12, 0.93], [12, 0.92], [12, 0.91], [12, 0.90], [12, 0.89], [12, 0.87], [13, 0.82], [13, 0.81], [13, 0.80], [13, 0.79], [13, 0.78], [13, 0.77],\n/* size=13 */ [13, 1.00], [13, 0.97], [13, 0.96], [13, 0.95], [13, 0.94], [13, 0.93], [13, 0.92], [13, 0.91], [13, 0.89], [13, 0.88], [14, 0.84], [14, 0.82], [14, 0.82], [14, 0.81], [14, 0.80], [14, 0.79],\n/* size=14 */ [14, 1.00], [14, 0.98], [14, 0.96], [14, 0.95], [14, 0.94], [14, 0.93], [14, 0.92], [14, 0.91], [14, 0.90], [14, 0.89], [14, 0.88], [15, 0.84], [15, 0.82], [15, 0.82], [15, 0.81], [15, 0.80],\n/* size=15 */ [15, 1.00], [15, 0.98], [15, 0.96], [15, 0.95], [15, 0.95], [15, 0.93], [15, 0.93], [15, 0.92], [15, 0.91], [15, 0.90], [15, 0.89], [16, 0.84], [16, 0.84], [16, 0.83], [16, 0.82], [16, 0.81],\n];\n```\n\n### License\n\n```\nCopyright 2018 Yaroslav Serhieiev \u003cnoomorph@gmail.com\u003e\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n    http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnoomorph%2Fapproximate-box-shadow-using-border","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnoomorph%2Fapproximate-box-shadow-using-border","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnoomorph%2Fapproximate-box-shadow-using-border/lists"}