Awesome
SingleDivProject
☝️ One
<div>. Many possibilities.
What is this?
This project focuses on exploring all the possibilities that can be done with a single <div> element using CSS only.
Why?
- Great way to explore CSS properties.
- Restrictions forces you to learn new properties and different ways to do particular styling.
- Because we can.
How to contribute?
Please go through the Contributions guidelines before sending a pull request.
Reddit threads
- What all can you do with a single
<div>element using pure CSS? Check this out! on /r/programming/ - One
<div>. Many possibilities. on /r/web_design/ - One
<div>. Many possibilities. on /r/coolgithubprojects/
Demos
Designs
| Project Name | Your Name / Github Handle | Demo/Gif |
|---|---|---|
| Battery | manrajgrover | <img width="400" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Battery.gif" /> |
| Hamburger Menu | manrajgrover | <img width="400" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Hamburger.png" /> |
| Magnifying Glass | kamito98 | <img width="400" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Magnifying Glass.png" /> |
| New Instagram Logo | manrajgrover | <img width="400" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/instagram.jpg" /> |
Loaders
| Project Name | Your Name / Github Handle | Demo/Gif |
|---|---|---|
| Awesome Dots | manrajgrover | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Awesome%20Dots.gif" /> |
| Bouncing Ball | mtacchino | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Bouncing%20Ball.gif" /> |
| Box Loader | AnubrataDS | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Box%20Loader.gif" /> |
| Clock | richardj | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Clock.gif" /> |
| Dot Loader | aaroniker | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Dot%20Loader.gif" /> |
| Fill up | manrajgrover | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Fill%20up.gif" /> |
| Iron Factory | NorthernTwig | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Iron%20Factory.gif" /> |
| Revolving Circles | dcrousso | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Revolving%20Circles.gif" /> |
| Revolving Dots | dcrousso | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Revolving%20Dots.gif" /> |
| Ripple Effect | manrajgrover | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Ripple%20Effect.gif" /> |
| Play Loader | manrajgrover | <img width="350" src="https://raw.githubusercontent.com/manrajgrover/SingleDivProject/master/Assets/Play%20Loader.gif" /> |
| Simple Spinner | manrajgrover | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Simple%20Spinner.gif" /> |
| Simple Text Loader | manrajgrover | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Simple%20Text%20Loader.gif" /> |
| Melting Ice Cream Loader | TaranVohra | <img width="350" src="https://github.com/taranvohra/SingleDivProject/blob/master/Assets/Melting%20Ice%20Cream.gif" /> |
Flags
| Project Name | Your Name / Github Handle | Demo |
|---|---|---|
| Armenia | manrajgrover | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Armenia.png" /> |
| Austria | manrajgrover | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Austria.png" /> |
| Bahamas | manrajgrover | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Bahamas.png" /> |
| Bangladesh | manrajgrover | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Bangladesh.png" /> |
| Belgium | AndyMathys | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Belgium.png" /> |
| Brazil | esganzerla | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Brazil.png" /> |
| Bulgaria | manrajgrover | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Bulgaria.png" /> |
| Chile | adavis46 | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/chile.PNG" /> |
| Canada | Scott Kaye | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Canada.png" /> |
| Cameroon | 1forh | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Cameroon.png" /> |
| Colombia | DHernandex | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Colombia.png" /> |
| Czech Republic | fadilf | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/CzechRepublic.png" /> |
| Denmark | jacksarick | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Denmark.png" /> |
| England | TheWebartist | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/England.png" /> |
| Finland | jacksarick | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Finland.png" /> |
| France | manrajgrover | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/France.png" /> |
| Germany | manrajgrover | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Germany.png" /> |
| Greece | jdhoek | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Greece.png" /> |
| Hungary | jabbalaci | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Hungary.png" /> |
| India | fadilf | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/India.png" /> |
| Indonesia | karuna | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Indonesia.png" /> |
| Ireland | skeevey | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Ireland.png" /> |
| Israel | hillai | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Israel.png" /> |
| Italy | manrajgrover | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Italy.png" /> |
| Ivory Coast | skeevey | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/IvoryCoast.png" /> |
| Japan | manrajgrover | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Japan.png" /> |
| Laos | jamcgrath | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Laos.png" /> |
| Latvia | vasiljevs | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Latvia.png" /> |
| Lithuania | fosron | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Lithuania.png" /> |
| Nigeria | skeevey | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Nigeria.png" /> |
| Pakistan | ObaidAshraf | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Pakistan.png" /> |
| Poland | mschweichler | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Poland.png" /> |
| Puerto Rico | aallfredo and jorluiseptor |  |
| Russia | ad222kr | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Russia.png" /> |
| Senegal | Death259 | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Senegal.png" /> |
| South Africa | DHernandex | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/South%20Africa.png" /> |
| Sierra Leone | ts96 | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/SierraLeone.png" /> |
| Suriname | adavis46 | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Suriname.png" /> |
| Sweden | jacksarick | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Sweden.png" /> |
| Switzerland | thijswerrij | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Switzerland.png" /> |
| Syria | iSWORD | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Syria.png" /> |
| Taiwan | amowu | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Taiwan.png" /> |
| Texas | domspad | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Texas.png" /> |
| Thailand | jamcgrath | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Thailand.png" /> |
| The Netherlands | jdhoek | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Netherlands.png" /> |
| Turkey | mehmetuken | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Turkey.png" /> |
| United Kingdom | jdhoek | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/UK.png" /> |
| United States of America | jdhoek | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/USA.png" /> |
| Yemen | Death259 | <img width="350" src="https://github.com/manrajgrover/SingleDivProject/blob/master/Assets/Yemen.png" /> |
Tools
| Project Name | Your Name / Github Handle | Demo/Gif |
|---|---|---|
| Box Breathing | gnclmorais | <img width="350" src="https://raw.githubusercontent.com/manrajgrover/SingleDivProject/master/Assets/BoxBreathing.gif" /> |