Skip to content

Instantly share code, notes, and snippets.

CodeMyUI CodeMyUI

Block or report user

Report or block CodeMyUI

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View cut-copy-paste.markdown
View animated-login-form.markdown

Animated Login Form

Experimenting with hidden login forms with animated reveals. This is the first of a few hopefully.

A Pen by Che on CodePen.

License.

View index.html
<svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
<g id="whole">
<g id="togglePanel">
<path d="M331.5,328.5a45.5,45.5,0,0,1,0-91h115a45.5,45.5,0,0,1,0,91Z" fill="#f2f2f2"/>
<path d="M446.5,241a42,42,0,0,1,0,84h-115a42,42,0,0,1,0-84h115m0-7h-115a49.14,49.14,0,0,0-49,49h0a49.14,49.14,0,0,0,49,49h115a49.14,49.14,0,0,0,49-49h0a49.14,49.14,0,0,0-49-49Z" fill="#f4f9f6"/>
</g>
<line id="fillLine2" x1="331" y1="283" x2="446" y2="283" fill="none" stroke="#ED4D6E" stroke-linecap="round" stroke-linejoin="round" stroke-width="84"/>
<line id="fillLine1" x1="331" y1="283" x2="446" y2="283" fill="none" stroke="#A0CA4C" stroke-linecap="round" stroke-linejoin="round" stroke-width="84"/>
<g id="dragger">
<ellipse cx="330" cy="283" rx="40.5" ry="41" fill="#fcfcfc"/>
@CodeMyUI
CodeMyUI / index.html
Created Feb 10, 2020
The handbook download animation
View index.html
<div class="container">
<div class="box box-1">
<div class="cover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/945546/3433202-893bc9989a52eba0.png" alt=""></div>
<button><div></div></button>
</div>
<div class="box box-2">
<div class="cover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/945546/3433202-964edcf0f07211b0.png" alt=""></div>
<button><div></div></button>
</div>
<div class="box box-3">
@CodeMyUI
CodeMyUI / index.html
Created Feb 10, 2020
Isometric eCommerce CSS Grid
View index.html
<h1>Responsive eCommerce layout using CSS Grid</h1>
<h3><a href="https://codepen.io/collection/DapBxW" target="_blank">More CSS Grid layouts</a></h3>
<ul id="productGrid">
<li class="product">
<div class="details">
<h2>NMD_R1</h2>
<p class="price">£109.95</p>
</div>
<div class="logo">
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/881020/adidas.png' alt='' />
View index.html
<h1>VHS Filter</h1>
<div class="wrapper">
<img src="https://source.unsplash.com/200x200/?i" class="js-vhs-filter" />
<img src="https://source.unsplash.com/200x200/?got" class="js-vhs-filter" />
<img src="https://source.unsplash.com/200x200/?love" class="js-vhs-filter" />
<img src="https://source.unsplash.com/200x200/?for" class="js-vhs-filter" />
<img src="https://source.unsplash.com/420x200/?those" class="js-vhs-filter" />
<img src="https://source.unsplash.com/200x200/?who" class="js-vhs-filter" />
<img src="https://source.unsplash.com/200x200/?were" class="js-vhs-filter" />
<img src="https://source.unsplash.com/200x200/?born" class="js-vhs-filter" />
View card-hover-interactions.markdown

Card Hover Interactions

Hacking together a solution to show part of an element in a card as a default state, lining up the element headline across each card and then animating the element to the center of its parent element

A Pen by Ryan Mulligan on CodePen.

License.

@CodeMyUI
CodeMyUI / index.pug
Created Feb 10, 2020
Text Ring Loading Animation
View index.pug
- var text = "Loading...";
- var rings = 2;
- var ringSectors = 30;
.preloader
- for (let r = 0; r < rings; ++r) {
.preloader__ring
- for (let s = 0; s < ringSectors; ++s) {
.preloader__sector=text[s] || ""
- }
@CodeMyUI
CodeMyUI / index.html
Created Feb 7, 2020
Neuomorphic Fingerprint Scanner
View index.html
<button class="button" type="button">
<span class="print print--under">
<svg viewBox="0 0 98 109" xmlns="http://www.w3.org/2000/svg">
<path d="m95.42 60.221c0.33333-4.6667 0.33333-10.667 0-18-0.5-11-8.5-26.5-24-34.5-15.5-8-38-9.5-55.5 8-11.667 11.667-16 25.5-13 41.5l0.65525 4.3683c0.38693 2.5791 2.7914 4.3563 5.3705 3.9695 2.5664-0.38496 4.3413-2.7687 3.9742-5.3378-1-7-6-22 10-38 14.554-14.554 38.15-14.554 52.704 0 4.5444 4.5444 7.8364 10.187 9.5562 16.379 0.5744 2.0681 0.98766 3.9417 1.2398 5.6209 2.4899 16.582-2.9979 37.051-6 53" pathLength="1"/>
<path d="m15.42 76.221c5.3333-3.6667 7.3333-10.167 6-19.5-0.23862-1.551-0.44877-3.0902-0.63044-4.6174-1.8313-15.395 9.1641-29.359 24.559-31.191 1.268-0.15084 2.5448-0.21497 3.8216-0.19197 15.616 0.28138 28.07 13.129 27.864 28.747-0.089675 6.8105-0.29443 11.895-0.61426 15.253-1.2042 12.644-2.9364 21.532-7 37" pathLength="1"/>
<path d="m19.92 85.221c7-5.3333 10.5-13.333 10.5-24v-12.5c0-10.217 8.2827-18.5 18.5-18.5 10.287 0 18.636 8.3235 18.666 18.611 0.01
You can’t perform that action at this time.