Working on a larger -personal- project involving a similar animation. Still tooling with it.
A Pen by Matthew Daniel Brown on CodePen.
Matthew Daniel Brown matt-daniel-brown
A Pen by Matthew Daniel Brown on CodePen.
matt-daniel-brown
/ blurred-backgrounds.markdown
Created
September 6, 2020 00:35
Blurred Backgrounds
A Pen by Matthew Daniel Brown on CodePen.
matt-daniel-brown
/ index.html
Created
September 6, 2020 00:21
✅ UX Animation Principles: Duration | @keyframers 1.22.1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <a href="https://youtu.be/WLYaEohJgxE" target="_blank" data-keyframers-credit style="color: #000"></a> | |
| <script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script> | |
| <div class="app" data-state="Good"> | |
| <div class="device" data-view="list"> | |
| <ul class="layer" data-layer="list"> | |
| <li class="content"> | |
| <div class="bg"></div> | |
| <div class="avatar"></div> | |
| <div class="title">Some list item</div> |
matt-daniel-brown
/ gradient-collection.markdown
Created
September 1, 2020 05:52
Gradient collection
A Pen by Matthew Daniel Brown on CodePen.
matt-daniel-brown
/ gradient-collection.markdown
Created
September 1, 2020 05:37
Gradient Collection
A small collection of gradients
A Pen by Matthew Daniel Brown on CodePen.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="quickNav"> | |
| <!-- Menus --> | |
| <div class="quickNav__menus"> | |
| <div id="one" class="quickNav__menu"> | |
| <a href="#" class="quickNav__link">Menu Item One</a> | |
| <a href="#" class="quickNav__link">Menu Item Two</a> | |
| <a href="#" class="quickNav__link">Menu Item Three</a> | |
| <a href="#" class="quickNav__link">Menu Item Fourth</a> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container"> | |
| <div class="tabs"> | |
| <input type="radio" id="radio-1" name="tabs" checked /> | |
| <label class="tab" for="radio-1">Upcoming<span class="notification">2</span></label> | |
| <input type="radio" id="radio-2" name="tabs" /> | |
| <label class="tab" for="radio-2">Development</label> | |
| <input type="radio" id="radio-3" name="tabs" /> | |
| <label class="tab" for="radio-3">Completed</label> | |
| <span class="glider"></span> | |
| </div> |
matt-daniel-brown
/ illustration-online-store.markdown
Created
August 10, 2020 02:25
Illustration online store
Illustrations downloaded from https://freepik.com
A Pen by Matthew Daniel Brown on CodePen.
matt-daniel-brown
/ index.html
Created
June 10, 2020 06:01
Random Password Generator - HTML | CSS | JS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container"> | |
| <h2 class="title">Password Generator</h2> | |
| <div class="result"> | |
| <div class="result__title field-title">Generated Password</div> | |
| <div class="result__info right">click to copy</div> | |
| <div class="result__info left">copied</div> | |
| <div class="result__viewbox" id="result">CLICK GENERATE</div> | |
| <button id="copy-btn" style="--x: 0; --y: 0"><i class="far fa-copy"></i></button> | |
| </div> | |
| <div class="length range__slider" data-min="4" data-max="32"> |