Crea los famosos iconos de menú responsive a puro CSS

Crea los famosos iconos de menú responsive a puro CSS

CSS
Crea los famosos iconos de menú responsive a puro CSS

Crea los famosos iconos de menú responsive a puro CSS

DESCARGAR

Pon en practica este tip para crear desde 0 el clásico botón de menú responsive para celulares, sin ayuda de una librería que sobrecarga tu pagina web

Seguramente hayas visto bastante el diseño de 3 rayas una encima de otra en el diseño de un menú, ahora en este tip te enseñaremos a crearla desde 0 , a puro código CSS:

Estructura del HTML:


<!DOCTYPE html>
<html lang="es">
	<head>
		<title>Iconos</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0 , maximum-scale=1.0, minimum-scale=1.0">
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
		<h1>Iconos de menú con box shadow</h1>
		<div class="principal">Menu Principal</div>
		<div class="secundario">Menu Secundario</div>
		
	<body>
</html>

Como podemos ver los <div> a través de sus clases se transformarán en los iconos de un menú a puro CSS

Ahora nos toca la parte de CSS, donde toda la magia se desarrolla donde veremos temas como las before de un elemento:

body{
	background: #DC4532;
	color: #fff;
	font-family: arial;
	height: 100vh;
	margin: 0;
}
h1{
	font-weight: normal;
	padding: 1em 0;
	text-align: center;
	margin: 0;
}
.principal{
	box-sizing:border-box;
	width: 50%;
	margin: 1em auto;
	font-size: 2em;
	
	padding-left: 2em;
	position: relative;
	cursor: pointer;

}
.principal:before{
	content: "";
	display: block;
	width: 1.6em;
	height: .2em;
	background: #fff;
	position: absolute;
	left: 0;
	box-shadow: 0 .4em,
				0 .8em;

}
.secundario{
	box-sizing:border-box;
	width: 50%;
	margin: 1em auto;
	font-size: 2em;
	position: relative;
	padding-left: 1em;
	cursor: pointer;


}
.secundario:before{
	content: "";
	width: .2em;
	border-radius: 50%
	display: block;
	height: .2em;
	background: #fff;
	position: absolute;
	left: 0;
	box-shadow: 0 .4em,
				0 .8em;
}

Ahora esperamos que este ejemplo te sirva para inspirarte a realizar más cosas con CSS y darle un toque personal a tu web, hasta otra oportunidad con estos tips.


¿Quieres descargar el código fuente Crea los famosos iconos de menú responsive a puro CSS?
...por favor suscríbete gratuitamente para descargarlo

DESCARGAR

Compártelo...talvez alguién lo necesite!

Whatsapp Messenger Facebook Twitter
ó copia el link

Visitado 338 veces | Publicado hace 8 meses

Más códigos de programación en CSS.

Ver scripts de CSS

© Todos los derechos reservados CODEA APLICACIONES | Comunidad de programación web y desarrollo de aplicaciones móviles | 2020