Skip to content

Instantly share code, notes, and snippets.

@mathewbyrne

mathewbyrne/code-block.html

Created July 30, 2010 02:47
Show Gist options
  • Save mathewbyrne/499788 to your computer and use it in GitHub Desktop.
Save mathewbyrne/499788 to your computer and use it in GitHub Desktop.
Download ZIP
A fun little experiment playing with CSS box shadows. I think it roughly works in Safari, Chrome and Firefox. No guarantees though.
Raw
code-block.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Shadows Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.caster {
position: relative;
background-color: #fff;
border: 1px solid #ccc;
border-bottom-color: #eee;
}
.caster .frame {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.4) inset,
0 0 2px rgba(0,0,0,1) inset;
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.4) inset,
0 0 2px rgba(0,0,0,1) inset;
pointer-events: none;
}
.caster-text {
text-align: center;
line-height: 100px;
color: #fff;
font-size: 30px;
font-weight: bold;
text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
}
body, html {
height: 100%;
margin: 0;
padding: 0;
font-family: Helvetica, arial, serif;
}
.line-numbers {
color: #ccc;
font-family: Courier;
position: absolute;
top: 0;
left: 0;
padding-top: 10px;
list-style: none;
background-color: #888;
border-right: 1px solid rgba(255,255,255,0.3);
-webkit-box-shadow: 1px 0 0 rgba(0,0,0,0.5);
-moz-box-shadow: 1px 0 0 rgba(0,0,0,0.5);
bottom: 0;
width: 40px;
}
.line-numbers li {
height: 25px;
line-height: 1.5em;
text-align: right;
padding-right: 10px;
}
pre {
margin-left: 40px;
padding: 10px 10px 10px 20px;
line-height: 25px;
font-size: 16px;
overflow-x: auto;
overflow-y: hidden;
}
.caster-frame {
width: 780px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -400px;
padding: 10px 10px 6px;
border: 1px solid #888;
border-bottom-color: #444;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#aaa), to(#999));
background: -moz-linear-gradient(0% 100% 90deg,#999, #aaa);
-webkit-box-shadow: 0 10px 10px rgba(255,255,255,0.8) inset,
0 1px 0 #fff inset,
0 -1px 0 rgba(255,255,255,0.5) inset,
0 1px 1px rgba(0,0,0,0.3);
-moz-box-shadow: 0 10px 10px rgba(255,255,255,0.8) inset,
0 0 1px #fff inset;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
.caster-frame p {
font-size: 12px;
color: #444;
margin-top: 6px;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
</style>
</head>
<body>
<div class="caster-frame">
<div class="caster">
<ol class="line-numbers">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
<pre>function some_code () {
var val = this.do_something();
return val >= 5.0;
}</pre>
<div class="frame"></div>
</div>
<p>Some more information</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment