Logo de Medianet Software en CSS3

Usando CSS3 + Google Fonts

by tdecs

HTML

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>Logo Medianet CSS3</title>
        <link href='http://fonts.googleapis.com/css?family=Nunito&text=mediantsofwr' rel='stylesheet'>
    </head>
    
    <body>
        <div class="mns-logo-container">
        
            <div class="mns-logo">
                <div class="mns mns1 mns-top"></div>
                <div class="mns mns2 mns-top"></div>
                <div class="mns mns3 mns-top"></div>
                
                <div class="mns mns4 mns-mid"></div>
                <div class="mns mns5 mns-mid"></div>
                <div class="mns mns6 mns-mid"></div>
                
                <div class="mns mns7 mns-bot"></div>
                <div class="mns mns8 mns-bot"></div>
                <div class="mns mns9 mns-bot"></div>
                
                <div class="mns-stick mns10"></div>
                <div class="mns-stick mns-gray-stick mns11"></div>
                <div class="mns-stick mns-gray-stick mns12"></div>
                <div class="mns-stick mns-gray-stick mns13"></div>
            </div>
            
            <hgroup class="mns-logotxt">
                <h2 class="mns-logotxt-medianet">media<span class="mns-logotxt-net">net</span></h2>
                <h3 class="mns-logotxt-software">software</h3>
            </hgroup>
        </div>    
    </body>

</html>

CSS

/* contenedor */
.mns-logo-container {
    background-color:#fff;
    padding:1px 5px 1px 1px;
    float:left;
    cursor:default
}

/* contenedor logo */
.mns-logo {
    position:relative;
    width:75px;
    height:75px;
    background-color:#FFF;
    float:left
}

/* cuadrados */
.mns {
    width:22px;
    height:22px;
    position:absolute;
    border:3px solid #FFF;
    -moz-border-radius:6px;
    border-radius:6px;
    background-clip:padding-box
}

/* mas redondeado para webkit */
body:nth-of-type(1) .mns {
    -webkit-border-radius:7px;
    border-radius:7px
}

/* fila 1 */
.mns-top {
    top:0
}

/* fila 2 */
.mns-mid {
    top:25px
}

/* fila 3 */
.mns-bot {
    top:50px
}

.mns1 {
    background-color:#175e94;
    left:0
}

.mns3 {
    background-color:#FFF;
    left:51px;
    top:-1px;
    z-index:1
}

.mns4 {
    background-color:#A6A6A6;
    left:0
}

.mns5 {
    background-color:#175e94;
    left:25px;
    z-index:1;
    -webkit-border-radius:7px;
    -moz-border-radius:7px;
    border-radius:7px
}

.mns6 {
    background-color:#A6A6A6;
    left:50px
}

.mns7 {
    background-color:#FFF;
    left:-1px;
    top:51px;
    z-index:1
}

.mns9 {
    background-color:#FFF;
    left:51px;
    z-index:1
}

/* palitos conectores */
.mns-stick {
    position:absolute;
    width:15px;
    height:3px
}

/* palito gris */
.mns-gray-stick {
    background-color:#A6A6A6;
    height:4px
}

.mns2,.mns8 {
    background-color:#A6A6A6;
    left:25px
}

.mns10 {
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
    left:19px;
    top:25px;
    background-color:#175e94;
    z-index:2
}

.mns11 {
    -webkit-transform:rotate(40deg);
    -moz-transform:rotate(40deg);
    -o-transform:rotate(40deg);
    transform:rotate(40deg);
    left:45px;
    top:25px
}

.mns12 {
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
   ...