Pens from Adam Mustill https://codepen.io/amustill/ en nospam@codepen.io Copyright 2024 2017-04-19T10:17:16-07:00 Password strength indicator https://codepen.io/amustill/pen/MmKePv https://codepen.io/amustill/pen/MmKePv Adam Mustill

See the Code - See it Full Page - See Details

A simple password strength indicator leverging the `zxcvbn` library for strength estimation.

]]>
Password strength indicator 2017-04-19T10:17:16-07:00
Responsive Tabs with Flexbox https://codepen.io/amustill/pen/mVYjJm https://codepen.io/amustill/pen/mVYjJm Adam Mustill

See the Code - See it Full Page - See Details

An evolution of my original 'Responsive Tabs' idea (http://codepen.io/amustill/details/snahq) - now using Flexbox. Using the power of Flexbox's `order` property, we can transform a simple accordion to a fully tabbed content area - keeping semantics intact. This demo also does away with the previous dependency on jQuery. Note: This has not been fully cross-browser tested.

]]>
Responsive Tabs with Flexbox 2016-02-19T16:26:46-07:00
Responsive tabs https://codepen.io/amustill/pen/nbrMzN https://codepen.io/amustill/pen/nbrMzN Adam Mustill

See the Code - See it Full Page - See Details

A little experiment in to semantic and responsive tabs. Mobile users are presented with an accordion view, whilst tablet/desktop users see the full tabs.

]]>
Responsive tabs 2013-07-19T11:10:54-07:00
Hover 'pop-out' grid matrix https://codepen.io/amustill/pen/nRpGYr https://codepen.io/amustill/pen/nRpGYr Adam Mustill

See the Code - See it Full Page - See Details

A simple grid matrix with 'pop-out' detail on hover.

]]>
Hover 'pop-out' grid matrix 2013-05-29T21:53:11-07:00
Unravel https://codepen.io/amustill/pen/AWoeNP https://codepen.io/amustill/pen/AWoeNP Adam Mustill

See the Code - See it Full Page - See Details

A small Javascript function that takes an elements text content and unravels it character by character.

]]>
Unravel 2013-04-19T17:26:41-07:00
The 'root element' parallax technique https://codepen.io/amustill/pen/AJXYwX https://codepen.io/amustill/pen/AJXYwX Adam Mustill

See the Code - See it Full Page - See Details

By combining the power of `rem` and a small JavaScript function to manipulate the `font-size` of the `html` element, we can achieve simple but effective parallaxing. Setting all our positions and parallax movements in CSS, this technique minimises DOM manipulations to just one – on the `html` element – boosting overall performance, although certainly not better than using 3D transforms. The speed and direction of each element is set using margins (for this demo I've used `margin-top`). Play around with the numbers yourself to get a better understanding. This is just a proof of concept and hasn't been fully tested, though it should work everywhere that supports `rem` (http://caniuse.com/#search=rem). Using `rem` in this way does have its pitfalls – most notably the loss of its traditional usage – but it's a nice trick.

]]>
The 'root element' parallax technique 2016-12-15T11:18:23-07:00
dialog box using × https://codepen.io/amustill/pen/kMKaGN https://codepen.io/amustill/pen/kMKaGN Adam Mustill

See the Code - See it Full Page - See Details

A few more alternatives to using an 'x' as a close icon. Forked from: http://codepen.io/alextebbs/pen/zkHvA

]]>
dialog box using × 2013-02-07T12:33:51-07:00
Pure CSS toggle switch - Android Holo https://codepen.io/amustill/pen/kNGYdL https://codepen.io/amustill/pen/kNGYdL Adam Mustill

See the Code - See it Full Page - See Details

A robust, flexible concept of a pure CSS toggle switch with minimal and as-semantic markup as possible. A key goal was keep all language within the markup. All units are relative to allow size to be set by `font-size` on `toggle` class. Style based on Android Holo 4.1 for no real reason. Additional styles forthcoming.

]]>
Pure CSS toggle switch - Android Holo 2013-04-30T15:53:55-07:00
Yet more CSS loading animations https://codepen.io/amustill/pen/nqOoOb https://codepen.io/amustill/pen/nqOoOb Adam Mustill

See the Code - See it Full Page - See Details

CSS loading animations are all the rage. Here are some more super simple, yet elegant, styles that take advantage of `border-radius` and `border-style`.

]]>
Yet more CSS loading animations 2013-01-23T15:56:21-07:00