Giter Club home page Giter Club logo

amazing-css-effects's Introduction

Amazing-Css-Effects

Some Astonishing CSS-Effects✨

HacktoberFest'21

This project was part of the following Open Source Programs

Gssoc'2022

Devincept

HacktoberFest'21

Demo 🎥

Website for this repository : https://amazing-css-effects.netlify.app/

Must Check Repos :


💻 Tech Stack

Front-End:

HTML5 CSS3 JavaScript BootStrap

🚀 Quick Start :

Before starting kindly read the Code of Conduct

Contributions :

Check out our Contributing Guildlines

Step 1: Forking the repository :

To work on an open-source project, you will primarily need to make your copy of the repository. To do this, you should first fork the repository and then clone it so that you have a local working copy.

Get your own Fork/Copy of repository by clicking Fork button at the upper right corner.

Step 2: Clone the Forked Repository

After the repository is forked, you can now clone it so that you have a copy of the codebase on your local Computer.

To make your local copy of the repository follow the steps:

  • Open the Command Prompt
  • Type this command:
$ git clone https://github.com/<your-github-username>/Amazing-Css-Effects

Step 3: Creating a new branch (IMP)

This is one of the most important step that you should follow while contributing to an Open Source project . A branch helps to manage the workflow, isolate your code and avoids creating a mess. To create a new branch:

$ git branch <name_of_branch>
$ git checkout -b <name_of_branch>

Keep your cloned repo up to date by pulling from upstream (this will also avoid any merge conflicts while committing new changes)

git pull origin main

Step 5: Contribute

Make relevant changes according to the issue that you were assigned on. Contribute in any way you feel like :)

Step 6: Commiting and Pushing

Once you have modified an existing file or added a new file to the project, you can add it to your local repository, which you can do with the git add command.

git add .

With our file staged, we’ll want to record the changes that we made to the repository with the git commit command.

The commit message is an important aspect of your code contribution; it helps the other contributors to fully understand the change you have made, why you made it, and how significant it is.

git commit -m "useful commit message"

At this point you can use the git push command to push the changes to the current branch of your forked repository:

git push origin <branch-name>

Step 7: Create Pull Request

Now, you are ready to make a pull request to the original repository.

You should navigate to your forked repository, and press the "Compare & pull request" button on the page.

GitHub will alert you that you can merge the two branches because there is no competing code. You should add in a title, a comment, and then press the “Create pull request” button.


CONTRIBUTING A NEW TEMPLATE?

Please adhere to these guidelines

  1. Create a folder with the name of your css effect template

  2. Start building inside your folder with an entry file called index.html and after building, attach an image named "preview.png" within the folder root which represents the preview image of your template

  3. Go into the style_link.json file and add an object corresponding to your project in the following format:

    {
  
      "name": "Name-of-folder",
      "link": "Name-of-folder/index.html"
  
    },

Important to note:

The name key of the json object must match the exact name of the folder The link key of the json object must match the exact name of the folder then append "/index.html"

For example: I create a folder called "Animated Text", my json object would be:

    {
  
      "name": "Animated Text",  (not "Animated-Text" or "AnimatedText")
      "link": "Animated Text/index.html"  (not "AnimatedText/index.html" or "Animated-Text/index.html")
  
    },


📌Till Then

Need Some Help in this Repo -> Web Development And Resources


Project Admins ❤️


Arpit Jain

✨ Contributors

Thanks goes to these Wonderful People 👨🏻‍💻: 🚀 Contributions of any kind are welcome!

📘  License

The Amazing CSS-effects is released under the terms of the MIT License.


Happy Coding 👨‍💻

💬Join Our CodeSmashers Community

Join - https://discord.gg/gtYUZQSjTt

show some ❤️  by giving the star to this repo

amazing-css-effects's People

Contributors

aaryahjolia avatar abh1sheksingh avatar adit0507 avatar aishwaryas15 avatar akshata-gunapache avatar anirban-1490 avatar ankitapuri avatar ankitsingh2001 avatar arpit456jain avatar avik-creator avatar codeaholic-shub avatar connectnitesh avatar dhruv-194 avatar dragonuncaged avatar geetika005 avatar gurjeetsinghvirdee avatar jay-2000 avatar jigar-sable avatar keerthanapravallika avatar kumar-ankit56 avatar naman-mahi avatar neha030 avatar photon149 avatar pushpakumari5117 avatar pushpit-j19 avatar rakesh9100 avatar siddhi-244 avatar skapsime avatar sulagna-dutta-roy avatar vidhibhatt01 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

amazing-css-effects's Issues

Glowing checkboxes

Issue Type:

[ ] Bug Report
[x] Feature Request
[ ] Documentaion

Describe the feature

  • Glowing checkboxes, which tell if the option has been turned on like in mobile phones notification bar, made with css and cool icons.

Possible solution

  • to use css, icons, and glow effect to create the on/off

Rainbow strips on button hover

Issue Type:

  • Bug Report
  • Feature Request
  • Documentaion

Possible solution

  • The feature is to add a Button that on hover fills the button with rainbow stripes. The stripes enter the button diagonally.

Screenshots

rainbow-button

Add logo in the index.html

Issue Type:

[ ] Bug Report
[x] Feature Request
[ ] Documentaion

Describe the bug

  • A clear and concise description of what the bug is.

Possible solution

  • Describe the solution you thought of.

Screenshots

  • If applicable, add screenshots to help explain your problem.

LOGO FOR PROJECT

Issue Type:

[ ] Bug Report
[x] Feature Request
[ ] Documentaion

We need one logo for the project that should be attractive and unique. I will not able to do this might be @ankitapuri or someone in designing can help in this

Rotating Card animation

Issue Type:

[ ] Bug Report
[x] Feature Request
[ ] Documentaion

Possible solution

Creates a two sided card which rotates on hover.

Screenshots

  • If applicable, add screenshots to help explain your problem.

Loading Animation

Issue Type:

  • Bug Report
  • Feature Request
  • Documentaion

Possible solution

  • The feature is to add a loading animation.

Screenshots

loading

Glassmorphic Signup page

I want to add glassmorphic sign-up under the DevIncept program. Can you please assign me this issue under DCP 21

Shruti Singh

Issue Type:

[ ] Bug Report
[ ] Feature Request
[ ] Documentaion

Describe the bug

  • A clear and concise description of what the bug is.

Possible solution

  • Describe the solution you thought of.

Screenshots

  • If applicable, add screenshots to help explain your problem.

Naveen kushwaha

Issue Type:

[ ] Bug Report
[ ] Feature Request
[ ] Documentaion

Describe the bug

  • A clear and concise description of what the bug is.

Possible solution

  • Describe the solution you thought of.

Screenshots

  • If applicable, add screenshots to help explain your problem.

Shruti Singh

Issue Type:

[ ] Bug Report
[ ] Feature Request
[ ] Documentaion

Describe the bug

  • A clear and concise description of what the bug is.

Possible solution

  • Describe the solution you thought of.

Screenshots

  • If applicable, add screenshots to help explain your problem.

testing

Issue Type:

[ ] Bug Report
[ ] Feature Request
[ ] Documentaion

Describe the bug

  • A clear and concise description of what the bug is.

Possible solution

  • Describe the solution you thought of.

Screenshots

  • If applicable, add screenshots to help explain your problem.

testing

Issue Type:

[ ] Bug Report
[ ] Feature Request
[ ] Documentaion

Describe the bug

  • A clear and concise description of what the bug is.

Possible solution

  • Describe the solution you thought of.

Screenshots

  • If applicable, add screenshots to help explain your problem.

Ripple Loader Effect


Title: Ripple Loader Effect
About: To create CSS with ripple loader effect
Name: Shiwansh Raj

Define You:

  • DevIncept Participant
  • Contributor

Describe the solution you'd like...
I want to create a CSS effect in which while loading it gives ripple effect .

Additional context
Please assign me this project under Devincept21

Create a github pages website for this repository

Issue Type:

[ ] Bug Report
[x] Feature Request
[ ] Documentaion

Describe the feature

Well I was thinking that a GitHub pages hosted website to show all the amazing CSS effects for this repository would be a great addition.

Steaming cup animation

Name: Ritika Chand

[x]DevIncept Participant
[x]Contributor

Describe the solution you'd like...
create a steaming cup animation using html and css

Additional context:
Please assign me this project under Devincept21

Himanshu Dubey

Issue Type:

[ ] Bug Report
[ ] Feature Request
[ ] Documentaion

Describe the bug

  • A clear and concise description of what the bug is.

Possible solution

  • Describe the solution you thought of.

Screenshots

  • If applicable, add screenshots to help explain your problem.

Testing

Issue Type:

[ ] Bug Report
[ ] Feature Request
[ ] Documentaion

Describe the bug

  • A clear and concise description of what the bug is.

Possible solution

  • Describe the solution you thought of.

Screenshots

  • If applicable, add screenshots to help explain your problem.

testing

Issue Type:

[ ] Bug Report
[ ] Feature Request
[ ] Documentaion

Describe the bug

  • A clear and concise description of what the bug is.

Possible solution

  • Describe the solution you thought of.

Screenshots

  • If applicable, add screenshots to help explain your problem.

Deepanjali Vyas

Issue Type:

[ ] Bug Report
[ ] Feature Request
[ ] Documentaion

Describe the bug

  • A clear and concise description of what the bug is.

Possible solution

  • Describe the solution you thought of.

Screenshots

  • If applicable, add screenshots to help explain your problem.

Bubble navbar animation in html,css,js

Issue Type:

[ ] Bug Report
[x] Feature Request
[ ] Documentaion

Describe the bug

  • It is a new feature.

Possible solution

  • I would like to add this project

Screenshots

  • If applicable, add screenshots to help explain your problem.

Bubble-Navbar

Glassmorphic Calculator

Issue Type:

[ ] Bug Report
[x] Feature Request
[ ] Documentaion

Describe the bug

  • I want to add glassmorphic calculator under the DevIncept program. Can you assign me this issue under DCP 21?

Make home page responsive specially navbar

Issue Type:

[ ] Bug Report
[ ] Feature Request
[ ] Documentaion

Describe the bug

  • A clear and concise description of what the bug is.

Possible solution

  • Describe the solution you thought of.

Screenshots

  • If applicable, add screenshots to help explain your problem.

Vishnu

Issue Type:

[ ] Bug Report
[ ] Feature Request
[ ] Documentaion

Describe the bug

  • A clear and concise description of what the bug is.

Possible solution

  • Describe the solution you thought of.

Screenshots

  • If applicable, add screenshots to help explain your problem.

Nitesh Rawat

Issue Type:

[ ] Bug Report
[ ] Feature Request
[ ] Documentaion

Describe the bug

  • A clear and concise description of what the bug is.

Possible solution

  • Describe the solution you thought of.

Screenshots

  • If applicable, add screenshots to help explain your problem.

Credit Card UI Design


Title: Credit Card UI Design
About: Creating a UI mockup of credit card using CSS
Name: Shiwansh Raj

Define You:

  • DevIncept Participant
  • Contributor

Describe the solution you'd like...

I want to create a mockup UI of Credit Card using HTML and CSS.

Additional context

Please Assign me this issue under Devincept 21

Wavy footer

Issue Type:

[ ] Bug Report
[x] Feature Request
[ ] Documentaion

Describe the feature

  • A footer designed with css which gives the effect of sea waves

Possible solution

  • use simple css and animations

Please assign me this issue under Devincept 21

testing

Issue Type:

[ ] Bug Report
[ ] Feature Request
[ ] Documentaion

Describe the bug

  • A clear and concise description of what the bug is.

Possible solution

  • Describe the solution you thought of.

Screenshots

  • If applicable, add screenshots to help explain your problem.

Configure bot to share the PR submission link

Issue Type:

Configure bot to share the PR submission link so that contributors can fill the form as soon as the PR gets merged .
Form link : https://forms.gle/uzEW46ujHTaEYt4b8
[ ] Bug Report
[ ] Feature Request
[ ] Documentaion

Describe the bug

  • A clear and concise description of what the bug is.

Possible solution

  • Describe the solution you thought of.

Screenshots

  • If applicable, add screenshots to help explain your problem.

Neomorphic login page

I want to add a neomorphic login page under the DevIncept program. Can you please assign me this issue under DCP 21

testing

Issue Type:

[ ] Bug Report
[ ] Feature Request
[ ] Documentaion

Describe the bug

  • A clear and concise description of what the bug is.

Possible solution

  • Describe the solution you thought of.

Screenshots

  • If applicable, add screenshots to help explain your problem.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.