Pens from Martin Pitt https://codepen.io/nexii/ en nospam@codepen.io Copyright 2024 2024-02-15T00:56:21-07:00 Plywood Avatar Cube https://codepen.io/nexii/pen/yLwRyMq https://codepen.io/nexii/pen/yLwRyMq Martin Pitt

See the Code - See it Full Page - See Details

A pure 3D CSS cube that is animated to spin. Features some shadows/lighting on the surfaces as well as a subtle ground contact shadow. CSS is organised in such a way that more complicated features are added later. This is inspired by the demoscene around shaders from ShaderToy. While it's part of the nature of GLSL coding, I think it's beautiful as it provides the reader a hackable/DIY way to mess around and logically comprehend the evolution of a project — You can comment out different blocks and mess with properties to see how it all works together.

]]>
Plywood Avatar Cube 2024-02-15T00:56:21-07:00
Attempt at lightning tab https://codepen.io/nexii/pen/rNoWZzr https://codepen.io/nexii/pen/rNoWZzr Martin Pitt

See the Code - See it Full Page - See Details

]]>
Attempt at lightning tab 2023-09-06T19:04:55-07:00
CSS Loader: Three-body Problem https://codepen.io/nexii/pen/gOZPLNP https://codepen.io/nexii/pen/gOZPLNP Martin Pitt

See the Code - See it Full Page - See Details

I wanted to re-create one of the classic three-body orbits

]]>
CSS Loader: Three-body Problem 2023-08-27T23:19:52-07:00
Untitled Cat https://codepen.io/nexii/pen/mdjKzmL https://codepen.io/nexii/pen/mdjKzmL Martin Pitt

See the Code - See it Full Page - See Details

An unfinished animation I had lying around since 2018. Thought it was really cute little web anim, it was modelled after a reference video of a cat following something offscreen, probably a laser pointer lol

]]>
Untitled Cat 2023-01-28T02:11:53-07:00
Inspiration Search Bar https://codepen.io/nexii/pen/OJOdVey https://codepen.io/nexii/pen/OJOdVey Martin Pitt

See the Code - See it Full Page - See Details

Animation for introducing a search bar on the page. The animation is driven entirely in CSS on the SVG and I've tried to push as many properties for controlling SVG into CSS. So this will only work in browsers that allow this, such as on Chromium.

]]>
Inspiration Search Bar 2022-03-03T20:25:02-07:00
Wiggle Cloud https://codepen.io/nexii/pen/yLPMWgr https://codepen.io/nexii/pen/yLPMWgr Martin Pitt

See the Code - See it Full Page - See Details

]]>
Wiggle Cloud 2022-02-09T18:12:41-07:00
Sticky going wrong direction https://codepen.io/nexii/pen/GRmaryE https://codepen.io/nexii/pen/GRmaryE Martin Pitt

See the Code - See it Full Page - See Details

This sticky box is going the wrong direction!

]]>
Sticky going wrong direction 2021-08-16T21:59:16-07:00
Sticky going wrong direction https://codepen.io/nexii/pen/BaRepRw https://codepen.io/nexii/pen/BaRepRw Martin Pitt

See the Code - See it Full Page - See Details

This sticky box is going the wrong direction!

]]>
Sticky going wrong direction 2021-08-16T21:18:12-07:00
Pure CSS - 3D Cube w/ Parallax https://codepen.io/nexii/pen/rNmdyOj https://codepen.io/nexii/pen/rNmdyOj Martin Pitt

See the Code - See it Full Page - See Details

A small test with presenting a 3D cube with ability to look above and below it against a sky background.

]]>
Pure CSS - 3D Cube w/ Parallax 2021-08-16T22:06:45-07:00
Creative styling of Borders with Box-Shadow https://codepen.io/nexii/pen/PoNLGoa https://codepen.io/nexii/pen/PoNLGoa Martin Pitt

See the Code - See it Full Page - See Details

I'm playing with CSS of border property together with box-shadow to find creative style combinations.

]]>
Creative styling of Borders with Box-Shadow 2020-09-25T16:49:09-07:00