Home > CSS3 & CSS

CSS3 & CSS

webgradients – 180+ Gradient Colors In Pure CSS3

webgradients - 180+ Gradient Colors In Pure CSS3

A curated collection of splendid gradients made in CSS3, .sketch and .PSD formats. webgradients is a lightweight CSS library which provides 180+ linear-gradient colors for backgrounds, text and anywhere you want. How To Use Download the file webgradients.css. Place the file in your project folder. Link the file it in the …

Read More »

CSS Only Togglable Fullscreen Side Navigation

CSS Only Togglable Fullscreen Side Navigation

A sidebar navigation that allows to show and hide a fullscreen menu using pure CSS/CSS3. How to use in HTML : <div class=”wrapper”> <input type=”checkbox” id=”menuToggler” class=”input-toggler” value=”1″ autofocus=”true”/> <label for=”menuToggler” id=”menuTogglerLabel” class=”menu-toggler” role=”button” aria-pressed=”false” aria-expanded=”false” aria-label=”Navigation button”> <span class=”menu-toggler__line”></span> <span class=”menu-toggler__line”></span> <span class=”menu-toggler__line”></span> </label> <nav id=”sidebar” class=”sidebar” role=”navigation” aria-labelledby=”menuTogglerLabel” …

Read More »

Glowing.css – Glow Effect In Pure CSS/CSS3

Glowing.css – Glow Effect In Pure CSS/CSS3

A simple pure CSS to make PNG or anything glow! It can be applied to divs, texts, links, inputs, buttons, PNG image, and so on. You can use it and/or modify it freely according to your need. It’s originally created for my PokoPoko fun social media project. But then I considering …

Read More »

SpaceGrid – Responsive 12-column Grid Layout

SpaceGrid – Responsive 12-column Grid Layout

A no-frills responsive grid layout to help you get started on your next project. SpaceGrid is a lightweight CSS library used to render a responsive, 12-column grid layout for your modern web design. Setup your project Download either the spacegrid.min.css or spacegrid.css file and link it to your project: <html> …

Read More »

Mobile-first CSS Only Loader Library – loadme

Mobile-first CSS Only Loader Library – loadme

loadme is a pure CSS library which provides a collection of well-designed and CSS3 animated loaders for your mobile web applications. Create a fadingCircle loading on the page. <div class="loadme-fadingCircle"></div> <div class="loadme-mask"></div> Create a circular loader on the page. <div class="loadme-circular"></div> <div class="loadme-mask"></div> Create a love loading on the page. …

Read More »

CSS Only Pinterest-like Responsive Board Layout – Boardz.css

CSS Only Pinterest-like Responsive Board Layout – Boardz.css

Boardz.css is a simple CSS library that allows to create Pinterest-like card-boards from simple unordered lists with less than 1kB minified file size. What is Boardz? Boardz is a simple, lightweight and responsive pure CSS library that creates Pinterest-like boards from simple unordered list elements. The main objective of the …

Read More »

Basic Sidebar Navigation With Pure CSS

Basic Sidebar Navigation With Pure CSS

Pure css solution for off-canvas and navigation using plain HTML and CSS transitions and transforms. css.off-canvas by devslove.it Installation We recommend using a package manager to install this widget as a dependency of your project. Please read the docs of the respective package manager if you don’t know how to …

Read More »

Pure CSS Photo Filters – cssco.css

Pure CSS Photo Filters – cssco.css

Photographic filters made with CSS, inspired by VSCO and CSSgram. How to use CSSCO Add the downloaded CSS file path to theof your document: Add the filter to your image element using the relevant CSSCO classes: Compatibility Unfortunately, IE & Edge browsers, as well as Opera Mini do not support …

Read More »

Expanding Push Menu With Pure CSS

Expanding Push Menu With Pure CSS

Expanding menu is easy and pure css. Menu & Navigation An expanding hamburger menu system that morphs the toggle icon into a sidebar navigation while push the main content to the right. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est quisquam sit natus magni qui nemo rerum alias sunt. Nostrum incidunt …

Read More »