Cómo crear el logotipo de Gmail con CSS3

Hace un tiempo, le mostré cómo crear el logotipo de fuente RSS con CSS3. Pensé que sería divertido crear algo un poco más complejo. En la publicación de hoy, le mostraré cómo crear no una, sino dos variaciones del logotipo de Gmail usando solo CSS3.

Atajos para:

Logotipo de Gmail n. ° 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 e ingrese los siguientes códigos HTML y guárdelo como logo-gmail.html.


	
		Gmail CSS Logo
		
	
	
		%MINIFYHTMLd893ef4b1cce59e15fa8a0435d93e9557%

Agregue los siguientes estilos CSS entre

para restablecer los valores predeterminados de CSS.

.gmail-logo,
.gmail-logo *,
.gmail-logo *:before,
.gmail-logo *:after {
	margin:0;
	padding:0;
	background:transparent;
	border:0;
	outline:0;
	display:block;
	font:normal normal 0/0 serif;
	}

Los siguientes códigos CSS nos proporcionan el fondo rojo del logotipo de Gmail y los lados redondeados.

.gmail-logo {
	margin:110px auto;
	background:rgb(201, 44, 25);
	width:600px;
	height:400px;
	border-top:4px solid rgb(201, 44, 25);
	border-bottom:4px solid rgb(201, 44, 25);
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	}
logotipo de gmail en css

Luego, procedemos a crear el cuadro blanco dentro del fondo rojo.

.gmail-logo .gmail-box {
	overflow:hidden;
	float:left;
	width:440px;
	height:400px;
	margin:0 0 0 80px;
	background:white;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	}
logotipo de gmail en css

Para crear el efecto rojo "M", primero crearemos un cuadro con borde rojo.

.gmail-logo .gmail-box:before {
	position:relative;
	content:'';
	z-index:1;
	background:white;
	float:left;
	width:320px;
	height:320px;
	border:100px solid rgb(201, 44, 25);
	margin:-310px 0 0 -40px;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	}
logotipo de gmail en css

Luego procedemos a ocultar los lados excesivos, dándonos una "M" completa en color rojo.

.gmail-logo .gmail-box {
	overflow:hidden;
	}
logotipo de gmail en css

Ahora, demos dos bordes rojos delgados, dándole el aspecto de un sobre.

.gmail-logo .gmail-box:after {
	content:'';
	float:left;
	width:360px;
	height:360px;
	border:2px solid rgb(201, 44, 25);
	margin:10px 0 0 40px;
	-o-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	}
logotipo de gmail en css

Casi terminamos. Agreguemos un poco de degradado al sobre rojo.

.gmail-logo:after {
	content:'';
	position:relative;
	z-index:2;
	content:'';
	float:left;
	margin-top:-404px;
	width:600px;
	height:408px;
	display:block;
	background:
		-moz-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, 
		/* rgba(255, 255, 255, 0.3) 30%, */
		rgba(255, 255, 255, 0.1) 100%);
	background:-o-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, 
		/* rgba(255, 255, 255, 0.2) 30%, */
		rgba(255, 255, 255, 0.1) 100%);
	background:-webkit-gradient(
		linear, left top, left bottom, color-stop(0%, 
		rgba(255, 255, 255, 0.3)), 
		/* color-stop(30%, rgba(255, 255, 255, 0.2)), */
		color-stop(100%, rgba(255, 255, 255, 0.1)));
	}

Por último, pero no menos importante, démosle un color diferente al pasar el cursor. Agregue el siguiente HTML DOCTYPE antes


Y los siguientes estilos CSS antes

.gmail-logo:hover {
	background:#313131;
	border-color:#313131;
	/* cursor:pointer; */
	}
.gmail-logo:hover .gmail-box:before {
	border-color:#313131;
	}
.gmail-logo:hover .gmail-box:after {
	border-color:#313131;
	border-bottom-color:#fff;
	border-right-color:#fff;
	}
logotipo de gmail en css

Vista previa | Descargar archivo fuente

Logotipo de Gmail n. ° 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.


	
		Gmail logo 2 
		
	
	
		
			 
			 
			 
			 
			 
		
	

Dado que el logotipo tiene una perspectiva diferente, comenzaremos rotándolo un poco y crearemos las capas necesarias (lo que llamaremos elementos) en secuencia.

#gmail-logo2 {
	margin:0 auto;
	display:block;
	width:380px;
	height:290px;
	-moz-transform:rotate(6deg);
	-webkit-transform:rotate(6deg);
	-o-transform:rotate(6deg);
	transform:rotate(6deg);
	}
#gmail-logo2 .element1 {
	display:block;
	width:380px;
	height:290px;
	}
#gmail-logo2 .element2,
#gmail-logo2 .element3,
#gmail-logo2 .element4,
#gmail-logo2 .element5  {
	float:left;
	display:block;
	width:380px;
	height:290px;
	margin:-290px 0 0 0;
	}
logotipo de gmail en css

Estilo .element1::before

#gmail-logo2 .element1::before {
	content:'';
	position:relative;
	margin:2px 0 0 14px;
	float:left;
	display:block;
	background:rgb(201, 44, 25);
	width:30px;
	height: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);
	}
logotipo de gmail en css

Estilo .element1::after

#gmail-logo2 .element1::after {
	content:'';
	position:relative;
	margin:40px 5px 0 0;
	float:right;
	display:block;
	background:rgb(201, 44, 25);
	width:30px;
	height: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 rgb(109, 10, 0);
	}
logotipo de gmail en css

Estilo .element2::before

#gmail-logo2 .element2::before {
	content:'';
	margin:22px 0 0 48px;
	float:left;
	display:block;
	background:rgb(201, 44, 25);
	width:315px;
	height:14px;
	-moz-transform:rotate(6.8deg);
	-webkit-transform:rotate(6.8deg);
	-o-transform:rotate(6.8deg);
	transform:rotate(6.8deg);
	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);
	}
logotipo de gmail en css

Estilo .element2::after

#gmail-logo2 .element2::after {
	content:'';
	position:relative;
	margin:230px 0 0 36px;
	float:left;
	display:block;
	background:rgb(201, 44, 25);
	width:310px;
	height: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);	
	}
logotipo de gmail en css

Estilo .element3::before

#gmail-logo2 .element3::before {
	content:'';
	position:relative;
	margin:8px 0 0 42px;
	float:left;
	display:block;
	background:rgb(201, 44, 25);
	width:42px;
	height:268px;
	-moz-transform:rotate(3deg);
	-webkit-transform:rotate(3deg);
	-o-transform:rotate(3deg);
	transform:rotate(3deg);
	}
logotipo de gmail en css "ancho =" 250 "altura =" 216 "src =" https://arenalnoticias.com/wp-content/uploads/2020/01/1578750191_613_Como-crear-el-logotipo-de-Gmail-con-CSS3.jpg

Estilo .element3::after

#gmail-logo2 .element3::after {
	content:'';
	position:relative;
	margin:40px 32px 0 0;
	float:right;
	display:block;
	background:rgb(201, 44, 25);
	width:22px;
	height: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);
	}
logotipo de gmail en css "ancho =" 250 "altura =" 223 "src =" https://arenalnoticias.com/wp-content/uploads/2020/01/1578750191_575_Como-crear-el-logotipo-de-Gmail-con-CSS3.jpg

Estilo .element4::before

#gmail-logo2 .element4::before {
	content:'';
	position:relative;
	margin:-2px 0 0 130px;
	float:left;
	display:block;
	background:rgb(201, 44, 25);
	width:54px;
	height: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);
	}
logotipo de gmail en css "ancho =" 250 "altura =" 215 "src =" https://arenalnoticias.com/wp-content/uploads/2020/01/1578750191_729_Como-crear-el-logotipo-de-Gmail-con-CSS3.jpg

Estilo .element4::after

#gmail-logo2 .element4::after {
	content:'';
	position:relative;
	margin:12px 88px 0 0;
	float:right;
	display:block;
	background:rgb(201, 44, 25);
	width:54px;
	height:186px;
	border-radius:30px 0 0 0;
	-webkit-border-radius:30px 0 0 0;
	-moz-border-radius:30px 0 0 0;
	-moz-transform:rotate(53deg);
	-webkit-transform:rotate(53deg);
	-o-transform:rotate(53deg);
	transform:rotate(53deg);
	}
logotipo de gmail en css "ancho =" 250 "altura =" 214 "src =" https://arenalnoticias.com/wp-content/uploads/2020/01/1578750191_186_Como-crear-el-logotipo-de-Gmail-con-CSS3.jpg

Estilo .element5::before

#gmail-logo2 .element5::before {
	content:'';
	position:relative;
	margin:115px 0 0 125px;
	float:left;
	display:block;
	background:rgb(201, 44, 25);
	width:2px;
	height:150px;
	-moz-transform:rotate(55deg);
	-o-transform:rotate(55deg);
	-webkit-transform:rotate(55deg);
	transform:rotate(55deg);
	}
logotipo de gmail en css "ancho =" 250 "altura =" 207 "src =" https://arenalnoticias.com/wp-content/uploads/2020/01/1578750191_466_Como-crear-el-logotipo-de-Gmail-con-CSS3.jpg

Estilo .element5::after

#gmail-logo2 .element5::after {
	position:relative;
	content:'';
	margin:115px 0 0 150px;
	float:left;
	display:block;
	background:rgb(201, 44, 25);
	width:2px;
	height:150px;
	-moz-transform:rotate(-50deg);
	-webkit-transform:rotate(-50deg);
	-o-transform:rotate(-50deg);
	transform:rotate(-50deg);
	}
logotipo de gmail en css "ancho =" 250 "altura =" 218 "src =" https://arenalnoticias.com/wp-content/uploads/2020/01/1578750191_977_Como-crear-el-logotipo-de-Gmail-con-CSS3.jpg

Ajuste de la prioridad de z-index.

#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 {}*/
logotipo de gmail en css "ancho =" 600 "altura =" 328 "src =" https://arenalnoticias.com/wp-content/uploads/2020/01/1578750191_22_Como-crear-el-logotipo-de-Gmail-con-CSS3.jpg

Casi terminamos. Su logotipo de Gmail debería verse así:

logotipo de gmail en css "ancho =" 250 "altura =" 200 "src =" https://arenalnoticias.com/wp-content/uploads/2020/01/1578750191_565_Como-crear-el-logotipo-de-Gmail-con-CSS3.jpg

Finalmente, vamos a darle un color diferente al pasar el cursor.

#gmail-logo2:hover *::after,
#gmail-logo2:hover *::before {
background:rgba(20, 196, 7, 1);
}
#gmail-logo2:hover .element1::before {
	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:hover .element2::before {
	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:hover .element4::before {
	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);
	}
logotipo de gmail en css "ancho =" 250 "altura =" 224 "src =" https://arenalnoticias.com/wp-content/uploads/2020/01/1578750191_5_Como-crear-el-logotipo-de-Gmail-con-CSS3.jpg

Vista previa | Descargar 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.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *