↓Skip to main content
Dev Blog Dev Blog
  1. All Posts/

Code-Magic

Tools TypeScript

Code-Magic

Code Magic is a website where you can get simple CSS tricks to make your application elegant with just few clicks.

🧙‍♀️ Magic options available for you:

  • Pic Text – Convert images to CSS art. Just upload and get CSS art with just one click.
  • Gradient Text – Dual color gradient for your texts.
  • Gradient Border – Get dual color gradient with desired radius.
  • Gradient Background – Make your backgrounds stand out by applying gradient colors.
  • Animations
    • Select one of the below options

      Skew 

          <p>
      Fade
    </p>
    
    <p>
      Spin
    </p>
  </li>
  
  <li>
    Set duration and speed for the animations
  </li>
  <li>
    And boom
  </li>
</ul>
    • Box Shadow – Cast a shadow on your element.
    • Border Radius – Get desired border radius for your element.
    • Text Shadow – Create a cool shadow for your text.
    • Input Range – Style your range input type elements easily and quickly

    ⚒️ Languages / Tools


    HTML


    CSS


    TypeScript

    🧑🏾‍💻 Demo

    Check out the website: Code Magic

    👇🏽 Prerequisites

    Before installation, please make sure you have already installed the following tools:

    👌🏾 What you have to do to contribute

    🛠️ Installation Steps

    1. Fork the project. Click on the icon in the top right to get started
    2. Clone the project, you can use the following command: 
    git clone https://github.com/<your-github-username>/Code-Magic
    1. Navigate to the project directory 
    cd Code-Magic
    1. Install dependencies with npm install 
    npm install
    npm install -g commitizen
    1. Run the project 
    npm run dev

    🥂 After making a change

    1. Create a new branch 
    git checkout -b YourBranchName
    1. Add it to staging area

    NOTE: don’t commit the package.json

    git add <path to the file you worked on>
    1. Commit your changes with 
    git cz
    1. Push your changes 
    git push

    👨‍👩‍👦 Community

    Don’t forget to join the discord community – Join us

    👩🏽‍💻 Contributing

    • Contributions make the open source community such an amazing place to learn, inspire, and create.
    • Any contributions you make are greatly appreciated.
    • Check out our contribution guidelines for more information.

    🛡️ License

    Code-Magic is licensed under the MIT License – see the LICENSE file for details.

    💪🏽 Thanks to all Contributors

    Thanks a lot for spending your time helping Code-Magic grow. Thanks a lot! Keep rocking🍻

    🙏🏽 Support

    This project needs a star️ from you. Don’t forget to leave a star✨



↑