Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/silent-watcher/magic-css

🧙‍♂️The Magic CSS is an intuitive web application that allows you to generate CSS values for commonly used properties. Leave a star before you leave ⭐
https://github.com/silent-watcher/magic-css

code-generator css-styling css-tool css-utilites hacktoberfest open-source web-design web-development-tools

Last synced: 14 days ago
JSON representation

🧙‍♂️The Magic CSS is an intuitive web application that allows you to generate CSS values for commonly used properties. Leave a star before you leave ⭐

Host: GitHub
URL: https://github.com/silent-watcher/magic-css
Owner: Silent-Watcher
License: mit
Created: 2022-08-08T13:33:58.000Z (over 2 years ago)
Default Branch: master
Last Pushed: 2024-01-11T12:13:35.000Z (12 months ago)
Last Synced: 2024-12-03T00:07:03.337Z (20 days ago)
Topics: code-generator, css-styling, css-tool, css-utilites, hacktoberfest, open-source, web-design, web-development-tools
Language: JavaScript
Homepage: https://magic-css.netlify.app/
Size: 374 KB
Stars: 33
Watchers: 2
Forks: 1
Open Issues: 2
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: FUNDING.yml
- License: license
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
- Security: SECURITY.md

Awesome Lists containing this project

README

![magic css](https://github.com/Silent-Watcher/magic-Css/blob/master/public/img/banner.png)

# Magic CSS 🧙‍♂️

The Magic CSS is an intuitive web application that allows you to generate CSS values for commonly used properties such as box-shadow, text-shadow, gradient, and border radius.
With this app, you can easily create custom styles and enhance the visual appeal of your web projects without the need for manual calculations or complex CSS coding.

[![Star this project](https://img.shields.io/badge/-⭐%20Star%20this%20project-yellow?style=for-the-badge)](https://github.com/Silent-Watcher/cli-word-guessing-game)

## Table of Contents

- [Features](https://github.com/Silent-Watcher/magic-Css#features)
- [demo](https://github.com/Silent-Watcher/magic-Css#demo)
- [Prerequisites](https://github.com/Silent-Watcher/magic-Css#Prerequisites)
- [Installation](https://github.com/Silent-Watcher/magic-Css#Installation)
- [usage](https://github.com/Silent-Watcher/magic-Css#usage)
- [Acknowledgements](https://github.com/Silent-Watcher/magic-Css#Acknowledgements)
- [Contributing](https://github.com/Silent-Watcher/magic-Css#Contributing)
- [Contact](https://github.com/Silent-Watcher/magic-Css#Contact)
- [License](https://github.com/Silent-Watcher/magic-Css#License)

## Features

- **Box-shadow Generation** : Generate visually appealing box-shadow effects by specifying values for parameters such as color, blur radius, spread, and position. Experiment with different combinations to achieve the desired shadow effect for your elements.
- **Text-shadow Generation** : Create eye-catching text-shadow effects by selecting values for color, blur radius, and position. Instantly preview the generated text-shadow and fine-tune it until it perfectly complements your website's design.
- **Gradient Generation** : Design stunning gradients by selecting colors and configuring the direction and type of gradient. Whether you need linear or radial gradients, this app offers a user-friendly interface to create gradients effortlessly.
- **Border Radius Generation** : Customize the border radius of your elements with ease. Specify values for individual corners or apply the same radius to all corners. The app provides a visual representation of the generated border radius for quick visual feedback.

## Demo

Experience the convenience and power of the CSS Value Generator by visiting the demo page and start creating stunning CSS effects effortlessly.

You can try out the Magic CSS by following this [demo link.](https://magic-css.netlify.app/)

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/Silent-Watcher/magic-Css)

## Prerequisites

In order to run this project, you will need to have the following installed on your computer:
- nodejs
- yarn | npm

## Installation

To install the application, follow these steps:

1. Clone the repository to your local machine:

```bash
git clone https://github.com/Silent-Watcher/magic-Css
```

2. Navigate to the project directory in your terminal.

```bash
cd magic-Css
```
3. Run `yarn` to install the necessary packages.

```bash
yarn
```

## usage

To start the application, run yarn dev. This will start the application on http://localhost:5173.

```bash
yarn dev
```

1. Choose the desired CSS property from the navigation menu: box-shadow, text-shadow, gradient, or border radius.

2. Adjust the sliders, input fields, or color pickers to set the values for the respective property. The app provides real-time previews to help you visualize the changes.

3. Copy the generated CSS code with a single click and use it in your project.

4. For gradients, you can also copy the generated gradient code as a CSS background property, making it easy to apply the gradient to any element in your HTML.

5. Experiment with different values and variations until you achieve the desired effect.

## Acknowledgements

- [The build tool and development server.](https://vitejs.dev/)
- [The package manager used in the project.](https://yarnpkg.com/)

## Technologies

## Why Use CSS Value Generator?

- **Saves Time and Effort**: Instead of manually calculating CSS values or searching for code snippets online, the CSS Value Generator automates the process, saving you valuable time and effort.

- **Enhances Visual Appeal**: By providing an easy way to generate CSS values for commonly used properties, this app helps you create visually appealing designs that stand out.

- **User-Friendly Interface**: The app features an intuitive and user-friendly interface, making it accessible to both beginners and experienced developers.

- **Cross-Browser Compatibility**: The generated CSS values are compatible with major web browsers, ensuring consistent rendering across different platforms.

- **Open Source**: The app is open source, allowing you to explore the codebase, contribute improvements, or customize it to suit your specific needs.

## Contributing

Contributions to this project are welcome.
If you encounter any issues or have suggestions for improvement, please open an issue on the GitHub repository.

Before contributing, please review the contribution guidelines.

## Contact

For additional information or inquiries, you can reach out to the project maintainer:

- Name: Silent-Watcher
- Email: [email protected]

Feel free to contact the maintainer for any questions or feedback regarding the project.

## License 🔐

[MIT](https://choosealicense.com/licenses/mit/)

This project is licensed under the MIT License. You are free to modify, distribute, and use the code for personal and commercial purposes. See the LICENSE file for details.

## Sponsor ❤
If you like this project, please give it a star ⭐ and/or consider buying me a coffee(s). Every donation is appreciated.