2018-01-26

Trabajar con imágenes

Las imágenes se meterán por CSS cuando son decorativas, es decir, cuando no tengan relación
con el contenido. Si tienen relación con el contenido, las meteremos por html.

En este caso, tendríamos un article o section, que agruparía un párrafo y un título. Lo que
parece un botón no es un botón porque toda la imagen tiene vínculo.
Necesitamos agrupar el texto para colocarlos encima de la imagen, y la forma de agrupar los
elementos es con un DIV. Tenemos que imaginar que cada uno de esos elementos son una capa
y para trabajar con la posición de estas capas, utilizaremos la regla CSS ‘position’.

Para poner una etiqueta al lado de la otra, necesitamos convertirlas en capas flotantes.
Podría hacerse de forma cutre con la clase inline, pero siempre habría un margen automático
entre ambas.

posicionamiento
Tenemos cuatro tipos de cajas:
 Estática
 Fija
 Relativa
 Absoluta
 Caja
estática Es el comportamiento natural de las cajas en html y no tiene ningún
comportamiento especial.
Sirven para sobrescribir cosas que había tocado anteriormente, por ejemplo, a la hora de
hacer responsive una web.
No acepta propiedades de top, left…

Caja fija
La posición fija me sitúa un elemento con respecto a la ventana del navegador. Ejemplo:
botón de una flecha que cuando pinchas te sube arriba del todo, menú de cabeceras que, al
hacer scroll, no se mueve o botón de entradas fijo en la pantalla, estés donde estés.

REGLAS CSS

.fixed {
position: fixed;
right: 24px;
bottom: 24px;
}

Para colocar la caja en el lugar deseado, utilizaremos las siguientes propiedades: top, left,
bottom, right, z-index, de forma que, si queremos que nuestra caja esté situada arriba a la
izquierda:

.fixed {
position: fixed;
top: 0px;
left: 0px;
}
Lo que realmente le estamos diciendo es en qué coordenadas debe empezarse a dibujar.

El elemento siempre se construye en dirección contraria a la que se indica. Si indico “top”,

empezará a dibujarse hacia abajo, y si digo “left” empezará a dibujarse hacia la derecha.

Caja
absoluta
Se va a colocar con respecto a una caja padre, que debe tener la
propiedad “posición relativa”. Si no encuentra una posición relativa en sus padres se coloca
con respecto al body.
La diferencia con respecto al fixed es que el fixed se mantiene en pantalla y la caja absoluta
desaparece cuando haces scroll.

En el caso de life & thyme, las cajas utilizarían posición absoluta.

En este caso, el header sería una posición absoluta, ya que está situado encima de un article, y
sabemos que en los header no se incluyen articles. Las posiciones absolutas se desmarcan del
resto de contenidos, haciendo que los demás elementos suban hacia arriba y, por tanto,
quedan superpuestas. Se salen del flujo de documentos.
 Caja
relativa
El uso principal de las cajas relativas es dar contexto a cajas hijas
absolutas

Cuando movemos la caja relative, guarda su espacio original, es decir, lo reserva. Aunque esta
opción solo la usaremos para cosas muy específicas.

La caja azul sería un ejemplo de posición relativa, en el caso en que no debemos utilizarla.

z-index
Sirve para colocar una caja por encima de otra. De forma natural los elementos están siempre
en el 0. Por lo que tengo que elegir un número entre el 0 y el 9.999 para situar esta capa. Lo
ideal no es ir situando capas en 0, 1, 2, 3, por si en algún momento deseamos meter una capa
entre medias, así que lo mejor es ir de 10 en 10 o de 100 en 100.
Por defecto el valor de z-index es 0.

El z-index es en relación al contexto. Si no marco ningún contexto, será en relación al

documento.
 flotaciones
Se utilizan para poner un elemento al lado de otro. Y en este caso, el elemento que
corresponda a esa clase, se desplazará hasta la esquina izquierda.
.left {
float: left }

Poner cuatro elementos uno al

lado del otro

.left, .right {
float: left;

}
<div>
<div class="left">1</div>
<div class="right">2</div>
<div class="left">3</div>
<div class="right">4</div>
</div>

Seleccionaremos varios elementos y les diremos que floten hacia el mismo lado. Se colorarán
siguiendo su orden en el html.
Si quisiera que ocuparan toda la pantalla, tendría que ponerle a cada elemento un width de
25%, ya que la caja entera es el 100%.

Regla clearfix
Cuando los elementos flotan, la altura del padre es 0. Con esta regla, resetearemos las
flotaciones, es decir, le diremos al padre que actúe como si no tuviera elementos flotantes y,
por tanto, que su altura sea la que tenga que ser.
.site-header__tools:after {
content:"";
display: block;
clear: both;
}
PRÁCTICA IE

Reglas globales que vamos a utilizar:

body {
min-height: 100vh; (para que el cuerpo ocupe mínimo la pantalla)
text-size-adjust: none; (para que no se produzca el inflado de texto en móviles)
}

img {
display: block;
width: 100%;
}

a{
color: inherit;
text-decoration: inherit;
}

Tipografía:
Por un lado, meteremos la Montserrat a través de Google Fonts y, por otro, meteremos
manualmente la PT Serif.

Tengo que crear una regla @font-face por cada uno de los estilos de letra que tenga (bold,
italic, bold-italic…)

@font-face {
font-family: 'PT Serif';
src: url('fonts/pt-serif/pt-serif-regular.woff2'), url('fonts/pt-serif/pt-serif-regular.woff');
font-weight: 400;
font-style: normal;
}

*****************************
TIPOGRAFÍA
*****************************

body {
font-family: 'PT Serif', Times, Georgia, serif;
font-size: 17px;
line-height: 1.5;
color: rgb(51,51,51);
}

h1, h2, h3, h4, h5, h6 {

font-family: 'Montserrat', Verdana, Helvetica, Arial, sans-serif;

*****************************
LAYOUT
*****************************

En cuanto al wrapper, le daremos las siguientes características:

.wrapper {
width: 100%; (siempre así)
max-width: 1574px;
margin: 0 auto;
padding: 0 16px; (esto se lo damos para que al reducir la pantalla, el texto no se pegue
totalmente a la izquierda)
}

******************************
HEADER
******************************

Vamos a poner el fondo de la caja de la izquierda y a utilizar un degradado para el color más
oscuro.

www.colorzilla.com
En orientación marcaremos Horizontal. Una vez que lo tengamos, copiamos el código.

Site-header__top-bar
En este caso, sí que vamos a darle altura. En los menús no importa poner altura ya que son
elementos que no cambian. En secciones como noticias, nunca podemos ponerlo.

¡!Problema

Al crear la lista de los iconos sociales con un nav, y haber puesto altuar a la cabecera, algunos
elementos se quedan fuera del nav, como vemos en esta imagen:

¿Cómo los ponemos uno al lado del otro? Actualmente solo conocemos una forma, a través del
atributo inline-block. Por defecto, se crea un pequeño espacio entre ellos, pero nosotros
queremos que estén más separados, por lo que añadiremos un margen.

Una vez añadido el margen, tenemos que centrarlos en la caja a nivel de altura, para ello, se
añade una line-height que corresponde a la misma altura que tiene la caja.

.social__Item {
display: inline-block;
margin-right: 12px;
}
.social__item a {
font-family: 'Montserrat';
font-size: 12px;
line-height: 56px;
text-transform: uppercase;
font-weight: bold;
color: white;
}

Insertar iconos

Para no hacer muchas peticiones al servidor, se utilizan o tipografías de iconos o librerías SVG.
Las más utilizadas son las librerías SVG, ya que son más versátiles.

Cómo poner un menú a la derecha y uno al lado del otro

.extras {
float: right;
}

(siendo extras la clase del nav)

Éste sería el resultado:

Como vemos, el menú de la derecha quedaría uno debajo del otro, pero situado a la derecha.
Para colocarlos al lado tendremos que hacer lo siguiente con cada uno de los ítems.

.extras__item {
 float: left;
margin-left: 12px;
}

Y el resultado será el siguiente:

Para meter elementos antes de otro elementos, utilizaremos lo siguiente.

p:before {
content: "01.";
}

Es como si creásemos un span a través de CSS justo antes del contenido de una caja.

Así mismo puedo crearme un elemento after.

Este truco se utiliza para meter elementos decorativos (flechitas, iconos, rayas….). Cuando
vemos una palabra, número, etc. Que no podemos seleccionar con el cursor, es porque es un
after o before.

Además podemos darle otros atributos, como decirle que se muestre en bloque, o darle color
de fondo.

.languages__item:after {
content: "|";
color: white;
display: inline-block;;
margin-left: 12px;
}

El display y el margen es para separar la raya del texto.