masklayer

UAhh I'm gonna be sick ! OH

uhhhhhhhhh

Tom | 31 | 🦌🌐

<3 @clip <3

 


 

Tags I use sometimes:
CameraPhotoTimelapseVideo
VRChatCybuckClip
LifeArtMaking(?)
Creature

 


 

"mweeh.."

 


 
opinions my own & do not reflect those of my employer ;3


atomicthumbs
@atomicthumbs

Pure CSS Tower of Hanoi

    <input id="three" type="text" tabindex="-1" readonly style="position:absolute;top:-10vmin;margin:0;border:0;padding:0;width:30vmin;height:52.5vmin;cursor:pointer;opacity:0;pointer-events:none;-webkit-tap-highlight-color:transparent;"><input name="three" type="radio" tabindex="-1" checked style="position: absolute;
top: -10vmin;
margin: 0;
border: 0;
padding: 0;
width: 30vmin;
height: 52.5vmin;
cursor: pointer;
opacity: 0;
pointer-events: none;
-webkit-tap-highlight-color: transparent;"><input name="three" type="radio" tabindex="-1" style="position: absolute;
top: -10vmin;
margin: 0;
border: 0;
padding: 0;
width: 30vmin;
height: 52.5vmin;
cursor: pointer;
opacity: 0;
pointer-events: none;
-webkit-tap-highlight-color: transparent;"><input name="three" type="radio" tabindex="-1" style="position: absolute;
top: -10vmin;
margin: 0;
border: 0;
padding: 0;
width: 30vmin;
height: 52.5vmin;
cursor: pointer;
opacity: 0;
pointer-events: none;
-webkit-tap-highlight-color: transparent;"><label for="three" style="position:absolute;top:-10vmin;margin:0;border:0;padding:0;width:30vmin;height:52.5vmin;cursor:pointer;opacity:0;pointer-events:initial;-webkit-tap-highlight-color:transparent;"></label>
    <div class="disc three" style="z-index:1;border-radius:1vmin;height:4vmin;pointer-events:none;transition:order 0.3s step-end;margin:0 6vmin;width:18vmin;background:linear-gradient(to right, #f0d775, #fc0, #e6bd19);"></div>
    <input id="four" type="text" tabindex="-1" readonly style="position:absolute;top:-10vmin;margin:0;border:0;padding:0;width:30vmin;height:52.5vmin;cursor:pointer;opacity:0;pointer-events:none;-webkit-tap-highlight-color:transparent;"><input name="four" type="radio" tabindex="-1" checked style="position: absolute;
top: -10vmin;
margin: 0;
border: 0;
padding: 0;
width: 30vmin;
height: 52.5vmin;
cursor: pointer;
opacity: 0;
pointer-events: none;
-webkit-tap-highlight-color: transparent;"><input name="four" type="radio" tabindex="-1" style="position: absolute;
top: -10vmin;
margin: 0;
border: 0;
padding: 0;
width: 30vmin;
height: 52.5vmin;
cursor: pointer;
opacity: 0;
pointer-events: none;
-webkit-tap-highlight-color: transparent;"><input name="four" type="radio" tabindex="-1" style="position: absolute;
top: -10vmin;
margin: 0;
border: 0;
padding: 0;
width: 30vmin;
height: 52.5vmin;
cursor: pointer;
opacity: 0;
pointer-events: none;
-webkit-tap-highlight-color: transparent;"><label for="four" style="position:absolute;top:-10vmin;margin:0;border:0;padding:0;width:30vmin;height:52.5vmin;cursor:pointer;opacity:0;pointer-events:initial;-webkit-tap-highlight-color:transparent;"></label>
    <div class="disc four" style="z-index:1;border-radius:1vmin;height:4vmin;pointer-events:none;transition:order 0.3s step-end;margin:0 4vmin;width:22vmin;background:linear-gradient(to right, #666, #000, #333);"></div>

    <input id="five" type="text" tabindex="-1" readonly style="position:absolute;top:-10vmin;margin:0;border:0;padding:0;width:30vmin;height:52.5vmin;cursor:pointer;opacity:0;pointer-events:none;-webkit-tap-highlight-color:transparent;"><input name="five" type="radio" tabindex="-1" checked style="position: absolute;
top: -10vmin;
margin: 0;
border: 0;
padding: 0;
width: 30vmin;
height: 52.5vmin;
cursor: pointer;
opacity: 0;
pointer-events: none;
-webkit-tap-highlight-color: transparent;"><input name="five" type="radio" tabindex="-1" style="position: absolute;
top: -10vmin;
margin: 0;
border: 0;
padding: 0;
width: 30vmin;
height: 52.5vmin;
cursor: pointer;
opacity: 0;
pointer-events: none;
-webkit-tap-highlight-color: transparent;"><input name="five" type="radio" tabindex="-1" style="position: absolute;
top: -10vmin;
margin: 0;
border: 0;
padding: 0;
width: 30vmin;
height: 52.5vmin;
cursor: pointer;
opacity: 0;
pointer-events: none;
-webkit-tap-highlight-color: transparent;"><label for="five" style="position:absolute;top:-10vmin;margin:0;border:0;padding:0;width:30vmin;height:52.5vmin;cursor:pointer;opacity:0;pointer-events:initial;-webkit-tap-highlight-color:transparent;"></label>
    <div class="disc five" style="z-index:1;border-radius:1vmin;height:4vmin;pointer-events:none;transition:order 0.3s step-end;margin:0 2vmin;width:26vmin;background:linear-gradient(to right, #7ee2a8, #09f16a, #2ecc71);"></div>

    <input id="six" type="text" tabindex="-1" readonly style="position:absolute;top:-10vmin;margin:0;border:0;padding:0;width:30vmin;height:52.5vmin;cursor:pointer;opacity:0;pointer-events:none;-webkit-tap-highlight-color:transparent;"><input name="six" type="radio" tabindex="-1" checked style="position: absolute;
top: -10vmin;
margin: 0;
border: 0;
padding: 0;
width: 30vmin;
height: 52.5vmin;
cursor: pointer;
opacity: 0;
pointer-events: none;
-webkit-tap-highlight-color: transparent;"><input name="six" type="radio" tabindex="-1" style="position: absolute;
top: -10vmin;
margin: 0;
border: 0;
padding: 0;
width: 30vmin;
height: 52.5vmin;
cursor: pointer;
opacity: 0;
pointer-events: none;
-webkit-tap-highlight-color: transparent;"><input name="six" type="radio" tabindex="-1" style="position: absolute;
top: -10vmin;
margin: 0;
border: 0;
padding: 0;
width: 30vmin;
height: 52.5vmin;
cursor: pointer;
opacity: 0;
pointer-events: none;
-webkit-tap-highlight-color: transparent;"><label for="six" style="position:absolute;top:-10vmin;margin:0;border:0;padding:0;width:30vmin;height:52.5vmin;cursor:pointer;opacity:0;pointer-events:initial;-webkit-tap-highlight-color:transparent;"></label>
    <div class="disc six" style="z-index:1;border-radius:1vmin;height:4vmin;pointer-events:none;transition:order 0.3s step-end;width:30vmin;background:linear-gradient(to right, #f2a097, #ff3a24, #e74c3c);"></div>

    <input id="zero" type="text" tabindex="-1" readonly style="position:absolute;top:-10vmin;margin:0;border:0;padding:0;width:30vmin;height:52.5vmin;cursor:pointer;opacity:0;pointer-events:none;-webkit-tap-highlight-color:transparent;z-index:7;"><div class="spacer a" style="width:30vmin;height:1px;flex-grow:0;pointer-events:none;transition:flex 0.3s;order:2;left:12.5vmin;"></div>
    <div class="separator ab" style="width:0;height:100%;order:3;"></div>
    <div class="spacer b" style="width:30vmin;height:1px;flex-grow:0;pointer-events:none;transition:flex 0.3s;order:5;left:42.5vmin;"></div>
    <div class="separator bc" style="width:0;height:100%;order:6;"></div>
    <div class="spacer c" style="width:30vmin;height:1px;flex-grow:0;pointer-events:none;transition:flex 0.3s;order:8;left:72.5vmin;"></div>

    <div class="tower a" style="order:2;position:absolute;top:7.5vmin;border-radius:1vmin;width:5vmin;height:30vmin;background:linear-gradient(to right, #d7b889, #b27315, #966f33);left:12.5vmin;"></div>
    <div class="tower b" style="order:5;position:absolute;top:7.5vmin;border-radius:1vmin;width:5vmin;height:30vmin;background:linear-gradient(to right, #d7b889, #b27315, #966f33);left:42.5vmin;"></div>
    <div class="tower c" style="order:8;position:absolute;top:7.5vmin;border-radius:1vmin;width:5vmin;height:30vmin;background:linear-gradient(to right, #d7b889, #b27315, #966f33);left:72.5vmin;"></div>

    <div class="win" style="z-index: 7;
position: absolute;
left: 0;
right: 0;
top: -10vmin;
bottom: -7.5vmin;
color: #966f33;
font-family: Arial, sans-serif;
font-size: 6vmin;
line-height: 17.5vmin;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;">You win! :)</div>
</div>
<div class="bottom" style="position: relative;
display: block;
margin: 0 auto;
border-radius: 1vmin;
width: 95vmin;
height: 7.5vmin;
background: linear-gradient(to right, rgba(255, 255, 255, 0.3), transparent),
linear-gradient(#b27315, #966f33 13%, #faddb0 14.5%, #faddb0 27.5%, #966f33 29%, #966f33 42%, #faddb0 43.5%, #d7b889 56.5%, #966f33 58%, #966f33 71%, #d7b889 72.5%, #d7b889 85.5%, #966f33 87%, #b27315);"></div>
<button type="reset" style="margin: 7.5vmin auto;
border: none;
border-radius: 1vmin;
width: 35vmin;
height: 10vmin;
font-size: 4vmin;
color: rgba(0, 0, 0, 0.5);
background: linear-gradient(to right, #c39550, #966f33);
outline: none;
cursor: pointer;
transition: background 0.3s;">New Game</button>

maff
@maff

gonna be completely honest here i misread this as "tower of hentai"


You must log in to comment.