Cómo crear el logotipo de Gmail con CSS3
Hace un par de meses te mostré cómo crear un logotipo de fuente RSS con CSS3. Pensé que sería divertido crear algo un poco más complejo. En la publicación de hoy, te mostraré cómo crear no una, sino dos variaciones del logotipo de Gmail utilizando solo CSS3..
Atajos a:
- Gmail logo CSS tutorial # 1 | Avance
- Gmail logo CSS tutorial # 2 | Avance
Gmail logo # 1
Este primer logotipo es simple y bastante fácil de crear. Sin más preámbulos, aquí están los pasos. Comencemos con la activación de su editor de código favorito, ingrese los siguientes códigos HTML y guárdelos como logo-gmail.html.
Gmail CSS Logo
Agrega los siguientes estilos CSS entre para restablecer los valores CSS por defecto.
.gmail-logo, .gmail-logo *, .gmail-logo *: antes, .gmail-logo *: después margen: 0; relleno: 0; fondo: transparente; borde: 0; esquema: 0; bloqueo de pantalla; fuente: normal normal 0/0 serif;
Los siguientes códigos CSS nos dan el fondo rojo del logotipo de Gmail y sus lados redondeados.
.gmail-logo margin: 110px auto; fondo: rgb (201, 44, 25); ancho: 600px; altura: 400px; borde superior: 4px sólido rgb (201, 44, 25); borde inferior: 4px sólido rgb (201, 44, 25); radio del borde: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
Luego, procedemos a crear el cuadro blanco dentro del fondo rojo..
.gmail-logo .gmail-box desbordamiento: oculto; flotador izquierdo; ancho: 440px; altura: 400px; margen: 0 0 0 80px; fondo: blanco; radio del borde: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
Para crear el efecto "M" rojo, primero crearemos un cuadro con un borde rojo.
.gmail-logo .gmail-box: antes de posición: relativo; contenido: "; índice z: 1; fondo: blanco; flotador: izquierdo; ancho: 320px; altura: 320px; borde: 100px rgb sólido (201, 44, 25); margen: -310px 0 0 -40px; borde- radio: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-transform: rotate (45deg); -webkit-transform: rotate (45deg); -o-transform: rotate (45deg );
Luego procedemos a ocultar los lados excesivos, dándonos una "M" completa en color rojo..
.gmail-logo .gmail-box desbordamiento: oculto;
Ahora, vamos a darle dos bordes rojos delgados, dándole el aspecto de sobre.
.gmail-logo .gmail-box: después de contenido: "; flotar: izquierda; ancho: 360px; altura: 360px; borde: 2px rgb sólido (201, 44, 25); margen: 10px 0 0 40px; -o-transformar : rotate (45deg); -webkit-transform: rotate (45deg); -moz-transform: rotate (45deg);
Casi terminamos. Añadamos un poco de degradado al sobre rojo..
.gmail-logo: after content: "; posición: relativo; z-index: 2; content:"; flotador izquierdo; margen superior: -404px; ancho: 600px; altura: 408px; bloqueo de pantalla; Fondo: -moz-lineal-gradiente (arriba, rgba (255, 255, 255, 0.3) 0%, / * rgba (255, 255, 255, 0.3) 30%, * / rgba (255, 255, 255, 0.1) ) 100%); fondo: -o-lineal-gradiente (arriba, rgba (255, 255, 255, 0.3) 0%, / * rgba (255, 255, 255, 0.2) 30%, * / rgba (255, 255, 255, 0.1 ) 100%); Fondo: -webkit-gradiente (lineal, izquierda superior, izquierda inferior, paro de color (0%, rgba (255, 255, 255, 0,3)), / * paro de color (30%, rgba (255, 255, 255) , 0.2)), * / color-stop (100%, rgba (255, 255, 255, 0.1)));
Por último, pero no menos importante, vamos a darle un color diferente al flotar. Agregue el siguiente DOCTYPE HTML antes
Y los siguientes estilos CSS antes
.gmail-logo: hover background: # 313131; color de borde: # 313131; / * cursor: puntero; * / .gmail-logo: hover .gmail-box: antes de border-color: # 313131; .gmail-logo: desplace .gmail-box: después de border-color: # 313131; color de borde inferior: #fff; color de borde derecho: #fff;
Vista previa | Descargar el archivo fuente
Logo de Gmail # 2
A continuación, crearemos el logotipo de Gmail desde otra perspectiva con un pequeño efecto 3D. Comenzaremos con el marcado HTML básico..
Logo de gmail 2
Como el logotipo tiene una perspectiva diferente, comenzaremos girándolo un poco y crearemos las capas necesarias (a las que llamaremos elementos) en secuencia.
# gmail-logo2 margin: 0 auto; bloqueo de pantalla; ancho: 380px; altura: 290px; -moz-transform: rotate (6deg); -webkit-transform: rotate (6deg); -o-transformar: rotar (6deg); transformar: rotar (6deg); # gmail-logo2 .element1 display: block; ancho: 380px; altura: 290px; # gmail-logo2 .element2, # gmail-logo2 .element3, # gmail-logo2 .element4, # gmail-logo2 .element5 float: left; bloqueo de pantalla; ancho: 380px; altura: 290px; margen: -290px 0 0 0;
Estilo .element1 :: antes
# gmail-logo2 .element1 :: before content: "; position: relative; margen: 2px 0 0 14px; flotador: izquierda; pantalla: bloque; fondo: rgb (201, 44, 25); ancho: 30px; altura: 276px; -moz-transform: rotate (3deg); -webkit-transform: rotate (3deg); -o-transform: rotate (3deg); transform: rotate (3deg); border-radius: 22px 0 0 20px; -moz -border-radius: 22px 0 0 20px; -webkit-border-radius: 22px 0 0 20px; box-shadow: -1px 1px 0 rgb (109, 10, 0), -2px 2px 0 rgb (109, 10, 0 ), -3px 3px 0 rgb (109, 10, 0), -4px 4px 0 rgb (109, 10, 0), -5px 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10) , 0); -webkit-box-shadow: -1px 1px 0 rgb (109, 10, 0), -2px 2px 0 rgb (109, 10, 0), -3px 3px 0 rgb (109, 10, 0), -4px 4px 0 rgb (109, 10, 0), -5px 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0); -moz-box-shadow: -1px 1px 0 rgb (109, 10, 0), -2px 2px 0 rgb (109, 10, 0), -3px 3px 0 rgb (109, 10, 0), -4px 4px 0 rgb (109, 10, 0), -5px 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0);
Estilo .element1 :: después
# gmail-logo2 .element1 :: after content: "; posición: relativo; margen: 40px 5px 0 0; flotador: derecha; pantalla: bloque; fondo: rgb (201, 44, 25); ancho: 30px; altura: 238px; -moz-transform: rotate (3deg); -webkit-transform: rotate (3deg); -o-transform: rotate (3deg); transform: rotate (3deg); border-radius: 0 18px 26px 0; -webkit -border-radius: 0 18px 26px 0; -moz-border-radius: 0 18px 26px 0; box-shadow: -1px 1px 0 rgb (109, 10, 0), -2px 2px 0 rgb (109, 10, 0 ), -3px 3px 0 rgb (109, 10, 0), -4px 4px 0 rgb (109, 10, 0), -5px 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10) , 0), -6px 7px 0 rgb (109, 10, 0); -moz-box-shadow: -1px 1px 0 rgb (109, 10, 0), -2px 2px 0 rgb (109, 10, 0), -3px 3px 0 rgb (109, 10, 0), -4px 4px 0 rgb (109, 10, 0), -5px 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0) ), -6px 7px 0 rgb (109, 10, 0); -webkit-box-shadow: -1px 1px 0 rgb (109, 10, 0), -2px 2px 0 rgb (109, 10, 0), -3px 3px 0 rgb (109, 10, 0), -4px 4px 0 rgb (109, 10, 0), -5px 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0), -6px 7px 0 rg b (109, 10, 0);
Estilo .element2 :: antes
# gmail-logo2 .element2 :: before content: "; margin: 22px 0 0 48px; float: left; display: block; background: rgb (201, 44, 25); width: 315px; height: 14px; -moz -transformar: rotar (6.8deg); -webkit-transformar: rotar (6.8deg); -o-transformar: rotar (6.8deg); transformar: rotar (6.8deg); cuadro-sombra: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10, 0), 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0); -webkit-box-shadow: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10, 0), 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0); -shadow: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10, 0) , 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0);
Estilo .element2 :: después
# gmail-logo2 .element2 :: after content: "; position: relative; margen: 230px 0 0 36px; flotador: izquierda; pantalla: bloque; fondo: rgb (201, 44, 25); ancho: 310px; altura: 12px; box-shadow: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10 , 0), 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0); -webkit-box-shadow: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10, 0), 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0); -moz-box-shadow: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0) ), 0 4px 0 rgb (109, 10, 0), 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0);
Estilo .element3 :: antes
# gmail-logo2 .element3 :: before content: "; posición: relativo; margen: 8px 0 0 42px; flotador: izquierda; pantalla: bloque; fondo: rgb (201, 44, 25); ancho: 42px; altura: 268px; -moz-transform: rotate (3deg); -webkit-transform: rotate (3deg); -o-transform: rotate (3deg); transform: rotate (3deg);
Estilo .element3 :: después
# gmail-logo2 .element3 :: after content: "; position: relative; margen: 40px 32px 0 0; flotador: derecha; pantalla: bloque; fondo: rgb (201, 44, 25); ancho: 22px; altura: 236px; -moz-transform: rotate (3.0deg); -webkit-transform: rotate (3.0deg); -o-transform: rotate (3.0deg); transform: rotate (3.0deg); box-shadow: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10, 0), 0 5px 0 rgb ( 109, 10, 0), -6px 6px 0 rgb (109, 10, 0); -webkit-box-shadow: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0) , 0 3px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10, 0), 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0); -moz-box-shadow: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10, 0), 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0);
Estilo .element4 :: antes
# gmail-logo2 .element4 :: before content: "; posición: relativo; margen: -2px 0 0 130px; flotador: izquierda; pantalla: bloque; fondo: rgb (201, 44, 25); ancho: 54px; altura : 192px; -moz-transform: rotate (-49deg); -webkit-transform: rotate (-49deg); -o-transform: rotate (-49deg); transform: rotate (-49deg); box-shadow: -1px 0 0 rgb (109, 10, 0), -2px 0 0 rgb (109, 10, 0), -3px 0 0 rgb (109, 10, 0), -4px 0 0 rgb (109, 10, 0), -5px 0 0 rgb (109, 10, 0), -6px 0 0 rgb (109, 10, 0), -7px 0 0 rgb (109, 10, 0), -8px 0 0 rgb (109, 10, 0) -moz-box-shadow: -1px 0 0 rgb (109, 10, 0), -2px 0 0 rgb (109, 10, 0), -3px 0 0 rgb (109, 10, 0), -4px 0 0 rgb (109, 10, 0), -5px 0 0 rgb (109, 10, 0), -6px 0 0 rgb (109, 10, 0), -7px 0 0 rgb (109, 10, 0), -8px 0 0 rgb (109, 10, 0); -webkit-box-shadow: -1px 0 0 rgb (109, 10, 0), -2px 0 0 rgb (109, 10, 0), -3px 0 0 rgb (109, 10, 0), -4px 0 0 rgb (109, 10, 0), -5px 0 0 rgb (109, 10, 0), -6px 0 0 rgb (109, 10, 0), -7px 0 0 rgb (109, 10, 0), -8px 0 0 rgb (109, 10, 0);
Estilo .element4 :: después
# gmail-logo2 .element4 :: after content: "; posición: relativo; margen: 12px 88px 0 0; flotador: derecha; pantalla: bloque; fondo: rgb (201, 44, 25); ancho: 54px; altura: 186px; radio del borde: 30px 0 0 0; -webkit-border-radius: 30px 0 0 0; -moz-border-radio: 30px 0 0 0; -moz-transform: rotate (53deg); -webkit-transform: rotar (53deg); -o-transformar: rotar (53deg); transformar: rotar (53deg);
Estilo .element5 :: antes
# gmail-logo2 .element5 :: before content: "; position: relative; margen: 115px 0 0 125px; flotador: izquierda; pantalla: bloque; fondo: rgb (201, 44, 25); ancho: 2px; altura: 150px; -moz-transform: rotate (55deg); -o-transform: rotate (55deg); -webkit-transform: rotate (55deg); transform: rotate (55deg);
Estilo .element5 :: después
# gmail-logo2 .element5 :: after position: relative; contenido: "; margen: 115px 0 0 150px; flotador: izquierda; pantalla: bloque; fondo: rgb (201, 44, 25); ancho: 2px; altura: 150px; -moz-transform: rotate (-50deg); - webkit-transform: rotate (-50deg); -o-transform: rotate (-50deg); transform: rotate (-50deg);
Ajustando la prioridad de índice z.
# gmail-logo2 .element1 :: before z-index: 3; # gmail-logo2 .element1 :: after z-index: 1; / * # gmail-logo2 .element2 :: before * / # gmail-logo2 .element2 :: after z-index: 2; # gmail-logo2 .element3 :: before z-index: 5; # gmail-logo2 .element3 :: after z-index: 1; # gmail-logo2 .element4 :: before z-index: 4; # gmail-logo2 .element4 :: after z-index: 3; / * # gmail-logo2 .element5 :: before # gmail- logo2 .element5 :: after * /
Casi terminamos. Tu logo de Gmail debería verse así:
Por último, vamos a darle un color diferente al flotar.
# gmail-logo2: hover * :: after, # gmail-logo2: hover * :: before background: rgba (20, 196, 7, 1); # gmail-logo2: desplace .element1 :: antes de box-shadow: -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb (10 , 90, 4), -4px 4px 0 rgb (10, 90, 4), -5px 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -webkit-box-shadow: -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb (10, 90, 4), -4px 4px 0 rgb (10, 90, 4), -5px 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -moz-box-shadow: -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb (10, 90, 4), -4px 4px 0 rgb (10, 90, 4), -5px 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); # gmail-logo2: hover .element1 :: after box-shadow: -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb (10 , 90, 4), -4px 4px 0 rgb (10, 90, 4), -5px 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4), -6px 7px 0 rgb (10, 90, 4); -moz-box-shadow: -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb (10, 90, 4), -4px 4px 0 rgb (10, 90, 4), -5px 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4), -6px 7px 0 rgb (10, 90, 4); -webkit-box-shadow: -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb (10, 90, 4), -4px 4px 0 rgb (10, 90, 4), -5px 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4), -6px 7px 0 rgb (10, 90, 4); # gmail-logo2: desplace .element2 :: antes de box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -webkit-box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -moz-box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); # gmail-logo2: hover .element2 :: after box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -webkit-box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -moz-box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); # gmail-logo2: hover .element3 :: after box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -webkit-box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -moz-box-shadow: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90, 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); # gmail-logo2: desplace .element4 :: antes de box-shadow: -1px 0 0 rgb (10, 90, 4), -2px 0 0 rgb (10, 90, 4), -3px 0 0 rgb (10 , 90, 4), -4px 0 0 rgb (10, 90, 4), -5px 0 0 rgb (10, 90, 4), -6px 0 0 rgb (10, 90, 4), -7px 0 0 rgb (10, 90, 4), -8px 0 0 rgb (10, 90, 4); -moz-box-shadow: -1px 0 0 rgb (10, 90, 4), -2px 0 0 rgb (10, 90, 4), -3px 0 0 rgb (10, 90, 4), -4px 0 0 rgb (10, 90, 4), -5px 0 0 rgb (10, 90, 4), -6px 0 0 rgb (10, 90, 4), -7px 0 0 rgb (10, 90, 4), -8px 0 0 rgb (10, 90, 4); -webkit-box-shadow: -1px 0 0 rgb (10, 90, 4), -2px 0 0 rgb (10, 90, 4), -3px 0 0 rgb (10, 90, 4), -4px 0 0 rgb (10, 90, 4), -5px 0 0 rgb (10, 90, 4), -6px 0 0 rgb (10, 90, 4), -7px 0 0 rgb (10, 90, 4), -8px 0 0 rgb (10, 90, 4);
Vista previa | Descargar el archivo fuente
Nota del editor: Esta publicación está escrita por Irham Kendeni para Hongkiat.com. Irham, también conocido como Indaam, es un diseñador y desarrollador web de Indonesia. También le encanta el desarrollo de temas CSS y WordPress..
