Skip to content

Instantly share code, notes, and snippets.

View mbtrs's full-sized avatar
🏌️‍♂️
Going for a hole in one

mb mbtrs

🏌️‍♂️
Going for a hole in one
View GitHub Profile
@mbtrs
mbtrs / index.pug
Created December 4, 2022 05:30
Menu concept (hot corners)
// Original: https://2017.ursamajorsupercluster.com/
.navigation
.navigation__title URSA MAJOR SUPERCLUSTER
.wrapper
a.navigation__link(href='')
a.navigation__link(href='')
a.navigation__link(href='')
a.navigation__link(href='')
.wrapper
@mbtrs
mbtrs / index.pug
Created December 4, 2022 05:29
Particle Rotation
div.container
div.container_rotate
- for (var i = 0; i < 200; i++)
div.rotate
div.flip_rotate
div.flip_pos
div.flip
@mbtrs
mbtrs / index.html
Created December 4, 2022 05:29
Positioning items against linesSection
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout -->
<div class="wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
<div class="box4">Four</div>
<div class="box5">Five</div>
</div>
@mbtrs
mbtrs / error-404-page-not-found-80s-hacker-theme.markdown
Created December 4, 2022 05:29
Error 404: Page not found – 80s hacker theme
@mbtrs
mbtrs / example-with-mqs-and-source-order.markdown
Created December 4, 2022 05:28
Example with MQs and Source Order
@mbtrs
mbtrs / index.html
Created December 4, 2022 05:27
Shattering Text Animation
<figure>
<svg x="0px" y="0px" viewBox="0 0 883 105.2" xml:space="preserve" overflow="visible">
<polygon points="359.9,49.6 359.8,49.7 359.9,49.8 "/>
<polygon points="28,0 10.8,0 28,9 "/>
<polygon points="28,12.6 0,46 0,51.9 28,48.9 "/>
<polygon points="0.8,105 28,105 28,74.7 20.3,69.7 "/>
<polygon points="28,9 10.8,0 0,0 0,46 28,12.6 "/>
<polygon points="0,51.9 0,57.3 20,69.8 20,69.8 20,69.8 28,74.7 28,48.9 "/>
<polygon points="0,57.3 0,105 0.8,105 20.1,69.7 "/>
<polygon points="89.7,40.6 61,25.9 38,46 38,47.8 91,41.9 "/>
@mbtrs
mbtrs / index.html
Created December 4, 2022 05:26
The Last Experience
<canvas></canvas><!--
o
\_/\o
( Oo) \|/
(_=-) .===O- ~~Z~A~P~~ -O-
/ \_/U' /|\
|| |_/
\\ |
{K ||
| PP
@mbtrs
mbtrs / dynamic-image-colorizing-with-input-type-color.markdown
Created December 4, 2022 05:26
Dynamic Image Colorizing with <input type="color">

Dynamic Image Colorizing with

Removes chrome from color input swatch and overlays over an image, using blend modes to colorize. Voila! Color changing without JS.

Chrome and Firefox only right now.

A Pen by mB on CodePen.

License.

@mbtrs
mbtrs / index.html
Created December 4, 2022 05:25
nick drake current link indicator
<!--
ecss nearly: https://ecss.io/
-->
<!-- tab module -->
<section class="ns-TabsModule" data-active-tab="A">
<!-- horizontal scroll wrapper -->
<div class="ns-ScrollWrapper">
<!-- tab nav -->
@mbtrs
mbtrs / floating-input-underline-d.markdown
Created December 4, 2022 05:24
floating input underline'd

floating input underline'd

Contact form with floating labels, require : jQuery optional : bootstrap 4

A Pen by mB on CodePen.

License.