Text In Image

A responsive web application that allows users to dynamically create, preview, and download images with customizable styles, shapes, shadow effects, and formats. The tool is intuitive, modern, and perfect for generating styled image outputs.

Demo

Check out the Live Demo

Features

• Customizable Styles: Adjust background color, text color, size, and shapes.
• Dynamic Shapes: Supports rectangle, circle, and transparent shapes.
• Shadow Effects: Includes small, medium, large, and 3D shadow options.
• Shape Percentage: Modify the border-radius dynamically from 0% to 50%.
• Responsive Design: Fully optimized for desktops, tablets, and mobile devices.
• Downloadable Outputs: Supports PNG, JPEG, JPG, and ICO formats.

Technologies Used

• HTML5: Markup structure.
• CSS3: Styling and responsiveness (no Bootstrap dependency in the final version).
• JavaScript: Dynamic functionality for inputs and image generation.

How to Use

1. Enter a Letter: Input the text to display on the image.
2. Customize Colors: Choose background and text colors using the color pickers.
3. Set Dimensions: Define the width and height of the image.
4. Choose Shape: Select from rectangle, circle, or transparent options.
5. Add Shadow: Apply a shadow effect to the image.
6. Adjust Percentage: Set the border-radius percentage for rounded shapes.
7. Preview and Download: View the generated image and download it in the desired format.

Installation

1. Clone the repository:

   git clone https://github.com/Shaik-Nagur-Basha/Text-In-Image.git

2. Navigate to the project directory:

   cd Text-In-Image

3. Open the index.html file in your browser:

   open index.html

Folder Structure

Text-In-Image/
├── index.html      # Main HTML file
├── styles.css      # Contains all custom CSS
├── script.js       # Contains JavaScript logic
├── LICENSE         # Contains License Content
└── README.md       # Project documentation

Screenshots

License

This project is licensed under the MIT License.