The title says it all: A pure CSS animated play, pause, and buffer button. The way I have it implemented, it uses JS to switch between play, pause, and buffer states, but it’s the CSS dataset/class selectors that actually control the appearance/animations. If you really wanted to do this in pure CSS, you could make the button a label for a checkbox and control the states that way. I’m not sure why you’d want to do it that way, but if you did, that’s a way you could do it. Anyway… Continue reading “Snippet of the Day: Pure CSS Animated Play, Pause, and Buffer Button”
Blog
Snippet of the day: Deep copy JS object.
Here’s a quick code snippet that’s very handy. This code performs a deep copy of a JS object without leaving any references to the old object. Here’s the gist:
Continue reading “Snippet of the day: Deep copy JS object.”
Snippet of the Day 2020-03-27
I want to get in the habit of posting little bits of code that have been useful in my day to day. Here’s a little snippet for material design labels. This creates the little rising effect using pure CSS. I built this to play nice with bootstrap.
<div class = 'mat-group'>
<input type = 'text' class = 'form-control' placeholder = 'anything, but must be something.'>
<label>The placeholder text.</label>
</div>
<style>
.mat-group label { position:absolute;margin-top:-1.25rem; pointer-events:none; transition: all .3s ease; color: rgba(0,0,0,.26);}
.mat-group input:focus + label,.mat-group input:not(:placeholder-shown) + label { position:absolute; margin-top:-2.7rem; font-size: .75rem; color:#009688; }
input::placeholder {color:transparent !important;}
</style>
In action: