{"id":15019910,"url":"https://github.com/indamix/real-shadow","last_synced_at":"2025-04-12T10:30:06.782Z","repository":{"id":3053106,"uuid":"4074787","full_name":"Indamix/real-shadow","owner":"Indamix","description":"Module that casts photorealistic shadows","archived":false,"fork":false,"pushed_at":"2016-11-20T16:09:33.000Z","size":492,"stargazers_count":1053,"open_issues_count":4,"forks_count":121,"subscribers_count":39,"default_branch":"master","last_synced_at":"2025-04-10T12:19:10.059Z","etag":null,"topics":["box-shadow","javascript","jquery","shadow","text-shadow"],"latest_commit_sha":null,"homepage":"https://indamix.github.io/real-shadow","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/Indamix.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"license.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-04-19T12:16:04.000Z","updated_at":"2025-02-01T14:41:56.000Z","dependencies_parsed_at":"2022-08-30T05:23:19.681Z","dependency_job_id":null,"html_url":"https://github.com/Indamix/real-shadow","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Indamix%2Freal-shadow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Indamix%2Freal-shadow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Indamix%2Freal-shadow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Indamix%2Freal-shadow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Indamix","download_url":"https://codeload.github.com/Indamix/real-shadow/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248552899,"owners_count":21123333,"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":["box-shadow","javascript","jquery","shadow","text-shadow"],"created_at":"2024-09-24T19:54:18.550Z","updated_at":"2025-04-12T10:30:06.302Z","avatar_url":"https://github.com/Indamix.png","language":"JavaScript","readme":"# [Real Shadow](http://indamix.github.io/real-shadow/) — Module that casts photorealistic shadows of [any shape](http://indamix.github.io/real-shadow/#/drop/)\nPerfect for eye-catching demos and landing pages.  \nWorks in any browser supporting CSS box-shadow property.\n\n\nReal Shadow registers itself as CommonJS module, AMD module or jQuery plugin (it depends on your environment).  \nIf there is no CommonJS, AMD or jQuery, Real Shadow registers itself in the global namespace.\n\n## What's new\n+ constant angle\n+ [flat shadows](http://indamix.github.io/real-shadow/#/flat/)\n+ [text shadows](http://indamix.github.io/real-shadow/#/text/)\n+ shadows can be of [any shape](http://indamix.github.io/real-shadow/#/drop/)\n+ per-element settings (instead of global settings)\n\n## Installing\n### GitHub\nhttps://github.com/Indamix/real-shadow\n### npm\n```bash\nnpm i real-shadow\n```\n### bower\n```bash\nbower i real-shadow\n```\n\n## Basic Usage with jQuery\n```javascript\n$(selector).realshadow(); // options are optional\n\n$(selector).realshadow({\n\n\tfollowMouse: false,   // default: true\n\n\tpageX: x,             // x coordinate of the light source\n\tpageY: y              // y coordinate of the light source\n\n\tcolor: '0,127,255'    // shadow color, rgb 0..255, default: '0,0,0'\n\n\ttype: 'drop' / 'text' // shadow type\n\n});\n```\n\n## Basic Usage without jQuery\n```javascript\nrealshadow(elements); // options are optional\n\nrealshadow(elements, options); // options example listed above\n```\n\nTo specify different colors for each element, you can use \"data-shadow-color\" attribute:\n\n```html\n\u003cspan data-shadow-color=\"r,g,b\"\u003e\u003c/span\u003e \u003c!-- values in range 0..255 --\u003e\n\n\u003cspan data-shadow-color=\"255,0,0\"\u003ered\u003c/span\u003e\n\u003cspan data-shadow-color=\"0,255,0\"\u003egreen\u003c/span\u003e\n\u003cspan data-shadow-color=\"0,0,255\"\u003eblue\u003c/span\u003e\n\u003cspan data-shadow-color=\"255,255,0\"\u003eyellow\u003c/span\u003e\n\u003cspan data-shadow-color=\"0,255,255\"\u003ecyan\u003c/span\u003e\n\u003cspan data-shadow-color=\"255,0,255\"\u003eviolet\u003c/span\u003e\n\u003cspan data-shadow-color=\"100,100,100\"\u003egrey\u003c/span\u003e\n```\n\n```javascript\n$('span').realshadow();\n```\n\n## Inset Shadows\n```javascript\n$(selector).realshadow({\n\tinset: true // default: false\n});\n```\n\n## Inverse Shadows\n```javascript\n$(selector).realshadow({\n\tinverse: true // default: false\n});\n```\n\n## Custom Shadow Shape\n```javascript\n$(selector).realshadow({\n\ttype: 'drop'\n});\n```\n\n## Text Shadow\n```javascript\n$(selector).realshadow({\n\ttype: 'text'\n});\n```\n\n## Constant Angle\nIf you would like the shadows angle to be constant, specify the 'angle' option, in radians.\n\n```javascript\n$(selector).realshadow({\n    angle: Math.PI / 4\n});\n```\n\n## Update shadows during/after jQuery animations\n```javascript\n// before: apply Real Shadow to elements:\n$(selector).realshadow(/* options, if needed */);\n\n// update shadows during jQuery animation, i.e. each animation step:\n$(selector).animate(/* animated properties */, {step: $.fn.realshadow.update});\n\n// update shadows after jQuery animation is over:\n$(selector).animate(/* animated properties */, $.fn.realshadow.update);\n```\nIf you update shadows during jQuery animation, you don't need to update shadows after jQuery animation is over.\n\n## Custom shadows length\n```javascript\n$(selector).realshadow({\n\tlength: 5 // default is 7\n});\n```\n\n## CommonJS usage\n```javascript\nvar realshadow = require('realshadow');\n\nrealshadow(document.getElementsByClassName('someClass'));\nrealshadow(document.getElementsByTagName('li'), options);\n```\n\n## RequireJS / AMD usage\n```javascript\nrequire(['realshadow'], function(realshadow) {\n\n\trealshadow(document.getElementsByClassName('someClass'));\n\trealshadow(document.getElementsByTagName('li'), options);\n\n});\n```\n\n## Reset Real Shadow\nReal Shadow will release all added elements and remove all its event listeners\n```javascript\n// if you have Real Shadow in the current scope:\nrealshadow.reset();\n\n// if you use jQuery:\n$.fn.realshadow.reset();\n```\n\n---\nIf you suppose that the usage of Real Shadow is unclear or have something to say, feel free to [contact me](http://indamix.github.io).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Findamix%2Freal-shadow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Findamix%2Freal-shadow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Findamix%2Freal-shadow/lists"}