Skip to content

Instantly share code, notes, and snippets.

@jjulian

jjulian/enough_design_to_be_dangerous.html

Created February 9, 2011 15:24
Show Gist options
  • Save jjulian/818634 to your computer and use it in GitHub Desktop.
Save jjulian/818634 to your computer and use it in GitHub Desktop.
Download ZIP
Example html/css as seen in "Enough Design to be Dangerous" at Bmore on Rails, Feb 8, 2011
Raw
enough_design_to_be_dangerous.html
<html>
<head>
<style>
body { background-color:#fff; color:#333; font-family: sans-serif; font-size: 36px; margin: 50px 50px; }
p { margin: 10px; }
hr { margin:50px 0; }
.colors { width:100%; }
.colors .c { float:left; padding:5px 10px; line-height: 50px; width: 90px; height: 50px; margin: 5px; text-transform:uppercase; }
.textcolor h1 { color: #000; margin-bottom: 5px; }
.textcolor p { color: #666; }
/* http://www.unmatchedstyle.com/news/design-details-inset-text-shadows.php */
.shadow { text-shadow:#aaa 10px 5px 1px; }
.shadow_inset_light { text-shadow:#fff 1px 1px 0; background-color: #999; }
.shadow_inset_dark { text-shadow:#000 -1px -1px 0; background-color: #999; color: #fff; }
.textshadow h1 { text-shadow:#aaa 2px 2px 3px; }
.textshadow p { text-shadow:#ccc 2px 2px 2px; }
.nicelinks a {
display:inline;
background-color: #009;
padding: 3px 25px;
font-size:18px;
text-shadow:#000 1px 1px 0;
color: #ddd;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
text-decoration:none;
}
.nicelinks a:hover { background-color: #33c; text-decoration:underline; }
.boxes { width:100%; }
.boxes .box { float:left; padding:5px 10px; width: 120px; margin: 20px; background-color: #99b; }
.boxes .box1 {
-moz-box-shadow:10px 10px 5px #888;
-webkit-box-shadow:10px 10px 5px #888;
box-shadow:10px 10px 5px #888;
}
.boxes .box2 {
-moz-box-shadow:0 0 15px #888;
-webkit-box-shadow:0 0 15px #888;
box-shadow:0 0 15px #888;
}
.boxes .box3 {
-moz-box-shadow:-10px -10px 15px #aaa;
-webkit-box-shadow:-10px -10px 15px #aaa;
box-shadow:-10px -10px 15px #aaa;
}
.boxes .box4 {
-moz-box-shadow:inset 0 0 15px #888;
-webkit-box-shadow:inset 0 0 15px #888;
box-shadow:inset 0 0 15px #888;
}
.boxshadow h1 { margin-top:5px; }
.boxshadow {
border: 1px solid #333;
background-color: #efefef;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
padding:15px;
-moz-box-shadow:10px 10px 5px #888;
-webkit-box-shadow:10px 10px 5px #888;
box-shadow:10px 10px 5px #888;
}
ul.no-bullet { list-style-type:none; padding:0; }
ul.no-bullet li { border-bottom: 1px dotted #ddd; }
</style>
</head>
<body>
<div class="colors">
<p class="c" style="background-color:#000; color:#fff;">#000</p>
<p class="c" style="background-color:#111; color:#fff;">#111</p>
<p class="c" style="background-color:#222; color:#fff;">#222</p>
<br style="clear:both;" />
<p class="c" style="background-color:#333; color:#fff;">#333</p>
<p class="c" style="background-color:#444; color:#fff;">#444</p>
<p class="c" style="background-color:#555; color:#fff;">#555</p>
<br style="clear:both;" />
<p class="c" style="background-color:#666; color:#fff;">#666</p>
<p class="c" style="background-color:#777; color:#fff;">#777</p>
<p class="c" style="background-color:#888; color:#333;">#888</p>
<br style="clear:both;" />
<p class="c" style="background-color:#999; color:#333;">#999</p>
<p class="c" style="background-color:#aaa; color:#333;">#aaa</p>
<p class="c" style="background-color:#bbb; color:#333;">#bbb</p>
<br style="clear:both;" />
<p class="c" style="background-color:#ccc; color:#333;">#ccc</p>
<p class="c" style="background-color:#ddd; color:#333;">#ddd</p>
<p class="c" style="background-color:#eee; color:#333;">#eee</p>
<br style="clear:both;" />
<p class="c" style="background-color:#fff; color:#333;">#fff</p>
</div>
<br style="clear:both;" />
<hr/>
<p class="shadow">Text Shadow</p>
<p class="shadow_inset_light">Inset Text Shadow</p>
<p class="shadow_inset_dark">Inset Text Shadow</p>
<hr/>
<div class="textcolor">
<h1>Jonathan Julian</h1>
<p>410Labs</p>
<div>
<a href="http://twitter.com/jonathanjulian">@jonathanjulian</a>
<a href="http://jonathanjulian.com">jonathanjulian.com</a>
</div>
</div>
<div class="textcolor textshadow">
<h1>Jonathan Julian</h1>
<p>410Labs</p>
<div>
<a href="http://twitter.com/jonathanjulian">@jonathanjulian</a>
<a href="http://jonathanjulian.com">jonathanjulian.com</a>
</div>
</div>
<hr/>
<div class="textcolor textshadow nicelinks">
<h1>Jonathan Julian</h1>
<p>410Labs</p>
<div>
<a href="http://twitter.com/jonathanjulian">@jonathanjulian</a>
<a href="http://jonathanjulian.com">jonathanjulian.com</a>
</div>
</div>
<hr/>
<div class="boxes">
<div class="box box1">box</div>
<div class="box box2">box</div>
<div class="box box3">box</div>
<div class="box box4">box</div>
</div>
<br style="clear:both;" />
<hr/>
<div class="textcolor textshadow nicelinks boxshadow">
<h1>Jonathan Julian</h1>
<p>410Labs</p>
<div>
<a href="http://twitter.com/jonathanjulian">@jonathanjulian</a>
<a href="http://jonathanjulian.com">jonathanjulian.com</a>
</div>
</div>
<hr/>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ul class="no-bullet">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment