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.
- bordeverde
- parteblanca
- trianguloverdegrande
- trianguloverdepequeno
- parteflechitaverde
- parteflechitablanca
- franjablancaarriba
- 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.
Por pablofmorales el 27 de Diciembre de 2011
Por esaenz22 el 27 de Diciembre de 2011
genial tuto por cierto!!!
saludos y gracias por aportar
Por @CiberCrack el 27 de Diciembre de 2011
Por v3on el 27 de Diciembre de 2011
lo siento me gano la curiosidad de verlo en IE
en los demás navegadores, perfecto