A sidebar box that on scroll moves with the display within its column frame until it gets in contact with the next element. The element is styled w...

A sidebar box that on scroll moves with the display within its column frame until it gets in contact with the next element. The element is styled with CSS and its collision detection system is made with jQuery. Created by CodePen user Charlotee Dann.

A set of UI cards made mainly with CSS with a highly interactive 3D effect. The cards have a VR inspired layout and are direction aware when on hov...

A set of UI cards made mainly with CSS with a highly interactive 3D effect. The cards have a VR inspired layout and are direction aware when on hover. Created by CodePen user Piotr Galor.

A Card UI design made completely in CSS. It has a flat color style with shapes and buttons that go over the card borders. When toggling between opt...

A Card UI design made completely in CSS. It has a flat color style with shapes and buttons that go over the card borders. When toggling between options it showcases a transition with an awesome "blob" feeling. Created by Codepen User Adam Kuhn.

A Set of tabs that adapts to the height of their content when switched, it uses JavaScript as a modifier and is styled with SCSS. The tabs have smo...

A Set of tabs that adapts to the height of their content when switched, it uses JavaScript as a modifier and is styled with SCSS. The tabs have smooth transitions and even an example of a color picking palette that can be useful when building web apps. Created by Codepen user Lewi Hussey.

A really neat and useful app made to help people find the correct array method a bit more naturally. You can narrow down what you want to do and ex...

A really neat and useful app made to help people find the correct array method a bit more naturally. You can narrow down what you want to do and explore until you find what's most useful to you. Created by Codepen user Sarah Drasner and it's licensed under MIT license.

One page section slider made out of pure CSS, it has on click action with smooth transitions to change between sections. Not a single line of JavaS...

One page section slider made out of pure CSS, it has on click action with smooth transitions to change between sections. Not a single line of JavaScript, it's just HTML and CSS. Made by Codepen user Quentin Véron.

A music player app UI with a flat design and an iPhone mockup display. It's highly interactive and functional, perfect to feature your audio creati...

A music player app UI with a flat design and an iPhone mockup display. It's highly interactive and functional, perfect to feature your audio creations. Designed and developed by Codepen user Emil. 

A website theme design with a large image-grid section and a simple display concept focused on visual content. It only uses text for the side navba...

A website theme design with a large image-grid section and a simple display concept focused on visual content. It only uses text for the side navbar in order to keep it clean and neat. Created by Codepen user Muna in inspired by Leslie Davids' website.

Slider element for web-based presentations. It uses Pug HTML, SCSS and JavaScript to achieve the linear transitions and to control the slides. Crea...

Slider element for web-based presentations. It uses Pug HTML, SCSS and JavaScript to achieve the linear transitions and to control the slides. Created by Codepen user Olivia.

This piece of code shows you how images can be stretched with a good looking scrolling effect. Created by Codepen user Nathan Taylor.

This piece of code shows you how images can be stretched with a good looking scrolling effect. Created by Codepen user Nathan Taylor.

Geometric CSS loader that animates circular shapes in a spiral motion and along the path the shapes are gradually scaled down. Created by Codepen u...

Geometric CSS loader that animates circular shapes in a spiral motion and along the path the shapes are gradually scaled down. Created by Codepen user Louis Hoebregts.

This CSS effect emulates in your display the shape and movement of a lifted paper that it's pushed when on hover. Created by Codepen user Bastian A...

This CSS effect emulates in your display the shape and movement of a lifted paper that it's pushed when on hover. Created by Codepen user Bastian Andre making use of Sass.

Great snippet to generate Gradient colors in CSS by Codepen user X, uses Smartsettings.js for setting things up and Chroma.js for handling the colo...

Great snippet to generate Gradient colors in CSS by Codepen user X, uses Smartsettings.js for setting things up and Chroma.js for handling the colors. You can generate a Gradient with up to 4 colors and copy the generated code for it that you can use on your projects.

Perfect to show the reading progress while scrolling through a page. It hides when the viewport is too narrow, sticks to the top of the viewport on...

Perfect to show the reading progress while scrolling through a page. It hides when the viewport is too narrow, sticks to the top of the viewport on scroll, displays reading progress by section and also within each section. It can also be used for navigation. Created by Codepen user Ed Hicks.

Loop animation of a SVG element made without using JavaScript, a perfect fit for a web loader. The total amount of code is minimal and the animatio...

Loop animation of a SVG element made without using JavaScript, a perfect fit for a web loader. The total amount of code is minimal and the animation is smooth and fluid. Created by Codepen user Ana Tudor.

Animated sign up form with an introduction frame and a linear left transition that shows the Log-In/Sing-Up form itself. It looks modern yet clean ...

Animated sign up form with an introduction frame and a linear left transition that shows the Log-In/Sing-Up form itself. It looks modern yet clean and it's build using JavaScript, CSS3(SCSS) and HTML5. Created by Codepen user Speresunko.

A nicely animated 404-page design, built out of SVG paths, so it's fully responsive. Created by Codepen user Chris Samuels. 

A nicely animated 404-page design, built out of SVG paths, so it's fully responsive. Created by Codepen user Chris Samuels. 

Fully responsive pricing tables with a flat style and nice transitions. With a top switch to change between monthly and yearly subscription plans, ...

Fully responsive pricing tables with a flat style and nice transitions. With a top switch to change between monthly and yearly subscription plans, both with three tables to showcase your info. Created by Codepen user Pedro Muñoz.

This is a set of 3 frames showing how CSS gradients can be applied to a rounded border. Created by Codepen user George W. Park.

This is a set of 3 frames showing how CSS gradients can be applied to a rounded border. Created by Codepen user George W. Park.

A CSS slider with multiple animation options, featuring 4 slides with linear transitions handled entirely with CSS. This image slider was created b...

A CSS slider with multiple animation options, featuring 4 slides with linear transitions handled entirely with CSS. This image slider was created by Codepen user aladin ben sassi.

This is a small User Card UI template designed following Google's material design color schemes and general aesthetics. Th...

This is a small User Card UI template designed following Google's material design color schemes and general aesthetics. The snippet includes 19 user cards in a bootstrap grid featuring neat menu animations and font awesome social icons. Created by Codepen user David Foliti.

This is a set of multiple animation examples for navbars. In total the author made 15 navbars, differentiated by color, each one with a differ...

This is a set of multiple animation examples for navbars. In total the author made 15 navbars, differentiated by color, each one with a different set of animations triggered by hovering over them. The motions are generated with CSS.

This is a neat and fluid toggle animation on a checkbox. The animation path is controlled by JavaScript styled in CSS with the use of HTML to use s...

This is a neat and fluid toggle animation on a checkbox. The animation path is controlled by JavaScript styled in CSS with the use of HTML to use several SVG lines. Created by Codepen user Timothee Guignard.

This snippet is a pure CSS drop-down menu designed by landing a classy approach. It's a nice addition to any user interface without the implementat...

This snippet is a pure CSS drop-down menu designed by landing a classy approach. It's a nice addition to any user interface without the implementation of JavaScript. Created by Codepen user Robert Borghesi.

This is a pricing table section totally responsive, it's designed to showcase month and year price for an e-store subscription plan. It has a flat ...

This is a pricing table section totally responsive, it's designed to showcase month and year price for an e-store subscription plan. It has a flat style with a rounded switch on top to flip the tables and change from monthly to yearly price view. The transition is controlled by jQuery actions and in general, the section is made with plain HTML and CSS. It has a display-role reset for older browsers. Created by Codepen user Shane Heyns.