box-shadow example

by rastrano

HTML

<p>The top of the &lt;pre&gt; is darkened with an inset black, transparent box-shadow:</p>

<code>box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25)</code>

<p>rgba() here means <em>Red, Green, Blue, Alpha</em>. 0, 0, 0 means black, and .25 means 25% opaque, or 75% transparent.</p>

<pre>Your text goes here</pre>

<p>The bottom of the &lt;pre&gt; is lined with a normal, white, single pixel transparent box-shadow:</p>

<code>box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);</code>

<p> So the inset black shadow presides inside of the element, giving depth, while the white (255, 255, 255) shadow hangs 1 pixel below the element, giving the illusion of a highlight.</p>

<p>The cool thing is, in this code the two declarations are combined:</p>

<code>box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25), 0 1px 0 rgba(255, 255, 255, 0.25);</code>

<p>Here's a span element with the same types of properties configured in reverse. You can see how the appearance really is a trick of the eye; these box-shadows are only slightly different but yield a completely different appearance.</p>

<span>Your text goes here</span>

CSS

p {
  font-family: sans-serif;
  margin: 10px 0px;
  font-size: 14px;
}

code {
  font-family: monospace;
  margin: 10px 0px;
}

em {
    font-style: italic;
}

body {
  background: url('http://subtlepatterns.com/patterns/zigzag.png');
  padding: 30px;
  color: #fff;
  text-rendering: optimizeLegibility;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

pre {
  margin: 20px;
  padding: 20px;
  color: #fff;
  -moz-border-radius: 6px;
  border-radius: 6px;
  white-space: pre-wrap;
  background-color: rgba(0, 0, 0, 0);
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.15)), to(rgba(0, 0, 0, 0)));
  background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
  background-image: -ms-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.15)), color-stop(100%, rgba(0, 0, 0, 0)));
  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
  background-image: -o-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(0, 0, 0, 0.15)', endColorstr='rgba(0, 0, 0, 0)', GradientType=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(0, 0, 0, 0.15)', endColorstr='rgba(0, 0, 0, 0)', GradientType=0)";
  background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
  background-color: rgba(0, 0, 0, 0.1);
  font-family: "Monaco", Courier New, monospace;
  font-size: 12px;
  font-weight: normal;
  line-height: 20px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
  -moz-box-shadow:    inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.25);
  box-shadow:         inset 0 1px 3px rgba(0, 0, 0, .25), 0 1px 0 rgba(255, 255, 255, 0.25);
}

span {
  margin:...