☝️One
. Many possibilities.

Related tags

CSS css html drawing single-div div
Overview

SingleDivProject

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 Name Your Name / Github Handle Demo/Gif
Battery manrajgrover
Hamburger Menu manrajgrover
Magnifying Glass kamito98
New Instagram Logo manrajgrover

Loaders

Project Name Your Name / Github Handle Demo/Gif
Awesome Dots manrajgrover
Bouncing Ball mtacchino
Box Loader AnubrataDS
Clock richardj
Dot Loader aaroniker
Fill up manrajgrover
Iron Factory NorthernTwig
Revolving Circles dcrousso
Revolving Dots dcrousso
Ripple Effect manrajgrover
Play Loader manrajgrover
Simple Spinner manrajgrover
Simple Text Loader manrajgrover
Melting Ice Cream Loader TaranVohra

Flags

Project Name Your Name / Github Handle Demo
Armenia manrajgrover
Austria manrajgrover
Bahamas manrajgrover
Bangladesh manrajgrover
Belgium AndyMathys
Brazil esganzerla
Bulgaria manrajgrover
Chile adavis46
Canada Scott Kaye
Cameroon 1forh
Colombia DHernandex
Czech Republic fadilf
Denmark jacksarick
England TheWebartist
Finland jacksarick
France manrajgrover
Germany manrajgrover
Greece jdhoek
Hungary jabbalaci
India fadilf
Indonesia karuna
Ireland skeevey
Israel hillai
Italy manrajgrover
Ivory Coast skeevey
Japan manrajgrover
Laos jamcgrath
Latvia vasiljevs
Lithuania fosron
Nigeria skeevey
Pakistan ObaidAshraf
Poland mschweichler
Puerto Rico aallfredo and jorluiseptor PuertoRico
Russia ad222kr
Senegal Death259
South Africa DHernandex
Sierra Leone ts96
Suriname adavis46
Sweden jacksarick
Switzerland thijswerrij
Syria iSWORD
Taiwan amowu
Texas domspad
Thailand jamcgrath
The Netherlands jdhoek
Turkey mehmetuken
United Kingdom jdhoek
United States of America jdhoek
Yemen Death259

Tools

Project Name Your Name / Github Handle Demo/Gif
Box Breathing gnclmorais

License

MIT © Manraj Singh

Comments
  • unify the dimension of the flags

    unify the dimension of the flags

    Currently the flag screenshots are all different. There should be a guideline about 1) the size of these images, and 2) the size of the margins around the flags.

    enhancement suggestion need more info 
    opened by jabbalaci 9
  • Suggestion : Update README

    Suggestion : Update README

    An introductory paragraph (even a few lines) in the readme would be awesome !

    I stumbled across this project while browsing interesting repositories , and at first was unable to understand what this was all about. After a few minutes I understood it , and i really like the concept .

    suggestion need more info 
    opened by AnubrataDS 8
  • Union Jack

    Union Jack

    Flag of the United Kingdom.

    It's a national holiday here in the Netherlands, and I kept wondering if there was another interesting flag to tackle. This one took a bit of trigonometry to solve. :gb:

    opened by jdhoek 5
  • Flag of the United States of America

    Flag of the United States of America

    I had to make it bigger in order for the stars to render properly, so you may want to classify this one as unconventional or experimental.

    Because of the use of a glyph (U+2605 BLACK STAR) this flag may not look right on every operating system. This is how it looks for me:

    usa

    opened by jdhoek 4
  • Singlediv/emoticon add

    Singlediv/emoticon add

    Description of new feature, or changes

    Added a new emoticon (smiley) created entirely using a single div and pure css

    Capture

    Checklist

    • [ ] Your branch is up-to-date with the base branch
    • [ ] You've read the Contributions guidelines.

    Related Issues and Discussions

    People to notify

    opened by sankshitpandoh 0
  • Support SVG assets

    Support SVG assets

    Prefer SVG over PNG; as it could be reused and controlled for consistency. Could we figure out how to get the SVG assets to display correctly in the README.md on Github. I tried to pull the SVG from "rawgithub" with no luck. This SVG support implementation seems to be changing constantly.

    Any thoughts?

    enhancement suggestion need more info 
    opened by module17 4
  • Re-use `css-flags`

    Re-use `css-flags`

    Awesome project,

    Maybe you would be interested in css-flags (repo) where I did 170 flags with one div :)

    image

    I'd be happy to contribute, but copy-pasting the code form one repo to another won't be the most effective way to maintain it. Maybe just a link between projects, or a git submodule?

    enhancement suggestion need more info 
    opened by pixelastic 2
Owner
Manraj Singh
Open Source Community Leader @duckduckgo and Contributor @tensorflow, mainly TensorFlow.js, @mozilla, @jquery and more! 　　 　　　Past: @practo
Manraj Singh
GitHub
Material Design Based One Page HTML Template

Material Design One Page HTML Template MD One page template is fully responsive and free to use. This HTML template is based on Materialize, a CSS Fra

Joash 587 Jan 2, 2023
A simple, one page, Bootstrap HTML website template created by Start Bootstrap

Start Bootstrap - One Page Wonder One Page Wonder is a basic one page template for Bootstrap created by Start Bootstrap. Preview View Live Preview Sta

Start Bootstrap 327 Dec 18, 2022
Free responsive one page portfolio template

Portfolio one page template - ARCHIVED Flat and responsive website template, designed and coded by Maxim Orlov. Demo: http://website-templates.github.

Website templates 164 Jan 2, 2023
🖼️ ― Change profile picture on multiple platforms in one exec

??️ puro Change profile picture on multiple platforms in one exec $ puro -i ./image.png -c ./config.yaml ?? Usage Binary incoming For now, the instruc

Faye Keller 9 Feb 2, 2022
Vite plugin to client bundle i18next locales composited from one to many json/yaml files from one to many libraries. Zero config HMR support included.

vite-plugin-i18next-loader yarn add -D vite-plugin-i18next-loader Vite plugin to client bundle i18next locales composited from one to many json/yaml f

AlienFast 4 Nov 30, 2022
A JavaScript animation plugin for menus. It creates a div that moves when you mouse over an element, giving it an elastic animation.

Lava-Lamp Description: A JavaScript animation plugin for menus. It creates a div that moves when you mouse over an element, giving it an elastic anima

Richard Hung 38 Jun 4, 2022
A JavaScript library allowing the creation of manually resizable div elements.

Resizable.js A JavaScript library allowing the creation of resizable html divs. Try the live demo! Setup Link to both resizable.js and resizable-style

null 44 Oct 6, 2022
Download all Moodle files with one click. This is a Chrome extension built to save time and effort from downloading files manually one by one!

Moodle Downloader Extension Moodle downloader extension for Chrome. The extension is tested with both the TUM moodle and the official moodle demo. Not

Zhongpin Wang 8 Nov 15, 2022
Code Scanning/SAST/Static Analysis/Linting using many tools/Scanners with One Report - Scanmycode Community Edition (CE)

Star it If you like it, please give it a GitHub star/fork/contribute. This will ensure continous development ⭐ TLDR; To install it. Install docker and

Marcin Kozlowski 351 Dec 29, 2022
All in one YouTube App with downloader , background player and many more features.

YT PRO Download YT PRO Features Video Downloader Ads Blocker Picture in Picture Mode Shows Number of Dislikes Background Audio Player Auto Updation of

Prateek Chaubey 22 Dec 31, 2022
Execute one command (or mount one Node.js middleware) and get an instant high-performance GraphQL API for your PostgreSQL database!

PostGraphile Instant lightning-fast GraphQL API backed primarily by your PostgreSQL database. Highly customisable and extensible thanks to incredibly

Graphile 11.7k Jan 4, 2023
Create an Apple-like one page scroller website (iPhone 5S website) with One Page Scroll plugin

#One Page Scroll 1.3.1 by Pete R. Create an Apple-like one page scroll website (iPhone 5S website) with One Page Scroll plugin Created by Pete R., Fou

Pete R. 9.6k Dec 31, 2022
Zenload - "Load couple loaders and apply transform one-by-one

Zenload Load couple loaders and apply transforms one-by-one. Install npm i zenload -g How to use? With env vairable ZENLOAD: NODE_OPTIONS='"--loader

coderaiser 1 Jan 25, 2022
video-chat-app Fully functional one-to-one video calling feature.

video-chat-app Fully functional one-to-one video calling feature.

suraj ✨ 7 Oct 10, 2022
A multipurpose bot, a clan bot, a all in one bot. The one bot u need for ur server originally made as Milrato discord Bot and by Tomato6966.

Public Bot and Support Server! Invite the Public Version of this Bot so you don't need to host it by yourself or join my Discord server to get a custo

Tomato6966 472 Dec 25, 2022
⛺️ Tipi is a homeserver for everyone! One command setup, one click installs for your favorites self-hosted apps. ✨

⛺️ Tipi — A personal homeserver for everyone ⚠️ Tipi is still at an early stage of development and issues are to be expected. Feel free to open an iss

Nicolas Meienberger 4.9k Jan 4, 2023
A real time Web-App for one to one chatting.

We-Vibe A real time web-app for one to one chatting. The project is broadly divided into two parts - Server and Public (client). The Socket.io module

Sushmita Kumari 6 Dec 15, 2022
Give your JavaScript the ability to speak many languages.

Polyglot.js Polyglot.js is a tiny I18n helper library written in JavaScript, made to work both in the browser and in CommonJS environments (Node). It

Airbnb 3.6k Jan 2, 2023
A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.

webpack webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bu

webpack 62.3k Jan 4, 2023
A jQuery plugin that creates a paneled-style menu (like the type seen in the mobile versions of Facebook and Google, as well as in many native iPhone applications).

#jPanelMenu ###Version 1.4.1 jPanelMenu is a jQuery plugin for easily creating and managing off-canvas content. Check out the demo (and documentation)

Anthony Colangelo 927 Dec 14, 2022