Css Attempts At Text With Inline Skewed Background

22.06.2018

Using skew is only rendered if the item is display: block or inline-block. Some of these look the same on a wide viewport but fail differently as the viewport width is decreased.

Made with: HTML,CSS (SCSS)

View Code

Css Attempts At Text With Inline Skewed Background

Figure + Figcaption

21.06.2018

Made with: HTML,CSS (SCSS)

View Code

Figure + Figcaption

Color Palette

21.06.2018

Color palette using CSS Grid.

Made with: HTML,CSS (SCSS)

View Code

Color Palette

Figure + Figcaption

21.06.2018

Made with: HTML,CSS (SCSS)

View Code

Figure + Figcaption

Shape-Outside - Experiment 2

21.06.2018

Experimenting with shape-outside within a layout.

Made with: HTML,CSS

View Code

Shape-Outside - Experiment 2

The Depressing Loading Bar

21.06.2018

Just a fun project which is a loading bar which is resetting it self to default shortly before the loading progress is completed.

Made with: HTML (Pug),CSS (Sass),JS

View Code

The Depressing Loading Bar

Cloud Download Button Animation

20.06.2018

Based on the App Store cloud download icon but animated. The idea is to show spinning water droplets on preload then turn the down arrow into a progress bar after falling. When the download is completed, a checkmark pops out of the cloud.

Made with: HTML,CSS (SCSS),JavaScript

View Code

Cloud Download Button Animation

Hamburger Icon With Checkboxes

20.06.2018

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

View Code

Hamburger Icon With Checkboxes

Pokemon Card Layout

20.06.2018

Pure CSS Pokemon card layout.

Made with: HTML,CSS (SCSS)

View Code

Pokemon Card Layout

Responsive Infographic With Css Variables

20.06.2018

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

View Code

Responsive Infographic With Css Variables

Responsive Infographic

20.06.2018

Responsive infographic with CSS variables and flexbox tricks.

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

View Code

Responsive Infographic

Interactive Inky

20.06.2018

figcaption text segments as legends pointing out portion of figure content.

Made with: HTML (Pug),CSS,JavaScript

View Code

Interactive Inky

Figure & Figcaption With Css Hover Effect

20.06.2018

Image hover transition with CSS variables.

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

View Code

Figure & Figcaption With Css Hover Effect

Playful Figure/Figcaption

20.06.2018

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

View Code

Playful Figure/Figcaption

Picture Cards - Figure & Figcaption

20.06.2018

Image cards (polaroid style) with description on the back. Hover over the images to see the effect. HTML & CSS.

Made with: HTML,CSS

View Code

Picture Cards - Figure & Figcaption

Figure + Figcaption

20.06.2018

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

View Code

Figure + Figcaption

Interactive Pile O’ Polaroids

20.06.2018

Toss the photos around or click for a larger version. Photos and captions (authors) are a random selection from "Lorem Picsum". "GreenSock Draggable" for the interaction.

Made with: HTML,CSS (Less),JavaScript

View Code

Interactive Pile O’ Polaroids

Shape-Outside - Experiment 1

20.06.2018

Made with: HTML,CSS

View Code

Shape-Outside - Experiment 1