Tim Coomar exarcheia-web
exarcheia-web
/ dabblet.css
Last active
November 29, 2016 18:15
Flexbox slightly more advanced example
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
| /* Flexbox slightly more advanced example */ | |
| body { margin: 0; } | |
| .canvas { | |
| background: hotpink; | |
| width: 100vw; | |
| height: 100vh; | |
| display: flex; /* This does all the magic!!! */ | |
| justify-content: flex-end; /* position items along the MAIN axis - default: horizontal */ |
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
| /* Basic flexbox 3-column example */ | |
| body, p { | |
| margin: 0; | |
| } | |
| .content { | |
| display: flex; | |
| justify-content: space-between; /* center, flex-start (default), flex-end, space-around, space-between */ | |
| align-items: stretch; /* center, flex-start, flex-end, stretch (default), baseline */ |
exarcheia-web
/ dabblet.css
Last active
November 23, 2016 06:09
Updated version of background-attachment: fixed
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
| /* Updated version of background-attachment: fixed */ | |
| body { | |
| font-family: "Georgia", serif; | |
| margin: 0; | |
| } | |
| h1 { | |
| margin: 0 | |
| } |
exarcheia-web
/ dabblet.css
Last active
November 22, 2016 16:53
Example possibilities with background-attachement: fixed
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
| /* Example possibilities with background-attachement: fixed */ | |
| body { | |
| margin: 0; | |
| } | |
| .bg { | |
| width: 100%; | |
| padding-top: 15%; | |
| background-color: red; |
exarcheia-web
/ dabblet.css
Last active
November 22, 2016 09:00
Resizing while maintaining a set aspect ratio
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
| /* Resizing while maintaining a set aspect ratio */ | |
| .container { | |
| width: 500px; /* you only need to change this to resize the element */ | |
| } | |
| .container .ratio-4-3 { | |
| width: 100%; | |
| padding-top: 56.25%; /* set your aspect ratio by changing this... currently set to 16:9 aspect ratio */ | |
| position: relative; |
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
| * { | |
| margin: 0; | |
| padding: 0; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| /*** BEGIN MAIN CSS ***/ |
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
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>CSS Grids</title> | |
| <meta charset="utf-8"> | |
| </head> | |
| <body> | |
| </body> | |
| </html> |
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
| /* MODULES BUILT AROUND THE EM UNIT */ | |
| *, *:before, *:after { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: Georgia, serif; | |
| margin-top: 50px; | |
| } |
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 example */ | |
| /* http://webdesign.tutsplus.com/articles/getting-started-with-scalable-vector-graphics-svg--webdesign-7515 */ | |
| #svg { | |
| background: rgba(0,0,0,0.2); | |
| height: 230px; | |
| width: 230px; | |
| } | |
| #line1 { | |
| stroke:rgb(0,0,0); |
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
| /* Basic two-column (float) layout */ | |
| * { | |
| box-sizing: border-box; | |
| } | |
| .section-main { | |
| width: 800px; | |
| margin: 40px auto; | |
| overflow: hidden; |
NewerOlder