Pens from Ben McNelly https://codepen.io/benmcnelly/ en nospam@codepen.io Copyright 2024 2020-12-13T16:35:42-07:00 Home Page Design https://codepen.io/benmcnelly/pen/LYRxQWz https://codepen.io/benmcnelly/pen/LYRxQWz Ben McNelly

See the Code - See it Full Page - See Details

]]>
Home Page Design 2020-12-13T16:35:42-07:00
Netflix Carousel using CSS Beta1.0 https://codepen.io/benmcnelly/pen/KKPBWYR https://codepen.io/benmcnelly/pen/KKPBWYR Ben McNelly

See the Code - See it Full Page - See Details

]]>
Netflix Carousel using CSS Beta1.0 2019-09-15T06:18:42-07:00
Glitch https://codepen.io/benmcnelly/pen/aezoYo https://codepen.io/benmcnelly/pen/aezoYo Ben McNelly

See the Code - See it Full Page - See Details

Variation on a graphical glitch using javascript to randomly cause the animation

]]>
Glitch 2019-07-18T22:09:37-07:00
Glitch https://codepen.io/benmcnelly/pen/WVbevZ https://codepen.io/benmcnelly/pen/WVbevZ Ben McNelly

See the Code - See it Full Page - See Details

Variation on a graphical glitch using javascript to randomly cause the animation

]]>
Glitch 2019-07-18T22:00:37-07:00
Archive Button - CSS Animated Gradient https://codepen.io/benmcnelly/pen/OdEyYK https://codepen.io/benmcnelly/pen/OdEyYK Ben McNelly

See the Code - See it Full Page - See Details

From pages like this: http://www.uniqlo.com/us/mens-clothing Only they use an [animated GIF](http://www.uniqlo.com/us/published/b861cf4a/img/barberpole_5.gif) and this is CSS only. Would have like to not do the extra `div` for the hover, but there is no background-opacity...

]]>
Archive Button - CSS Animated Gradient 2019-02-12T11:20:49-07:00
Linjer https://codepen.io/benmcnelly/pen/bOoPLV https://codepen.io/benmcnelly/pen/bOoPLV Ben McNelly

See the Code - See it Full Page - See Details

Visual/interactive experiment on canvas.

]]>
Linjer 2018-12-30T00:36:18-07:00
Flexbox Reactive Dark Menu https://codepen.io/benmcnelly/pen/aQLbXw https://codepen.io/benmcnelly/pen/aQLbXw Ben McNelly

See the Code - See it Full Page - See Details

Wanted to build something from scratch to use for a site, but it doesn't need to know or care about your CSS framework or how you want your elements set up. Should be easy to adapt to lists or <nav> element. * Remove "flex-grow: 1;" from the menu items to get buttons that behave individually using Flexbox's "justify-content: space-around".

]]>
Flexbox Reactive Dark Menu 2018-11-18T14:28:51-07:00
Boredom https://codepen.io/benmcnelly/pen/YPWYOG https://codepen.io/benmcnelly/pen/YPWYOG Ben McNelly

See the Code - See it Full Page - See Details

Saw this Animation on reddit and recreated it, using CSS shapes and animations. Forked from [Schmuh](http://codepen.io/Schmuh/)'s Pen [Boredom](http://codepen.io/Schmuh/pen/VYaEGd/).

]]>
Boredom 2014-12-18T22:24:31-07:00
Simple jQuery Show/Hide Button https://codepen.io/benmcnelly/pen/OPXzwx https://codepen.io/benmcnelly/pen/OPXzwx Ben McNelly

See the Code - See it Full Page - See Details

This is a small example on how to show and hide something with one button. Forked from [Matt Shull](http://codepen.io/derekshull/)'s Pen [Simple jQuery Show/Hide Button](http://codepen.io/derekshull/pen/beFmg/). Forked from [Captain Anonymous](http://codepen.io/anon/)'s Pen [Simple jQuery Show/Hide Button](http://codepen.io/anon/pen/VYjyBj/).

]]>
Simple jQuery Show/Hide Button 2014-12-18T22:20:55-07:00
Subtle Embossed Input + Validation tooltip https://codepen.io/benmcnelly/pen/DbNNaW https://codepen.io/benmcnelly/pen/DbNNaW Ben McNelly

See the Code - See it Full Page - See Details

A subtle CSS3 input that will look good on ANY background that isn't white or Black; also a validation tooltip!

]]>
Subtle Embossed Input + Validation tooltip 2012-10-03T20:49:49-07:00