{"id":13469673,"url":"https://github.com/robinloeffel/cosha","last_synced_at":"2025-05-16T00:06:23.328Z","repository":{"id":44893038,"uuid":"206647934","full_name":"robinloeffel/cosha","owner":"robinloeffel","description":"Colorful shadows for your images. 🎨","archived":false,"fork":false,"pushed_at":"2023-12-10T12:33:04.000Z","size":1244,"stargazers_count":980,"open_issues_count":0,"forks_count":19,"subscribers_count":10,"default_branch":"main","last_synced_at":"2025-05-12T03:13:38.986Z","etag":null,"topics":["browser","colorful-shadows","css","css-filters","dom","images","shadows"],"latest_commit_sha":null,"homepage":"https://robinloeffel.github.io/cosha","language":"TypeScript","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/robinloeffel.png","metadata":{"files":{"readme":"readme.md","changelog":"changelog.md","contributing":null,"funding":null,"license":"license.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-09-05T20:04:13.000Z","updated_at":"2025-04-11T16:51:58.000Z","dependencies_parsed_at":"2023-01-20T05:15:15.404Z","dependency_job_id":"5c643cbb-9139-4af1-bbe6-923ec7d5aed2","html_url":"https://github.com/robinloeffel/cosha","commit_stats":{"total_commits":59,"total_committers":3,"mean_commits":"19.666666666666668","dds":0.3389830508474576,"last_synced_commit":"2d3b3cdcbeb1f7693b41e54e8f42e3d1640fb21e"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robinloeffel%2Fcosha","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robinloeffel%2Fcosha/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robinloeffel%2Fcosha/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robinloeffel%2Fcosha/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/robinloeffel","download_url":"https://codeload.github.com/robinloeffel/cosha/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254442854,"owners_count":22071878,"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":["browser","colorful-shadows","css","css-filters","dom","images","shadows"],"created_at":"2024-07-31T15:01:50.169Z","updated_at":"2025-05-16T00:06:23.283Z","avatar_url":"https://github.com/robinloeffel.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"sample.webp\" width=\"600\"\u003e\n\u003c/p\u003e\n\n# cosha\n\n[![version on npm](https://badgen.net/npm/v/cosha)](https://www.npmjs.com/package/cosha)\n[![weekly downloads on npm](https://badgen.net/npm/dw/cosha)](https://www.npmjs.com/package/cosha)\n[![types](https://badgen.net/npm/types/cosha)](https://www.npmjs.com/package/cosha)\n[![minified size](https://badgen.net/bundlephobia/minzip/cosha)](https://bundlephobia.com/package/cosha)\n[![license](https://badgen.net/npm/license/cosha)](https://github.com/robinloeffel/cosha/blob/main/license.txt)\n\n\u003e Colorful shadows for your images. 🎨\n\n[`cosha`](https://npm.robinloeffel.ch/cosha) lets you add **co**lorful **sha**dows to your images. Try it out and look for yourself—it really couldn't be easier to set up!\n\n## How\n\n```bash\nnpm i cosha\n```\n\n```html\n\u003c!-- on an img tag --\u003e\n\u003cimg src=\"palm-tree.jpg\" alt=\"nice vibes\" class=\"colorful-shadow\"/\u003e\n\n\u003c!-- on a picture tag --\u003e\n\u003cpicture class=\"colorful-shadow\"\u003e\n  \u003csource srcset=\"palm-tree-1200.jpg 1200w, palm-tree-800.jpg 800w, palm-tree-400.jpg 400w\" type=\"image/jpeg\"\u003e\n  \u003csource srcset=\"palm-tree-1200.webp 1200w, palm-tree-800.webp 800w, palm-tree-400.webp 400w\" type=\"image/webp\"\u003e\n  \u003cimg src=\"palm-tree-400.jpg\" alt=\"nice vibes\"/\u003e\n\u003c/picture\u003e\n```\n\n```js\nimport cosha from \"cosha\";\n\ncosha({\n  className: \"colorful-shadow\",\n  blur: \"10px\",\n  brightness: \"125%\",\n  saturation: \"110%\",\n  x: \"2px\",\n  y: \"6px\"\n});\n```\n\nAlternatively, if that module bundler stuff isn't for you, you can get it directly from [`https://unpkg.com/cosha`](https://unpkg.com/cosha).\n\n```html\n\u003cscript type=\"module\"\u003e\n  import cosha from \"https://unpkg.com/cosha\";\n\n  cosha();\n\u003c/script\u003e\n```\n\n## Config\n\nEverything in the config is optional. You can also use it by just calling `cosha()`.\n\n```js\ncosha(options);\n```\n\n### `options.className`\n\nType: `string`\u003cbr\u003e\nDefault: `\"cosha\"`\n\nThe class the plugin looks for. This should be on the original `img` or `picture` node(s).\n\n### `options.blur`\n\nType: `number | string`\u003cbr\u003e\nDefault: `\"5px\"`\n\nThe amount of blur to apply to the image. See the [CSS `blur` function docs](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur) on MDN for more details.\n\n### `options.brightness`\n\nType: `number | string`\u003cbr\u003e\nDefault: `1`\n\nThe amount of brightness to apply to the image. See the [CSS `brightness` function docs](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/brightness) on MDN for more details.\n\n### `options.saturation`\n\nType: `number | string`\u003cbr\u003e\nDefault: `1`\n\nThe amount of saturation to apply to the image. See the [CSS `saturation` function docs](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/saturation) on MDN for more details.\n\n### `options.x`\n\nType: `number | string`\u003cbr\u003e\nDefault: `0`\n\nThe amount of horizontal translation to apply to the image. See the [CSS `translate` function docs](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate) on MDN for more details.\n\n### `options.y`\n\nType: `number | string`\u003cbr\u003e\nDefault: `0`\n\nThe amount of vertical translation to apply to the image. See the [CSS `translate` function docs](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate) on MDN for more details.\n\n## Gotcha\n\nIt runs in every browser except Internet Explorer. This is because of missing support for standard [CSS `filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter#Browser_compatibility) functions.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobinloeffel%2Fcosha","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frobinloeffel%2Fcosha","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobinloeffel%2Fcosha/lists"}