Flat long shadow

Text shadow, box shadow with Camera

by Amin Kodaganur

HTML

<script src="https://www.google.com/fonts#UsePlace:use/Collection:Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic"></script>
<body>
    <div class="box box-shadow">
    
      <div class="text text-shadow">
        A
      </div>
      
    </div>
</body>

SCSS

body{
  background-color : #3498db;
  font-family: "Roboto", sans-serif;
}

.box{
    background-color : #2980b9;
    width: 150px;
    height: 150px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -75px 0 0 -75px;
    overflow : hidden;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
}
.text{
    color: #fff;
    font-size: 75px;
    font-weight: bold;
    text-align: center;
    line-height: 150px;
    letter-spacing : 5px;
}
.text-shadow{
  
    $shadow : "";
    
    @while $i > 0 {
      $shadow : #{$shadow} #{$i}px #{$i}px rgba(0,0,0,0.08),
    }
    text-shadow : $shadow ;
     
}