Pens from mattc0m https://codepen.io/mattc0m/ en nospam@codepen.io Copyright 2024 2024-03-04T19:10:56-07:00 [SUI] Button https://codepen.io/mattc0m/pen/RwEWrEv https://codepen.io/mattc0m/pen/RwEWrEv mattc0m

See the Code - See it Full Page - See Details

]]>
[SUI] Button 2023-08-24T20:52:39-07:00
[SUI] ImageContainer https://codepen.io/mattc0m/pen/dyQByRE https://codepen.io/mattc0m/pen/dyQByRE mattc0m

See the Code - See it Full Page - See Details

]]>
[SUI] ImageContainer 2023-10-14T19:08:25-07:00
Tabs, Buttons & Input (UI Test) https://codepen.io/mattc0m/pen/ExOpaPB https://codepen.io/mattc0m/pen/ExOpaPB mattc0m

See the Code - See it Full Page - See Details

]]>
Tabs, Buttons & Input (UI Test) 2023-12-13T20:44:40-07:00
A Pen by mattc0m https://codepen.io/mattc0m/pen/eYQygNq https://codepen.io/mattc0m/pen/eYQygNq mattc0m

See the Code - See it Full Page - See Details

]]>
A Pen by mattc0m 2023-07-11T19:53:45-07:00
Basic tree view https://codepen.io/mattc0m/pen/MWPQdRb https://codepen.io/mattc0m/pen/MWPQdRb mattc0m

See the Code - See it Full Page - See Details

]]>
Basic tree view 2023-08-01T19:59:03-07:00
Logomark Animation (CSS animation of the "M") https://codepen.io/mattc0m/pen/LYrKjNd https://codepen.io/mattc0m/pen/LYrKjNd mattc0m

See the Code - See it Full Page - See Details

]]>
Logomark Animation (CSS animation of the "M") 2022-12-13T21:36:17-07:00
Logo rotation animation (greyscale, vertical, with text) https://codepen.io/mattc0m/pen/VwxvvRa https://codepen.io/mattc0m/pen/VwxvvRa mattc0m

See the Code - See it Full Page - See Details

]]>
Logo rotation animation (greyscale, vertical, with text) 2022-09-06T20:56:37-07:00
Animated Moving Dots on Path https://codepen.io/mattc0m/pen/KKorZqd https://codepen.io/mattc0m/pen/KKorZqd mattc0m

See the Code - See it Full Page - See Details

A complex animation for a hero section of a landing page to illustrate a connected system. Uses animations on SVG paths (background layer), block elements (fades/slides in), a central circle element (with a looped pulse animation), and finally animated dots on initial SVG paths.

]]>
Animated Moving Dots on Path 2024-03-04T19:10:56-07:00
a better ol (numbered list with circle outline) https://codepen.io/mattc0m/pen/rNdMjKX https://codepen.io/mattc0m/pen/rNdMjKX mattc0m

See the Code - See it Full Page - See Details

a brief demo of an improved number list that has a circle around it. works great for lists up to 9 items

]]>
a better ol (numbered list with circle outline) 2022-07-14T15:34:21-07:00
Tooltip / Callout UI CSS Experiment https://codepen.io/mattc0m/pen/gOvmGEX https://codepen.io/mattc0m/pen/gOvmGEX mattc0m

See the Code - See it Full Page - See Details

This variable-driven tooltip / callout experiment will allow you to easily customize colors, add rounded borders, place the caret where you want it, and have unprecedented control over the shadow -- which is a fully replicated layer that combines the caret and background elements into one element. You could easily extend this in a lot of ways. I dislike the amount of CSS needed to get the caret "just right" -- I would recommend replacing that with an SVG or clip-path for production-ready code. I suspect the amount of hacky CSS needed to get the caret rendered would make it break in other OS / browsers, on other devices, or in future updates. Only tested in Firefox / MacOS.

]]>
Tooltip / Callout UI CSS Experiment 2022-06-02T14:05:29-07:00