Please enable JavaScript.
Coggle requires JavaScript to display documents.
HTML/CSS
INVESTIGACIÓN TÉCNICA
12°A MEDIA - STEAM
html, El Menú
de…
HTML/CSS
INVESTIGACIÓN TÉCNICA
12°A MEDIA - STEAM
-
-
investigar: La diferencia fundamental entre Margin y Padding (Espacio exterior vs interior) Miguel silva y Ariel ochys
El margin controla el espacio externo alrededor de un elemento, mientras que el padding controla el espacio interno entre el contenido y el borde del elemento.
-
Investigar: Cómo afectan los bordes (border) al tamaño total de un bloque.
Los bordes (border) en CSS afectan el tamaño total de un bloque al considerar el contenido, el relleno y los bordes al calcular las dimensiones del elemento.
-
-
👉Juan Sieiro:Interactividad Básica (Pseudo-clases)
**Investigar**: El estado: hover en CSS y cómo cambia el color de un enlace o botón al pasar el mouse.
**Investigar**: Cómo añadir una transición suave con la propiedad transition.
**Investigar**: El cambio de cursor (cursor: pointer) para mejorar la experiencia del usuario.
-
-
El pseudoestado :hover permite cambiar el estilo de un elemento cuando el usuario pasa el mouse sobre él. Se usa comúnmente para modificar colores en enlaces y botones y hacer la interfaz más interactiva.
-
-
-
La propiedad transition crea cambios suaves entre estilos, evitando cambios bruscos. Se puede aplicar a colores, tamaños, movimientos y más.
-
-
La propiedad cursor: pointer cambia el cursor a una mano cuando el usuario pasa sobre un elemento clickeable. Esto mejora la experiencia del usuario porque indica que el elemento es interactivo.
-
-
-
-
COMBO 9
- Propiedad box-shadow en CSS
La propiedad box-shadow se utiliza para agregar sombras a elementos como contenedores <div>, botones, imagenes, tarjetas, ect.
div{
width: 200px;
height: 100px;
background-color:white;
box-shadow:5px 5px 10px gray;
Resultado
El <div tendrá una sombra suave alrededor del contenedor.
- Propiedad text-shadow en CSS La propiedad text-shadow sirve para agregar sombra al texto y resalta títulos importantes. h1{ color:blue; text-shadow: 2px 2px 5px gray; } dando resultado el titulo tendría un efecto mas llamativo y elegante
-
- Control del desenfoque(blur) y dirección de la sombra Dirección de la sombra; se controla con los primeros dos valores: box-shadow: 5px 5px 8px black; box-shadow: -5px 5px 8px black; box-shadow: 5px -5px 8px black; Control del desenfoque (Blur) es el tercer valor que controla que tan difusa se ve la sombra.
-
-
-
-
-
-
La propiedad box-sizing: border-box; es fundamental en diseño web, ya que permite calcular el tamaño de los elementos de manera más intuitiva. Al establecer box-sizing: border-box;, el ancho y alto de un elemento incluyen automáticamente el contenido, el padding y los bordes, lo que facilita la creación de diseños responsivos y predecibles.
-
-
-
-
-
box-shadow: 5px 5px 10px rgba(0,0,0,0.3);