Welcome to 369-CSS-EFFECTS, an open-source repository featuring 369 helpful and simple CSS effects designed to assist beginners in learning web development and experimenting with their knowledge through practical projects. The primary goal of 369-CSS-EFFECTS is to deliver essential CSS and HTML concepts in an accessible way, serving as a learning platform for emerging web developers. This repository includes simple UIs and effects commonly used in websites.
369-CSS-EFFECTS aims to provide extensive CSS knowledge through simple concepts and code snippets. The objectives include:
- Helping web developers understand basic CSS concepts.
- Offering useful CSS code snippets for creating impressive effects.
- Introducing programmers to new concepts in CSS and HTML.
- Creating a self learning platform for growing web devs.
To make the most of 369-CSS-EFFECTS, you should have:
- Basic knowledge of HTML & CSS.
- A code editor for experimenting these CSS effects.
- Basic problem-solving skills for addressing any issues encountered during implementation.
Explore the CSS-EFFECTS folder to access various CSS effects. Navigate to the folder with the effect name you're interested in, examine the index.html & style.css files, and try to understand the code. Implement these effects in your web projects.
Run the following command to clone this Repository to your local machine
git clone https://github.com/Yuheshpandian/369-CSS-EFFECTS.gitThen change into the folder containing the effect you want to learn/experiment .
cd Gradient_Text_001/
| S.NO | EFFECT TITLE | EFFECT DESCRIPTION |
|---|---|---|
| 001 | Gradient Text | A text with a Moving Gradient as color |
| 002 | Glow Button | A button that glow on hovering |
| 003 | Gradient Background | A webpage with a moving Gradient as Background |
| 004 | Glass Effect | A Glossy Glass Morphism effect on div |
| 005 | Image Hover | An Effect that applies on hovering an image |
| 006 | Image Gallery | A simple Image Gallery with transitions |
| 007 | Image Caption | A caption of image that is visible when image is hovered |
| 008 | Smooth Scroll | Scroll transition on webpage |
| 009 | Text Glow | Text glows when it is hovered |
| 010 | Image Float | Floating effect of image on hovering |
| 011 | Loading Spinner | Loading spinner for a website |
| 012 | Duolingo Style Button | A button inspired from Duolingo's UI |
| 013 | Floating Navbar | A navbar that is floating on top of all content |
| 014 | Toggle Button | A basic accessibile toggle button for you sites |
| 015 | Link Hover | A simple link hover effect |
| 016 | Animated Image Gallery | A simple animated imagee gallery for your images |
The name "369" is inspired by the theories of the underrated inventor/engineer, Nikola Tesla. His theory on the number 369 is fascinating, making it a personal favorite and the inspiration behind the name of this repository
This open-source project is licensed under the MIT License - see the LICENSE file for details.
If you want to contribute, clone this repository, make your changes, and submit a pull request. Follow the guidelines in CONTRIBUTING.md. Don't forget to give this repository a ⭐ if you find it useful.
Made with ❤️ by Yuhesh.