Skip to content

Latest commit

 

History

History
88 lines (69 loc) · 3.59 KB

README.md

File metadata and controls

88 lines (69 loc) · 3.59 KB

NEUMORPHISM UI Generator

Overview

The NEUMORPHISM UI Generator is an interactive web tool that allows users to create and customize neomorphic user interface elements in real-time. This project provides a visual interface for designers and developers to experiment with neomorphic designs and generate the corresponding CSS code.

Features

  • Real-time preview of neomorphic elements
  • Customizable color picker with hex code input
  • Adjustable size, border radius, shadow distance, and intensity
  • Four shape options: flat, concave, convex, and pressed
  • Light direction control for shadow positioning
  • Custom shadow color options
  • Predefined color combinations for quick styling
  • Responsive design for various screen sizes
  • Copy-to-clipboard functionality for generated CSS code
  • Smooth animations and transitions for enhanced user experience

Technologies Used

  • HTML5
  • CSS3
  • Vanilla JavaScript (ES6+)

No external frameworks or libraries were used in the development of this project, making it lightweight and easily integrable into various web environments.

Setup and Installation

  1. Clone the repository or download the source files.
  2. Open the index.html file in a modern web browser.
  3. No additional setup or installation is required.

Usage

  1. Use the color picker or enter a hex code to choose the base color.
  2. Adjust the sliders to modify size, border radius, shadow distance, and intensity.
  3. Select a shape option (flat, concave, convex, or pressed).
  4. Choose a light direction to adjust shadow positioning.
  5. Optionally, select custom shadow colors or use predefined color combinations.
  6. The preview updates in real-time as you make changes.
  7. Copy the generated CSS code using the "Copy CSS" button.

Project Structure

  • index.html: The main HTML file containing the structure of the UI generator.
  • styles.css: Contains all the CSS styles for the project, including neomorphic designs.
  • script.js: The JavaScript file that handles all the interactive functionality and real-time updates.

Browser Compatibility

This project is compatible with modern web browsers that support ES6+ JavaScript features and current CSS standards. It has been tested on:

  • Google Chrome (latest version)
  • Mozilla Firefox (latest version)
  • Microsoft Edge (latest version)
  • Safari (latest version)

Performance

The NEUMORPHISM UI Generator is designed to be lightweight and performant. All calculations and updates are done client-side, ensuring quick response times and smooth interactions.

Customization and Extension

Developers can easily extend the functionality of this tool by:

  • Adding new shape options in the HTML and JavaScript files.
  • Implementing additional color schemes or design patterns.
  • Expanding the generated CSS output to include vendor prefixes or additional properties.

Contributing

Contributions to improve the NEUMORPHISM UI Generator are welcome. Please follow these steps:

  1. Fork the repository.
  2. Create a new branch for your feature.
  3. Commit your changes.
  4. Push to the branch.
  5. Create a new Pull Request.

License

This project is open-source and available under the MIT License.

Acknowledgments

  • Inspired by the NEUMORPHISM design trend in UI/UX.
  • Color manipulation algorithms adapted from various open-source projects.

Contact

Instagram: @patel_divyanshu_ LinkedIn: Divyanshu Patel GitHub: divyanshupatel17 Email: [email protected]

For any queries or suggestions, please open an issue in the GitHub repository.

We hope you enjoy using the NEUMORPHISM UI Generator for your design projects! Live : https://make-your-own-neumorphism.vercel.app/