A beautiful textual map of the United States. It's Flat UI inspired, easily size extensible and optimized for search engines. (Here is the map of France)
synecdocheNORTH
synecdocheNORTH
/ beautiful-textual-map-of-the-usa-with-css.markdown
Created
January 4, 2019 16:38
Beautiful Textual Map of the USA with CSS
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
| <script id="simple-plane-vs" type="x-shader/x-vertex"> | |
| #ifdef GL_ES | |
| precision mediump float; | |
| #endif | |
| // default mandatory variables | |
| attribute vec3 aVertexPosition; | |
| attribute vec2 aTextureCoord; | |
| uniform mat4 uMVMatrix; |
synecdocheNORTH
/ 11-12-paint-on-mouse-move.markdown
Created
January 4, 2019 18:02
11/12: Paint on Mouse Move
synecdocheNORTH
/ css-loading-animations.markdown
Created
January 4, 2019 21:38
CSS Loading Animations
Css progress bars made with svg patterns. Credits to https://www.heropatterns.com/ for all the svg patterns
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
| - var letters = [ "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9"] | |
| - var letters = [ "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"] | |
| - var numRings= 100 | |
| section | |
| .wrapper | |
| //- each item in letters | |
| //- div.el= item |
synecdocheNORTH
/ index.html
Created
January 4, 2019 21:44
Parallax Self Portrait (Use Mouse on Desktop and Tilt on Mobile)
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
| <html lang="en" class="loading"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Ryan Brown Self Portrait</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" user-scalable="yes"> | |
| </head> | |
| <body> | |
| <div class="mobile-codepen-note">CodePen doesn't seem to support device tilt. Try viewing <a href="http://portraits.ryankbrown.com/self/" target="_blank">here</a></div> | |
| <main> |
As I was playing around with a javascript shortcut action for my ios devices, I thought that it might as well be turned into a pen also :-)
If you also want to experiment with coding javascript on iOS - take a look at this brilliant app: https://scriptable.app/
Click in left side to goto previous quote, click right side to goto next quote. Click the "Random" button for random quote. Click yellow tag to goto first quote with that tag. Click the "Copy" button to copy quote to clipboard,
Keyboard shortcuts: "left arrow" = Previous quote
OlderNewer