Pens from Stan Williams https://codepen.io/Stanssongs/ en nospam@codepen.io Copyright 2024 2024-03-19T01:31:59-07:00 Grid Layout - Grid-Template-Columns / Helper Classes https://codepen.io/Stanssongs/pen/OJGWmgv https://codepen.io/Stanssongs/pen/OJGWmgv Stan Williams

See the Code - See it Full Page - See Details

]]>
Grid Layout - Grid-Template-Columns / Helper Classes 2024-03-19T01:31:59-07:00
Round the corner scrollbar 👀 https://codepen.io/Stanssongs/pen/KKEqeLN https://codepen.io/Stanssongs/pen/KKEqeLN Stan Williams

See the Code - See it Full Page - See Details

]]>
Round the corner scrollbar 👀 2024-01-22T03:15:14-07:00
Skeuomorphic Audio Player https://codepen.io/Stanssongs/pen/mdvEZbP https://codepen.io/Stanssongs/pen/mdvEZbP Stan Williams

See the Code - See it Full Page - See Details

A skeuomorphic audio player made to look like spinning vinyl record. Design made using pure CSS and a single image for the album artwork. Controls done using minimal jQuery.

]]>
Skeuomorphic Audio Player 2023-11-01T20:37:12-07:00
A Better YouTube Embed https://codepen.io/Stanssongs/pen/YzBWboX https://codepen.io/Stanssongs/pen/YzBWboX Stan Williams

See the Code - See it Full Page - See Details

]]>
A Better YouTube Embed 2023-11-01T21:29:29-07:00
Mac Dock Magnify :has demo https://codepen.io/Stanssongs/pen/ZEwONMx https://codepen.io/Stanssongs/pen/ZEwONMx Stan Williams

See the Code - See it Full Page - See Details

]]>
Mac Dock Magnify :has demo 2023-11-01T20:12:38-07:00
Page Transition - mount and unmount transitions with React Trasistion Group https://codepen.io/Stanssongs/pen/XWOKwBB https://codepen.io/Stanssongs/pen/XWOKwBB Stan Williams

See the Code - See it Full Page - See Details

]]>
Page Transition - mount and unmount transitions with React Trasistion Group 2023-11-01T20:10:37-07:00
Waving Text Effect https://codepen.io/Stanssongs/pen/eYxzxPK https://codepen.io/Stanssongs/pen/eYxzxPK Stan Williams

See the Code - See it Full Page - See Details

Text waving effect that scales very well with long lines of text. Normally, this would require lots of HTML for each letter, but using my JS code, you will only have to write the words in the HTML section for this effect.

]]>
Waving Text Effect 2023-11-01T17:11:07-07:00
SVG Animated Drum Kit (Play Me!) 🥁 https://codepen.io/Stanssongs/pen/poqpEdO https://codepen.io/Stanssongs/pen/poqpEdO Stan Williams

See the Code - See it Full Page - See Details

Rock out with this interactive svg animation, click, tap, or keys to play! Part of my [Pen's of Rock!](http://codepen.io/collection/APoYVq/) collection. Drawn in adobe illustrator, animated with greensock. Turn your speakers up for html audio elements in your ears! Weird bounding box appears when tapped on mobile, any ideas?

]]>
SVG Animated Drum Kit (Play Me!) 🥁 2023-09-20T21:52:58-07:00
Online Guitar Tuner - v3 https://codepen.io/Stanssongs/pen/NWEegLV https://codepen.io/Stanssongs/pen/NWEegLV Stan Williams

See the Code - See it Full Page - See Details

A new guitar tuner with a couple of new features and a new CSS-only design. Javascript is also used, though only to play the sounds and add or remove classes to different elements when a guitar string or some other button is pressed. The first new feature is being able to choose between two types of guitar (electric or classical) with their different sounds for the strings. The second new feature is a volume control to separate between the audio from the guitar tuner and the general audio from your device. I've also made some improvements to the Javascript code, although not as many as I would have liked, maybe in the next version. But I'm very happy with how the CSS design has turned out and I don't rule out making some changes that keep occurring to me. I hope it will be of help to you! <hr> Un nuevo afinador de guitarra con un par de características nuevas y un nuevo diseño creado solo con CSS. También se usa Javascript, aunque solo para reproducir los sonidos y añadir o quitar clases a diferentes elementos cuando se pulsa una cuerda de la guitarra o algún otro botón. La primera característica nueva es poder elegir entre dos tipos de guitarra (eléctrica o clásica) con sus diferentes sonidos para las cuerdas. La segunda característica nueva es un control de volumen para separar entre el audio del afinador de guitarra y el audio general de tu dispositivo. También he hecho algunas mejoras al código Javascript, aunque no tantas como me hubiera gustado, quizá en la próxima versión. Pero estoy muy contento de como ha quedado el diseño en CSS y no descarto hacer algunos cambios que se me siguen ocurriendo. Espero que te sea de ayuda! Ver artículo en el <a href="https://josetxu.com/afinador-de-guitarra-online-guitar-tuner-v3/">Blog</a>.

]]>
Online Guitar Tuner - v3 2023-07-31T17:46:04-07:00
Svg text stroke animation https://codepen.io/Stanssongs/pen/oNQJXzN https://codepen.io/Stanssongs/pen/oNQJXzN Stan Williams

See the Code - See it Full Page - See Details

Use svg stroke to animate drawing words. Video by Peter from Pexels

]]>
Svg text stroke animation 2023-07-31T04:36:15-07:00