En mi búsqueda de nuevas tecnologías me he encontrado con CSS3, y específicamente con la creación de logos. Los logos con CSS3 son muy fáciles de hacer, con un poquito de razonamiento se les va dando forma hasta encontramos con un logo perfectamente elaborado, y que al agrandarlo no se pixela.
En esta ocasión les enseñaré a hacer el logo de Ubuntu con sólo unas cuantas líneas de código.
El diseño del logo es la siguiente:
El maquetado HTML:
Código :
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8" /> <title>Logo Ubuntu CSS3</title> </head> <body> <div id="circuloanaranjado"> <div id="circuloconborde"> </div> <div class="circulito1"> </div> <div class="circulito2"> </div> <div class="circulito3"> </div> <div id="franja1"> </div> <div id="franja2"> </div> <div id="franja3"> </div> </div> </body> </html>
Con CSS3 vamos a comenzar a darle estilo.
Primero con el "circuloanaranjado":
Código :
#circuloanaranjado {
width: 300px;
height: 300px;
border-radius: 300px;
background: #ff6900;
margin-top: 20px;
box-shadow: 0 1px 0 #fff;
}Nos quedaría así:
Ahora con el "circuloconborde":
Código :
#circuloconborde {
display: block;
position: absolute;
width: 120px;
height: 120px;
border-radius: 120px;
background: transparent;
border: 28px solid #fff;
margin: 62px;
}Nos va quedando así:
Ahora con el "circulito1":
Código :
.circulito1 {
display: block;
position: absolute;
background: #fff;
border: 7px solid #ff6900;
width: 46px;
height: 46px;
margin-top: 27px;
margin-left: 171px;
border-radius: 46px;
}Nos va quedando así:
Ahora con el "circulito2":
Código :
.circulito2 {
display: block;
position: absolute;
background: #fff;
border: 7px solid #ff6900;
width: 46px;
height: 46px;
margin-top: 214px;
margin-left: 173px;
border-radius: 46px;
}Va quedando así:
Ahora con "circulito3":
Código :
.circulito3 {
display: block;
position: absolute;
background: #fff;
border: 7px solid #ff6900;
width: 46px;
height: 46px;
margin-top: 120px;
margin-left: 14px;
border-radius: 46px;
}Nos queda así:
Ahora con "franja1":
Código :
#franja1 {
display: block;
position: absolute;
background: #ff6900;
width: 32px;
height: 10px;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-o-transform: rotate(60deg);
margin-top: 81px;
margin-left: 98px;
}Nos va quedando así:
Ahora con "franja2":
Código :
#franja2 {
display: block;
position: absolute;
background: #ff6900;
width: 32px;
height: 10px;
margin-top: 144px;
margin-left: 208px;
}Nos queda así:
Y finalmente con "franja3":
Código :
#franja3 {
display: block;
position: absolute;
background: #ff6900;
width: 32px;
height: 10px;
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-o-transform: rotate(120deg);
margin-top: 209px;
margin-left: 98px;
}Y el resultado sería el siguiente:
Y listo tenemos nuestro logo de Ubuntu hecho solo con código.
Podemos ver la demostración aquí: Logo Ubuntu (Funciona en Chrome, Safari, Opera y Firefox)
Gracias por visitar el tutorial.
¿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.
muchas gracias, por el aporte y el esfuerzo extra! *le da una medallita y una cerveza
Por diestrin el 28 de Diciembre de 2011
Otro comentario, en IE haces parecer que no sirve... IE suks, I know, pero si sirve, al menos en el 9, solo que las transformaciones de rotacion de las franja no las toma, pero incluso, creo que si usas Modernizer, podras hacer que funcione en el 6,7 y 8, tendrias que probarlo...!
De todas maneras esta muy bueno!
Ahora pregunto, se puede lograr lo mismo usando multiples background para no usar tantos <div> ?
Por gielfull el 28 de Diciembre de 2011
jaja, es broma, me gustaría hacer algo así, tengo mucho que aprender de CSS3 ya que mi fuerte no es el diseño
Por pablo1416 el 29 de Diciembre de 2011
Por xpzion7 el 10 de Enero de 2012
Por Hromero el 13 de Abril de 2012