{"id":20282174,"url":"https://github.com/cemalgnlts/picture-shadow","last_synced_at":"2025-10-08T09:48:03.219Z","repository":{"id":135701777,"uuid":"395615105","full_name":"cemalgnlts/picture-shadow","owner":"cemalgnlts","description":"Creates shadows (glowing effect) for your images. Shadows will be created based on the color of your image.","archived":false,"fork":false,"pushed_at":"2021-08-13T14:20:54.000Z","size":3891,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-04T03:27:54.705Z","etag":null,"topics":["box-shadow","picture","shadow"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cemalgnlts.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":"2021-08-13T10:39:11.000Z","updated_at":"2023-05-30T00:16:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"b33334c3-02a2-40b3-b8b5-6f749004b0ae","html_url":"https://github.com/cemalgnlts/picture-shadow","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/cemalgnlts/picture-shadow","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cemalgnlts%2Fpicture-shadow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cemalgnlts%2Fpicture-shadow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cemalgnlts%2Fpicture-shadow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cemalgnlts%2Fpicture-shadow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cemalgnlts","download_url":"https://codeload.github.com/cemalgnlts/picture-shadow/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cemalgnlts%2Fpicture-shadow/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278924140,"owners_count":26069400,"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","status":"online","status_checked_at":"2025-10-08T02:00:06.501Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["box-shadow","picture","shadow"],"created_at":"2024-11-14T14:08:18.958Z","updated_at":"2025-10-08T09:48:03.201Z","avatar_url":"https://github.com/cemalgnlts.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Preview\n\n| ![](ss1.png) | ![](ss2.png) | ![](ss3.png) |\n| ------------ | ------------ | ------------ |\n\n# Introduction\n\nIt helps you add appropriate shade to your images.\n\n# Incorporate Into Your Project.\n\nInclude the JavaScript file inside the head tags.\n\n```javascript\n\u003cscript src=\"picture-shadow.js\"\u003e\u003c/script\u003e\n```\n\nAdd the picture-shadow class to your image tags.\n\n```html\n\u003cimg src=\"https://picsum.photos/300\" class=\"picture-shadow\" /\u003e\n```\n\nIf you use it this way, the shadow is created with the default properties.\n\n# Customize\n\nThere are a few customization options for the shadow.\n\nborder radius, how far from the top it will be, how far from the left it will be, how blurry it will be. How big will it be.\n\nWe will add these properties to our tag, it will be `data-[option]=\"[value]\"`.\n\n`data-radius` - How round will the border be?\n\n```html\n\u003cimg\n    src=\"https://picsum.photos/300\"\n    class=\"picture-shadow\"\n    data-radius=\"30px\"\n/\u003e\n```\n\n`data-left` - how far from the left?\n\n```html\n\u003cimg src=\"https://picsum.photos/300\" class=\"picture-shadow\" data-left=\"10px\" /\u003e\n```\n\n`data-top` - how far from the top?\n\n```html\n\u003cimg src=\"https://picsum.photos/300\" class=\"picture-shadow\" data-top=\"10px\" /\u003e\n```\n\n`data-blur` - how blurry it will be?\n\n```html\n\u003cimg src=\"https://picsum.photos/300\" class=\"picture-shadow\" data-blur=\"10px\" /\u003e\n```\n\n`data-scale` - Resizes the shadow.\n\n**\u003c 1**: makes the image smaller than its size.\n\n**1**: full size.\n\n**\\\u003e 1**: makes the image larger than its size.\n\n```html\n\u003cimg\n    src=\"https://picsum.photos/300\"\n    class=\"picture-shadow\"\n    data-resize=\"1.03\"\n/\u003e\n```\n\nOne or more options can be selected.\n\nThere is nothing else you need to do, the shadow will be created automatically when your page is ready.\n\n# How does it work\n\n**This section is for information.**\n\nFirst, let's say you have an image tag like this.\n\n```html\n\u003cimg src=\"https://picsum.photos/300\" class=\"picture-shadow my-custom-class\" /\u003e\n```\n\nWhen your page is ready we will first wrap it with a div. Then we will create another one from the picture inside. We use the second image we created as a shadow.\n\nThe state of your page after it is ready.\n\n```html\n\u003cdiv class=\"picture-shadow-wrapper\"\u003e\n    \u003cimg\n        src=\"https://picsum.photos/300\"\n        class=\"picture-shadow my-custom-class\"\n    /\u003e\n    \u003cimg\n        src=\"https://picsum.photos/300\"\n        class=\"picture-shadow my-custom-clas\"\n    /\u003e\n\u003c/div\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcemalgnlts%2Fpicture-shadow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcemalgnlts%2Fpicture-shadow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcemalgnlts%2Fpicture-shadow/lists"}