A CodePen by Henry Durdan. CSS TITLE - CSS styled h1, h2 tags with subtle, yet fancy box shadows and hover transitions.

index.html

<div id="titlewrapper">
  
  <div class="designwrap">
     <h1 class="I">I</h1>
    <h1 class="design">Design</h1>
  </div>  
    <h2 class="and">&</h2>
    <div class="codewrap">
    <h1 class="code"><span id="hide1">{</span>Code<span id="hide2"}>}</span> </h1>
  </div>
  </div>
   <p>Hover the title for transition effects.</p>

style.css

@import url(http://fonts.googleapis.com/css?family=Fjalla+One);
@import url(http://fonts.googleapis.com/css?family=Petit+Formal+Script);

body {
  background: url('http://henrydurdan.com/HD2/img/bg.png') repeat;
}

#titlewrapper {
  height: 300px;
  width: 400px;
  margin: 50px auto;
  background: ;
  
}

.designwrap {
  width: 100%;
  background:;
}

h1.I {
  font-family:'Fjalla One', sans-serif;
  font-size:7em;
  color: #ff3643;
  margin: 0 -37px 0 0;
  padding: 0;
  letter-spacing: 3px;
  font-weight: 500;
  transition: all ease-in .2s;
  -webkit-text-stroke: 1px rgba(238,238,238,.2); 
  display:inline;
  opacity: 0;
  text-shadow: 
    1px 1px 0 rgba(23,23,23,1),
    2px 2px 0 rgba(23,23,23,0.9),
    3px 3px 0 rgba(23,23,23,0.8),
    4px 4px 0 rgba(23,23,23,0.7),
    5px 5px 0 rgba(23,23,23,0.6),
    6px 6px 0 rgba(23,23,23,0.5),
    7px 7px 0 rgba(23,23,23,0.4),
    8px 8px 0 rgba(23,23,23,0.3),
    9px 9px 0 rgba(23,23,23,0.2),
    10px 10px 0 rgba(23,23,23,0.1),
    11px 11px 0 rgba(23,23,23,0.09),
    12px 12px 0 rgba(23,23,23,0.08),
    13px 13px 0 rgba(23,23,23,0.07),
    14px 14px 0 rgba(23,23,23,0.06),
    15px 15px 0 rgba(23,23,23,0.05),
    16px 16px 0 rgba(23,23,23,0.04),
    17px 17px 0 rgba(23,23,23,0.03),
    18px 18px 0 rgba(23,23,23,0.02),
    19px 19px 0 rgba(23,23,23,0.01),
    20px 20px 0 rgba(23,23,23,0.0),
    -15px 20px 10px rgba(23,23,23,0.05);
}

h1.design {
  font-family:'Fjalla One', sans-serif;
  font-size:7em;
  color: #ff3643;
  margin: 0;
  padding: 0;
  letter-spacing: 3px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all ease-in-out 0.3s;
  display:inline;
  text-shadow: 
    1px 1px 0 rgba(23,23,23,1),
    2px 2px 0 rgba(23,23,23,0.9),
    3px 3px 0 rgba(23,23,23,0.8),
    4px 4px 0 rgba(23,23,23,0.7),
    5px 5px 0 rgba(23,23,23,0.6),
    6px 6px 0 rgba(23,23,23,0.5),
    7px 7px 0 rgba(23,23,23,0.4),
    8px 8px 0 rgba(23,23,23,0.3),
    9px 9px 0 rgba(23,23,23,0.2),
    10px 10px 0 rgba(23,23,23,0.1),
    11px 11px 0 rgba(23,23,23,0.09),
    12px 12px 0 rgba(23,23,23,0.08),
    13px 13px 0 rgba(23,23,23,0.07),
    14px 14px 0 rgba(23,23,23,0.06),
    15px 15px 0 rgba(23,23,23,0.05),
    16px 16px 0 rgba(23,23,23,0.04),
    17px 17px 0 rgba(23,23,23,0.03),
    18px 18px 0 rgba(23,23,23,0.02),
    19px 19px 0 rgba(23,23,23,0.01),
    20px 20px 0 rgba(23,23,23,0.0),
    -15px 20px 10px rgba(23,23,23,0.05);
}

h2.and {
  font-family:'Petit Formal Script', cursive;
  font-size: 45px;
  margin:15px 0;
  padding 0;
  text-shadow:
    1px 1px 1px rgba(238,238,238,0.8),
    2px 2px 2px rgba(23,23,23,0.6),
    3px 3px 3px rgba(23,23,23,0.4);
}

h1.code {
  font-family:'Fjalla One',sans-serif;
  font-size:7em;
  color:#171717;
  margin:0 0 0 -50px;
  padding:0;
  letter-spacing:3px;
  font-weight:500;
  text-transform:uppercase;
  transition:all ease-in .2s;
  text-shadow: 
    1px 1px 0 rgba(238,238,238,1),
    2px 2px 0 rgba(238,238,238,0.9),
    3px 3px 0 rgba(23,23,23,0.8),
    4px 4px 0 rgba(23,23,23,0.7),
    5px 5px 0 rgba(23,23,23,0.6),
    6px 6px 0 rgba(23,23,23,0.5),
    7px 7px 0 rgba(23,23,23,0.4),
    8px 8px 0 rgba(23,23,23,0.3),
    9px 9px 0 rgba(23,23,23,0.2),
    10px 10px 0 rgba(23,23,23,0.1),
    11px 11px 0 rgba(23,23,23,0.09),
    12px 12px 0 rgba(23,23,23,0.08),
    13px 13px 0 rgba(23,23,23,0.07),
    14px 14px 0 rgba(23,23,23,0.06),
    15px 15px 0 rgba(23,23,23,0.05),
    16px 16px 0 rgba(23,23,23,0.04),
    17px 17px 0 rgba(23,23,23,0.03),
    18px 18px 0 rgba(23,23,23,0.02),
    19px 19px 0 rgba(23,23,23,0.01),
    20px 20px 0 rgba(23,23,23,0.0),
    -15px 20px 10px rgba(23,23,23,0.05);
  
}


h1.design:hover {
  1px 1px 0 rgba(23,23,23,1),
  3px 3px 0 rgba(23,23,23,0.9),
  5px 5px 0 rgba(23,23,23,0.8),
  7px 7px 0 rgba(23,23,23,0.7),
  9px 9px 0 rgba(23,23,23,0.6),
  11px 11px 0 rgba(23,23,23,0.5),
  13px 13px 0 rgba(23,23,23,0.4),
  15px 15px 0 rgba(23,23,23,0.3),
  17px 17px 0 rgba(23,23,23,0.2),
  19px 19px 0 rgba(23,23,23,0.1),
  21px 21px 0 rgba(23,23,23,0.08),
  23px 23px 0 rgba(23,23,23,0.06),
  25px 25px 0 rgba(23,23,23,0.04),
  27px 27px 0 rgba(23,23,23,0.02),
  29px 29px 0 rgba(23,23,23,0.0);
  margin: 0 0 0 50px;
  border-bottom: 5px solid;
}

.designwrap:hover .I {
  opacity: 1;
}


p{
  color: #2f1515;
  text-align: center;
  padding: 20px 5px;
  font-style: italic;
  margin: 100px 0 50px 0;
  font-size: 1.4em;
  border-top: 1px solid rgba(255,255,255,0.5);
  border-bottom: 1px solid rgba(255,255,255,0.5);
  text-shadow: 
    1px 1px 1px rgba(238,238,238,0.5), 
    2px 2px 2px rgba(0,0,0,0.1);
  
}

h1.code:hover {
  text-shadow:
    1px 1px 0 rgba(238,238,238,1),
    2px 2px 0 rgba(238,238,238,0.9),
    3px 3px 0 rgba(23,23,23,0.8),
    4px 4px 0 rgba(23,23,23,0.7),
    5px 5px 0 rgba(23,23,23,0.6),
    6px 6px 0 rgba(23,23,23,0.5),
    7px 7px 0 rgba(23,23,23,0.4),
    8px 8px 0 rgba(23,23,23,0.3),
    9px 9px 0 rgba(23,23,23,0.2),
    10px 10px 0 rgba(23,23,23,0.1),
    11px 11px 0 rgba(23,23,23,0.09),
    12px 12px 0 rgba(23,23,23,0.08),
    13px 13px 0 rgba(23,23,23,0.07),
    14px 14px 0 rgba(23,23,23,0.06),
    15px 15px 0 rgba(23,23,23,0.05),
    16px 16px 0 rgba(23,23,23,0.04),
    17px 17px 0 rgba(23,23,23,0.03),
    18px 18px 0 rgba(23,23,23,0.02),
    19px 19px 0 rgba(23,23,23,0.01),
    20px 20px 0 rgba(23,23,23,0.0),
    -15px 20px 10px rgba(23,23,23,0.05);
  margin:0;
}

#hide1 {opacity: 0; transition: all .2s ease-in-out;}

h1.code:hover >#hide1
{opacity: 1;}

#hide2 {opacity: 0; transition: all .2s ease-in-out; margin-left: 8px;}

h1.code:hover >#hide2
{opacity: 1;}