| /** | |
| * Messing Around with Dabblet | |
| */ | |
| html { | |
| background: #efefef; | |
| background: linear-gradient(45deg, #efefef, #990000); | |
| min-height: 100%; | |
| } | |
| p { | |
| transition: all ease 0.5s; |
| /** CSS3 Hover Image | |
| * The first commented line is your dabblet’s title | |
| */ | |
| *{transition: all 0.5s ease;} | |
| .container { | |
| float: left; | |
| border: 1px solid black; | |
| width: 200px; | |
| } |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Simple CSS Buttons · CodePen</title> | |
| <style> | |
| .btn { |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Ribbon Heading · CodePen</title> | |
| <style> |
| data:text/html, <style type="text/css">#e{position:absolute;top:0;right:0;bottom:0;left:0;}</style><div id="e"></div><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("e");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/ruby");</script> |
| data:text/html, <style type="text/css">#e{position:absolute;top:0;right:0;bottom:0;left:0;}</style><div id="e"></div><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("e");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/ruby");</script> |
| <div class="page-wrap"> | |
| <h1><span class="csstricks">CSS-Tricks</span> and <span class="csswizardry">CSSWizardry</span> Grids Mashup</h1> | |
| <p>Using floats and box-sizng: border-box (from <a href="http://css-tricks.com/dont-overthink-it-grids/">CSS-Tricks</a>) and .grid__item, ".one-half"-style size names, and margin/padding cancelling (from <a href="http://csswizardry.com/csswizardry-grids/">CSSWizardry</a>).</p> | |
| <p><em>(This is a work in progress)</em></p> | |
| <h2>Simple Sections</h2> | |
| <div class="grid"> | |
| <div class="grid__item one-half"> |
Use Spritz right now! Options for speed, localStorage saving, jog forward/backward, text size and dark/light theme, also with keyboard controls and progress bar. You'll never need to read conventionally again.
localStorage implementation by Keith Wyland, thanks Keith!
A Pen by Charlotte Dann on CodePen.