CSS - Russian River

Shadow effect

by secretgspot

HTML

<div class="russian-river">
  <div class="trigger1"></div>
  <div class="trigger2"></div>
  <div class="trigger3"></div>
  <div class="trigger4"></div>
  <div class="trigger5"></div>
  <h1><span class="first-letter">R</span>ussian Rive<span class="last-letter">r</span></h1>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);

body {
  background: #fdf7ef;
  text-align: center;
}

.russian-river {
  position: relative;
  display: inline-block;
}

h1 {
  margin: 0;
  font-size: 128px;
  font-family: 'Yanone Kaffeesatz', sans-serif;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #fcf5ed;
  text-shadow:
    /* grey part - static */
    -1px -1px #34342f,
    1px 1px #34342f,
    2px 2px #34342f,
    3px 3px #34342f,
    4px 4px #34342f,
    5px 5px #34342f,
    6px 6px #34342f,
    7px 7px #34342f,
    /* red part - dynamic */
    0 8px #da5845,
    0 9px #da5845,
    0 10px #da5845,
    0 11px #da5845,
    0 12px #da5845,
    0 13px #da5845,
    0 14px #da5845,
    0 15px #da5845,
    0 16px #da5845,
    0 17px #da5845,
    0 18px #da5845,
    1px 8px #da5845,
    1px 9px #da5845,
    1px 10px #da5845,
    1px 11px #da5845,
    1px 12px #da5845,
    1px 13px #da5845,
    1px 14px #da5845,
    1px 15px #da5845,
    1px 16px #da5845,
    1px 17px #da5845,
    1px 18px #da5845,
    2px 8px #da5845,
    2px 9px #da5845,
    2px 10px #da5845,
    2px 11px #da5845,
    2px 12px #da5845,
    2px 13px #da5845,
    2px 14px #da5845,
    2px 15px #da5845,
    2px 16px #da5845,
    2px 17px #da5845,
    2px 18px #da5845,
    3px 8px #da5845,
    3px 9px #da5845,
    3px 10px #da5845,
    3px 11px #da5845,
    3px 12px #da5845,
    3px 13px #da5845,
    3px 14px #da5845,
    3px 15px #da5845,
    3px 16px #da5845,
    3px 17px #da5845,
    3px 18px #da5845,
    4px 8px #da5845,
    4px 9px #da5845,
    4px 10px #da5845,
    4px 11px #da5845,
    4px 12px #da5845,
    4px 13px #da5845,
    4px 14px #da5845,
    4px 15px #da5845,
    4px 16px #da5845,
    4px 17px #da5845,
    4px 18px #da5845,
    5px 8px #da5845,
    5px 9px #da5845,
    5px 10px #da5845,
    5px 11px #da5845,
    5px 12px #da5845,
    5px 13px #da5845,
    5px 14px #da5845,
    5px 15px #da5845,
    5px 16px #da5845,
    5px 17px #da5845,
    5px...