You-Dont-Need-image - GitLite

KO | EN

gitlite — search

#hacktoberfest #react #llm #golang #linux #docker #nodejs #windows #cli #vue #awesome-list #security #mcp #ios

You-Dont-Need-image

(★ 15)

CSS is powerful and most of the people are using images for the UI that can be generated with CSS

You-Dont-Need-image 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# You Don't Need Image or SVG

## What is you don't need Image?

CSS is powerful and can be used to make interesting UI elements for which most of the time people use Image for SVG files. In this repository we are curating those Advanced UIs' that are possible with CSS.

Note: Please, Feel free to add CSS Animations too.

Inspired by [You don't need JavaScript](https://github.com/you-dont-need/You-Dont-Need-JavaScript).

---

# Examples

### 1. CSS Heart

[<img src="images/heart.png" height="230" title="CSS Heart">](examples/heart.html)

**[⬆ back to top](#examples)**

### 2. CSS Smile

[<img src="images/smile.png" height="230" title="CSS Heart">](examples/smile.html)

**[⬆ back to top](#examples)**

### 3. CSS Star

[<img src="images/star.png" height="230" title="CSS Star">](examples/star.html)

**[⬆ back to top](#examples)**

### 4. CSS Eye Emoji

[<img src="images/eye-emoji.png" height="230" title="CSS eye EMoji">](examples/eyes.html)

### 5. CSS Rainbow

[<img src="images/rainbow.png" height="230" title="CSS Rainbow">](examples/rainbow.html)

**[⬆ back to top](#examples)**

### 5. CSS Panda

[<img src="images/panda.png" height="230" title="CSS eye EMoji">](examples/panda.html)

**[⬆ back to top](#examples)**

### 6. Mario

[<img src="images/mario.png" height="230" title="CSS eye EMoji">](examples/mario.html)

**[⬆ back to top](#examples)**

### 7. Snow

[<img src="images/snow.png" height="230" title="CSS eye EMoji">](examples/snow.html)

**[⬆ back to top](#examples)**

### 8. Penguin

[<img src="images/penguin.png" height="230" title="CSS eye EMoji">](examples/penguin.html)

**[⬆ back to top](#examples)**

### 9. Loading Bar(Animation)

[<img src="images/loading_bar.png" height="230" title="CSS Animation bar">](examples/Loading_bar/loading.html)

**[⬆ back to top](#examples)**

### 10. Infinity

[<img src="images/infinity.png" height="230" title="CSS infinity EMoji">](examples/infinity.html)

**[⬆ back to top](#examples)**

### 11. Cat

[<img src="images/cat.png" height="230" title="CSS Cat">](examples/cat.html)

**[⬆ back to top](#examples)**

### 12. Curved Arrow

[<img src="images/curvedarrow.png" height="230" title="CSS curved arrow EMoji">](examples/curvedarrow.html)

**[⬆ back to top](#examples)**

### 13. Instagram Logo

[<img src="images/iglogo.png" height="230" title="CSS curved arrow EMoji">](examples/iglogo.html)

**[⬆ back to top](#examples)**

---

# Contribution Guide

1. Clone this repository with the following command: `https://github.com/akshaykhale1992/You-Dont-Need-image.git`
2. Add your HTML File to the examples directory.
3. Add the screenshot to the images directory.
4. Add the link to your HTML (or you can add the codepen link) to the [examples](#examples) in the readme.md file.
5. Raise the PR.

---

# Contributors

<p><a href="https://github.com/akshaykhale1992/You-Dont-Need-image/graphs/contributors">
  <img src="https://contributors-img.web.app/image?repo=akshaykhale1992/You-Dont-Need-image" />
</a></p>