Giter VIP home page Giter VIP logo

awesome-css-only's Introduction

Awesome CSS Only

An awesome & curated list of beautiful projects made with pure CSS!


A

  • A-single-div - 🎨 CSS drawings with only one HTML element.
  • All-animation - A set of nice and crazy css animations made with the purpose to bring life and interactions to your project.
  • Animate.css - 🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.
  • Auroral - Animated background gradients with pure CSS.
  • Awesome-bootstrap-checkbox - βœ”οΈFont Awesome Bootstrap Checkboxes & Radios. Pure css way to make inputs look prettier

B

  • Balloon.css - Simple tooltips made of pure CSS.
  • Bonsai.css - A Utility Complete CSS Framework for less than 45kb (8kB Gzipped).

C

  • 42CSSTober - 42CSSTober, a CSS illustration for each day in October, because creating only web pages is insufficient.
  • CSS-Checkbox-Library - A huge library of Pure CSS Checkboxes for every taste.
  • CSS-file-icons - Pure CSS icons for popular file extensions.
  • CSS-Minesweeper - An ugly Minesweeper in pure HTML & CSS without JS.
  • Css-modal - A modal built with pure CSS, enhanced with JavaScript.
  • CSS-ripple-effect - Pure CSS (no JavaScript) implementation of Android Material design "ripple" animation
  • CSS3-Slider - Pure CSS3 Slider with multiple animation options.
  • Csshexagon - Pure CSS hexagon generator, built with AngularJS.
  • Cssicon - Icon set made with pure css code, no dependencies, "grab and go" icons.
  • Csslider - Pure CSS slider.
  • Csspin - CSS Spinners and Loaders - Modular, Customizable and Single HTML Element Code for Pure CSS Loader and Spinner.
  • Cssplot - Pure CSS charts.

D

F

G

  • Gameboy-css πŸ‘Ύ Pure CSS GameBoy - Includes animations and the original sound πŸ”Š

H

  • Hits-the-mole - The Hits-the-mole game implemented in pure CSS.

I

  • Icons.css - Single Element Pure CSS icons.
  • Ihover - iHover is a collection of hover effects using pure CSS, inspired by codrops article, powered by Sass.
  • Imagehover.css - Pure CSS Image Hover Effect Library.
  • Instagram.css - Complete set of Instagram filters in pure CSS.

L

  • Load-awesome - An awesome collection of β€” Pure CSS β€” Loaders and Spinners.
  • Loaders.css - Delightful, performance-focused pure css loading animations.
  • Loaderskit - Single Element Pure CSS Spinners & Loaders.
  • Logos-in-pure-css - Company logos created in pure CSS.

P

  • Pretty-checkbox - A pure CSS library to beautify checkbox and radio buttons.
  • Progress.css - Create circular and horizontal progress bars with pure css adding just one attribute in your HTML tags πŸ–ŒοΈ.
  • Pure - A set of small, responsive CSS modules that you can use in every web project.
  • Pure-CSS3-Animated-Border - Pure CSS3 animated border for all html element.
  • Pure-drawe - Pure CSS transition effects for off-canvas views.
  • Purecss-circular-progress-bar - Demos and experiments on web development ( CSS JS HTML ) - A pure css circular progress bar.
  • Purecss-francine - HTML/CSS drawing in the style of an 18th-century oil painting. Hand-coded entirely in HTML & CSS.
  • Purecss-gaze - HTML/CSS drawing in style of italian renaissance painting. Hand-coded entirely in HTML & CSS.
  • Purecss-lace - HTML/CSS drawing inspired by Flemish baroque oil portraits. Hand-coded entirely in HTML & CSS.
  • Purecss-pink - HTML/CSS drawing of gel studio lighting. Hand-coded entirely in HTML & CSS.
  • Purecss-zigario - HTML/CSS drawing in the style of mid-century advertisement design. Hand-coded entirely in HTML & CSS.

R

  • Radiobox.css - A complete puzzle developed exclusively in HTML & CSS 🧩.

S

T

  • Text-spinners - Pure text, CSS only, font independent, inline loading indicators.

W

  • Wenk - πŸ˜‰ Lightweight pure CSS tooltip for the greater good.

awesome-css-only's People

Contributors

refusado avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

nikraaus

awesome-css-only's Issues

Organize by tables and add labels

Arranging the elements by table and adding labels can make it much more organized.

Viewing the projects will be much simpler with the table divisions and adding labels makes it easier to find projects that interest us and learn more about them.

Some of the labels I was thinking about: drawing, tool and game.

The organization by table with the label could look like this:

Name Description Label
A-single-div 🎨 CSS drawings with only one HTML element. drawing

->

Name | Description | Label
---- | ---- | ---- 
[A-single-div](https://github.com/lynnandtonic/a-single-div) | :art: CSS drawings with only one HTML element. | drawing

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.