Note Card with Tabbed Corners

by Jennifer Perrin

HTML

<!-- Throw in a nice looking font just for the fun of it -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300,200"/>

<div class="cut">
  <h2>Code Snippet: Hide Your Email Addy with PHP</h2>
    <p>Use PHP to protect an E-mail address you publish on a website against bots or spiders that index or harvest E-mail addresses.<br />
It uses a substitution cipher with a different key for every page load.</p>
    <p><a href="http://jenniferperrin.com/blog/hide-your-email-addy-with-php/" target="_blank">Read More...</a></p>
</div>

CSS

body {
  background: url("http://jenniferperrin.com/image/background.gif");
  color: #444;
  font-family: 'Yanone Kaffeesatz';
}
h2 {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 15px 0 15px 0;
  font-size: 20px;
  color: #5a7c87;
}
a {
    color: #5a7c87;
    text-decoration: none;
    float: right;
}
a:hover {
    background: #efefef;
    color: #d46a15;
}
p {
  font-size: 18px;
  margin: 0;
  padding: 0 0 25px 0;
  line-height: 20px;
}

div {
  position: relative;
  width: 500px;
  margin: 50px auto;
  padding: 25px 50px;
  background: #fff;
  box-shadow: 
    inset 0 0 0 13px #eaeaea, 
    inset 0 0 13px 9px rgba(0,0,0,1);
}
.cut::before, 
.cut::after {
  display: block;
  content: "";
  width: 46px;
  height: 46px;
  border-radius: 23px;
  background: url("http://jenniferperrin.com/image/background.gif");
  position: absolute;
  bottom: -21px;
}
.cut::before {
  left: -24px;
  box-shadow: 3px -3px 2px -1px rgba(34,34,34,.3);
}
.cut::after {
  right: -24px;
  box-shadow: -3px -3px 2px -1px rgba(34,34,34,.3);
}

.cut h2::before, 
.cut h2::after {
  display: block;
  content: "";
  width: 46px;
  height: 46px;
  border-radius: 23px;
  background: url("http://jenniferperrin.com/image/background.gif");
  position: absolute;
  top: -46px;
}
.cut h2::before {
  left: -74px;
  box-shadow: 3px 3px 2px -1px rgba(34,34,34,.3);
}
.cut h2::after {
  right: -72px;
  box-shadow: -3px 3px 2px -1px rgba(34,34,34,.3);
}