https://github.com/ethern-myth/jelly-bean-css-art

This project showcases a simple yet delightful piece of art created purely with HTML and CSS: a colorful and glossy jelly bean that appears to float gently
https://github.com/ethern-myth/jelly-bean-css-art

css html

Last synced: 20 days ago
JSON representation

This project showcases a simple yet delightful piece of art created purely with HTML and CSS: a colorful and glossy jelly bean that appears to float gently

• Host: GitHub
• URL: https://github.com/ethern-myth/jelly-bean-css-art
• Owner: Ethern-Myth
• License: mit
• Created: 2024-03-20T19:26:03.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-03-20T19:30:18.000Z (9 months ago)
• Last Synced: 2024-12-02T09:05:49.525Z (21 days ago)
• Topics: css, html
• Language: HTML
• Homepage: https://ethern-myth.github.io/jelly-bean-css-art/
• Size: 11.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Jelly Bean CSS Art

This project showcases a simple yet delightful piece of art created purely with HTML and CSS: a colorful and glossy jelly bean that appears to float gently. This CSS art piece is a great example of how basic shapes and gradients can be used to create visually appealing designs with depth and animation.

![Jelly Bean CSS Art](screenshots/jelly-css-art.png)  

## Overview

The Jelly Bean CSS Art is designed to demonstrate the power of CSS properties, including `border-radius`, gradients (`radial-gradient`), and simple keyframe animations. It's a fun and engaging way to practice CSS skills, focusing on creating shapes and adding lifelike characteristics such as glossiness and movement.

## Features

- **Shape and Color**: The jelly bean has a classic, elongated shape with a vibrant color that can be easily customized.

- **Gloss Effect**: A subtle shine effect is achieved through the use of a radial gradient, giving the jelly bean a glossy, realistic look.

- **Floating Animation**: A gentle floating effect is created with a simple CSS animation, adding dynamism to the art piece.

## How It's Made

### The HTML Structure

The HTML structure is straightforward, consisting of a `div` container for the jelly bean and another `div` inside it for the shine effect.

```html



    




```


### CSS Styling

The jelly bean and its shine are styled using CSS. The key aspects include the use of `border-radius` to create the rounded shape of the jelly bean and the jelly bean's shine. A `radial-gradient` is used for the shine to mimic light reflecting off a glossy surface. The entire jelly bean is animated to float gently using `@keyframes`.

## Conclusion

This Jelly Bean CSS Art project is a playful way to explore CSS capabilities. It serves as a reminder that with creativity and a deep understanding of CSS properties, you can bring almost any idea to life in the browser without the need for images or complex JavaScript.

## Creator

Designed by [Ethern Myth](https://github.com/Ethern-Myth)