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
| /* choices */ | |
| section { width:300px; margin:auto; padding:150px 0; | |
| border:1px solid #999; text-align:center } | |
| em { display:block } | |
| em:before, em:after { content:''; background:#999; display:inline-block; | |
| width:60px; height:1px; margin:0 10px 4px } |
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
| /* baseline vs line-height */ | |
| @keyframes lineheight { | |
| from { line-height:1em } | |
| to { line-height:2.6em } } | |
| body { animation:lineheight 2s alternate infinite; | |
| font-size:10em; text-decoration:underline; | |
| text-align:center; margin:auto; border:1px solid red } |
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
| /* Los Angeles 511 */ | |
| * { margin:0;padding:0 } | |
| body { font:100%/1 sans-serif } | |
| .sky { position:fixed; top:0;right:0;bottom:0;left:0; | |
| background-image:linear-gradient(-100deg, #c9e2ff, #409cff) } | |
| .highway { font-size:2em; letter-spacing:-.05em; color:#fff; | |
| background:rgb(34,78,57); width:12em; | |
| background-image:linear-gradient(bottom, #224e39, #3a805e); |
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> | |
| <meta charset="UTF-8"> | |
| <title>T · CodePen</title> | |
| <!-- | |
| Copyright (c) 2012 Francisco Brito, http://codepen.io/brito | |
| Permission is hereby granted, free of charge, to any person obtaining |
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> | |
| <meta charset="UTF-8"> | |
| <title>T · CodePen</title> | |
| <!-- | |
| Copyright (c) 2012 Francisco Brito, http://codepen.io/brito | |
| Permission is hereby granted, free of charge, to any person obtaining |
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> | |
| <meta charset="UTF-8"> | |
| <title>T · CodePen</title> | |
| <!-- | |
| Copyright (c) 2012 Francisco Brito, http://codepen.io/brito | |
| Permission is hereby granted, free of charge, to any person obtaining |
brito
/ dabblet.css
Created
August 7, 2012 23:25
— forked from jwdallas/dabblet.css
Dynamic UI states
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
| /** Dynamic UI states */ | |
| /* Positioning */ | |
| .bubble { top:26px } | |
| /* resets */ | |
| body { font:300 100%/1.4 helvetica,sans-serif; background:#eee } | |
| a { text-decoration:none; color:#B7DE44 } | |
| textarea, p, button { margin:0; padding:0; font:inherit } | |
| /* Archetype CSS */ | |
| .bubble { padding:14px; position:absolute; border-radius:9px; |
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
| /* The Brilliant Disaster */ | |
| * { margin:0; padding:0; outline:1px solid rgba(235,235,255,.3); | |
| transition:all 250ms; | |
| transform-style:preserve-3d; perspective:400 } | |
| html, body { min-height:100% } | |
| body { color:white; | |
| background:linear-gradient(top, #373737, #000 10%); | |
| text-align:center } | |
| article { display:inline-block; |
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
| html, body { height:100%; font-size:300px } | |
| nav { width:1em; height:1em; margin:auto; position:relative; margin-top:15%; | |
| background:url(http://dump.fm/avatars/20110625/1309026793173-dumpfm-hexagon-pentagon.png) no-repeat; | |
| background-size:100%; border:solid } | |
| a { width:.8em; height:0; display:block; transition:250ms; | |
| position:absolute; top:0; left:0; transform-origin:top center; background:transparent; | |
| border:solid; border-color:blue transparent; border-width:0 .1em .3em; | |
| } | |
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
| /* Heart */ | |
| @keyframes rotate { to { transform:rotate3d(0,0,1,360deg) } } | |
| nav { border:solid; text-align:center; | |
| -animation:rotate 3.81s infinite alternate cubic-bezier(.5522847498,0,1,.44771525) } | |
| @keyframes triangle { to { width:0; height:0; | |
| border-width:0 .5em 1.618033em; | |
| transform:none; border-radius:0; | |
| border-color:hsla(0,100%,50%,.6) hsla(225,61%,38%,.06); | |
| transform-origin:50% 47% } } |