Posicionamiento para diagramacion y tipografia

En esta sección se resolverán temas de diseño gráfico, como uso de herramientas como photoshop, illustrator, herramientas para prototipado, herramientas de diseño web, entre otros.

Moderator: julianmartinez16

Post Reply
User avatar
xacarana
Site Admin
Posts: 1194
Joined: Fri Jan 15, 2016 6:13 pm

Posicionamiento para diagramacion y tipografia

Post by xacarana » Mon Sep 05, 2016 4:13 pm

Ejercicio de la clase de hoy, usando posicionamiento (fijo y absoluto)

La presentacion con la explicacion sobre posicionamiento esta en:

Posicionamiento y tipografia

En el siguiente video, se explica el posicionamiento con un ejercicio, paso a paso


Code: Select all


<!DOCTYPE html>
<html>
<head>
	<title></title>
	<!--<link rel="stylesheet" type="text/css" href="css/main.css">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/animate.css">-->
	<style type="text/css">
		.redes_sociales{
			position: fixed;
			background-color: red;
			width: 50px;
			height: 200px;
			top: 250px;
			right: 0px;
			border-radius:20px 0 0 20px;
		}
		.btn{
			width: 40px;
			height: 40px;
			background-color: black;
			border-radius:20px;
			margin-top: 10px;
		}
		.esquina{
			position: fixed;
			background-color: salmon;
			width: 100px;
			height: 100px;
		}
		#superior_izquierda{
			top: 0px;
			left: 0px;
			border-radius: 0 0 50px 0;
		}
		#superior_derecha{
			top: 0px;
			right: 0px;
			border-radius: 0 0 0 50px;
		}
		#inferior_izquierda{
			bottom: 0px;
			left: 0px;
			border-radius: 0 50px 0 0;
		}
		#inferior_derecha{
			bottom: 0px;
			right: 0px;
			border-radius: 50px 0 0 0;
		}
		#ventana{
			position: relative;
			width: 200px;
			height: 200px;
			margin: 0 auto;
			background: rgba(0,0,0,.5);
		}
		.control_formulario{
			position: absolute;
		}
		#campo_usuario{
			top: 50px;
			left: 10px;
			width: 170px;
		}
		#campo_password{
			top: 100px;
			left: 10px;
			width: 170px;
		}
		#boton{
			top: 150px;
			left: 100px;
		}
	</style>
</head>
<body>

	<div id="ventana">
		<input id="campo_usuario" class="control_formulario" type="text" placeholder="usuario" name="">
		<input id="campo_password" class="control_formulario" type="password" placeholder="Password" name="">
		<input id="boton" value="Enviar" class="control_formulario" type="button" name="">
	</div>

    <div class="esquina" id="superior_izquierda"></div>
    <div class="esquina" id="superior_derecha"></div>
    <div class="esquina" id="inferior_izquierda"></div>
    <div class="esquina" id="inferior_derecha"></div>

	<div class="redes_sociales">
		<div class="btn"></div>
		<div class="btn"></div>
		<div class="btn"></div>
	</div>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>
</body>
</html>
Andrés Bedoya Tobón
Profesor
"I only smile in the dark, I only smile when it's complicated" Raybiez

User avatar
xacarana
Site Admin
Posts: 1194
Joined: Fri Jan 15, 2016 6:13 pm

Re: Posicionamiento para diagramacion

Post by xacarana » Mon Sep 12, 2016 4:28 pm

Ejemplo de clase

Image

Código HTML (index.html)

Code: Select all

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>

<body>
<section id="inicio">

	<div id="entradilla">
    <h1>Lorem</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, aperiam, quo, iure, hic consectetur modi itaque quam doloremque ex repellat ipsum ipsa cumque aliquid nesciunt animi adipisci architecto quae deleniti. </p>
    </div>
	<div id="contenedorlogo">
    	<div id="logo">
        	<img src="img/logo2.png" />
        </div>
        <div id="logofondo">
            <img src="img/logo1.png" alt=""/>
        </div>
    </div>
    
    <div id="personaje">
        <img src="img/modelo.png" />
    </div>
    
	<div id="redes"> 
       <img src="img/fb.png" />
       <img src="img/skype.png" />
       <img src="img/tw.png" />
       <img src="img/pinterest.png" />
    </div>
</section>
</body>
</html>
Hoja de estilos CSS (css/main.css)

Code: Select all

	body{
		margin:0px;
		padding:0px;
		background-image:url(../img/prueba.jpg);
		background-repeat:no-repeat;
		background-size:cover;
	}
    #contenedorlogo{
		position: relative;
		width: 323px;
		height: 209px;
		/*background-color: green;*/
		top: 1px;
		left: 321px;
	}
	#logo{
		position:absolute;
		top: 37px;
		left: 71px;
		z-index:2;
	}
	#logofondo{
		position:absolute;
		top:1px;
		left:1px;
		z-index:1;
	}
	#inicio{
		position: relative;
		width: 940px;
		height: 540px;
		margin: 0 auto;
		/*background-color:yellow;*/
	}
	#entradilla{
		position: absolute;
		top: 271px;
		left: 81px;
		width: 400px;
		height: 190px;
		background-color: rgba(0,0,0,.5);
		padding: 10px;
		color: white;
		border-radius: 13px;
	}
	#personaje{
		position:absolute;
		top: 231px;
		left: 591px;
	}
	#redes{
		position:absolute;
		top: 501px;
		left: 82px;
	}
Recuerde que las imágenes se deben referenciar con la ruta relativa

Code: Select all

../img/prueba.jpg
Imágenes de referencia

Fondo

Image

Logos

Image

Image

Botones redes

Image

Image

Image

Image

Personaje

Image
Andrés Bedoya Tobón
Profesor
"I only smile in the dark, I only smile when it's complicated" Raybiez

User avatar
xacarana
Site Admin
Posts: 1194
Joined: Fri Jan 15, 2016 6:13 pm

Re: Posicionamiento para diagramacion y tipografia

Post by xacarana » Mon Sep 12, 2016 5:23 pm

Para convertir una fuente a formatos compatibles con css, se recomienda usar el siguiente sitio

Image

Convertidor de fuente online
Andrés Bedoya Tobón
Profesor
"I only smile in the dark, I only smile when it's complicated" Raybiez

Post Reply