https://github.com/manrajgrover/singledivproject

☝️One <div>. Many possibilities.
https://github.com/manrajgrover/singledivproject
css div drawing html single-div
Last synced: 26 days ago
JSON representation
☝️One <div>. Many possibilities.
Host: GitHub
URL: https://github.com/manrajgrover/singledivproject
Owner: manrajgrover
License: mit
Created: 2016-03-20T14:34:26.000Z (about 9 years ago)
Default Branch: master
Last Pushed: 2021-07-19T21:33:46.000Z (almost 4 years ago)
Last Synced: 2025-04-08T08:17:25.645Z (26 days ago)
Topics: css, div, drawing, html, single-div
Language: HTML
Homepage:
Size: 3.84 MB
Stars: 1,595
Watchers: 35
Forks: 104
Open Issues: 22
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project

README

        # SingleDivProject

![Single Div](https://img.shields.io/badge/Single%20Div-Yes-brightgreen.svg) ![CSS](https://img.shields.io/badge/CSS-Yes-brightgreen.svg)

> ☝️ One `
`. Many possibilities.

## What is this?

This project focuses on exploring all the possibilities that can be done with a single `
` element using CSS only.

## Why?

1. Great way to explore CSS properties.

2. Restrictions forces you to learn new properties and different ways to do particular styling.

3. Because we can.

## How to contribute?

Please go through the [Contributions](https://github.com/manrajgrover/SingleDivProject/blob/master/.github/CONTRIBUTING.md) guidelines before sending a pull request.

# Reddit threads

1. [What all can you do with a single `
` element using pure CSS? Check this out!](https://www.reddit.com/r/programming/comments/4oyd9w/what_all_can_you_do_with_a_single_div_element/) on [/r/programming/](https://www.reddit.com/r/programming/)

2. [One ``. Many possibilities.](https://www.reddit.com/r/web_design/comments/4otxnk/one_div_many_possibilities/) on [/r/web_design/](https://www.reddit.com/r/web_design/)

3. [One ``. Many possibilities.](https://www.reddit.com/r/coolgithubprojects/comments/4oy7y1/one_div_many_possibilities/) on [/r/coolgithubprojects/](https://www.reddit.com/r/coolgithubprojects/)

## Demos

### Designs

| Project Name | Your Name / Github Handle | Demo/Gif |

| :---: | :---: | :---: |

| [Battery](https://github.com/manrajgrover/SingleDivProject/blob/master/Designs/Battery.html) | [manrajgrover](https://github.com/manrajgrover) |  |

| [Hamburger Menu](https://github.com/manrajgrover/SingleDivProject/blob/master/Designs/Hamburger.html) | [manrajgrover](https://github.com/manrajgrover) |  |

| [Magnifying Glass](https://github.com/manrajgrover/SingleDivProject/blob/master/Designs/Magnifying%20Glass.html)  | [kamito98](https://github.com/kamito98) |  |

| [New Instagram Logo](https://github.com/manrajgrover/SingleDivProject/blob/master/Designs/Instagram%20New%20Logo.html) | [manrajgrover](https://github.com/manrajgrover) |  |

### Loaders

| Project Name | Your Name / Github Handle | Demo/Gif |

| :---: | :---: | :---: |

| [Awesome Dots](https://github.com/manrajgrover/SingleDivProject/blob/master/Loaders/Awesome%20Dots.html) |  [manrajgrover](https://github.com/manrajgrover) |  |

| [Bouncing Ball](https://github.com/manrajgrover/SingleDivProject/blob/master/Loaders/Bouncing%20Ball.html) |  [mtacchino](https://github.com/mtacchino) |  |

| [Box Loader](https://github.com/manrajgrover/SingleDivProject/blob/master/Loaders/Box%20Loader.html) |  [AnubrataDS](https://github.com/anubratads) |  |

| [Clock](https://github.com/manrajgrover/SingleDivProject/blob/master/Loaders/Clock.html) |  [richardj](https://github.com/richardj) |  |

| [Dot Loader](https://github.com/manrajgrover/SingleDivProject/blob/master/Loaders/Dot%20Loader.html) |  [aaroniker](https://github.com/aaroniker) |  |

| [Fill up](https://github.com/manrajgrover/SingleDivProject/blob/master/Loaders/Fill%20up.html) |  [manrajgrover](https://github.com/manrajgrover) |  |

| [Iron Factory](https://github.com/manrajgrover/SingleDivProject/blob/master/Loaders/Iron%20Factory.html) | [NorthernTwig](https://github.com/NorthernTwig) |  |

| [Revolving Circles](https://github.com/manrajgrover/SingleDivProject/blob/master/Loaders/Revolving%20Circles.html) |  [dcrousso](https://github.com/dcrousso) |  |

| [Revolving Dots](https://github.com/manrajgrover/SingleDivProject/blob/master/Loaders/Revolving%20Dots.html) |  [dcrousso](https://github.com/dcrousso) |  |

| [Ripple Effect](https://github.com/manrajgrover/SingleDivProject/blob/master/Loaders/Ripple%20Effect.html) |  [manrajgrover](https://github.com/manrajgrover) |  |

| [Play Loader](https://github.com/manrajgrover/SingleDivProject/blob/master/Loaders/Play%20Loader.html) | [manrajgrover](https://github.com/manrajgrover) |  |

| [Simple Spinner](https://github.com/manrajgrover/SingleDivProject/blob/master/Loaders/Simple%20Spinner.html) |  [manrajgrover](https://github.com/manrajgrover) |  |

| [Simple Text Loader](https://github.com/manrajgrover/SingleDivProject/blob/master/Loaders/Simple%20Text%20Loader.html) |  [manrajgrover](https://github.com/manrajgrover) |  |

| [Melting Ice Cream Loader](https://github.com/taranvohra/SingleDivProject/blob/master/Loaders/Melting%20Ice%20Cream.html) |  [TaranVohra](https://github.com/taranvohra) |  |

### Flags

| Project Name | Your Name / Github Handle | Demo |

| :---: | :---: | :---: |

| [Armenia](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Armenia.html) | [manrajgrover](https://github.com/manrajgrover) |  |

| [Austria](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Austria.html) | [manrajgrover](https://github.com/manrajgrover) |  |

| [Bahamas](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Bahamas.html) | [manrajgrover](https://github.com/manrajgrover) |  |

| [Bangladesh](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Bangladesh.html) | [manrajgrover](https://github.com/manrajgrover) |  |

| [Belgium](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Belgium.html) | [AndyMathys](https://github.com/AndyMathys) |  |

| [Brazil](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Brazil.html) | [esganzerla](https://github.com/esganzerla) |  |

| [Bulgaria](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Bulgaria.html) | [manrajgrover](https://github.com/manrajgrover) |  |

| [Chile](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/chile.html) | [adavis46](https://github.com/adavis46) |  |

| [Canada](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Canada.html) | [Scott Kaye](https://github.com/ScottKaye) |  |

| [Cameroon](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Cameroon.html) | [1forh](https://github.com/1forh) |  |

| [Colombia](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Colombia.html) | [DHernandex](https://github.com/dhernandex) |  |

| [Czech Republic](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/CzechRepublic.html) | [fadilf](https://github.com/fadilf) |  |

| [Denmark](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Denmark.html) | [jacksarick](https://github.com/jacksarick) |  |

| [England](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/England.html) | [TheWebartist](https://github.com/TheWebartist) |  |

| [Finland](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Finland.html) | [jacksarick](https://github.com/jacksarick) |  |

| [France](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/France.html) | [manrajgrover](https://github.com/manrajgrover) |  |

| [Germany](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Germany.html) | [manrajgrover](https://github.com/manrajgrover) |  |

| [Greece](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Greece.html) | [jdhoek](https://github.com/jdhoek) |  |

| [Hungary](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Hungary.html) | [jabbalaci](https://github.com/jabbalaci) |  |

| [India](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/India.html) | [fadilf](https://github.com/fadilf) |  |

| [Indonesia](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Indonesia.html) | [karuna](https://github.com/karuna) |  |

| [Ireland](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Ireland.html) | [skeevey](https://github.com/skeevey) |  |

| [Israel](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Israel.html) | [hillai](https://github.com/hillai) |  |

| [Italy](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Italy.html) | [manrajgrover](https://github.com/manrajgrover) |  |

| [Ivory Coast](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/IvoryCoast.html) | [skeevey](https://github.com/skeevey) |  |

| [Japan](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Japan.html) | [manrajgrover](https://github.com/manrajgrover) |  |

| [Laos](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Laos.html) | [jamcgrath](https://github.com/jamcgrath) |  |

| [Latvia](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Latvia.html) | [vasiljevs](https://github.com/vasiljevs) |  | 

| [Lithuania](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Lithuania.html) | [fosron](https://github.com/fosron) |  |

| [Nigeria](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Nigeria.html) | [skeevey](https://github.com/skeevey) |  |

| [Pakistan](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/pakistan.html) | [ObaidAshraf](https://github.com/ObaidAshraf) |  |

| [Poland](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Poland.html) | [mschweichler](https://github.com/mschweichler) |  |

| [Puerto Rico](Flags/PuertoRico.html) | [aallfredo](https://github.com/aallfredo) and [jorluiseptor](https://github.com/jorluiseptor) | ![PuertoRico](Assets/PuertoRico.png) |

| [Russia](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Russia.html) | [ad222kr](https://github.com/ad222kr) |  |

| [Senegal](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Senegal.html) | [Death259](https://github.com/Death259) |  |

| [South Africa](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/South%20Africa.html) | [DHernandex](https://github.com/dhernandex) |  |

| [Sierra Leone](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/SierraLeone.html) | [ts96](https://github.com/ts96) |  |

| [Suriname](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Suriname.html) | [adavis46](https://github.com/adavis46) |  |

| [Sweden](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Sweden.html) | [jacksarick](https://github.com/jacksarick) |  |

| [Switzerland](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Switzerland.html) | [thijswerrij](https://github.com/thijswerrij) |  |

| [Syria](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Syria.html) | [iSWORD](https://github.com/iSWORD) |  |

| [Taiwan](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Taiwan.html) | [amowu](https://github.com/amowu) |  |

| [Texas](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Texas.html) | [domspad](https://github.com/domspad) |  |

| [Thailand](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Thailand.html) | [jamcgrath](https://github.com/jamcgrath) |  |

| [The Netherlands](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Netherlands.html) | [jdhoek](https://github.com/jdhoek) |  |

| [Turkey](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Turkey.html) | [mehmetuken](https://github.com/mehmetuken) |  |

| [United Kingdom](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/UK.html) | [jdhoek](https://github.com/jdhoek) |  |

| [United States of America](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/USA.html) | [jdhoek](https://github.com/jdhoek) |  |

| [Yemen](https://github.com/manrajgrover/SingleDivProject/blob/master/Flags/Yemen.html) | [Death259](https://github.com/Death259) |  |

### Tools

| Project Name | Your Name / Github Handle | Demo/Gif |

| :---: | :---: | :---: |

| [Box Breathing](https://github.com/manrajgrover/SingleDivProject/blob/master/Tools/BoxBreathing.html) |  [gnclmorais](https://github.com/gnclmorais) |  |

## License

[MIT](https://github.com/manrajgrover/SingleDivProject/blob/master/LICENSE) © [Manraj Singh](https://github.com/manrajgrover)
ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/manrajgrover/singledivproject

Awesome Lists containing this project

README
