Estilo hoja de notas con CSS puro

Crea una hoja de notas con CSS para implementar en tu web

Estilo hoja de notas con CSS puro

Crea una hoja de notas con CSS para implementar en tu web

Agrega un estilo de hoja de apuntes a tu diseño web con solo CSS basico, logra un cambio en tu pagina web con este ejercicio rapidamente, HTML y CSS Tip

En este tip te enseñaremos la forma de tener un contenedor con un estilo de hoja de apuntes:

Estructura HTML:

<!DOCTYPE html>
<html lang="es">
	<head>
		<title>Lista</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>
	<div class="paper">
		<h1>Tareas</h1>
		<ul>
			<li>Visitar al medico</li>
			<li>Ir al supermercado</li>
			<li>Presentar propuestas al cliente</li>
			<li>Escribir el nuevo brief para la campaña publicitariade Coca Cola</li>
			<li>Enviar factura a los proveedores</li>
			<li>Editar el ultimo video de trucos CSS pra youtube el viernes</li>
			<li>Despedida</li>
			<li>adios</li>
			<li>adios</li>
			

		</ul>
	</div>
	<body>
</html>

Luego con este código tendrás la estructura básica en HTML, claro no veras la magia todavía ya que para esto haremos uso del archivo css que estamos referenciando en el enlace del <head>, ahora veremos la clase que se encarga de dar los estilos básicos :


.paper{
	
	width: 400px;
	height: 600px;
	margin: 2em auto;
	background: linear-gradient(#fef1c3 98%,#e0b8b8 98%);
	background-size: 100% 40px;
	background-position: 0 1em;
	font-family: Blackadder ITC;
	padding: 1em;
}

Luego nos toca diseñar los checks necesarios  y espaciado y estilo de cada elemento interno:

h1{
	color: darkred;
	margin: 0;
	line-height: 80px;
}
ul{
	margin: 0;
	list-style: none;
}
ul li{
	font-size: 1.3em;
	position: relative;
		line-height: 40px;
}
ul li:before{
	content: "\2713";
	color: green;
	font-weight: bold;
	position: absolute;
	left: -1em;
}

Con esto tendriamos un contenedor con estilo de hoja de apuntes esperado, esperamos que sigas viendo nuestros proximos tips, hasta otra oportunidad.

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

Whatsapp Messenger Facebook Twitter
ó copia el link

¿Quieres el código fuente del proyecto
Estilo hoja de notas con CSS puro?

...por favor suscríbete gratuitamente para descargarlo

SUSCRÍBIRME

Visitado 107 veces | Publicado hace 6 meses

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

Ver scripts de CSS

Aprende a crear una app para restaurante en Android con el curso básico de Android completamente gratis

VER EL CURSO DE ANDROID

Programación en CSS

Ejemplos y scripts de programación para tus proyectos

Lo último que estamos programando en el curso: Lector de Códigos QR ANDROID PHP MYSQL

Últimos detalles diseño y prueba de la app Lector Market Alis

Diseño y prueba final del Lector QR

© Todos los derechos reservados | codea.app | Comunidad de programación web y desarrollo de aplicaciones móviles | Perú 2019