Reflection Typography

index.html

<div class="reflection">REFLECTION</div>
<hr />

Reflection-Typography.markdown

Reflection Typography

Please heart and follow. :)

A Pen by Abhijit Hota on CodePen.

License.

style.scss

@import "compass/css3";
@import url(http://fonts.googleapis.com/css?family=Raleway:600);

body{
  background: #222;
}
hr{
  position: absolute;
  height:1px;
  @include box-shadow(0 4px 6px #e74c3c);
  width:100vw;
  left: 0;
  outline: 0;
  border:0;
  top: 0;
  bottom: 0; 
  margin: auto;
  background:#e74c3c;
}
.reflection{
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height:200px;
  width:610px;
  text-align:center;
  font-size:100px;
  @include text-shadow(-1px -1px 1px #aaa); 
  font-family: 'Raleway', sans-serif;
  color:#E74C3C;
  line-height: 130px;
  letter-spacing:-13px; 
  @include animation(intro 1s $ease-out-sine);
  &:before{
    position: absolute;
    content:"REFLECTION";
    top:71px;
    left: 69px;
    @include transform(rotateX(180deg)skew(-10deg));
    opacity:0.4;
    
  }
  &:after{
    position: absolute;
    content:"";
    top:145px; 
    margin-left:0;
    left: -24.5vw;
    height:100%;
    width:100vw;
    background:#222;
    @include box-shadow(
      -20px 0 0 #222,
      40px 0 0 #222, 
      0 40px 0 #222,
      2px -15px 20px  #222
      );
  }
}