Diseñar iconos burger y doots

¿Cómo crear iconos clásicos de menú responsive a solo CSS?

Diseñar iconos burger y doots

¿Cómo crear iconos clásicos de menú responsive a solo CSS?

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 página 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.

Comparte el código!...talvez tu amigo lo necesite!

Whatsapp Messenger Facebook Twitter

Visitado 1429 veces | Publicado hace 1 año

Curso Laravel 8 Página Web 100% Administrable

Mira el temario del curso en el siguiente link

VER EL CURSO

CÓDIGO FUENTE CSS

Logo Codea App

Develop your code

Perú, México, Colombia, España, Venezuela, Argentina, Bolivia

You Fb Tik Pin

© Todos los derechos reservados CODEA APP | Cursos de programación avanzados con proyectos reales | 2020 - 2021