Skip to content

Instantly share code, notes, and snippets.

Avatar

CodeMyUI CodeMyUI

View GitHub Profile
@CodeMyUI
CodeMyUI / index.haml
Last active Nov 10, 2020
Spoopy Signup
View index.haml
#wrap
%form.signup
%input.email{:minlength => "4", :maxlength => "22", :type => "email", :required => "", :placeholder => "email"}/
%input.submit{:type => "submit", :value => "Subscribe"}/
.field
%p.text.initial{"data-splitting" => "chars"} email
.graves
.ghost
.ghostbody
-2.times do
View coin-flip-donate-button.markdown

Coin Flip Donate Button

A simple idea that ended up being really hard to pull off. No 3D elements or transformations are used in this experiment, only 2D elements and some clever math to give the illusion of a 3D coin with real thickness. I'm happy with the results given the limitations of HTML and CSS.

The coin flipping is actually randomized too -- if you press the button a few times you'll see.

A Pen by Cooper Goeke on CodePen.

License.

View index.html
<button class="pay-button">
<span class="default">Yeah, I want that</span>
<span class="success">
Redirected
<svg viewbox="0 0 12 10">
<polyline points="1.5 6 4.5 9 10.5 1"></polyline>
</svg>
</span>
<div class="truck-wrapper">
<div class="truck">
@CodeMyUI
CodeMyUI / index.html
Created Oct 15, 2020
SVG Image Sequence Masks
View index.html
<div class="main">
<svg viewBox="0 0 630 352" xmlns="http://www.w3.org/2000/svg">
<mask id="m1">
<image class="m" xlink:href="https://assets.codepen.io/721952/liquidMask1.svg" y="-1" width="630" height="10620" />
</mask>
<mask id="m2">
<image class="m" class="maskImg" xlink:href="https://assets.codepen.io/721952/liquidMask1.svg" y="-1" width="630" height="10620" />
</mask>
<image mask="url(#m2)" xlink:href="https://images.unsplash.com/photo-1597626564517-426e3c39ebbe?auto=format&fit=crop&w=1260&q=50" width="630" height="420" />
<g mask="url(#m1)">
@CodeMyUI
CodeMyUI / index.html
Created Oct 7, 2020
On / Off Switch 💡
View index.html
<div class="container">
<div class="switch">
<div class="toggle-button">
<div class="toggle"></div>
<div class="moon-mask"></div>
<div class="circles-wrapper">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
View confetti-button.markdown
@CodeMyUI
CodeMyUI / index.html
Created Oct 6, 2020
Unsubscribe Buttons 😈
View index.html
<!-- Button 1 -->
<section class="background">
<button class="unsub-button unsub-button--balloon">
<span class="unsub-button__default-text">Unsubscribe</span>
<svg class="unsub-button__icon" viewBox="0 0 83.4 64">
<path d="M6.5 15.3l30 20.4 30-20.4"/>
<path d="M45.1 51.8H6.5V15.3h60v12.1"/>
<circle class="cancel-color" cx="65.8" cy="48.1" r="12.5"/>
<path class="cancel-color" d="M57.1 39.2l17.6 17.6"/>
</svg>
You can’t perform that action at this time.