Crea el logo de uTorrent con CSS3

El HTML5 y el CSS3 son como el amor, están en el aire. Se respiran, se presienten, pero hasta que no se les pone las manos encima, es como si nada. Cansado de pasármela leyendo y haciendo pequeñas prácticas en varios sitios web, me decidí a llevar a cabo un primer ejemplo al respecto.

¿Cómo elegir qué representar, qué hacer? No es fácil, pero ejemplos hay en todos lados. Todas las nuevas herramientas que nos ofrece CSS3 en particular, me recuerdan mucho a mis primeros momentos aprendiendo Photoshop, ya que muchos de los efectos visuales más avanzados se lograban aplicando simples gradientes, sombras y no mucho más.

Leyendo una noticia sobre el programa P2P uTorrent, veo una de las variedades de su logo que me llamó la atención por lo simple, y me decidí, iba a tratar de reproducirlo con CSS3. Ahora, tengan en cuenta una cosa: esto es el trabajo de un humilde Desarrollador, que con el paso de los años ha perdido cualquier cuestión de estética y gusto (incluso personal).

"Señor, podría dejar de hablar y explicarnos como lo hizo? Gracias"

Pfff... mocosos insolentes, esto en mis épocas no pasaba. Bueno, vamos al código entonces. Comencemos con el HTML que será necesario:

Código :

<div id="farouter">
<div id="closeouter">
<div id="farinner">
<div id="closeinner">
<span id="mu">&mu;</span>
</div>
</div>
</div>
</div>

Tomé esta estrucura ya que el logo que realizaremos se compone de cuatro círculos concéntricos, ergo, cuatro div's anidados. ¿Suena lógico? Ya se que no, pero lo verán a medida que avancemos. Hasta ahora solo vamos un símbolo raro: μ y nada más.

Apliquemos el primer estilo

Con un poco de redondeado de bordes, un primer gradiente y algo de sombra, tenemos nuestro primer resultado:

Código :

<style>
#farouter {
/* Centramos, porque me gustan las cosas centradas */
margin: 10px auto;
width: 300px;
height: 300px;

/* Redondeamos los bordes a la mitad del ancho y alto, para obtener círculos */
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
border-radius: 150px;

/* Le creamos un lindo gradiente vertical, para dar la sensación de luminosidad */ 
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A2B3BC), to(#4F595F));
background-image: -moz-linear-gradient(top, #A2B3BC, #4F595F);

/* Un poco de sombra, porque las cosas me gustan centradas Y sombreadas*/
box-shadow: 5px 5px 5px #ccc;
position: relative;
}
</style>

"No está mal, pero eso no es un logo, Señor" - Lo sé, lo sé. Apliquemos un poco más de estilo a los divs más internos, esos van a lograr algo de magia.

Código :

#closeouter {
margin: auto;
width: 270px;
height: 270px;
-webkit-border-radius: 135px;
-moz-border-radius: 135px;
border-radius: 135px;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FDFDFD), to(#6F808A));
background-image: -moz-linear-gradient(top, #FDFDFD, #6F808A);
position: absolute;
top: 15px; left: 15px;
}

#farinner {
margin: auto;
width: 220px;
height: 220px;
-webkit-border-radius: 110px;
-moz-border-radius: 110px;
border-radius: 110px;
background-color: #198117;
position: absolute;
left: 25px; top: 25px;
}

#closeinner {
margin: auto;
width: 200px;
height: 200px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#66CF66), to(#005E00));
background-image: -moz-linear-gradient(top, #66CF66, #005E00);
position: absolute;
top: 10px; left: 10px;
}

"Ah... ahora si tiene un poco más de sentido" - Y qué había dicho yo? Paciencia, que todo llega. Aplicamos unos estilos similares a los primeros, pero con gradientes distintos, y llegamos a lograr un efecto interesante. Pero seguimos ahi con esa μ tirada por cualquier lado. Es hora de que hagamos algo al respecto:

Código :

#mu {
display: block;
position: absolute;
left: 20px;
font-size: 230px;
line-height: 100px;
font-weight: bolder;
color: white;
font-family: Tahoma;
text-shadow: 8px 8px 1px rgba(0, 0, 0, .4), 16px 16px 1px rgba(0, 0, 0, 0.2);

}

Y ahora si podemos decir que tenemos algo parecido a un Logo. Solo se necesitó aplicar un par de sombras con distintas opacidades, y todo toma otro color ("bitches love lower opacity"). Pueden chequear la versión final.

Hay que jugar más con CSS3.

Muchos logos y símbolos se pueden reproducir con técnicas simples, algunos de los que se me vienen a la mente ahora serían los botones de play o el logo de Wordpress, por ejemplo. Seguramente estaré intentandolo nuevamente, así que los invito a visitar mi blog Ruidodigital.com y la reencarnación de mi Blog con tutoriales de Photoshop, Photoshopfans.com.

PD: Freddy, te quiero.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.