Salta al contingut principal

Logo de Mejorando.la con CSS3

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.

Enviar comentario



Comentaris

Publica un comentari a l'entrada

Entrades populars d'aquest blog

15 Tutoriales CSS3 para mejorar tus paginas web

15 Tutoriales CSS3 para mejorar tus paginas web : Les dejo una pequeña recopilación de tutoriales CSS3 que espero sean de utilidad para ustedes, intentamos hacer una recopilación bastante completa para crear impresionantes diseños web con CSS3 y aprovechar las bondades de CSS3 incluso para aplicar efectos, son un total de 15 tutoriales CSS3 gratis . Crear menu dropdown con CSS3 Crear breadcrumbs con estilo Transiciones de paginas con CSS3 Crear timeline con CSS3 y jQuery Reproductor de video con HTML5, CSS3 y jQuery Crear efecto acordion CSS3 Aplicar degradado a texto Crear texto en curva con CSS3 y jQuery Aplicar textura a texto con Magic Pill Crear slider de imagenes con CSS3 y jQuery Rotar texto con CSS3 Crear menu vertical con CSS3 Crear formulario con HTML5 y CSS3 Crear efecto de imagenes apiladas con CSS3 Aplicar estilos para imagenes con CSS3  
Publica un comentari a l'entrada
Més informació

El meu editor de codi preferit el 2024, que això ja se sap que va canviant 😄

Visual Code Visual Code és un editor de codi font lleuger, però potent que s’executa al teu escriptori i està disponible per a Windows, macOS i Linux. Compta amb suport integrat per a JavaScript, TypeScript i Node.js i té un ric ecosistema d’extensions per a altres llenguatges i entorns d’execució (com C++, C#, Java, Python, PHP, Go, .NET).  És una eina ideal per a desenvolupar i depurar aplicacions web i en el núvol. Per què Visual Code? Visual Code té molts avantatges com a editor de codi font, com per exemple: És gratuït, ràpid i fàcil d’instal·lar i actualitzar. Té un ampli ecosistema d’extensions que et permeten afegir funcionalitats i personalitzar la teva experiència de desenvolupament. Té un suport integrat per a molts llenguatges i entorns d’execució, i et permet depurar i executar el teu codi des del mateix editor. Té una interfície senzilla i elegant, amb diferents temes i modes de visualització. Té un sistema de sincronització de configuracions que et permet guardar les...
Publica un comentari a l'entrada
Més informació

Learn Composition from the Photography of Henri Cartier-Bresson

“Do you see it?” This question is a photographic mantra. Myron Barnstone , my mentor, repeats this question every day with the hopes that we do “see it.” This obvious question reminds me that even though I have seen Cartier-Bresson’s prints and read his books, there are major parts of his work which remain hidden from public view. Beneath the surface of perfectly timed snap shots is a design sensibility that is rarely challenged by contemporary photographers. Henri Cartier-Bresson. © Martine Franck Words To Know 1:1.5 Ratio: The 35mm negative measures 36mm x 24mm. Mathematically it can be reduced to a 3:2 ratio. Reduced even further it will be referred to as the 1:1.5 Ratio or the 1.5 Rectangle. Eyes: The frame of an image is created by two vertical lines and two horizontal lines. The intersection of these lines is called an eye. The four corners of a negative can be called the “eyes.” This is extremely important because the diagonals connecting these lines will form the breakdown ...
Publica un comentari a l'entrada
Més informació