Comunidad de diseño web y desarrollo en internet

Logo de Ubuntu con CSS3

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.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate