Skip to content

Instantly share code, notes, and snippets.

View CodeMyUI's full-sized avatar

CodeMyUI CodeMyUI

206 followers · 0 following
View GitHub Profile
@CodeMyUI
CodeMyUI / build-a-fancy-hover-animation-complete.markdown
Created May 30, 2021 06:26
Build a fancy hover animation - complete
@CodeMyUI
CodeMyUI / css-only-calendar-layout-css-grid.markdown
Created May 30, 2021 06:00
CSS-Only Calendar Layout [CSS Grid]
@CodeMyUI
CodeMyUI / index.pug
Created May 21, 2021 03:57
Info Cards
.wrap
.back
.back__slide.active
.progress
.back__slide
.progress
.back-front-image
.card
.card__slide.active
.image
@CodeMyUI
CodeMyUI / index.html
Created May 18, 2021 11:07
Link Hover Interaction | SplittingJS
<nav>
<a href="#" class="nav__link">
<span class="nav__link--text" data-splitting>Home</span>
<span class="nav__link--text" data-splitting>Home</span>
</a>
<a href="#" class="nav__link">
<span class="nav__link--text" data-splitting>About</span>
<span class="nav__link--text" data-splitting>About</span>
</a>
<a href="#" class="nav__link">
@CodeMyUI
CodeMyUI / index.pug
Created May 18, 2021 10:57
Realistic Red Switch (Pure CSS)
label.switch
input(type='checkbox' checked)
.button
.light
.dots
.characters
.shine
.shadow
@CodeMyUI
CodeMyUI / index.html
Created May 18, 2021 10:52
Text Morph
<!-- Explanation in JS tab -->
<!-- The two texts -->
<div id="container">
<span id="text1"></span>
<span id="text2"></span>
</div>
<!-- The SVG filter used to create the merging effect -->
<svg id="filters">
@CodeMyUI
CodeMyUI / index.html
Created May 18, 2021 10:26
Photo Tear
<canvas class="webgl"></canvas>
<div class="info">
<svg id="hand" viewBox="0 0 175 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M173.272 82.5157C161.668 70.5528 146.803 62.2655 130.526 58.6846C118.575 55.6811 106.321 54.0528 94.0011 53.8313V20.8535C93.8062 15.2638 91.4057 9.97869 87.3246 6.15411C83.2435 2.32953 77.8139 0.276704 72.2233 0.444604C66.6327 0.276704 61.2031 2.32953 57.122 6.15411C53.0409 9.97869 50.6404 15.2638 50.4455 20.8535V83.0757L40.49 73.2446C36.1045 68.9428 30.2064 66.5329 24.0633 66.5329C17.9201 66.5329 12.0221 68.9428 7.63662 73.2446C5.43939 75.3674 3.69046 77.9095 2.49342 80.7204C1.29638 83.5313 0.675563 86.5539 0.667733 89.609C0.553645 95.5326 2.79095 101.26 6.88996 105.538L35.8855 139.885C37.2844 148.66 40.3015 157.1 44.7833 164.773C48.0577 170.674 52.2595 176.011 57.2277 180.578V192.525C57.2082 194.228 57.8424 195.874 58.9999 197.124C60.1573 198.374 61.75 199.133 63.45 199.245H150.001C151.701 199.133 153.294 198.374 154.451 197.124C155.609 195.874 156.243
@CodeMyUI
CodeMyUI / index.html
Created May 18, 2021 04:23
Responsive CSS Grid - Books
<ul>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/book10.jpg" alt=""></li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/book02.jpg" alt=""></li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/book03.jpg" alt=""></li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/book04.jpg" alt=""></li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/book05.jpg" alt=""></li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/book06.jpg" alt=""></li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/book07.jpg" alt=""></li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/book08.jpg" alt=""></li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/book09.jpg" alt=""></li>
@CodeMyUI
CodeMyUI / index.html
Created May 18, 2021 02:13
Link Hover Interaction | SplittingJS
<nav>
<a href="#" class="nav__link">
<span class="nav__link--text" data-splitting>Home</span>
<span class="nav__link--text" data-splitting>Home</span>
</a>
<a href="#" class="nav__link">
<span class="nav__link--text" data-splitting>About</span>
<span class="nav__link--text" data-splitting>About</span>
</a>
<a href="#" class="nav__link">
@CodeMyUI
CodeMyUI / index.html
Created May 16, 2021 09:29
Text Morph
<!-- Explanation in JS tab -->
<!-- The two texts -->
<div id="container">
<span id="text1"></span>
<span id="text2"></span>
</div>
<!-- The SVG filter used to create the merging effect -->
<svg id="filters">