Pens from Dylan Baumann https://codepen.io/dylanbaumann/ en nospam@codepen.io Copyright 2024 2019-12-11T16:37:24-07:00 Link Hover Effects w/ mo.js https://codepen.io/dylanbaumann/pen/yKeyYY https://codepen.io/dylanbaumann/pen/yKeyYY Dylan Baumann

See the Code - See it Full Page - See Details

Simple link hover effects with mo.js.

]]>
Link Hover Effects w/ mo.js 2018-09-09T05:52:24-07:00
Animated Background Gradient https://codepen.io/dylanbaumann/pen/OzKVKB https://codepen.io/dylanbaumann/pen/OzKVKB Dylan Baumann

See the Code - See it Full Page - See Details

Proof of concept for a band website for testing performance on mobile and older devices.

]]>
Animated Background Gradient 2018-03-12T00:22:06-07:00
CSS Line Numbering + No Copy/Paste https://codepen.io/dylanbaumann/pen/bYEwdO https://codepen.io/dylanbaumann/pen/bYEwdO Dylan Baumann

See the Code - See it Full Page - See Details

]]>
CSS Line Numbering + No Copy/Paste 2017-11-02T17:01:30-07:00
CSS Hallucination https://codepen.io/dylanbaumann/pen/boxvdN https://codepen.io/dylanbaumann/pen/boxvdN Dylan Baumann

See the Code - See it Full Page - See Details

]]>
CSS Hallucination 2017-10-13T19:47:34-07:00
:party: https://codepen.io/dylanbaumann/pen/mwZoMR https://codepen.io/dylanbaumann/pen/mwZoMR Dylan Baumann

See the Code - See it Full Page - See Details

Trying to learn how to animate paths with the :partyparrot:

]]>
:party: 2017-07-19T21:41:29-07:00
CSS Image Rendering https://codepen.io/dylanbaumann/pen/XgzOEN https://codepen.io/dylanbaumann/pen/XgzOEN Dylan Baumann

See the Code - See it Full Page - See Details

]]>
CSS Image Rendering 2017-06-29T14:56:25-07:00
Single Div Minimalist Painting https://codepen.io/dylanbaumann/pen/NgjZZo https://codepen.io/dylanbaumann/pen/NgjZZo Dylan Baumann

See the Code - See it Full Page - See Details

Wanted to learn a bit more about single-div art via ::before and ::after gradients, so I built one

]]>
Single Div Minimalist Painting 2017-06-24T14:58:47-07:00
Responsive Grid without Media Queries https://codepen.io/dylanbaumann/pen/qjrjGV https://codepen.io/dylanbaumann/pen/qjrjGV Dylan Baumann

See the Code - See it Full Page - See Details

Auto-Fit is a property you can pass to `repeat()` in lieu of a hard column-count (usually a number like 3 or 4). It automatically scales the number of columns in the grid to fit the width of elements within it.

]]>
Responsive Grid without Media Queries 2019-12-11T16:37:24-07:00
Custom HTML attributes (selector cascade) https://codepen.io/dylanbaumann/pen/OgyyxO https://codepen.io/dylanbaumann/pen/OgyyxO Dylan Baumann

See the Code - See it Full Page - See Details

The use of custom HTML attributes (ie: attributes which are not listed in the HTML specification nor prefixed with 'data-') have been around for a long time. Technically these custom attributes will invalidate your HTML, however every browser down to IE6 will render them correctly. They are fully accessible to both CSS and JS selectors and will not inhibit page rendering

]]>
Custom HTML attributes (selector cascade) 2017-06-08T21:49:06-07:00
Better Text-Justify https://codepen.io/dylanbaumann/pen/eRpmBZ https://codepen.io/dylanbaumann/pen/eRpmBZ Dylan Baumann

See the Code - See it Full Page - See Details

The text-justify CSS property defines what type of justification should be applied to text when it is justified (i.e. when text-align: justify; is set on it). none: The text justification is turned off — this has the same effect as not setting text-align at all, although it is useful if you need to turn justification on and off for some reason. auto: The browser chooses the best type of justification for the current situation based on a balance between performance and quality, but also on what is most appropriate for the language of the text (e.g. English, CJK languages, etc.). This is the default justification used if text-justify is not set at all. inter-word: The text is justified by adding space between words (effectively varying word-spacing), which is most appropriate for languages that separate words using spaces, like English or Korean. inter-character: The text is justified by adding space between characters (effectively varying letter-spacing), which is most appropriate for languages like Japanese. Read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/text-justify

]]>
Better Text-Justify 2017-06-07T15:58:08-07:00