Pure CSS File Icons

[srecalo]

Here i have made some pure CSS File Icons for you guys :) Tell me how iflike it :) (or not :D)

CSS:

.icon{
    float: left;
    margin-right: 10px;

    width: 70px;
    height: 80px;   
    border: none;
    position: relative;
    box-shadow: 0 0 5px rgba(0,0,0,0.4);
    background: linear-gradient(to bottom, rgb(255, 255, 255) 0%,rgb(230, 230, 230) 100%); /* Chrome,Safari4+ */
    background: linear-gradient(to bottom, rgb(255, 255, 255) 0%,rgb(230, 230, 230) 100%); /* Chrome10+,Safari5.1+ */

    transition: box-shadow 0.2s ease;
    -webkit-transition: -webkit-box-shadow 0.2s ease;
}

.icon:hover{cursor: pointer; box-shadow: 0 0 5px rgba(0,0,0,0.6);}
.icon:hover > span{top: 33px;}

.icon > span{
    top: 35px;
    left: -2px;
    width: 74px;
    height: 35px;
    display: block;
    position: absolute;
    border-radius: 1px;
    box-shadow: 0 0 1px rgba(0,0,0,0.2);

    color: rgb(255,255,255);
font-family: calibri;
    font-size: 1em;
    line-height: 35px;
    text-align: center;
    text-shadow: 0 0 1px rgba(0,0,0,0.4);

    transition: top 0.1s ease;
    -webkit-transition: top 0.1s ease;
}

.icon.blue > span{
    background: rgba(73,155,234,1);
    background: -moz-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(73,155,234,1)), color-stop(100%, rgba(32,124,229,1)));
    background: -webkit-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
    background: -o-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
    background: -ms-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
    background: linear-gradient(to bottom, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5', GradientType=0 );
}

HTML Markup:

<div class="icon blue">
  <span>docx</span>
</div>

Here is the Demo Link

[Author]

Posts