SingleDivProject

August 23, 2018 · View on GitHub

Single Div CSS

☝️ 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?

  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 guidelines before sending a pull request.

Reddit threads

  1. What all can you do with a single <div> element using pure CSS? Check this out! on /r/programming/
  2. One <div>. Many possibilities. on /r/web_design/
  3. One <div>. Many possibilities. on /r/coolgithubprojects/

Demos

Designs

Project NameYour Name / Github HandleDemo/Gif
Batterymanrajgrover
Hamburger Menumanrajgrover
Magnifying Glasskamito98
New Instagram Logomanrajgrover

Loaders

Project NameYour Name / Github HandleDemo/Gif
Awesome Dotsmanrajgrover
Bouncing Ballmtacchino
Box LoaderAnubrataDS
Clockrichardj
Dot Loaderaaroniker
Fill upmanrajgrover
Iron FactoryNorthernTwig
Revolving Circlesdcrousso
Revolving Dotsdcrousso
Ripple Effectmanrajgrover
Play Loadermanrajgrover
Simple Spinnermanrajgrover
Simple Text Loadermanrajgrover
Melting Ice Cream LoaderTaranVohra

Flags

Project NameYour Name / Github HandleDemo
Armeniamanrajgrover
Austriamanrajgrover
Bahamasmanrajgrover
Bangladeshmanrajgrover
BelgiumAndyMathys
Brazilesganzerla
Bulgariamanrajgrover
Chileadavis46
CanadaScott Kaye
Cameroon1forh
ColombiaDHernandex
Czech Republicfadilf
Denmarkjacksarick
EnglandTheWebartist
Finlandjacksarick
Francemanrajgrover
Germanymanrajgrover
Greecejdhoek
Hungaryjabbalaci
Indiafadilf
Indonesiakaruna
Irelandskeevey
Israelhillai
Italymanrajgrover
Ivory Coastskeevey
Japanmanrajgrover
Laosjamcgrath
Latviavasiljevs
Lithuaniafosron
Nigeriaskeevey
PakistanObaidAshraf
Polandmschweichler
Puerto Ricoaallfredo and jorluiseptorPuertoRico
Russiaad222kr
SenegalDeath259
South AfricaDHernandex
Sierra Leonets96
Surinameadavis46
Swedenjacksarick
Switzerlandthijswerrij
SyriaiSWORD
Taiwanamowu
Texasdomspad
Thailandjamcgrath
The Netherlandsjdhoek
Turkeymehmetuken
United Kingdomjdhoek
United States of Americajdhoek
YemenDeath259

Tools

Project NameYour Name / Github HandleDemo/Gif
Box Breathinggnclmorais

License

MIT © Manraj Singh