Descubre qué ha cambiado en nuestro medio

1

Todo sobre el diseño de páginas web acaba de cambiar

Conceptos que forman parte del diseño en CSS

2

La importancia de recordar las herramientas existentes

3

Flujo normal del documento: display block, inline e inline-block

4

Contextos de formato: Formato de Contexto de Bloque (BFC)

5

Posicionamiento + Dinámica: ¿Cómo se vería?

¿Flexbox o CSS Grid?

6

Diferencias entre Flexbox y CSS Grid

7

Similitudes entre Flexbox y CSS Grid

8

¿Puedo trabajar con Flexbox y CSS Grid al tiempo?

9

Dinámica: ¿Qué usarías? (Parte 1)

10

Dinámica: ¿Qué usarías? (Parte 2) + Reto

11

¿Cuándo usar Flexbox y cuándo usar CSS Grid?

Modern Layouts con CSS Grid

12

¿Qué son los Modern CSS Layouts?

13

Patrones para usar como punto de partida

14

Layouts: Super Centered, The Deconstructed Pancake, Sidebar Says, Pancake Stack, Classic Holy Grail Layout

15

Layouts: 12-Span Grid, RAM (Repeat, Auto, MinMax), Line Up, Clamping My Style, Respect for Aspect

Diseño web para desarrolladores

16

Dinámica: No puedo dejar de ver

17

Design System y detalles visuales a tener en cuenta

18

Tendencias de diseño UI/UX: Fase de inspiración y creatividad

19

Wireframes y comunicación visual simple, intuitiva y atractiva

20

Figma para devs: Auto Layout y Neumorphism (Parte 1)

21

Figma para devs: Auto Layout y Neumorphism (Parte 2)

Del diseño al código

22

Primeros pasos y estructura inicial

23

Ubicación y creación de elementos

El futuro de CSS Grid

24

Entendiendo las versiones de CSS: ¿existirá CSS4?

25

CSS Subgrid

26

Native CSS Masonry Layout

27

CSS feature queries: @supports

28

Nosotros y el futuro de la web: tips para seguir aprendiendo y mantenerse al día

Posicionamiento + Dinámica: ¿Cómo se vería?

5/28
Recursos

Aportes 68

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

mix-blend-mode
La propiedad mix-blend-mode define cómo debe combinarse el contenido de un elemento con su fondo. Por ejemplo, el texto de un <h1> podría mezclarse con el fondo detrás de él de formas interesantes.
Examples of uses

NOTA: el eje “Z” (Profundidad) se comporta como las capas en photoshop o en ilustrator
La foto es viejita pero ahí se entiende 😄

Admito… que sí he hecho el típico: z-index: 900000000000000 jajaja, ahora entiendo, realmente el problema ya no es tanto mirar en CSS, sino mirar en HTML para ver que todo esté correcto.
.
PD. Acerté todos los quieces wuuuu:3

La dinámica me deja igual, por favor que sean más prácticos en las clases, sobre todo en cosas como CSS que de por si puede ser confuso y luego en estas clases de “puro texto”. Yo entiendo que también están los recursos, pero para eso mejor busco yo los temas en YT.

no me gusta esta modalidad. dislike para teffcode, like para diego degranda… aun asi sivren muchos estos cursos, pero creo que podrian ser mejores

“El contexto de aplilamiento es la conceptualizacion tridimensional de los elementos HTML a lo largo de un eje-Z” … Estoy pagando platzi para q me eviten todo eso y me lo expliquen practico, sensillo y sin mercadotecnia.
Miren el curso de react de Kaufman, quiero cursos como ese, donde paso a paso te muestran el funcionamiento del concepto. Aca estas repitiendo la definicion de diccionario de la real academia q no me aporta nada porque nisiquiera se que es una “conceptualizacion tridimensional de elementos”. Si una definicion invoca a 3 ideas nuevas, entonces no suma como definicion, solo suma confusion.
Me sorprende q no hayan filtrado este contenido antes de publicarlo.

actualizen el curso a un curso 100% practico

⏬ Posicionamiento

<h4>Ideas/conceptos claves</h4>

mix-blend-mode

La propiedad mix-blend-mode define cómo debe combinarse el contenido de un elemento con su fondo.

<h4>Apuntes</h4>
  • Todo son cuadros en nuestros sitios web

    • Podemos controlar el tipo de cuadro que se genera utilizando la propiedad display
  • Positions ⇒ Nos ayudan a manipular la ubicación de un elemento

    • En la parte superior
    • Uno alado de otro
    • Uno encima de otro ⇒ Estaremos hablando de contexto de apilamiento

    “El contexto de apilamiento es la conceptualización tridimensional de los elementos HTML a lo largo de un eje-Z imaginario relativo al usuario que se asume está de cara al viewport o página web. Los elementos HTML ocupan este espacio por orden de prioridad basado en sus atributos.”

    • Cuando trabajamos con la web debemos trabajar con 3 ejes
      • Ejes X & Y
      • Eje Z imaginario ⇒ Desde la pantalla hasta la vista del usuario
        • Cajas que se van sobreponiendo
        • Ejemplo ⇒ Un modal se pone encima de todo nuestro sitio web
    • El contexto de apilamiento es como una pila que se va ubicando por orden de prioridad
      • No todos los elementos pueden crearlo
    • Un contexto de apilamiento es formado, en cualquier lugar del documento, por cualquier elemento que:
      • Sea el elemento raíz (HTML)
      • Tenga posición (absoluta o relativa) con un valor z-index distinto de auto
      • Position: fixed
      • Un elemento flex con un valor z-index distinto de auto, que sera el elemento padre display: flex/inline-flex
      • Sean elementos con un valor opacity menor de 1
      • Elementos con un valor transform distinto de none
      • Elementos con un valor mix-blend-mode distinto de normal
      • Elementos con un valor filter distinto de none
      • Elementos con un valor perspective distinto de none
      • Elementos con un valor isolation igual a isolate
      • Especifican cualquier atributo superior en will-change incluso si no especificas valores para estos atributos directamente
      • Elementos con un valor -webkit-overflow-scrolling igual a touch
  • Ejemplo del contexto de apilamiento

Para comprender el quiz numero 5 y 6 recordemos 2 cosas.
La propiedad display:relative cambia la posición del elemento con respecto al flujo normal (es decir, con respecto a la posición que tendría el elemento normalmente).

El flujo normal de los ejercicios es el siguiente:
.

Podemos cambiar la posición del elemento relativo a su posición original usando las propiedades top, left, right y bottom…

Comparto el código de los quiz para que puedas experimentar cambiando los valores de posicionamiento.
https://codepen.io/Roque9897/pen/VwmrwPd

el Z-index o el eje Z imaginario se ve de la siguiente forma, desde el punto de vista del ojo humano hacia una pantalla:

De esta forma, entre más cerca este el elemento al ojo humano, mayor prioridad tendrá.

Me gusta mucho la temática de los quizes. Ojalá lo apliquen en todos los cursos. Pero en este caso, me hubiera gustado más que fuese sobre "display" y no sobre "position". Ya que se mencionó que "position" no era un tema "principal" de este curso y que para profundizar en eso había otro.

Ufff, no tenia ni idea de eso jajaja, Muy buena la clase

A qui esta la documentación de esta clase. link

La parte que me ayudo mucho a entender el contexto de apilamiento es la parte donde se explica la imagen.

  • DIV #4 es renderizado debajo de DIV #1 porque el z-index (5) de DIV #1 es válido dentro del contexto de apilamiento del elemento raiz, mientras que el z-index (6) de DIV #4 es válido dentro del contexto de apilamiento de DIV #3. Así que DIV #4 está debajo de DIV #1, porque DIV #4 pertenece a DIV #3, que tiene un valor z-index menor.

  • Por la misma razón DIV #2 (z-index 2) es renderizado bajo DIV#5 (z-index 1) porqué DIV #5 pertenece a DIV #3, que tiene un valor z-index mayor.

  • El valor z-index de DIV #3 es 4, pero este valor es independiente del z-index de DIV #4, DIV #5 and DIV #6, porque pertenece a un contexto de apilamiento diferente.

Ahh… este curso me recuerda a cuando tomaba clases en la U, venia el profe perezoso, ponía unas diapositivas, y nos hablaba de temas nada mas que por cumplir lo que le habían impuesto, y el hablaba y hablaba de temas que la final… no aportaron nada. Ojala y Estefany entienda, que si de ver imagensitas, textos, escuchar argumentos enormes que no me memorizare, lo hubiera hecho en youtube, o como ya hago, leyendo la documentación de los sitios formales, me enredo menos. Seria bueno que manejara algún tipo de contenido único de platzi, y a medida que se avanza con teoría, ir practicando, así, con manos a la obra, y viendo para que sirve y como se usa apropiadamente.

Notas de la clase

Les quiero compartir esta pagina para los que quieren entender un poco mas sobre posicionamiento: https://es.learnlayout.com/position.html

clarisimo todo! excelente clase

4 / 6 en la dinamica. Practicar y mejorar

Bueno así se ve el z index en la vida real

6 de 6, las clases de platzi sirven cada vez mas, cuando hice el curso definitivo de HTML pensé que ya lo tenía todo, y me estrelle con todos los problemas habidos y por haber, los tips y consejos de diego degranda y estefany valen oro el panorama ahora es mucho mas claro que antes.

ejemplo de z-index

Para los que están familiarizados con el mundo del diseño 🤔 el mix-blend-mode es como el modo de fusión en programas como Photoshop, Illustrator, etc. 😁
Aquí un ejemplo:

Ejemplo:
Tenemos 2 hermanos A y B, el hermano A tiene un hijo que es X.

Z-index: 1; Para A
Z-index: 2; Para B
Z-index: 3; para X

Por mas que **X **tenga un Z-index superior a B nunca va a estar por encima de este en el eje Z. debido que su padre es inferior a este.

Todo en la web son cuadros y estos estan representados por nuestro display.

Si hablamos de bloques encima de otro hablamos realmente del concepto de apilamiento, que es:
Es la conceptualiazcion tridimensional de los elementos HTML a lo largo de un eje-z imaginario relativo al usuario que se asume esta de cara al viewport o pagina web. Los elementos HTML ocupan este espacio por orden de prioridad basado en sus atributos.

En resumen cuando trabajamos en la web, tenemos que pensar en 3 ejes. X, Y y Z

Un contexto de apilamiento es formado en cualquier lugar del documento, por cualquier elemento que:

  • Sea elemento RAIZ
  • Tenga Posicion con un valor z-index distinto de ‘auto’
  • Position:Fixed
  • Un elemento flex con un valor z-index distinto de ‘autp’ que sea el elemento padre display:flex/inline-flex
  • Sean elementos con un valor filter distinto de ‘none’
  • Elementos con un valor perspectivo distinto de ‘none’
  • Elementos con un valor isolation igual a ‘isolate’
  • Especifican cualquier atributo superior en will-change incluso si no especificas valores para estros atributos directamente
  • Elementos con un valor -webkit-overflow-scrollling igual a touch
  1. A (Block)
  2. A
  3. B (Position: Absolute lo Vuelve inline)
  4. B (Position absolute, se sobre pone)
  5. A
  6. B

Mis respuestas de la dinámica:
1- A
2- A
3- B
4- B
5- A
6- B

Ame esta clase.

Mis respuestas 😎😅

  1. A
  2. A
  3. B
  4. B
  5. B
  6. B

5/6

A
A
B
B
A
B

me quedaron todas buenas wuuu ^.^

Quedo realmente claro, un tema que desconocía en lo absoluto ¡muy bueno!

3 de 6. Alguien me podria explicar las dos ultimas?

Excelente clase, Resultado 5/6, pero me quedo mas que claro.

La diferencia entre position absolute y relatiava es que el absolute sobrepone elemenos y position relative no sim embargo puede sobreponer elementos aplicando propiedades como left, top, etc

1 a
2 a
3 b salen del flujo normal
4 b
5 a porque todos tienen position relative y el unico que se sale es el 3 al moverse hacia abajo y tiene una ubicacion mas reciente que 2 y el cuatro hacia abajo y al lado izquierdo.
6 b al no ser relatives su valor en z-index tiende a 0.

Resumen:

  • Contexto de apilamiento: el orden en el eje z en que se organizan los elementos a mostrar en pantalla.
    contexto de apilamiento = z-index: numero;

  • Hay aproximadamente 12 reglas que cumplen algunos elementos para poder estar en este contexto de apilamiento.

  • El padre siempre tendrá prioridad de visualizacion frente al hijo en CSS.

  • valores z-index: 0 (siendo el menor) y 999 siendo el mayor. o hasta donde la imaginación te dé.

Modal:
Una ventana modal es una ventana que se abre en la página web por encima del contenido activo y que luego podemos cerrar haciendo clic con el ratón.

Me encantó la dinámica, divertida y pedagógica, Me gustaría conseguirme con otras como estas. Gracias.

Hola, estaba un poco perdido con el tema de position, he indagando me encontre con este video que ayuda a complementar lo visto en la clase.

https://www.youtube.com/watch?v=jx5jmI0UlXU&ab_channel=WebDevSimplified

Espero sea de ayuda.

Por esa regla de tres, un background-img es el número z-index más alto

1- A
2-A
3-B
4-B
5-A
6-B

Contexto de Apilamiento

“El contexto de apilamiento es la conceptualización tridimensiional de los elementos HTML a lo largo de un eje-Z imaginario relativo al usuario que asume está de cara al viewport o página web. Los elementos HTML ocupan este espacio por orden de prioridad basado en sus atributos”
MDN
Existen 3 ejes de apilamiento, el eje x, y y el z. Es este último el que da una ilusion de tridimensionalidad en nuestras páginas web. Ya sea que un texto se posiciona encima de un video o una imagen o cuando le hacemos click a un boton y nos muestra una nueva ventana delante de la página web.

Un contexto de apilamiento es formado, en cualquier lugar del documento, por cualquier elemento que:

  1. Sea un elemento raiz (HTML)
  2. Tenga posición (absoluta o relativa) con un valor z-index distitnto de auto.
  3. Positión: fixed
  4. Un elemento flex con un valor z-index distinto de auto, que sea el elemento padre display: flex/inline-flex
  5. Sean elementos con un valor opacity menor de 1
  6. Elementos con un valor transform distinto de none
  7. Elementos con un valor mix-blend-mode distinto de normal.
  8. Elementos con un valor filter distinto de none
  9. Elementos con un valor perspective distinto de none
  10. Elementos con un valor isolation igual a isolate
  11. Especifican cualquier atributo superior en will-change incluso si no especificas valores para estos atributos directamente.
  12. Elementos con un valor -webkit-overflow-scrolling igual a touch

Oh me salió lo hize todo bien
A
A
B
B
A
B

1- A
2- A
3- B
4- B
5- A
6- B

que cursos mas malos, lo siento teffcode pero dejan mucho que desear, siento que estoy perdiendo mi tiempo, estos cursos deben ser práctico con un buen proyecto a lo largo del curso

Muy buenas las preguntas👏

1.- A
2.- A
3.- B
4.- B
5.- A
6.- B

A
A
B
B
A
B

Hay que revisar estas clases, realmente se me hizo muy complejo seguir todo sin ver como aplicar cada tema enseñado.

Se necesita un poco de live coding.

hizo falta algo de practica en Vs code .

1 = A
2 = A
3 = B
4 = B
5 = A
6 = B

  1. a
  2. a
  3. b
  4. b
  5. a
  6. b

6/6

  1. A
  2. B - X
  3. B
  4. B
  5. A
  6. A - X

Dos respuestas incorrectas, pero lección aprendida.

Si tienes problemas con el z-index, revisa el HTML.

Respuestas:

  1. A
  2. A
  3. B
  4. B
  5. A
  6. B

interesante, porfín aprendi de absolute y relative

Respuesta Dinámica:

  • A
  • A
  • B
  • B
  • A
  • B

Un contexto de apilamiento es formado, en cualquier lugar del documento, por cualquier elemeto que:

  • Sea elemento raíz (HTML).
  • Tenga posición (absoluta o relativa) con un valor z-index distinto del “auto”,
  • Position: fixed;
  • Un elemento flex con un valor z-index distinto de “auto”, que sea el elemento padre display:flex/inline-flex.
  • Sean elemento con un valor opacity menor de 1;
  • Elementos con un valor transform distinto de “none”.
  • Elementos con un valor mix-blend-mode distinto de “normal”.
  • Elementos con un valor filter distinto de “none”.
  • Elementos con un valor perspective distinto de “none”.
  • Elementos con un valor isolation igual a “isolate”.
  • Especifican cualquier atributo superior en will-change incluso si no especificas valores para estos atributos directamente.
  • Elementos con un valor -webkit-overflow-scrolling igual a “touch”

Muchisimas gracias por la explicacion del z-index, siempre tuve problemas con esa propiedas, y con los otros temas de posicionamiento. Pude acertar correctamente en todos los quizes 😅😊

4/6 a seguir practicando 👏👏👏

https://material.io/design/environment/elevation.html#elevation-in-material-design

En la referencia del sistema de diseño creado por Google, Material Design, se especifica el concepto de elevación y como se simula la elevacion en la web con uso de las sombras. En la referencia hay alguna animaciones bastante interesantes que ayudan a ejemplificar estas ideas.

Le atiné a 5 de 6! 😁

Para los que alguna vez han usado Photoshop, los 'valores' mix-blend-mode e Isolation, son como los modos de capa (normal, oscurecer, aclarar, contraste, luz fuerte, etc.) y existe en Css una 'valor' para cada modo de esos conocidos en Photoshop.

5 de 6 en la dinámica.

excelente clase, les comparto un juego de flex. https://flexboxfroggy.com/#es

Uffff 5 de 6 a seguir practicando 😄

Los hijos siempre van a respetar el z-index del padre, por lo cual (en el ejemplo), nunca van a tener un z-index mayor a este.