Code n' Social

¿De qué trata esta lección?
Con CSS podemos provocar reacciones solo moviendo el ratón sobre los elementos. Para provocar reacciones al hacer clic con el ratón (mouseclick), al pulsar un botón (buttonclick) etc. necesitamos JavaScript - Lo veremos en el siguiente capítulo. En esta lección, aprenderemos qué cosas "mágicas" podemos hacer usando la posición de los elementos, del cursor y algunos efectos de imagen blur (configuración de desenfoque) y grayscale (escala de grises).

Nuevas propiedades CSS en esta lección:
opacity: esta propiedad se puede utilizar para establecer el nivel de transparencia de los elementos HTML. El valor de esta propiedad puede ser un número entre 0 y 1. 1 significa que no hay transparencia en absoluto y usando 0 el elemento desaparece.

filter: esta propiedad se puede usar para modificar imágenes incluidas y para agregar efectos. Valores posibles: grayscale (100%), blur (5px), etc.

box-shadow: esta propiedad se utiliza para agregar efectos de sombra a un elemento HTML. Podemos definir tres valores en píxeles para la sombra horizontal y vertical, el tercer valor produce un efecto de desenfoque. Podemos añadir un color a la sombra al final.

grid-template-columns: podemos dividir el contenido de los elementos contenedores (elementos que contienen otros elementos) utilizando la visualización de cuadrícula en más columnas. Los valores se pueden agregar en píxeles, porcentaje o podemos escribir automáticamente para distribuir según el contenido.

clear: esta propiedad se puede utilizar para romper la línea de los elementos flotantes. Los valores posibles son: left, right y both – según la parte del elemento que necesitamos para interrumpir el flujo de elementos.

Propiedad CSS complementada:
display: grid - utilizando esta configuración de pantalla para un elemento contenedor podemos mostrar estos elementos de una manera fácil y elegante. Sin este ajuste, las columnas de la plantilla de la cuadrícula no se pueden utilizar

Guía:
● Usamos opacidad principalmente para imágenes o fondos.
● Podemos agregar como un valor de color de fondo y opacidad usando rgba, el cuarto valor de rgba significa la opacidad. Ejemplo: rgba(100,100,100,0.7);

Ejemplo de cuadrícula:

En la imagen de arriba tenemos cuatro botones agregados a una sección para mostrar una cuadrícula de dos por dos. Observa el orden de los elementos.
Tenemos que añadir el ajuste display: grid; al objeto HTML contenedor y definir el número y tamaño de las columnas.
Hay más propiedades en la configuración de la cuadrícula. Puedes leer más sobre este tema aquí: https://css-tricks.com/snippets/css/complete-guide-grid/

Ejemplo de configuración de imagen y elementos flotantes:

En el ejemplo anterior, cada elemento es floated (flotante) a la izquierda. En comparación con la visualización de la cuadrícula, los elementos flotantes llenan toda la fila, cambiar el tamaño de la ventana del navegador reorganiza los elementos. Se puede lograr un efecto similar usando display:inline-block;

La diferencia entre las dos imágenes es el efecto blur (desenfoque) que se ha añadido a la primera.

Las imágenes deben alinearse en línea con los párrafos, pero la propiedad clear establecida a la izquierda da como resultado el desplazamiento de las imágenes en una nueva línea.

La sombra es de 3 píxeles a la derecha y en la parte inferior. Los otros 3 pixeles dan como resultado una sombra borrosa. El color de la sombra es verde.

Ejercicios

1. Hay una carpeta con imágenes sobre los documentos HTML. Inserta en una fila las imágenes de la carpeta en el archivo index.html siguiendo los pasos a continuación:

Añade un div con la clase Gallery.
dentro del div Gallery, inserta en etiquetas de imágen todas las imágenes de la carpeta de la galería
queremos tener 4 imágenes en una fila y como el ancho de nuestra división de contenido es de 1000 píxeles, entonces el ancho de una imagen será de 250 píxeles y una pantalla de bloque en línea, para configurarlas una tras otra. Aquí verás, que las imágenes aún no serán 4 en una fila, y esto se debe al inline-block. Para corregir esto, tenemos que establecer el tamaño de fuente 0 y el alto de línea 0 en la clase Gallery. Además, establece un margen inferior de 20 píxeles en la clase Gallery.
Cuando colocamos el ratón sobre las imágenes, deberían obtener un efecto greyscale.

Ver el resultado

2. En el archivo aspects.html hay una imagen sobre código (tiene la clase llamada page_image, que tiene algunos estilos en el archivo CSS de un curso anterior). Mejora la imagen agregando sombras y el texto siguiente en una caja transparente, de color negro sobre la imagen:
“First, solve the problem.
Then, write the code.”

Los pasos necesarios son:
En el documento HTML, agregue el texto en un <div> y un nombre de clase: img_text. La imagen con la clase page_image y el texto deben incluirse junto con otro <div>. El texto debe colocarse en posición absoluta, pero la posición absoluta necesita un contenedor posicionado en un nivel superior. Agrega una clase para el contenedor recién agregado, llamado img_box. La configuración de CSS para el img_box debe ser la siguiente: posicionamiento relativo sin mover el cuadro (para usar como referencia para el posicionamiento del texto), visualización inline-block y define el valor del z-index en -1 (de lo contrario, la imagen se desliza sobre el menú cuando se desplaza).

La configuración de CSS para el cuadro img_text debe ser la siguiente: posicionamiento absoluto de 20 píxeles de distancia desde la parte inferior e izquierda, agregar fondo negro con transparencia, agregar relleno, tamaño de texto, color y letras en mayúsculas.

Ver el resultado

3. Crea un nuevo archivo HTML con el nombre gallery.html. Copia o escribe la estructura necesaria para un documento html, crea también un archivo CSS separado (style2.css) que también debe estar vinculado en el encabezado html. Crea una galería simple siguiendo los pasos anteriores:

En una sección definida por una etiqueta <div> incluye etiquetas <img> que se refieren a las imágenes de la carpeta de la galería. Incluye cada imagen dos veces: usaremos una instancia pequeña y una grande. Use un id para marcar la sección (debe ser gallery2) y dos clases para diferenciar entre imágenes grandes y pequeñas. Lo primero debe ser lo pequeño, lo segundo lo grande.

La sección debe ocupar el 60% de la ventana del navegador. Las imágenes deben mostrarse en una cuadrícula con tres columnas de tamaño automático.

Las imágenes pequeñas deben tener sus esquinas redondeadas (border-radius), dales un tamaño en porcentaje (en comparación con el tamaño de la columna de la cuadrícula).

Las imágenes grandes no deben mostrarse como predeterminadas, su posición debe ser y define su lugar en 0 píxeles mediante las propiedades superior y derecha. Su ancho debería ocupar el espacio libre de la derecha (40%).

Al mover el cursor sobre las imágenes (:hover), deben cambiar su nivel de transparencia hacia abajo para ver la imagen seleccionada.

Usando la técnica de la lección anterior en el menú desplegable, consigue que las imágenes grandes aparezcan a la derecha.

Además, agrega posición relativa a la división de contenido de style2.css, por lo que la imagen grande no se posicionará fuera del contenido y en style.css establece el z-index en 10 para el #menu.

Agrega la galería a la barra de navegación en los tres archivos HTML.

Ver el resultado