Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dev-shetty/css-is-fun
CSS-Is-Fun is a collection of creative and fun CSS animations and effects to enhance your web projects.
https://github.com/dev-shetty/css-is-fun
beginner-friendly css for-beginners hacktoberfest html javascript projects-list ui ui-snippets
Last synced: about 16 hours ago
JSON representation
CSS-Is-Fun is a collection of creative and fun CSS animations and effects to enhance your web projects.
- Host: GitHub
- URL: https://github.com/dev-shetty/css-is-fun
- Owner: dev-shetty
- License: mit
- Created: 2022-12-13T13:19:22.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2023-10-27T14:27:45.000Z (about 1 year ago)
- Last Synced: 2023-11-21T04:26:40.244Z (almost 1 year ago)
- Topics: beginner-friendly, css, for-beginners, hacktoberfest, html, javascript, projects-list, ui, ui-snippets
- Language: HTML
- Homepage: https://css-is-fun.vercel.app
- Size: 1.61 MB
- Stars: 14
- Watchers: 1
- Forks: 18
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# CSS Is Fun
### Yes! You heard it right CSS is awesome.
That'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.
CSS-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.
# Purpose for Creating Css Is Fun
if 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!
Whether 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.
- [Installation](#installation)
- [Snippets](#snippets)
- [Contributing](#contributing)
- [License](#license)
## Installation
To use these CSS animations and effects in your Local System , simply download or clone this repository via using this Link :
```git
git clone https://github.com/Deveesh-Shetty/CSS-Is-Fun.git
```
## Table of Contents
- [Cart Item](https://codepen.io/deveesh_shetty_12/pen/rNKXvKm)
- [Social Login](https://codepen.io/pen/KKejzVy).
- [Counter using Closure](https://codepen.io/pen/vYVjLqx).
- [Accordion](https://codepen.io/pen/YzJLEbb).
- [3D Cube](https://codepen.io/pen/mdzKEQg).
- [Festival Lighting](https://codepen.io/pen/NWOzdvK).
- [Indian Flag](https://codepen.io/pen/xxyzqVa).
- [Image Carousel I](https://codepen.io/pen/gOBKRNV).
- [Image Carousel II](https://codepen.io/pen/bGmjbVo).
- [Color Wheel](https://codepen.io/pen/GRYXvKw).
- [Video Player](https://codepen.io/ahmedelmsery/pen/zYmmxNw).
- [Bar Chart](https://codepen.io/ahmedelmsery/pen/vYVQGLP).
- [Loading Page](https://codepen.io/ahmedelmsery/pen/zZVLMN).
- [Session Graph](https://codepen.io/ahmedelmsery/pen/qBQdZeJ).
- [Flipcard](https://codepen.io/VoiD_Z/pen/KKbBQxy).
- [Mouse Chaser](https://codepen.io/NilothpalPillai/pen/BavPrWm).
- [Helpline](https://codepen.io/Swathi-Singh/pen/dywjqoz).
- [Digital Clock](https://codepen.io/rohancs127/pen/dywgQey).
- [profile card](https://codepen.io/Raksha09/pen/ZEVVzwB).
## Snippets
| Project Name | CodePen Link | Preview | Source Code |
| --------------------- | ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
| Cart Item | [Go Live](https://codepen.io/deveesh_shetty_12/pen/rNKXvKm) | 
| [Code - Cart Item](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Cart%20Item) |
| Social Login | [Go Live](https://codepen.io/pen/KKejzVy) | 
| [Code - Social Login](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Social%20Login) |
| Counter using Closure | [Go Live](https://codepen.io/pen/vYVjLqx) | 
| [Code - Counter](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Counter) |
| Accordion | [Go Live](https://codepen.io/pen/YzJLEbb) | 
| [Code - Accordion](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Accordion) |
| 3D Cube | [Go Live](https://codepen.io/pen/mdzKEQg) | 
| [Code - 3D Cube](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/3D%20Cube) |
| Festival Lighting | [Go Live](https://codepen.io/pen/NWOzdvK) | 
| [Code - Festival Lighting](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Festival%20Lighting) |
| Indian Flag | [Go Live](https://codepen.io/pen/xxyzqVa) | 
| [Code - Indian Flag](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Indian%20Flag) |
| Image Carousel I | [Go Live](https://codepen.io/pen/gOBKRNV) | 
| [Code - Image Carousel I](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Carousel%20I) |
| Image Carousel II | [Go Live](https://codepen.io/pen/bGmjbVo) | 
| [Code - Image Carousel II](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Carousel%20II) |
| Color Wheel | [Go Live](https://codepen.io/pen/GRYXvKw) | 
| [Code - Color Wheel](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Color%20Wheel) |
| Video Player | [Go Live](https://codepen.io/ahmedelmsery/pen/zYmmxNw) | 
| [Code - Video Player](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Video%20Player) |
| Bar Chart | [Go Live](https://codepen.io/ahmedelmsery/pen/vYVQGLP) | 
| [Code - Bar Chart](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Chart/BarChart) |
| Loading Page | [Go Live](https://codepen.io/ahmedelmsery/pen/zZVLMN) | 
| [Code - Loading Page](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Loading%20Page) |
| Session Graph | [Go Live](https://codepen.io/ahmedelmsery/pen/qBQdZeJ) | 
| [Code - Session Graph](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Session%20Graph) |
| Flipcard | [Go Live](https://codepen.io/VoiD_Z/pen/KKbBQxy) | 
| [Code - FlipCard](https://github.com/MeetThakur/CSS-Is-Fun/tree/master/UI%20Snippets/FlipCard) |
| Mouse Chaser | [Go Live](https://codepen.io/NilothpalPillai/pen/BavPrWm) | 
| [Code - Mouse Chaser](https://github.com/Nilothpal-Pillai/CSS-Is-Fun/tree/Mouse-Chaser/UI%20Snippets/Mouse%20Chaser) |
| Helpline | [Go Live](https://codepen.io/Swathi-Singh/pen/dywjqoz) | 
| [Code - Helpline](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Helpline) |
| Digital Clock | [Go Live](https://codepen.io/rohancs127/pen/dywgQey) | 
| [Code - Digital Clock](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Digital%20Clock) |
| profile card | [Go Live](https://codepen.io/Raksha09/pen/ZEVVzwB) | 
| [Code - profilecard](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/UI%20Snippets/Helpline) |
## Contributing
We 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.
## License
This project is licensed under the MIT License.
Feel free to modify and adjust the content as needed to suit your project 🥳.