One-Div-8Bit Playing Card

20.02.2020

Bit-style playing card drawn in pure CSS! Only 1 div, only 1 squared shape, using box-shadow hack.

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

View Code

One-Div-8Bit Playing Card

Best Pricing Table

19.02.2020

Made with: HTML,CSS,JS

View Code

PlaceholderBest Pricing Table

Wobble

19.02.2020

Play with a colorful wobbly surface. An interactive mouse toy. Make the surface jump and wobble.

Made with: HTML,CSS,JS

View Code

Wobble

Background Shape Change

19.02.2020

Made with: HTML,CSS,JS

View Code

Background Shape Change

Reveal Animation

19.02.2020

Made with: HTML,CSS

View Code

Reveal Animation

Beer Like Button

19.02.2020

Made with: HTML,CSS (SCSS),JS

View Code

Beer Like Button

Trash Button Animation

19.02.2020

Made with: HTML,CSS (SCSS),JS

View Code

Trash Button Animation

3D Book

19.02.2020

Made with: HTML,CSS

View Code

3D Book

Css-Only Direction-Aware Hover Effect

18.02.2020

CSS-only direction-aware hover effect is actually less tricky than you might think.

Made with: HTML,CSS (SCSS)

View Code

Css-Only Direction-Aware Hover Effect

Notification Bell Icon Layered Shake Animation Effect

18.02.2020

Animated Google Material Design icon. Three layers. CSS rotate transform and opacity animation effects.

Made with: HTML,CSS

View Code

Notification Bell Icon Layered Shake Animation Effect

No Time To Die Title Sequence

18.02.2020

Title lock up animation for the new Bond film, "No Time To Die". Hand rolled SVGs animated with GSAP. Each row has a separate time counter to make sequencing more simple to handle. Every part of each letter has it's own to make transform calculations easier also, as all transformations are from the root. This means no need to calculate scale or rotation offsets. Makes the markup more complex, but the animation easier. Complexity has to go somewhere...

Made with: HTML,CSS (SCSS),JS

View Code

No Time To Die Title Sequence

Css-Only Direction-Aware Hover Effect

18.02.2020

Comes with a Sass @mixin so that you can quickly modify the number of columns and items. Also, you can resize the window. It keeps working when grid changes.

Made with: HTML,CSS (SCSS)

View Code

Css-Only Direction-Aware Hover Effect

404 Page

18.02.2020

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

View Code

404 Page

Object-Oriented Javascript - Second Edition

17.02.2020

As applications move from the desktop to the browser, the need to learn well-structured JavaScript is vital. This book is for developers who want to learn JavaScript from scratch, or take their JavaScript skills to a new level of sophistication. A completely free and full-length introduction to objects in JavaScript, it teaches through examples and practical play.

Made with: 2013

View Code

Object-Oriented Javascript - Second Edition

Todo Checkbox

17.02.2020

Todo checkbox with a text fill hover and strikethrough effect when checked.

Made with: HTML,CSS (SCSS)

View Code

Todo Checkbox

What's Behind ?

16.02.2020

Made with: HTML,CSS,JS (Babel)

View Code

What's Behind ?

Upload File Button

16.02.2020

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

View Code

Upload File Button

Transaction Button With Hover Animation

16.02.2020

Made with: HTML,CSS (SCSS)

View Code

Transaction Button With Hover Animation

Neumorphic Tabs

15.02.2020

Tabbed content with JavaScript; Neumorphic styling; Dark mode; Remembers previous state on reload (with localStorage); Matches OS colour scheme (with prefers-color-scheme).

Made with: HTML,CSS,JS

View Code

Neumorphic Tabs

Underline Clip Hover Animation

15.02.2020

A fancy animated underline using text clipping. The text uses background-clip: text and a linear-gradient background to be bi-color. We get around animating the gradient by animating the background-position instead. We have to use a wrapper element for having the underline highlight under the text, since the text color is already the background!

Made with: HTML,CSS

View Code

Underline Clip Hover Animation