ctrl +
ctrl -
Zoom en el navegador:
ctrl y girar la rueda.
_________________________________________________
Ventanas emergentes con div
Mostrar una ventana emergente al hacer clic en una imagen de la galería de Colibrí Café & Repostería.
Para lograr esto, lo ideal es seguir profundizando y llegar a aprender javascript, pero por cuestión de tiempo llegaremos a ver html y css. Entonces vamos a resolverlo con las herramientas que tenemos a mano. Los labels, los checkboxs, los div con class y el correspondiente código para css.
Descripción:
Al hacer clic en una imagen, aparece la ventana emergente; un clic en la imagen en realidad está haciendo clic en un label (el label contiene en su interior la imagen). Un label en html es una etiqueta de texto que se asocia a un input type:checkbox (caja de verificación); el label tiene un atributo for="id_del_checkbox" y el input checkbox tiene ese mismo id, de ese modo se asocian y al hacer clic en la etiqueta (label) activa o desactiva el tilde del checkbox asociado.
¿Qué es un checkbox y qué es un label?
El label es la caja de texto y el checkbox es el cuadrado que muestra el efecto de tilde.
<label for="idcheckbox">Soy el Label</label>
<input type="checkbox" id="idcheckbox">
En donde dice Soy el label irá la etiqueta img para cargar nuestra imagen.
______________________________________________
Pueba aquí hacer clic en el label (etiqueta): se marca o quita el tilde del checkbox:
Luego en nuestro css deberemos definir que si checkbox está en modo checked (tildado) sea visible la ventana emergente, y que cuando quitemos el tilde, se oculte la ventana.
______________________________________________
Para este caso, necesitamos que el checkbox esté oculto y sin tilde. Por otro lado, el label no contendrá texto sino la imagen como aclaré anteriormente.
En la siguente imágen se muestran los checkboxs para explicar que es lo en realidad estamos haciendo.
Si bien en la imagen se hace clic en el checkbox directamente, funcionará igualmente si hacemos clic en la imagen ya que la misma está dentro del label (sin texto).
Aquí está el código fuente completo, con todos los detalles en comentarios en el mismo código.
______________________________________________
En html un comentario se escribe de la siguiente forma:
<!-- Esto es un comentario para html -->
En css el comentario es diferente y hasta más simple:
/* Esto es un comentario en css */
______________________________________________
Detalles del CSS:
- Agregamos position fixed (fijo) para el div oscuro que cubre el fondo (se extiende al 100% en ancho y alto), esto significa que no se mueve al scrollear (mover rueda del mouse para el desplazamiento vertical).
Ejemplos de position fixed:
- Un botón emergente con un ícono de whatsapp o ícono de chat.
______________________
Diferencias entre Position y Display:
position:
Indica cómo se comporta el elemento en su posicionamiento respecto al flujo natural del HTML.
Puede cambiar la ubicación del elemento en la página, sacándolo del flujo normal y poniéndolo en coordenadas específicas o fijo en pantalla.
📌 ¿Dónde y cómo se ubica el elemento en la página?
- ¿Sigue el orden normal?
- ¿Se saca del flujo?
- ¿Se fija a la pantalla o a otro elemento?
display:
Define cómo se presenta el elemento y cómo se organizan sus contenidos internos (hijos).
No mueve al elemento dentro de la página, pero si a su contenido.
📌 ¿Cómo se comporta el elemento y su contenido visualmente?
¿Es una caja de bloque (que abarca todo el ancho), en línea (solo ocupa el lugar de su contenido), flexible, una grilla...?
¿Sus hijos se alinean en fila o en columna?
¿Se muestra o no?
¿Cuál es su ajuste?
Si fluye junto al contenido (inline) o si rompe línea y se apila (block).
Si se comporta como un contenedor especial (flex, grid) que organiza sus hijos de forma distinta.
Si aparece o no (display: none → no ocupa lugar en la página).
Aparte de los anteriores, hay algo más que es si el elemento está o no visible, pero sin dejar de ocupar el lugar que tiene:
visibility: hidden; para ocultarlo.
visibility: visible; para mostrarlo.
______________________
- El color del div oscuro tiene transparencia con el RGBA, siendo la A (alpha) el valor de transparencia.
RGB significa Red, Green y Blue o en español Rojo, Verde y Azul.
.clase_del_div{
background-color: rgba(rojo, verde, azul, alfa);
}
Para el ejemplo, reemplazaríamos rojo, verde y azul por un valor para cada uno que va entre 0 y 255. (esto lo hacemos automáticamente con la paleta de colores)
Para el alfa, un valor entre 0 y 1, siendo:
0 = completamente transparente (invisible)
1 = completamente opaco (sin transparencia)
Por ejemplo: 0.5 será un 50% transparente
Continuando la explicación del css, se aplican las propiedades a un segundo div es la ventana blanca,
_________________________
Juguemos con el Box-Shadow (sombra)
______
Ejemplo de Sitio Web dónde se aplican sombras:
_______________
Práctica:
Tp Recorrido por Positon
