Pens from Patrick https://codepen.io/cara-tm/ en nospam@codepen.io Copyright 2024 2024-03-21T11:56:15-07:00 Theme Switcher (Interaction with the native HTML meta tag) https://codepen.io/cara-tm/pen/xxegLBv https://codepen.io/cara-tm/pen/xxegLBv Patrick

See the Code - See it Full Page - See Details

]]>
Theme Switcher (Interaction with the native HTML meta tag) 2024-03-21T11:56:15-07:00
Modal Boxes with dialog tag and Flexbox https://codepen.io/cara-tm/pen/RwMyNrG https://codepen.io/cara-tm/pen/RwMyNrG Patrick

See the Code - See it Full Page - See Details

]]>
Modal Boxes with dialog tag and Flexbox 2022-08-05T06:21:08-07:00
Search Box https://codepen.io/cara-tm/pen/ExxmoRg https://codepen.io/cara-tm/pen/ExxmoRg Patrick

See the Code - See it Full Page - See Details

]]>
Search Box 2019-10-26T19:50:41-07:00
PURE CSS SIDEBAR TOGGLE MENU https://codepen.io/cara-tm/pen/Gezegq https://codepen.io/cara-tm/pen/Gezegq Patrick

See the Code - See it Full Page - See Details

]]>
PURE CSS SIDEBAR TOGGLE MENU 2019-03-24T18:43:54-07:00
Pure CSS Ticker (Horizontal) https://codepen.io/cara-tm/pen/aMdxQM https://codepen.io/cara-tm/pen/aMdxQM Patrick

See the Code - See it Full Page - See Details

This pure css ticker solves lots of pain with horizontal tickers on an infinite loop. Even JavaScript ticker solutions seem to let you down with the final effect found here. Duration is the only variable required (based on number of items).

]]>
Pure CSS Ticker (Horizontal) 2019-03-01T19:23:13-07:00
Pure CSS Ticker (Horizontal) https://codepen.io/cara-tm/pen/YgwMjz https://codepen.io/cara-tm/pen/YgwMjz Patrick

See the Code - See it Full Page - See Details

This pure css ticker solves lots of pain with horizontal tickers on an infinite loop. Even JavaScript ticker solutions seem to let you down with the final effect found here. Duration is the only variable required (based on number of items).

]]>
Pure CSS Ticker (Horizontal) 2019-03-01T17:14:52-07:00
SVG as a submit button https://codepen.io/cara-tm/pen/JxNJEW https://codepen.io/cara-tm/pen/JxNJEW Patrick

See the Code - See it Full Page - See Details

]]>
SVG as a submit button 2019-02-02T12:37:23-07:00
Flyout tooltip (CSS only) https://codepen.io/cara-tm/pen/NewYxQ https://codepen.io/cara-tm/pen/NewYxQ Patrick

See the Code - See it Full Page - See Details

Simple CSS only flyout tooltip

]]>
Flyout tooltip (CSS only) 2018-12-31T14:23:41-07:00
Masonry with flexbox and minimal js https://codepen.io/cara-tm/pen/RELOxR https://codepen.io/cara-tm/pen/RELOxR Patrick

See the Code - See it Full Page - See Details

This solution flows your variable-height items in order from left to right in the "masonry" style. Set COL_COUNT to however many columns you want and the script does the rest.

]]>
Masonry with flexbox and minimal js 2018-12-29T20:15:38-07:00
Style attribute @media https://codepen.io/cara-tm/pen/dwVaJz https://codepen.io/cara-tm/pen/dwVaJz Patrick

See the Code - See it Full Page - See Details

this allows you to use `@media` rules right inside `style` attribute of HTML elements, like this: ```html <div class="js-inline-media" style="padding: 10rem; @media (max-width: 500px) { padding: 1rem; }"></div> ``` and you will get this: ```html <div class="js-inline-media" data-inline-media="a9c6-ope4" style="padding: 10rem;"></div> <style> @media (max-width: 500px) { [data-inline-media="a9c6-ope4"] { padding: 1rem; } } </style> ``` So, in short: - you write `@media` rule right inside `style` attribute, **but without selector inside** - `@media` rule is moved from `style` attribute into `<style>` tag - source element now has unique `data-inline-media` attribute value TODO: - allow use multiple `@media` blocks for one element like this: ``` @media (max-width: 500px) { … } @media (max-width: 300) { … } ``` for now, you will get only last `@media`. others will be ignored.

]]>
Style attribute @media 2018-12-29T17:08:02-07:00