Crea tu logo utilizando sólo CSS3

Aprovechando el potencial de CSS3 creamos el logotipo simple de SoyDigital utilizando sólo la propiedad border-radius, y este es el resultado:

Código HTML

<div id="logo">
    <div id="s1"></div>
    <div id="s2"></div>
    <div id="s3"></div>
    <div id="s4"></div>
    <div id="s5"></div>    
    <div id="s6"></div>
    <div id="s7"></div>
    <div id="S"></div>        
    <div id="D"></div>
    <div id="d1"></div>
    <div id="d2"></div>
</div>

Código CSS

Como no todos los navegadores soportan border-radius, incluimos -webkit-border-radius (para Safari y Chrome) y -moz-border-radius (para Firefox).

#logo {margin:50px auto;position:relative;width:147px}

.azul {background-color:#2C1C5C}
.blanco {background-color:#fff}
.pos {position:absolute}

#S {
    display:inline-block;    
    height:58px;    
    width:68px;    
}

#s1 {
    height:13px;
    width:91px;

    border-radius:20px 0 0 0;
    -webkit-border-radius:20px 0 0 0;
    -moz-border-radius:20px 0 0 0;
}

#s2 {
    height:13px;
    width:68px;
    top:22px;

    border-radius:0 20px 0 20px;
    -webkit-border-radius:0 20px 0 20px;
    -moz-border-radius:0 20px 0 20px;
}

#s3 {
    height:13px;
    width:68px;
    top:44px;

    border-radius:0 0 20px 0;
    -webkit-border-radius:0 0 20px 0;
    -moz-border-radius:0 0 20px 0;
}

#s4,#s5 {
    height:9px;
    width:22px;
}

#s4 {top:13px}

#s5 {
    left:46px;
    top:35px;
}

#s6,#s7 {
    height:9px;
    width:5px;
}

#s6 {
    left:17px;
    top:13px;

    border-radius:20px 0 0 20px;
    -webkit-border-radius:20px 0 0 20px;
    -moz-border-radius:20px 0 0 20px;
}

#s7 {
    left:46px;
    top:35px;

    border-radius:0 20px 20px 0;
    -webkit-border-radius:0 20px 20px 0;
    -moz-border-radius:0 20px 20px 0;
}

#D {
    display:inline-block;
    height:58px;
    width:72px;

    border-radius:20px 20px 20px 0;
    -webkit-border-radius:20px 20px 20px 0;
    -moz-border-radius:20px 20px 20px 0;
}

#d1 {
    height:31px;
    width:39px;
    left:91px;
    top:13px;    
    z-index:100;

    border-radius:0 10px 10px 0;
    -webkit-border-radius:0 10px 10px 0;    
    -moz-border-radius:0 10px 10px 0;
}

#d2 {
    height:5px;
    width:18px;
    left:73px;
    top:13px;    
    z-index:100;
}

En ecsspert.com puedes ver varios ejemplos de logotipos hechos sólo con algunas propiedades de CSS3.