Pens from Rhy Moore https://codepen.io/morewry/ en nospam@codepen.io Copyright 2024 2023-11-07T20:45:12-07:00 Validation Constraint Pseudo-Classes Demo - :user-valid, :user-invalid https://codepen.io/morewry/pen/qBgNzVO https://codepen.io/morewry/pen/qBgNzVO Rhy Moore

See the Code - See it Full Page - See Details

An demo of a web form with input, select, and textarea controls. While interacting, styles change and informs the user about the input validity using the :valid, :invalid, :user-valid, and :user-invalid selectors.

]]>
Validation Constraint Pseudo-Classes Demo - :user-valid, :user-invalid 2023-11-07T20:45:12-07:00
div vs a vs button https://codepen.io/morewry/pen/poOxLmL https://codepen.io/morewry/pen/poOxLmL Rhy Moore

See the Code - See it Full Page - See Details

]]>
div vs a vs button 2023-03-21T22:11:36-07:00
Custom element upgrade example https://codepen.io/morewry/pen/XWjyPeN https://codepen.io/morewry/pen/XWjyPeN Rhy Moore

See the Code - See it Full Page - See Details

]]>
Custom element upgrade example 2021-01-14T22:56:37-07:00
A Pen by Rhy Moore https://codepen.io/morewry/pen/XWjNRrj https://codepen.io/morewry/pen/XWjNRrj Rhy Moore

See the Code - See it Full Page - See Details

]]>
A Pen by Rhy Moore 2020-12-11T01:15:48-07:00
CSS only scroll indicator https://codepen.io/morewry/pen/jOrqORK https://codepen.io/morewry/pen/jOrqORK Rhy Moore

See the Code - See it Full Page - See Details

I was interested to see if I could make a scroll indicator with just CSS. You can! But maybe you shouldn't. This is an interesting consequence of a bunch of hacks held together with duct tape. Having said that, hacks are not always bad. I love hacks and many of us have made quite a good living selling floats and clearfixes. The techniques used here are well supported, if not conventional. If you can read the CSS, understand how it works, and how to change it, and you think this works better for you than JavaScript, feel free to implement it. Just be aware of the z-index behaviour and possible conflict with other CSS using negative z-index.

]]>
CSS only scroll indicator 2020-10-16T01:57:01-07:00
Digital Bleeds https://codepen.io/morewry/pen/PoZzYBP https://codepen.io/morewry/pen/PoZzYBP Rhy Moore

See the Code - See it Full Page - See Details

]]>
Digital Bleeds 2020-06-13T01:56:40-07:00
Register Elements https://codepen.io/morewry/pen/QWWXBRm https://codepen.io/morewry/pen/QWWXBRm Rhy Moore

See the Code - See it Full Page - See Details

]]>
Register Elements 2019-11-26T23:18:40-07:00
If font face were useful for type ramps https://codepen.io/morewry/pen/BaBowWJ https://codepen.io/morewry/pen/BaBowWJ Rhy Moore

See the Code - See it Full Page - See Details

]]>
If font face were useful for type ramps 2019-08-13T04:35:10-07:00
Semantic? Pie/Donut Chart https://codepen.io/morewry/pen/KjEOzL https://codepen.io/morewry/pen/KjEOzL Rhy Moore

See the Code - See it Full Page - See Details

Using figure, figcaption, and meter to draw a pure HTML + CSS pie or donut chart with optional transparency of the middle of the donut and missing chart segments. With a few minor changes, could support back to IE 10.

]]>
Semantic? Pie/Donut Chart 2019-07-16T01:18:44-07:00
Example uses of ::slotted() (requires native web component support, no polyfills included) https://codepen.io/morewry/pen/eoobwe https://codepen.io/morewry/pen/eoobwe Rhy Moore

See the Code - See it Full Page - See Details

]]>
Example uses of ::slotted() (requires native web component support, no polyfills included) 2019-04-30T03:51:24-07:00