Fancy File Icons

A set of css3 icons which can fallback to ie7 (no rounded corners)

by James Ball

HTML

<a href="#"><div class="file orange">&lt;&#47;&gt;</div></a>
<a href="#"><div class="file blue">js</div></a>
<a href="#"><div class="file red">rb</div></a>
<a href="#"><div class="file yellow">py</div></a>
<a href="#"><div class="file purple">&lt;?&gt;</div></a>

CSS

.file:before{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 32px 32px 0;
  border-style: solid;
  border-color:#888 #fff;
  transition: border 0.2s;
}
.file{
  display: inline-block;
  position: relative;
  background: #b0b0b0;
  width: 100px;
  height: 150px;
  padding: 20px;
  margin: 10px;
  border-radius: 5px;
  color: #fff;
  font-size: 64px;
  line-height: 160px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  text-align: center;
  transition: transform 0.2s;
}

.file:hover:before{
  border-width: 0;
}

.file:hover{
  transform: scale(1.05);
}

.file:hover:active{
  transform: scale(0.95);
}

.orange{background:#ff7461;}.orange:before{border-color:#c65b4b #fff;}
.red{background:#ff6161;}.red:before{border-color:#c64b4b #fff;}
.yellow{background:#f4cf77;}.yellow:before{border-color:#cdad60 #fff;}
.blue{background:#8cc8ec;}.blue:before{border-color:#75a8c3 #fff;}
.purple{background:#b094de;font-size: 50px;}.purple:before{border-color:#8a75ad #fff;}