Long Shadow Icons

An attempt to create long shadow effects with the help of CSS

by Vaibhav Deshwal

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/flatly/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div class="container"><i class="fa fa-user fa-4x fa-custom fa-long-shadow"></i>
    <div>

CSS

body, html {
    height:100%;
    font-size:62.5%;
}
.container {
    background-color:#ecf0f1;
    height:100%;
}
.fa-custom {
    text-decoration: none;
    display: inline-block;
    color: white;
    top: 50%;
    left: 50%;
    position: absolute;
    padding: 0.5em;
    overflow: hidden;
    height: 1.8em;
    width: 1.8em;
    line-height: 0.7em;
    background-color: #34495e;
    border-radius: 100%;
    font-size: 10em;
    margin: 0 0.5em;
    border:1px solid white;
}
.fa-long-shadow {
  background: #34495e;
  text-shadow: 0px 0px #222f3d, 1px 1px #222f3d, 2px 2px #222f3d, 3px 3px #222f3d, 4px 4px #222f3d, 5px 5px #222f3d, 6px 6px #222f3d, 7px 7px #222f3d, 8px 8px #222f3d, 9px 9px #222f3d, 10px 10px #222f3d, 11px 11px #222f3d, 12px 12px #222f3d, 13px 13px #222f3d, 14px 14px #222f3d, 15px 15px #222f3d, 16px 16px #222f3d, 17px 17px #222f3d, 18px 18px #222f3d, 19px 19px #222f3d, 20px 20px #222f3d, 21px 21px #222f3d, 22px 22px #222f3d, 23px 23px #222f3d, 24px 24px #222f3d, 25px 25px #222f3d, 26px 26px #222f3d, 27px 27px #222f3d, 28px 28px #222f3d, 29px 29px #222f3d, 30px 30px #222f3d, 31px 31px #222f3d, 32px 32px #222f3d, 33px 33px #222f3d, 34px 34px #222f3d, 35px 35px #222f3d, 36px 36px #222f3d, 37px 37px #222f3d, 38px 38px #222f3d, 39px 39px #222f3d, 40px 40px #222f3d;
}