Css Only Photo Modal

17.07.2018

Made with: HTML,CSS (SCSS)

View Code

Css Only Photo Modal

Totoro Toggle

17.07.2018

Very nice and simple Totoro toggle switch.

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

View Code

Totoro Toggle

Css Grid Art Poster

17.07.2018

This example shows how CSS grid can be used to re-create a vertically responsive version of a modernist-inspired, geometric, grid-based poster titled 'Not a Guarantee' by Tom Davie.

Made with: HTML,CSS

View Code

Css Grid Art Poster

Skew Text On Hover

17.07.2018

Skew text on hover in HTML and CSS.

Made with: HTML,CSS (SCSS)

View Code

Skew Text On Hover

Details/Summary Animated Accordion

16.07.2018

You can use this without JS and it works fine, except for the closing animation.

Made with: HTML,CSS (SCSS),JavaScript

View Code

Details/Summary Animated Accordion

Animated Hexagon Circle Logo

15.07.2018

Logo animation using anime.js.

Made with: HTML,CSS (SCSS),JavaScript

View Code

Animated Hexagon Circle Logo

Books Hover Animation

14.07.2018

Pure CSS book hover animation.

Made with: HTML,CSS

View Code

Books Hover Animation

Books Hover Animation

14.07.2018

Good hover animation for book cover.

Made with: HTML,CSS

View Code

Books Hover Animation

Fluid Tab Bar

13.07.2018

Fluid tab bar in SVG, HTML, CSS and JS.

Made with: HTML,CSS (Stylus),JavaScript

View Code

Fluid Tab Bar

100 Css Patterns

13.07.2018

Collection of 100 pure CSS background patterns.

Made with: HTML,CSS

View Code

100 Css Patterns

404 Error Page

13.07.2018

Simple animated 404 error page.

Made with: HTML,CSS (SCSS)

View Code

404 Error Page

Keyboard Layout

13.07.2018

Made with: HTML (Pug),JS (Babel)

View Code

Keyboard Layout

Css Grid + Svg Shapes | Poster #5

12.07.2018

Made with: HTML,CSS

View Code

Css Grid + Svg Shapes | Poster #5

Matrix Wave Loading Animation

12.07.2018

Matrix wave loading animation in HTML and CSS.

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

View Code

Matrix Wave Loading Animation

Pure Css Slider

11.07.2018

Simple slider based on radio inputs. 100% pure HTML + CSS. Works also with arrow keys.

Made with: HTML,CSS

View Code

Pure Css Slider

Duotone Filtering With Css Variables

11.07.2018

Made with: HTML (Pug),CSS (Stylus),JavaScript

View Code

Duotone Filtering With Css Variables

Speech Bubble

11.07.2018

HTML and CSS simple responsive speech bubble.

Made with: HTML,CSS (SCSS)

View Code

Speech Bubble

Duotone Filtering With Css Variables

11.07.2018

Was playing with mix-blend-mode to create different duotone filters. Then I thought it might be cool to have a handy selector wheel to try out different filters. So here it is! A duotone filtering tester using CSS variables. The inner ring is the lightening color whilst the outer is the darkening color. To change the colors, adjust the colors variable in the pug code.

Made with: HTML (Pug),CSS (Stylus),JS (Babel)

View Code

Duotone Filtering With Css Variables

Loading ...

11.07.2018

Pure CSS loading animation.

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

View Code

Loading ...

Image And Text Css-Only Animation

10.07.2018

Made with: HTML,CSS (SCSS)

View Code

Image And Text Css-Only Animation