Illusion Forge

Challenge Description

Illusion Forge challenges you to create mesmerizing illusions using CSS animations and designs. Explore the art of crafting optical illusions and defy traditional perceptions with creative CSS techniques.

Table of Contents

• Introduction
• Purpose
• Features
• Pre-Requisites
• File Structure
• Tools and Technologies
• Preview
• Contributing
• Author

Introduction

The Illusion Forge challenge invites CSS enthusiasts to push the boundaries of visual perception by creating illusions using CSS properties and animations. Dive into the world of impossible objects and optical tricks, all achievable through creative coding.

Purpose

The purpose of this challenge is to enhance your CSS skills by experimenting with complex designs and animations. By mastering illusionary effects, you'll gain a deeper understanding of CSS capabilities and create visually captivating web elements.

Features

• Create various optical illusions using CSS.
• Explore animations and transitions to enhance illusions.
• Experiment with gradients, transforms, and pseudo-elements for unique effects.

Pre-Requisites

• Basic understanding of HTML and CSS.
• Familiarity with CSS animations and transformations.
• Code editor (e.g., VS Code, Sublime Text).

File Structure

Day-17-Illusion-Forge/
│
├── index.html        # Main HTML file
├── styles.css        # CSS styles for Illusion Forge

Tools and Technologies

• GitHub Repository: Illusion Forge
• Web Browser: Chrome, Firefox, Safari, etc.

Preview

CodePen: Live Demo

Contributing

Contributions are welcome! Follow these steps to contribute to Illusion Forge:

1. Fork the Repository: Start by forking the GitHub repository to your own GitHub account. This creates a copy of the repository under your account.
2. Clone the Repository: Clone the forked repository to your local machine using Git.

git clone https://github.com/your-username/Illusion-Forge.git
    

3. Create a Branch: Create a new branch for your changes.

git checkout -b feature-new-illusion
    

4. Make Changes: Make your desired changes to the codebase.
5. Test Your Changes: Test your changes locally to ensure they work as expected.
6. Commit and Push: Commit your changes and push them to your forked repository.

git add .
git commit -m "Add new CSS illusion effect"
git push origin feature-new-illusion
    

7. Submit a Pull Request: Go to the GitHub repository and create a pull request with a detailed description of your changes.
8. Review and Collaborate: Collaborate with maintainers and contributors to review and refine your pull request.

Author

Created by Yashi Singh