The Memory Games

22.11.2017

Simple match the pairs game built in ReactJs.

Made with: HTML,CSS,JS (Babel)

View Code

The Memory Games

3d Buttons With Scroll Effect

21.11.2017

CSS buttons with parallax effect.

Made with: HTML,CSS (SCSS)

View Code

3d Buttons With Scroll Effect

Input Radio

21.11.2017

Simple input radio style.

Made with: HTML

View Code

Input Radio

React-Spotify

21.11.2017

This is React-Spotify, a React front end client that communicates with the Spotify API.

Made with:

View Code

React-Spotify

Login Form

17.11.2017

Only CSS login form.

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

View Code

Login Form

Bootstrap 4 Mega Dropdown Menu Navbar

17.11.2017

Mega Dropdown Menu Navbar - Bootstrap 4 code snippet full width dropdown menu.

Made with: HTML,CSS,JS

View Code

Bootstrap 4 Mega Dropdown Menu Navbar

Bootstrap 4 Mega Dropdown Menu Navbar

17.11.2017

Mega Dropdown Menu Navbar - Bootstrap 4 code snippet example demo.

Made with: HTML,CSS,JS

View Code

Bootstrap 4 Mega Dropdown Menu Navbar

Svg Page Separator

16.11.2017

Simple page separator with SVG.

Made with: HTML,CSS (SCSS)

View Code

Svg Page Separator

Glowing Stuff

15.11.2017

Exploration of pulsing glow effects for a banner animation.

Made with: HTML,CSS

View Code

Glowing Stuff

Animated Svg Frame Slideshow

15.11.2017

An experimental slideshow that shows an animated SVG frame when transitioning between slides. Different shapes can be used for creating a variety of styles. Used anime.js for the animations.

Made with: HTML,CSS,JavaScript

View Code

Animated Svg Frame Slideshow

Custom Select Wrapper

15.11.2017

Custom CSS select wrapper.

Made with: HTML/Slim

View Code

Custom Select Wrapper

Blended Text Layers

14.11.2017

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

View Code

Blended Text Layers

404 Animated Page

14.11.2017

Neat little CSS 3D text animation.

Made with: HTML,CSS (SCSS)

View Code

404 Animated Page

Bootstrap 4 Switches

10.11.2017

Bootstrap 4 switches (customizable via Sass).

Made with: HTML,CSS,JS

View Code

Bootstrap 4 Switches

Css Custom Pproperty Hover Effects

10.11.2017

Adding a cool hover/focus effect to icons from the Orion Icon Library with the help of CSS custom properties.

Made with: HTML,CSS (SCSS)

View Code

Css Custom Pproperty Hover Effects

Document Thumbnail With Css Custom Property

9.11.2017

Dog-ear will position itself it top right corner regardless of original size / aspect ratio of image. Effect achieved by using hidden img to set size of relatively positioned parent container - then two absolutely positioned pseudo elements with the same image as a background overlap to leave dog-ear gap top right. Image url supplied by custom property declared inline in HTML.

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

View Code

Document Thumbnail With Css Custom Property

☑️ Transform Toggles, Will-Change ☑️

9.11.2017

A transform-only version of Flexbox Toggles to compare performance and code. This takes it a little further with will-change for buttery-smooth animation without repaints.

Made with: HTML,CSS (Less)

View Code

☑️ Transform Toggles, Will-Change ☑️

Thumbnail Effect

8.11.2017

Image thumbnail hover effect.

Made with: HTML,CSS

View Code

Thumbnail Effect

Expanding Grid Item Animation

8.11.2017

A grid item animation where the thumbnail scales up when the details view is opened. Used anime.js.

Made with: HTML,CSS,JavaScript

View Code

Expanding Grid Item Animation

Accordion With Input Edit

7.11.2017

Pure CSS accordion with input edit.

Made with: HTML

View Code

Accordion With Input Edit