Comunidad de diseño web y desarrollo en internet online

Logo de Mejorando.la con CSS3

En este tutorial les enseñaré a hacer el logo de mejorando.la en CSS3.

Aquí les dejo una imagen que los ayudará a comprender mejor:



Lo que haremos es simplemente hacer que giren los divs, posicionarlos, añadirles bordes redondeados y añadir color.


  1. bordeverde
  2. parteblanca
  3. trianguloverdegrande
  4. trianguloverdepequeno
  5. parteflechitaverde
  6. parteflechitablanca
  7. franjablancaarriba
  8. franjablancaabajo


Primero vamos con el maquetado HTML:

Código :

<!DOCTYPE html>
<html lang="es">
<head>
   <meta charset="utf-8" />
   <title>Logo de Mejorandola en CSS3</title>
   <link rel="stylesheet" href="style.css" />
</head>
<body>
   <div class="wrap">
   <div id="bordeeverde">
   <div id="parteblanca">
   <div id="trianguloverdegrande">
   <div id="trianguloverdepequeno">
   <div id="partedelaflechitaverde">
   <div class="franjablancaarriba">
   </div>
   <div id="parteflechitablanca">
   </div>
   <div class="franjablancaabajo">
   </div>
   </div>
   </div>
   </div>
   </div>
   </div>
   </div>
</body>
</html>



Ahora vamos a darle estilo, ¡bendito seas CSS3!.

Código :

#bordeeverde {
   background: #a8cf45;
   width: 200px;
   height: 200px;
   border-radius: 36px;
   padding: 24px;
   margin-top: 80px;
   margin-left: 45px;
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -o-transform: rotate(45deg);
}
#parteblanca {
   background: #fff;
   width: 200px;
   height: 200px;
   border-radius: 22px;
}
#trianguloverdegrande {
   display: block;
   position: absolute;
   margin-left: 48px;
   margin-top: 93px;
   -webkit-transform: rotate(180deg);
   -moz-transform: rotate(180deg);
   -o-transform: rotate(180deg);
   border-color: #a8cf45 transparent transparent transparent;
   border-style: solid;
   border-width: 54px;
   width: 0px;
   height: 0;
}
#trianguloverdepequeno {
   display: block;
   position: absolute;
   margin-top: 108px;
   margin-left: -14px;
   -webkit-transform: rotate(180deg);
   -moz-transform: rotate(180deg);
   -o-transform: rotate(180deg);
   border-color: #a8cf45 transparent transparent transparent;
   border-style: solid;
   border-width: 20px;
   width: 0;
   height: 0;
}
#partedelaflechitaverde {
   display: block;
   position: absolute;
   -webkit-transform: rotate(180deg);
   -moz-transform: rotate(180deg);
   -o-transform: rotate(180deg);
   border-color: #a8cf45 transparent transparent transparent;
   border-style: solid;
   border-width: 110px;
   margin-top: -100px;
   margin-left: -106px;
   width: 0px;
   height: 0;
}
.franjablancaarriba {
   display: block;
   position: absolute;
   -webkit-transform: rotate(90deg);
   -moz-transform: rotate(90deg);
   -o-transform: rotate(90deg);
   width: 100px;
   height: 50px;
   margin-top: -86px;
   margin-left: 25px;
   background: #fff;
}
.franjablancaabajo {
   display: block;
   position: absolute;
   -webkit-transform: rotate(90deg);
   -moz-transform: rotate(90deg);
   -o-transform: rotate(90deg);
   width: 100px;
   height: 50px;
   margin-top: -86px;
   margin-left: -125px;
   background: #fff;
}
#parteflechitablanca {
   display: block;
   position: absolute;
   border-color: #fff transparent transparent transparent;
   border-style: solid;
   border-width: 58px;
   width: 0px;
   height: 0;
   margin-top: -111px;
   margin-left: -58px;
}
.wrap {
   width: 321px;
   height: auto;
   margin: 0 auto;
}



Puedes ver el ejemplo en marcha (Testeado en Firefox, Opera, Chrome, Safari): Logo mejorandola en CSS3

Eso es todo.

¿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