Platzi
Platzi

¡Invierte en ti y celebremos! Adquiere un plan Expert o Expert+ a precio especial.

Antes: $349
$259
Currency
Antes: $349
Ahorras: $90
COMIENZA AHORA
Termina en: 9D : 3H : 29M : 22S

Debes iniciar sesión

Para ver esta clase crea una cuenta sin costo o inicia sesión

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

5/28

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

Captura de pantalla -2021-02-23 12-22-51.png

NOTA: el eje “Z” (Profundidad) se comporta como las capas en photoshop o en ilustrator capas.png
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

“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.

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.

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.

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:
Captura.PNG.

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:

z-index-illustration.jpg

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

posicionamiento.png

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

4 / 6 en la dinamica. Practicar y mejorar

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

⏬ 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
www.canva.com_design_DAEQhmoxgqg_yApl4zSE9ricNZ4u9qNnYA_view_utm_content=DAEQhmoxgqg&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton.png
  • Ejemplo del contexto de apilamiento

actualizen el curso a un curso 100% practico

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

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.

understanding_zindex_04.png
  • 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.

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

Respuestas:

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

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

interesante, porfín aprendi de absolute y relative

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:
Captura de pantalla 2021-05-21 213150.png

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”

ejemplo de z-index

5 z-index.png

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

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

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

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 😅😊

me quedaron todas buenas wuuu ^.^

Notas de la clase
Captura de pantalla 2021-04-28 042914.png

A
A
B
B
A
B

Mis respuestas 😎😅

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

5/6

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! 😁

Ame esta clase.

clarisimo todo! excelente clase

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

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.

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

Captura de pantalla -2021-02-23 12-22-51.png

NOTA: el eje “Z” (Profundidad) se comporta como las capas en photoshop o en ilustrator capas.png
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

“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.

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.

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.

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:
Captura.PNG.

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:

z-index-illustration.jpg

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

posicionamiento.png

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

4 / 6 en la dinamica. Practicar y mejorar

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

⏬ 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
www.canva.com_design_DAEQhmoxgqg_yApl4zSE9ricNZ4u9qNnYA_view_utm_content=DAEQhmoxgqg&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton.png
  • Ejemplo del contexto de apilamiento

actualizen el curso a un curso 100% practico

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

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.

understanding_zindex_04.png
  • 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.

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

Respuestas:

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

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

interesante, porfín aprendi de absolute y relative

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:
Captura de pantalla 2021-05-21 213150.png

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”

ejemplo de z-index

5 z-index.png

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

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

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

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 😅😊

me quedaron todas buenas wuuu ^.^

Notas de la clase
Captura de pantalla 2021-04-28 042914.png

A
A
B
B
A
B

Mis respuestas 😎😅

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

5/6

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! 😁

Ame esta clase.

clarisimo todo! excelente clase

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

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.