{"id":21077131,"url":"https://github.com/dev-shetty/css-is-fun","last_synced_at":"2025-05-16T08:30:32.786Z","repository":{"id":110028289,"uuid":"577762118","full_name":"dev-shetty/CSS-Is-Fun","owner":"dev-shetty","description":"CSS-Is-Fun is a collection of creative and fun CSS animations and effects to enhance your web projects.","archived":false,"fork":false,"pushed_at":"2023-10-27T14:27:45.000Z","size":1686,"stargazers_count":18,"open_issues_count":10,"forks_count":19,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-10T12:55:06.107Z","etag":null,"topics":["beginner-friendly","css","for-beginners","hacktoberfest","html","javascript","projects-list","ui","ui-snippets"],"latest_commit_sha":null,"homepage":"https://css-is-fun.vercel.app","language":"HTML","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/dev-shetty.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2022-12-13T13:19:22.000Z","updated_at":"2024-09-30T11:24:43.000Z","dependencies_parsed_at":"2023-03-17T19:01:25.223Z","dependency_job_id":"8f63aff3-2f8a-4709-926f-ca727081d52d","html_url":"https://github.com/dev-shetty/CSS-Is-Fun","commit_stats":null,"previous_names":["dev-shetty/css-is-fun"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-shetty%2FCSS-Is-Fun","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-shetty%2FCSS-Is-Fun/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-shetty%2FCSS-Is-Fun/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-shetty%2FCSS-Is-Fun/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dev-shetty","download_url":"https://codeload.github.com/dev-shetty/CSS-Is-Fun/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254496005,"owners_count":22080632,"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":["beginner-friendly","css","for-beginners","hacktoberfest","html","javascript","projects-list","ui","ui-snippets"],"created_at":"2024-11-19T19:35:11.101Z","updated_at":"2025-05-16T08:30:28.515Z","avatar_url":"https://github.com/dev-shetty.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CSS Is Fun\n\n### Yes! You heard it right CSS is awesome.\n\nThat's great to hear! CSS is a powerful tool for designing and styling web pages this repository also contains UI snippets which are pre-built CSS code blocks that can be easily integrated into a website to add style and functionality.\n\nCSS-Is-Fun is a collection of creative and fun CSS animations and effects to enhance your web projects.This repository containing CSS UI snippets is a valuable resource for web designers and developers looking to streamline their workflow and add creative design elements to their projects. By using these snippets, designers can save time and effort while also ensuring consistency and coherence across their website's design.\n\n# Purpose for Creating Css Is Fun\n\nif you're looking to add some flair to your website's design, be sure to check out this repository and start experimenting with some of these awesome CSS UI snippets!\n\nWhether you're looking to create custom buttons, navigation menus, or complex animations, this repository has a wide range of UI snippets to choose from. Each snippet is carefully crafted to provide a beautiful and functional design that will enhance the user experience on your website.\n\n\u003cbr\u003e\n\n- [Installation](#installation)\n- [Snippets](#snippets)\n- [Contributing](#contributing)\n- [License](#license)\n\n## Installation\n\nTo use these CSS animations and effects in your Local System , simply download or clone this repository via using this Link :\n\n```git\n  git clone https://github.com/Deveesh-Shetty/CSS-Is-Fun.git\n```\n\n## Table of Contents\n- [Cart Item](https://codepen.io/deveesh_shetty_12/pen/rNKXvKm)\n- [Social Login](https://codepen.io/pen/KKejzVy).\n- [Counter using Closure](https://codepen.io/pen/vYVjLqx).\n- [Accordion](https://codepen.io/pen/YzJLEbb).\n- [3D Cube](https://codepen.io/pen/mdzKEQg).\n- [Festival Lighting](https://codepen.io/pen/NWOzdvK).\n- [Indian Flag](https://codepen.io/pen/xxyzqVa).\n- [Image Carousel I](https://codepen.io/pen/gOBKRNV).\n- [Image Carousel II](https://codepen.io/pen/bGmjbVo).\n- [Color Wheel](https://codepen.io/pen/GRYXvKw).\n- [Video Player](https://codepen.io/ahmedelmsery/pen/zYmmxNw).\n- [Bar Chart](https://codepen.io/ahmedelmsery/pen/vYVQGLP).\n- [Loading Page](https://codepen.io/ahmedelmsery/pen/zZVLMN).\n- [Session Graph](https://codepen.io/ahmedelmsery/pen/qBQdZeJ).\n- [Flipcard](https://codepen.io/VoiD_Z/pen/KKbBQxy).\n- [Mouse Chaser](https://codepen.io/NilothpalPillai/pen/BavPrWm).\n- [Helpline](https://codepen.io/Swathi-Singh/pen/dywjqoz).\n- [Digital Clock](https://codepen.io/rohancs127/pen/dywgQey).\n- [profile card](https://codepen.io/Raksha09/pen/ZEVVzwB).\n\n## Snippets\n\n| Project Name          | CodePen Link                                                | Preview                                                                                                                                                        | Source Code                                                                                              |\n| --------------------- | ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |\n| Cart Item             | [Go Live](https://codepen.io/deveesh_shetty_12/pen/rNKXvKm) | \u003cimg src=\"https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/9b12a923-f70a-411e-8964-0273e507576a\" alt=\"Cart Item\" width=\"400\" height=\"300\"\u003e         | [Code - Cart Item](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Cart%20Item)                 |\n| Social Login          | [Go Live](https://codepen.io/pen/KKejzVy)                   | \u003cimg src=\"https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/18d4af5d-459e-4b45-8c51-aa253ff88da9\" alt=\"Social Login\" width=\"400\" height=\"300\"\u003e      | [Code - Social Login](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Social%20Login)           |\n| Counter using Closure | [Go Live](https://codepen.io/pen/vYVjLqx)                   | \u003cimg src=\"https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/eefb6819-f21e-4b6b-8bcd-3a08368bcd51\" alt=\"Counter\" width=\"400\" height=\"300\"\u003e           | [Code - Counter](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Counter)                       |\n| Accordion             | [Go Live](https://codepen.io/pen/YzJLEbb)                   | \u003cimg src=\"https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/8417ccd9-8363-4d3f-920b-1b7013ba1158\" alt=\"Accordion\" width=\"400\" height=\"300\"\u003e         | [Code - Accordion](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Accordion)                   |\n| 3D Cube               | [Go Live](https://codepen.io/pen/mdzKEQg)                   | \u003cimg src=\"https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/07cf6fab-5941-44fa-8964-dc73175239a4\" alt=\"3D Cube\" width=\"400\" height=\"300\"\u003e           | [Code - 3D Cube](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/3D%20Cube)                     |\n| Festival Lighting     | [Go Live](https://codepen.io/pen/NWOzdvK)                   | \u003cimg src=\"https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/477cc242-4b77-4e50-bcd7-d64cfce2ed34\" alt=\"Festival Lighting\" width=\"400\" height=\"300\"\u003e | [Code - Festival Lighting](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Festival%20Lighting) |\n| Indian Flag           | [Go Live](https://codepen.io/pen/xxyzqVa)                   | \u003cimg src=\"https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/68843a36-a400-4e48-8907-435e68d8cdc0\" alt=\"Indian Flag\" width=\"400\" height=\"300\"\u003e       | [Code - Indian Flag](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Indian%20Flag)             |\n| Image Carousel I      | [Go Live](https://codepen.io/pen/gOBKRNV)                   | \u003cimg src=\"https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/5fc52924-7403-4178-a7ab-fc796cfab567\" alt=\"Image Carousel I\" width=\"400\" height=\"300\"\u003e  | [Code - Image Carousel I](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Carousel%20I)         |\n| Image Carousel II     | [Go Live](https://codepen.io/pen/bGmjbVo)                   | \u003cimg src=\"https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/a8ef65b5-873c-4365-b4be-485bae463e87\" alt=\"Image Carousel II\" width=\"400\" height=\"300\"\u003e | [Code - Image Carousel II](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Carousel%20II)       |\n| Color Wheel           | [Go Live](https://codepen.io/pen/GRYXvKw)                   | \u003cimg src=\"https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/b4a4bc20-d43b-4bc0-b86d-ae89ae84ff42\" alt=\"Color Wheel\" width=\"400\" height=\"400\"\u003e       | [Code - Color Wheel](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Color%20Wheel)             |\n| Video Player          | [Go Live](https://codepen.io/ahmedelmsery/pen/zYmmxNw)      | \u003cimg src=\"https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/4fa44080-b6cf-4a5a-b0eb-53012b1e39a7\" alt=\"Video Player\" width=\"400\" height=\"300\"\u003e      | [Code - Video Player](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Video%20Player)           |\n| Bar Chart             | [Go Live](https://codepen.io/ahmedelmsery/pen/vYVQGLP)      | \u003cimg src=\"https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/700f6a4f-b376-42cd-89fb-d40ace55acea\" alt=\"Bar Chart\" width=\"400\" height=\"300\"\u003e         | [Code - Bar Chart](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Chart/BarChart)              |\n| Loading Page          | [Go Live](https://codepen.io/ahmedelmsery/pen/zZVLMN)       | \u003cimg src=\"https://res.cloudinary.com/duwcigilo/image/upload/v1684336253/Loading_image_ig5hh7.jpg\" alt=\"Loading Page\" width=\"400\" height=\"300\"\u003e                 | [Code - Loading Page](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Loading%20Page)                       |\n| Session Graph         | [Go Live](https://codepen.io/ahmedelmsery/pen/qBQdZeJ)      | \u003cimg src=\"https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/61b32539-f2d0-4c29-800f-03657d5af192\" alt=\"Session Graph\" width=\"400\" height=\"300\"\u003e     | [Code - Session Graph](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Session%20Graph)                     |\n| Flipcard         | [Go Live](https://codepen.io/VoiD_Z/pen/KKbBQxy)      | \u003cimg src=\"https://github.com/MeetThakur/CSS-Is-Fun/assets/99238677/dd055698-20c5-4506-9db2-40462c7c4762\" alt=\"Session Graph\" width=\"400\" height=\"300\"\u003e     | [Code - FlipCard](https://github.com/MeetThakur/CSS-Is-Fun/tree/master/UI%20Snippets/FlipCard)                     |\n| Mouse Chaser         | [Go Live](https://codepen.io/NilothpalPillai/pen/BavPrWm)      | \u003cimg src=\"https://github.com/Nilothpal-Pillai/CSS-Is-Fun/assets/20315308/de5210cc-7eca-466c-b1bd-092bae2c3c39\" alt=\"Mouse Chaser\" width=\"400\" height=\"300\"\u003e  | [Code - Mouse Chaser](https://github.com/Nilothpal-Pillai/CSS-Is-Fun/tree/Mouse-Chaser/UI%20Snippets/Mouse%20Chaser)                     |\n| Helpline         | [Go Live](https://codepen.io/Swathi-Singh/pen/dywjqoz)      | \u003cimg src=\"https://wpassets.adda247.com/wp-content/uploads/multisite/sites/5/2020/04/11132345/Helpline.jpg\" alt=\"Helpline\" width=\"400\" height=\"300\"\u003e | [Code - Helpline](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Helpline)                     |\n| Digital Clock         | [Go Live](https://codepen.io/rohancs127/pen/dywgQey)      | \u003cimg src=\"https://github.com/Deveesh-Shetty/CSS-Is-Fun/blob/master/UI%20Snippets/Digital%20Clock/digital-clock.png\" alt=\"Helpline\" width=\"400\" height=\"300\"\u003e  | [Code - Digital Clock](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Digital%20Clock) |\n| profile card        | [Go Live](https://codepen.io/Raksha09/pen/ZEVVzwB)      | \u003cimg src=\"https://imagetolink.com/ib/oIEvRnPHUP\" alt=\"profile cards\" width=\"400\" height=\"300\"\u003e | [Code - profilecard](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Helpline) |\n\n\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\u003ca href=\"#snippets\"\u003e^^ Back to Snippets Top ^^\u003c/a\u003e\u003c/p\u003e\n\n## Contributing\n\nWe encourage your contributions. Welcome to CSS is Fun on GitHub! We're excited about your contributions, big or small. Join our inclusive community and work on various CSS tasks to improve design and functionality. Let's collaborate and make something great together!🚀 For detailed instructions on how to contribute, please refer to the [CONTRIBUTING.md](https://github.com/Deveesh-Shetty/CSS-Is-Fun/blob/master/CONTRIBUTING.md) file.\n\n## License\n\nThis project is licensed under the MIT License.\nFeel free to modify and adjust the content as needed to suit your project 🥳.\n\n\u003cp align=\"center\"\u003e\u003ca href=\"#css-is-fun\"\u003e^^Back To Top^^\u003c/a\u003e\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdev-shetty%2Fcss-is-fun","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdev-shetty%2Fcss-is-fun","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdev-shetty%2Fcss-is-fun/lists"}