Forem: mandynicole

Thank you so much for featuring my little demo, Alvaro! I'm already so obnoxious with `sibling-index()` and `if()`, and it's only going to get worse with functions and mixins. 😅

mandynicole — Sat, 04 Apr 2026 12:53:54 +0000

Alvaro Montoro

Apr 4

10 Cool CodePen Demos (March 2026)

#showdev #html #css #javascript

Comments 1

3 min read

Mobile Preview Cards v1

mandynicole — Sat, 15 Mar 2025 23:45:52 +0000

The first version of some interactive cards made to preview mobile layouts. The mock-up used here is the "individual issue" view of a web app I was helping Oni Press design and develop that allowed users to read, favorite, and engage with their comic library for free.

Label + Checkbox States

mandynicole — Wed, 15 Jan 2025 03:14:14 +0000

A little visualizer for the interactive states of a label that's wrapped around an input[type="checkbox"].

`grid` with reveal + resize on `hover`

mandynicole — Sat, 19 Oct 2024 03:25:19 +0000

clip-path for better, cleaner border radii, especially in conjunction with transitions
oklch and color-mix
container to determine if/when to unwrap and marquee-ify tags
Faux marquee that intentionally waits a beat before animating and pauses on :hover
media queries to determine whether card titles are line-clamped + text-overflow: ellipsis;'d or flex-wrap: wrap;

(See Pen details for TODOs.)

Color-Scheme + Fluid Type

mandynicole — Sat, 19 Oct 2024 03:22:09 +0000

light-dark with color-scheme
:has to toggle style-specific settings
Utopia for fluid type settings

Soft Morph Elements w/SVG

mandynicole — Sat, 19 Oct 2024 03:16:19 +0000

Change the magnification to show the effect at different scales

`feBlend` a `feGussianBlur` with `feColorMatrix`

Note: If you don't want the soft look, you can remove the blur filter from the .blob elements and mess around with the alpha channel in the feColorMatrix to create more defined edges.