Cool Hover Effect With Mix-Blend-Mode

17.08.2017

This is cool because you don't need to change the color of the link on :hover. The mix-blend-mode in the ::after will invert it for you.

Made with: HTML

View Code

Cool Hover Effect With Mix-Blend-Mode

Simple Css Hover Effect Using Sass Loops

16.08.2017

Simple little hover animation. Sass loops make staggering animation delays really easy to do...you can get a lot of mileage out of them.

Made with: HTML/Pug

View Code

Simple Css Hover Effect Using Sass Loops

Responsive Css Grid Nike Layout

16.08.2017

Made with: HTML,CSS

View Code

Responsive Css Grid Nike Layout

Pricing Table

15.08.2017

Pricing table comparing 3 different plans for a mystical computing company.

Made with: HTML

View Code

Pricing Table

Multiline Underline With Any Color

15.08.2017

Made with: HTML,CSS (SCSS),JS (Babel)

View Code

Multiline Underline With Any Color

Parallax Card

15.08.2017

CSS flip card with parallax effect.

Made with: HTML,CSS

View Code

Parallax Card

Pretty Underline

15.08.2017

Made with: HTML,CSS (SCSS),JS (Babel)

View Code

Pretty Underline

Image Comparison Slider

14.08.2017

A simple and clean image comparison slider, fully responsive and touch ready made with CSS and jQuery.

Made with: HTML

View Code

Image Comparison Slider

Breadcrumbs Navigation

14.08.2017

This example shows what happens as a user gets closer to the back button. The breadcrumbs expand and allow the user to navigate to almost anywhere else in the course while only having minimal impact on space.

Made with: HTML

View Code

Breadcrumbs Navigation

Accordion

14.08.2017

Accordion JS functionality allowing you to set the animation speed of the toggle. You also have the option of being able to have just one accordion item open at any one given time.

Made with: HTML

View Code

Accordion

Material Messaging App Concept

14.08.2017

Made with: HTML,CSS

View Code

Material Messaging App Concept

Contributor Badge Flip Exploration

13.08.2017

Exploration for animate achievement, attempting to balance practicality and delight.

Made with: HTML,CSS (SCSS),JavaScript

View Code

Contributor Badge Flip Exploration

Flicking

11.08.2017

Made with:

View Code

PlaceholderFlicking

Pure Css Select Box

11.08.2017

Select box without using JavaScript and native element.

Made with: HTML (Pug),CSS (SCSS)

View Code

Pure Css Select Box

Mask Effect

10.08.2017

Mask hover effect.

Made with: HTML,CSS

View Code

Mask Effect

The Velvet Underground In London, 1971

10.08.2017

The Swissted project is a collection of concert posters created in the Swiss International Style by Mike Joyce. Hover to see the poster change to follow your mouse movements using CSS clip-path animations.

Made with: HTML,CSS (SCSS),JS

View Code

The Velvet Underground In London, 1971

Error Page 404 Vampire

10.08.2017

Vampire 404 error page in pure CSS.

Made with: HTML,CSS

View Code

Error Page 404 Vampire

Card Ui Skeleton Screen

9.08.2017

This creates a skeleton of a card component using CSS custom properties to draw different gradients on the background-image. Skeleton screens can be used to improve perceived performance while loading.

Made with: HTML,CSS (SCSS)

View Code

Card Ui Skeleton Screen

Css Only Order Process Steps

9.08.2017

Just a nice process bar here where you can click on the different steps and be presented with information. The box at the top will also animate depending on the steps.

Made with: HTML (Haml),CSS (SCSS)

View Code

Css Only Order Process Steps

Shiny Button

9.08.2017

Shiny captivating and flat button for call to action, with only CSS.

Made with: HTML,CSS (Sass)

View Code

Shiny Button