Made using pure CSS
A Pen by Matt Daniel Brown on CodePen.
Matt Daniel Brown mattdanielbrown
This file contains hidden or 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
| <body> | |
| <style> | |
| .square-box { | |
| width: 33%; | |
| height: 0; | |
| padding-top: 33%; | |
| position: absolute; | |
| right: 20px; | |
| top: 20px; | |
| } |
This file contains hidden or 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> | |
| <label for="color"><meta name="theme-color" content="<span class="preview"></span>"></label> | |
| <input id="color" type="color" value="#6224b5"> | |
| </div> |
This file contains hidden or 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
| <svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"> | |
| <rect id="bg" width="800" height="600" fill="#b3b3b3"/> | |
| <g class="icon" id="camera"> | |
| <rect x="255" y="275" width="50" height="50" rx="25" ry="25" fill="#fff"/> | |
| <path d="M288.5,294.7h-3.2a.61.61,0,0,1-.46-.28l-.68-1.86a1.59,1.59,0,0,0-1.5-1.06h-6.32a1.59,1.59,0,0,0-1.5,1.06l-.67,1.84a.56.56,0,0,1-.47.3h-3.2a1,1,0,0,0-1,1V306.5a1,1,0,0,0,1,1h18a1,1,0,0,0,1-1V295.7A1,1,0,0,0,288.5,294.7Zm-9,8.8a3.6,3.6,0,1,1,3.6-3.6A3.6,3.6,0,0,1,279.5,303.5Z" fill="#b3b3b3"/> | |
| </g> | |
| <g class="icon" id="clip"> | |
| <rect x="315" y="275" width="50" height="50" rx="25" ry="25" fill="#fff"/> | |
| <path d="M336,309.15a6.16,6.16,0,0,1-4.2-1.62l-.08-.07a5.46,5.46,0,0,1-.33-7.7l.33-.32,10.4-9.41a4.42,4.42,0,0,1,6,0,3.84,3.84,0,0,1,.07,5.77l-9.78,8.82a2.62,2.62,0,0,1-3.55,0,2.36,2.36,0,0,1-.15-3.33l.15-.16,9.14-8.19,1.08,1.21L336,302.31a.75.75,0,0,0-.24.54.73.73,0,0,0,.25.55,1,1,0,0,0,1.35,0l9.78-8.76a2.27,2.27,0,0,0,.15-3. |
Sample markup containing most HTML5 elements for jumpstarting/testing css
A Pen by Matt Daniel Brown on CodePen.
This file contains hidden or 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 id="container"></div> | |
| <script src="https://cdn.rawgit.com/dataarts/webgl-globe/2d24ba30/globe/third-party/three.min.js"></script> | |
| <!-- <script src="https://cdn.rawgit.com/dataarts/webgl-globe/2d24ba30/globe/globe.js"></script> --> | |
This file contains hidden or 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
| <body> | |
| <style> | |
| .square-box { | |
| width: 33%; | |
| height: 0; | |
| padding-top: 33%; | |
| position: absolute; | |
| right: 20px; | |
| top: 20px; | |
| } |
mattdanielbrown
/ 9-button-types-unified-modern-style-visual-differences-reinforce-purpose.markdown
Created
February 1, 2023 15:47
9 button types Unified modern style, visual differences reinforce purpose.
This file contains hidden or 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
| <button class="back"> | |
| <i class="mdi mdi-arrow-left"></i> | |
| </button> | |
| <div class="stage"> | |
| <div class="folder-wrap level-current scrolling"> | |
| <div class="tile folder"> |
mattdanielbrown
/ fallback-system-fontstacks.css
Created
January 26, 2023 23:56
CSS Fallback / System fontstacks (extended)
This file contains hidden or 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
| /** | |
| * Use the default user interface font in all browsers (opinionated). | |
| */ | |
| html { | |
| font-family: | |
| system-ui, | |
| /* macOS 10.11-10.12 */ -apple-system, | |
| /* Windows 6+ */ "Segoe UI", | |
| /* Android 4+ */ "Roboto", |