Buenas tardes, bienvenido, bienvenida. Espero que estés súper bien, que estés preparado o preparada,
porque hoy tenemos curso de CSS desde cero. Hoy vamos a hablar de estilos, hoy vamos a estilar nuestras páginas.
Te voy a contar cómo puedes empezar a entender CSS, las propiedades, selectores, elementos, los colores,
el modelo de la caja, cómo cargar el CSS, cómo estilar tus elementos HTML y darles vida.
Mira, este curso de CSS va a ser todos los miércoles, hoy es miércoles 18, así que todos los miércoles vamos a tener una nueva clase de CSS.
No te lo pierdas, de hecho ya os confirmo, mira, vamos a hacer aquí en eventos, ¿vale?
El martes que viene vamos a hacer una entrevista a Pau García Milar, que es programador, emprendedor,
o sea, un montón de inteligencia artificial, jueves vamos a ver la NextGS Conf.
Bueno, pues ya vamos a crear el evento de la semana que viene para que nadie se pierda la siguiente clase del curso de CSS,
que va a ser Flex y Grid, ¿vale? Curso de CSS desde cero, Flex y Grid.
La semana que viene vamos a hablar de Flex y Grid, para que podamos seguir aprendiendo a estilar nuestras páginas web y a maquetarlas.
Aquí lo dejo por aquí, para que lo tengan, y ya tengan el horario y se lo puedan pasar, ¿ves?
Lo tienen aquí, joder, ¿quién se ha metido ya? ¿Cómo pueden ser tan rápidas esas personas?
Es increíble, no sé si es que lo tienen automatizado. Ah, mira, 3, bueno, 3, joder, la leche.
Ah, porque ha puesto Fera del evento por ahí, la madre gotario, lo parió, qué rápido, joder, qué rápido, amigo, qué rápido.
Antes de que empecemos con el curso, te cuento una cosa bastante importante.
Esto es un curso de CSS, empezamos desde cero, no hay ningún problema,
pero si por lo que sea te has perdido el curso de HTML que hicimos la semana pasada,
que sepas que ya empezamos el mundo del desarrollo web con el curso completo de HTML desde cero la semana pasada.
Totalmente gratis y en menos de dos horas no vas a aprenderte todos los elementos y tal,
pero sí que vas a entender HTML desde cero, qué es la semántica, qué etiquetas hay importantes,
cómo nos sirven, cómo no dejar de utilizar, cómo dejar de utilizar ya de una vez por todas DIP para todo, ¿vale?
Que seguro que muchas veces os pasa eso, que estáis utilizando DIP para todo, DIP para todo.
Bueno, pues ahí explico cómo lo podéis evitar.
Y además lo bueno de ese curso es que lo tenéis súper, pero súper, súper dividido, ¿veis?
Tienes aquí un montón de tipos, un montón de cosas, ejemplos, etiquetas, no sé qué, o sea, hasta formularios.
O sea, que ahí tenéis una base buenísima para empezar el desarrollo web.
Y entonces, ya dijimos la semana pasada que el HTML es el marcado de nuestra página web.
Pues hoy vamos a ver el estilado de nuestra página web.
La página web que hicimos la semana pasada es esta que veis aquí, ¿ok?
Que ya veis que no tiene muchos estilos, no tiene mucha historia.
Y hoy nos vamos a dedicar a darle estilos, a cómo podemos mejorarlo visualmente
para que sea más placentero para nuestros usuarios de que realmente cuando entre a nuestra página web
pues lo vean mejor, la fuente sea más legible, con coloritos y todo esto, ¿no?
Con formas, espacios y muchas cosas más.
Y de eso se trata el día de hoy, ¿eh?
CSS es un lenguaje, ¿vale?
Es un lenguaje, mucha gente que esto no lo entiende y dice, no, no es un lenguaje, no sé qué.
Sí, CSS es un lenguaje, ¿vale?
Es un lenguaje, pero es un lenguaje de diseño.
Es un lenguaje, al final, destilado.
Es un lenguaje declarativo para describir la presentación de un documento.
En nuestro caso va a ser un documento HTML, pero en realidad se podría utilizar para otro tipo de documentos,
para cualquier interfaz y lo que sea, porque lo que hace es describir, describir cómo es la presentación.
Así que ya tendríamos HTML, lenguaje de marcado, y tendríamos CSS, que sería el lenguaje de presentación,
que describe el diseño de nuestra página web.
Y finalmente tendríamos la tercera pata en el mundo del desarrollo web, que sería JavaScript,
que sería el de la interacción, o sea, un lenguaje de promoción para añadir interactividad a nuestras páginas.
Así que ya tenemos HTML, marcado, CSS, diseño, y JavaScript, interactividad.
Lo tenemos ahí, ¿vale?
Ya tenemos esos tres lenguajes, son como los fundamentos del desarrollo web en Internet de forma totalmente nativa,
porque son los tres lenguajes que los navegadores entienden sin ningún tipo de problema, ¿vale?
CSS es del año 1996.
Fue en diciembre de 1996 que apareció CSS, pero hay una cosa que a lo mejor no sabes.
El primer navegador del mundo que le dio soporte es Internet Explorer 3.
Así que le tenemos que dar las gracias a Microsoft, que fue quien llevó el primer navegador a tener acceso a CSS.
Hasta ese día, antes de Internet Explorer 3, los navegadores no tenían soporte a CSS.
Y fue también en el propio año 1996 que apareció CSS, que apareció también el navegador.
CSS es un lenguaje, como os he dicho, y tiene una especificación.
Esto quiere decir que hay como un grupo de gente que se dedica a evolucionar, a mantener y a indicar cómo tiene el lenguaje que ir al siguiente nivel, ¿vale?
Y eso, ¿quién lo lleva?
Lo lleva la World Wide Web Consortium.
Es un consorcio internacional que al final lo que hace es generar la especificación, recomendaciones y estándares para la World Wide Web, las tres W, para Internet.
Así que es súper importante que sepamos que tiene una especificación, porque si no, ¿qué podría pasar con CSS?
Bueno, que cada uno lo hiciese como quisiese, cada navegador.
De hecho, a veces pasa, igualmente pasa.
Pero por suerte el hecho de que haya una especificación que esté cerrada, significa que nos da como una base que todos los navegadores deberían cumplir.
O sea, que sea predecible, que si tú pones que esto se tiene que ver así con un código de CSS, en todos los navegadores, se supone, debería verse igual.
¿Vale? Así que ahí lo tenemos. Tenemos, sí, como unas pautas a seguir. Muy bien, Leo Garci.
Como unas pautas a seguir.
Y son unas pautas que, bueno, normalmente a día de hoy se cumplen más.
Anteriormente es verdad que antes cada uno iba por donde le daba la gana, ¿no?
Pero hablemos de las siglas de CSS.
CSS, las siglas de CSS vienen por Cascading Style Sheets.
Hojas de estilo encascada.
Y encascada no significa que sale una cascada de agua, que te veo venir ya, ya estás pensando, ¿cómo que cascada?
Que me va a caer el agua encima, no.
Hoja de estilos. CSS, Cascading Style Sheets.
Empecemos por la parte de hojas de estilos.
Hojas de estilos, ¿qué quieren decir?
Al final las hojas de estilos podemos entender que son como una serie, una colección de reglas que escribimos en el lenguaje
y que aplicamos a un documento para ver cómo se puede ver este documento, ¿no?
Incluso podrían estar en el mismo documento HTML, pero son un conjunto de reglas que queremos aplicar para darle diseño a nuestra página web.
Pero ¿qué de cascada? ¿Qué significa esto de cascada?
Cascada se refiere a la forma en la que se aplican las reglas, este diseño al documento, ¿vale?
Y es que las reglas de CSS, vamos a ver, que se aplican en un orden específico.
O sea, que tenemos que tener en cuenta el orden en el que se están poniendo las reglas de CSS,
la especificidad que tienen, la importancia que tienen, quién ha escrito ese CSS,
es del navegador, es del usuario, es del desarrollador.
Pues todo esto lo vamos a tener en cuenta.
Y esta cascada lo que hace es que se puedan llegar a sobreescribir algunas reglas de diseño que pongamos en un sitio o en otro.
Así que por eso es importante entender lo de cascada.
Así que entiende y piensa en la cascada como una cascada de verdad de agua
en la que al final el agua que hay arriba empuja al agua que hay abajo, ¿no?
Así que está como sobreescribiendo en la trayectoria lo que vamos escribiendo.
Y es importante el orden donde está el agua, donde está ese código, porque empuja al resto.
Pero veremos que tiene también que ver la especificidad.
O sea, cosas que hace que un estilo pueda ser más importante que el otro
y la importancia que nosotros le podamos dar, ¿vale?
Entonces, antes de comentaros, antes de empezar, os voy a dar dos recursos.
Dos recursos que a mí me parece que están muy chulos para que aprendáis CSS,
para que practiquéis y que, no sé, que miréis cualquier cosa.
Que os falte de CSS o que queráis saber.
A ver, uno, por supuesto, el bueno de Mans.
Tiene una pedazo de, bueno, no de biblioteca.
Es que tiene aquí como un curso con un montón de información de cómo funciona CSS,
con ejemplos, los niveles y todo esto.
Os lo recomiendo un montón.
Está súper chulo y estoy seguro que sus explicaciones son geniales.
Así que yo os recomiendo que cualquier cosa que os quedéis con dudas y tal,
además ahí hay mucho más tiempo que le podéis echar un vistazo,
vais, le echáis un vistazo y ya lo tenéis, ¿vale?
Y además que aquí es que le va a dar un montón, pero un montón, un montón de recursos para que lo entiendas.
Luego tendríamos el curso oficial de Google o de Chrome, bueno, de Google,
para aprender CSS, que lo tenéis en español, por si no lo sabíais, ¿vale?
¿Ves? Bienvenido a aprender CSS.
Está bastante bien, va bastante directo al grano, lo cual me gusta, me gusta mucho.
Y vais a ver, aunque aquí pone, no sé porque aquí está en inglés,
pero ya veis que está traducido al español, ¿eh?
Está traducido al español, la cascada.
La traducción es un poco chueca, también os digo, ¿eh?
Pero está bastante bien, no tiene certificado, es para aprender y punto.
Pero vais a aprender desde lo más básico hasta animaciones y un montón de cosas más, ¿vale?
Y luego tendríamos MDN CSS, que es donde vais a tener siempre lo último sobre la especificación,
con ejemplos, con tutoriales, referencias.
La verdad es que las referencias de CSS son increíbles en MDN.
Me refiero a que vais a tener aquí, aquí como podéis ver, toda esta referencia está actualizada al día.
La tenéis casi toda traducida al español y la que no esté traducida al español está en inglés y se entiende bastante bien.
Y no importa cómo de nuevo sea que está aquí y es espectacular.
Así que os recomiendo muchísimo MDN, tanto su curso, tutorial, como toda la referencia que tengáis.
Por ejemplo, si queréis ver todas las pseudo clases, que luego os explicaré lo que es, las tenéis todas listadas,
todas, cada una de ellas con un ejemplo y es increíble.
Como me gusta meterme en berenjenales, os voy a decir algo.
Sitios que no os recomiendo para aprender.
Os he dicho tres que sí, ¿vale?
No os recomiendo W3 School.
A mí no me gusta ese recurso.
Dan información que es equivocada, que no es correcta.
A veces una mezcla de que está desactualizado por desgracia o de que no saben de lo que están hablando.
Y mi recomendación, sinceramente, es que estos tres recursos son mucho mejor que W3 School.
Por desgracia, cuando buscas en Google es uno de los primeros que sale, sale muchas veces.
Hay mucha gente que le tiene mucho cariño.
Lo respeto, no pasa nada.
Le puedes tener cariño.
Me encanta.
Te doy mi opinión.
Me parece que no es un buen recurso.
Lo digo con todo mi cariño, ¿vale?
Pero en este caso creo que es que estos tres recursos son mucho mejores.
No solo porque las explicaciones están mejores, sino que son más correctas.
Así que si te tengo que recomendar algo y porque lo que me gusta es recomendar con todo mi cariño y mi sinceridad,
pues te voy a decir eso, ¿vale?
Porque luego me encuentro mucha gente que aprende de W3 School o que lo recomienda
porque realmente no saben casi de lo que están hablando.
Y encuentras ejemplos o que están mal o que las explicaciones son incorrectas.
Y a veces habrá cosas que estarán bien.
Pero bueno, ahí lo dejo.
Estos son para mí los tres recursos.
Y ahí lo dejo y que cada uno haga lo que quiera.
Vamos a empezar ya con nuestro CSS, que hemos venido aquí a aprender CSS y ya está.
No comparto tu opinión.
No es necesario que compartas mi opinión, Daniel.
Me parece fantástico.
Pero la verdad, no me voy a meter en el tema.
Cada uno que haga lo que quiera.
Vamos a empezar con los estilos.
¿Dónde se pueden empezar a poner los estilos?
¿Dónde iniciamos los estilos para que nuestro HTML tome vida y tome forma?
A ver, el primer sitio y más sencillo,
ya veíamos cómo teníamos un poco estructurado nuestro HTML en el curso anterior, ¿no?
Cuando tenemos un recurso HTML, podemos tener aquí, pues nada, el HTML,
que es al final la etiqueta que envuelve todo el documento.
Tendríamos el head y tendríamos el body, ¿vale?
Entonces, es bastante interesante que dentro del head tenemos los metadatos,
etiquetas, title, open graph y todo esto, ¿no?
Vale, pues aquí en el style, ¿ves?
Aquí, si quitamos esto, pum, ya se pone en blanco y esto.
Bueno, una cosa importante antes de empezar es que seguramente estarás viendo
que nuestra página web igualmente tiene estilos, ¿vale?
Ves que aquí esto está en negrita, esto está en azul, el botón se ve de una forma.
Es muy importante que entendamos, y esto luego lo vamos a repasar,
que cuando nosotros tenemos ya cualquier documento HTML,
tenemos unos estilos por defecto, ¿vale?
Vienen unos estilos por defecto a nivel de navegador.
Por ejemplo, si nosotros nos vamos por aquí, vamos a ver, ¿ves?
Strong, la etiqueta Strong ya tiene un estilo por defecto que hace que tenga aquí
Font, Weight, Bold, o sea, ya tiene ahí un Bold.
Y veis que pone aquí User Allen Style Sheet.
Esto va a ser importante después para una cosa que te voy a explicar,
pero sobre todo al principio tienes que entender esto porque vais a ver que tenemos estilos por defecto
y que ya hace que de alguna forma se vea.
Y lo que vamos a permitir nosotros, pues que vamos a desbloquear esto, ¿no?
Y a cambiarle el diseño que por defecto le ha puesto el navegador.
Así que vamos a empezar por aquí.
¿Y qué vamos a hacer?
Bueno, pues vámonos al editor.
Y lo primero, lo más fácil para añadir estilos, se pueden añadir de diferentes formas.
El primero sería poner una etiqueta Style.
La etiqueta Style es una etiqueta de HTML y lo que nos permite es añadir ya CSS dentro de nuestro documento.
Aunque muchas veces lo vas a encontrar dentro del head, tienes que saber una cosa.
El Style este en realidad lo podrías poner donde te dé la gana, lo podríamos poner aquí también.
Y estos estilos funcionarían sin ningún problema.
Lo digo porque no van a dejar de funcionar si los pones en otro sitio,
aunque el sitio correcto debería ser dentro de la etiqueta head.
Ahora aquí lo que podemos hacer en CSS, vamos a ver las partes del lenguaje de CSS.
Por una parte tendríamos la parte del selector,
que es donde seleccionamos el documento, no, el elemento que queremos estilar.
Aquí pondríamos el selector.
Abrimos llaves, cerramos llaves y dentro lo que pondríamos aquí es la propiedad, el valor y terminamos con un punto y coma.
Para iniciar un comentario, iniciaríamos así con barra, asterisco, pondríamos el comentario y cerraríamos aquí.
No funcionan los comentarios con barra, barra.
Esto no funciona y puede dar problemas.
Así que siempre, siempre utilizad este comentario.
Ahora, ¿cómo se le llama a esta línea de aquí?
A esta línea se le llama declaración, ¿vale?
Declaración.
Y ya lo tendríamos.
Tendríamos aquí el selector, llaves, los estilos que queremos aplicar a este elemento,
que son propiedad, valor y toda la línea sería una declaración.
¿Por qué es importante el tema semántico, ¿no?
De hablar de este tipo de cosas.
Bueno, pues es importante porque si te digo, vamos a cambiar el selector, ahora esta declaración, cambia la propiedad, ¿no?
Vamos a poner otro valor para que te vaya un poquito, te vaya sonando, ¿no?
Entonces, obviamente ahora estamos poniendo los estilos en línea, pero más adelante veremos que esto se puede separar en un archivo,
se puede poner por carpetas y tal, pero empezamos así y vamos poco a poco, que el curso de CSS es de cero, ¿vale?
Entonces, ya queremos estilar lo primero.
¿Cómo lo podríamos empezar ahora a destilar?
Imagínate, ves que tenemos aquí el porfolio de Midudev.
Esto, aquí lo tendríamos con un elemento h1.
Lo primero que vamos a querer es seleccionar este elemento.
Y el selector más básico y más típico que vamos a tener es directamente utilizar la etiqueta html, la etiqueta html, ¿vale?
Así que ya estamos indicando aquí que este h1, este h1 y todos los h1 que vamos a tener en el documento queremos cambiarle su estilo.
Los estilos vamos a ir viendo y vamos a ir desbloqueando cada vez más propiedades, pero una de las más básicas sería el color.
Y una vez que tenemos el color, fijaos que vamos a empezar ya utilizando unas palabras clave.
El color en CSS luego lo veremos que hay diferentes formas de indicarlo, con hexadecimal, RGBA, hay un montón de formas.
Pero una de las formas más básicas y más típicas y que además te puede ayudar mucho cuando empiezas,
es utilizando las palabras claves que tienes una colección, pero una colección de colores.
Hay alguno un poco polémico, pero hay algunos que, bueno, que tienen sentido.
Por ejemplo, si lo queremos poner azul, ¿vale? Pues lo podamos a poder tener azul.
Así que tendríamos selector, nuestra primera declaración, con la propiedad color y el valor azul.
En este caso, utilizando una palabra clave que se llama blue, que lo que hace CSS es entender que tiene que poner el azul.
Y vamos a ver una cosa importante.
Imagínate que aquí tuviéramos otro h1, ¿vale? Otro h1, otro h1.
Lo que podemos encontrar aquí es que ya estamos viendo que esta etiqueta lo que está haciendo es seleccionar todas y cada una de las ocurrencias de ese selector, ¿vale?
No está encontrando el primero y ya está, sino lo que está haciendo es seleccionar todo lo que pueda.
Luego veremos formas de limitar esto, cómo podemos hacer que solo nos recupere uno que encuentre o cómo afinarlo más.
Pero ten en cuenta que cuando ponemos un selector, lo que intenta siempre es acceder al máximo número de elementos que encuentre.
Y en este caso, si tenemos más de un h1, pues irá y encontrará todos los h1 y los estilará, ¿vale?
Por ahora vamos a quitar este h1 y ya lo tenemos.
Vamos a estilar otra cosa, por ejemplo, el body.
El body es que podemos estilar todo el documento.
Y todo el documento aquí le podríamos poner un background y podemos ponerle también otro color.
En los colores, como hemos dicho anteriormente, podemos ponerle un color, por ejemplo, vamos a ponerle el pink, ¿vale?
Y quedaría así.
Pero fíjate que también podemos utilizar otro tipo de valores.
Si te pones encima, esto en el Visual Studio Code, que está muy chulo, fíjate que puedes mover esto, ¿vale?
Y va cambiando.
Y cuando vas cambiando, aquí ha cambiado y ha puesto el RGB.
Si le das un clic aquí, vas a ver que te lo cambia a un hexadecimal, ¿vale?
Y puedes ponerlo aquí y se va moviendo, se va actualizando y lo vas cambiando todo.
Así que podemos ponerlo aquí, ya quedará un poquito más oscuro o lo podemos poner más clarito, ¿vale?
Pues ya está, ya tendríamos ahí el background, ya estamos estilando más.
Claro, cuando estilamos el body utilizando el selector directamente, pues no va a tener mucha historia porque solo tenemos esto.
Pero lo interesante aquí es que ya estamos viendo que tenemos diferentes formas en las que podemos estilar colores y todo esto.
Por ejemplo, ya hemos visto que tenemos la palabra clave, ¿no?
Podríamos poner blanco, negro, lo que sea.
Y además ya tenemos los hexadecimales.
Los hexadecimales sería la forma más popular a la hora de utilizar colores.
No digo que sea la más recomendada, pero sí la más popular, la más utilizada y todo esto, ¿no?
Una cosa interesante de los hexadecimales, que hay mucha gente que a lo mejor no lo sabe,
el hexadecimal 0 sería esto, ¿no?
Sería el 000000.
Muy bien, una parte interesante de los hexadecimales es que también puedes trabajar con transparencias.
Puedes utilizar aquí los dos últimos dígitos hexadecimales para cambiar también la transparencia, ¿vale?
Fíjate que le puedes ir bajando la transparencia.
Si le ponemos 00, va a estar desaparecido.
5, 5, ¿ves?
Y ya está cambiando un poquito la transparencia.
Obviamente el hexadecimal para transparencias no queda muy claro y no es lo más, digamos, lo más cómodo.
Y para eso se utiliza el RGB, ¿vale?
Que sería el canal rojo, el azul, ahí el verde y el azul, ¿no?
Esto sería para hacer el negro.
Y una que teníamos anteriormente para trabajar con opacidades era RGBA.
Pero este es Legacy.
Y ahora os explico por qué, ¿vale?
Podríamos cambiarle aquí la opacidad.
Y podríamos decir que el canal de rojo es 0, el de verde es 0, el de azul es 0.
Y la opacidad es de, podemos ponerlo con tanto por ciento o con 0.1 o quitar el punto y poner 0.1, ¿no?
Lo podéis poner por tanto por ciento si lo veis más claro.
Pero fijaos que el título ya está cambiando.
Vale, esto, esto es Legacy, ¿vale?
Ya no se utiliza o no se debería utilizar.
Ya no es que no se utilice.
Utilizar se sigue utilizando.
Pero el RGBA se ha quedado obsoleto y ahora se recomienda utilizar uno nuevo que realmente es bastante más cómodo y te permite cambiar el RGB mucho más fácil.
Por ejemplo, mira, vamos a poner este como Legacy, ¿vale?
Vamos a poner aquí el Legacy para que lo tengáis claro.
Y el nuevo sería utilizar siempre el RGB.
El RGB ahora podéis ponerle los colores que queráis, 0, 0.
Y luego podéis poner una raya, una barra y ponerle la opacidad aquí.
¿Y para qué permite?
Ay, y esto además lo tenéis que utilizar sin las comas, ¿vale?
¿Y para qué sirve esto?
Uno, porque es más sencillo.
¿Veis?
No necesitan las comas, es mucho más sencillo.
Además, el RGB puedes utilizarlo tanto de una forma como la otra, ¿no?
O sea, no necesitas estar constantemente cambiando entre si necesitas opacidad o no y entonces cambiar la palabra RGBA.
RGBA, este de aquí, ya está bastante soportado en los navegadores modernos y si no lo podéis compilar, ¿vale?
Pero este sería el moderno, ¿vale?
El moderno sería este y el recomendado de aquí hacia adelante, ¿vale?
Luego tendríamos otras formas de hacer colores.
Por ejemplo, tendríamos, y este también es bastante importante,
HSL, que es Hue, que sería el matiz, S, que sería la saturación y L, que sería la luminosidad, ¿vale?
Entonces podríamos poner un color así, con un 83% y 44% de luminosidad.
Lo que estamos consiguiendo aquí en el Hue, que sería la rotación del...
Hay como un...
Mira, lo puedo enseñar para que lo veamos.
Lo que tenemos aquí que poner al principio, el 0% sería el rojo y conforme vamos dándole la vuelta,
le estamos indicando, pues, el grado donde tenemos que poner.
Por ejemplo, si queremos algo amarillo, pues aquí tendríamos que poner, pues, más bien 60, ¿vale?
¿Veis?
Y aquí tendríamos que trabajar la luminosidad y también tendríamos que trabajar la saturación.
Y dependiendo de la saturación que le pondremos, la veremos más fuerte o más apagado, ¿vale?
Esta es la saturación, si le ponemos un 100% sería más fuerte y la luminosidad también, pues, sería más amarillo.
En este caso, claro, nos pasamos, si le ponemos un 100% es demasiado, ¿vale?
Si le pones un 50% será un amarillo ahí más puro, pero si te pasas, al final será blanco porque te da demasiado brillo.
Así que, bueno, es interesante porque se entiende mucho mejor de cómo funciona el color.
Y este, al final, tendríamos el último, que sería el de OKLCH, ¿vale?
Este ha salido hace muy poquito, ¿vale?
Todavía creo que no está 100% soportado en todos los sitios.
Es bastante similar también al que hemos visto antes, a este de HSL.
Y fijaos, ¿no?
Que también está utilizando 348 y tal, pero podéis utilizar algunas calculadoras, calculator, ¿vale?
Para saber exactamente cómo funciona esto.
Aquí lo tendríamos, el color picker.
Y aquí podéis cambiar el chroma, el lightness, el alfa y el hue, ¿vale?
Aquí tendríamos, por eso es L de Lines, C de Chroma y H de Hue, ¿vale?
Y aquí lo tendríamos también y podríamos cambiarlo y lo tendríamos aquí.
Y este sería el hexadecimal por defecto.
Así que estos serían un poco los colores.
Hay algunos más, no se utilizan tanto.
De hecho, hay algunas palabras clave, como por ejemplo transparent.
Transparent sería una palabra clave para hacer algo transparente.
Es un color que funciona no solo en el texto, sino también en backgrounds y tal.
Y también tendríamos uno muy importante, muy interesante y que no se suele ver, que te voy a explicar ahora y te va a volar la cabeza porque es un valor muy importante que tienes que dominar, ¿vale?
¿Hay más escala de colores en unos que en otros?
Efectivamente, hay más escala de colores.
Por ejemplo, en OKLCH los colores que puedes representar son más que en otros tipos de colores.
Así que es interesante tenerlo en cuenta para que puedas tener acceso a más colores, ¿vale?
Y además que es mucho más fácil de entender.
¿Ves?
Que pone OKLCH puedes utilizar para White Gamut P3 Colors.
En cambio, los otros solo podrías utilizar un rango de colores menor.
Por eso han utilizado y han creado este, ¿no?
Ahora, ¿deberíais utilizar OKLCH siempre?
A ver, yo lo que os diría es utilizar el que mejor entendáis y el que mejor se adapte a vuestras necesidades.
Entonces, el hexadecimal suele ser el más utilizado.
Yo creo que el RGB, especialmente la forma nueva, es bastante útil.
Y si necesitáis representar nuevos colores, yo creo que está súper bien el hecho de poder tener el OKLCH como una alternativa y que al menos lo entendáis, ¿vale?
Que está súper bien.
Yo tengo miedo de usar hexadecimales con tres dígitos.
Mira, os voy a explicar eso que está bastante chulo.
Otra cosa que podéis hacer, de hecho es una cosa que yo uso mucho, es hexadecimales con tres, ¿vale?
Yo utilizo este, que este es mi color favorito.
Mi color favorito es el 0-9-F.
¿Y qué es esto de que estemos utilizando solo tres carácteres en el hexadecimal?
Esto, lo que quiere decir en realidad es 0-0-9-9-F-F.
Sería como un shortcut para, en lugar de tener que repetir dos veces, hacerlo así.
Por eso también funciona otros colores como F-F-F, que esto sería tres veces así, ¿no?
Y lo que está haciendo es que el primero toma dos veces el primer lugar, para que lo entendáis, ¿no?
0-9-F sería 0-0-9-9-F-F.
Es una forma corta de indicarlo.
También lo podéis hacer con otros colores y al final es un poco polémico.
A mí a veces me ayuda para no tener que repetirlo muchas veces, pero bueno, para que sepáis que se puede hacer.
Con ocho caracteres lo hemos explicado antes, amigo.
Hemos explicado que con ocho caracteres estamos trabajando con la transparencia, ¿vale?
¿Ves? Si utilizas los ocho caracteres, los dos últimos sería la transparencia, siendo 0-0 transparente y F-F con opacidad al 100%, ¿ok?
Así que ya hemos visto todos los colores disponibles, ¿vale?
Os voy a enseñar un valor muy importante en CSS que para mí es básico, es para empezar a trabajar en CSS,
porque muchas veces se tiene que utilizar y lo vamos a ver más adelante con iconos, con un montón de cosas.
Y es el current color, ¿vale? El current color.
Mira, el current color, imagínate que esté H1 y vamos a descubrir una nueva propiedad que es la de border.
El borde te permite dibujar un borde en el elemento.
Le puedes indicar cuál va a ser el tamaño.
De hecho, podemos poner border width y decirle que sea 3 píxeles.
Le podemos decir también el estilo y aquí le podemos poner que sea sólido, que es el más típico, ¿vale?
Y ya puedes ver el color del borde que ha puesto.
Pero fíjate que el borde que le ha puesto es del mismo color.
O sea, yo no he puesto el color y puedes ver que el color que ha utilizado es el mismo color que el texto.
¿Esto cómo puede ser, no?
Bueno, lo que puedo cambiarle el color y le puedo poner, pues, por ejemplo, que sea de color negro,
le puedo poner que sea de color blanco, le puedo poner el color que quiera.
Pero ¿por qué ha utilizado el mismo color?
¿Qué ha pasado que ha utilizado el mismo color que ya tenía?
¿Qué ha pasado con esto?
Bueno, esto es súper importante porque hay un valor de colores que se utiliza muchísimo y que, como puedes ver,
incluso a veces se utiliza de forma automática.
Y es el hecho del current color.
Puedes utilizar border color, current color.
El current color va a ser el valor que ahora mismo tiene el texto de ese elemento, ¿vale?
O sea, que si aquí, por ejemplo, le ponemos rojo, el current color automáticamente es color rojo, ¿vale?
Está tomando el valor del color del texto, ya sea del elemento actual o del elemento superior.
¿Qué quiere decir esto?
Pues, imaginad que vamos a quitar esto, ¿vale?
Claro, ahora, por defecto, el color que tiene este H1, pues, es negro porque es el color de todo el body.
Y luego comentaremos el tema de la herencia, ¿no?
Bueno, imagínate que el body yo voy a poner que todo va a tener un color rojo, que no va a ser lo que vamos a querer.
Pero fíjate, le pongo color rojo y aquí en el H1 tenemos que el current color ha hecho que ese borde también sea de color rojo, ¿vale?
Así que es súper importante.
El current color es súper antiguo, es uno de los valores más antiguos del CSS, así que no es algo nuevo,
pero es muy interesante porque luego vamos a ver cuando tengamos botones y pongamos un icono al lado que vamos a querer utilizarlo, ¿vale?
Así que por ahora vamos a tirar esto para atrás para que tengamos en claro esto del 99, quitamos el borde, luego lo arreglamos
y además os enseñaré la parte de cómo hacerlo con un atajo, que hay un montón de atajos en CSS y poco a poco lo vamos a ir viendo.
Vamos a hablar de más selectores porque, claro, trabajar solo con el selector H1, con el body, con las etiquetas directamente,
funcionar funciona, pero es un poco molesto.
Imaginemos que ahora todos los, a ver, vamos a ver si, mira, tenemos un montón de anchos en nuestra página.
Claro, si nosotros ahora mismo le decimos que queremos que todos los anchos sean del color blue, ¿vale?
Bueno, que blue es el por defecto, vamos a poner que sea de color rojo, ¿vale?
Porque queremos diferenciar los anchos de aquí.
Claro, si vamos mirando, fíjate que el problema que vamos a ver es que aquí estos colores también están en rojo,
todos los anchos se han puesto de color rojo.
Uno de los selectores más básicos que vamos a tener son las clases.
Y esto nos va a permitir hacer que indiquemos unos elementos como este y le digamos que este va a tener una clase que sea link.
Y todos los elementos que tengan esta clase, los ponemos aquí, ¿vale?
Vamos a poner este class aquí, aquí, aquí, ¿vale?
Lo pegamos y lo pegamos.
Ahora, estos tres elementos son los que tienen la clase link.
Para llegar a ellos tenemos que ponerle punto link.
Y esto lo que vamos a conseguir es que todos los elementos que tengan esa clase, ¿vale?
Van a estar con ese color.
Pero los anchos que estos no tienen esa clase no van a tener ese color.
Ahora, fíjate, y esto es importante.
¿Ves que tienes un punto ahí?
Esto es súper importante.
El punto lo que indica es que es una clase, pero en HTML tú no ves el punto.
O sea, cuando te refieras a una clase tienes que utilizar el punto,
pero es como indicar que esto es class, ¿vale?
Mientras en HTML ves class, en el CSS te refieres a ellos con el punto.
Igual que podemos hacer clases, también lo podemos hacer con elementos de identificación.
Fíjate que aquí tenemos, por ejemplo, este botón que pone id show.
O sea, solo hay un botón con ese identificador.
Pues te puedes referir a él directamente así.
Pondríamos una almohadilla o, no sé, un hash.
Según como lo digas, porque hay un montón de países que lo dicen diferente.
En España le llaman almohadilla.
Si no, en inglés hash, ¿vale?
Y nos referimos, como decir, esto es una idea y el identificador es show.
Y ahora lo podríamos estilar, ¿vale?
Tendríamos aquí el ver más información y le podríamos cambiar, por ejemplo, el fondo.
¿Qué sería esto?
Fíjate que por defecto los botones están estilados.
¿Ves que tiene un borde y tal?
Lo que tendríamos que hacer aquí sería, por ejemplo, poner que el color sea blanco, que el borde sea vacío, que no tendríamos que tener, ¿vale?
Y ahora sí lo estamos estilando nosotros.
Porque por defecto, de nuevo, ya tiene unos estilos.
Y lo podemos ver muy claramente aquí.
Si abrimos las herramientas de desarrollo, que esto te va a ayudar la vida, ¿vale?
Puedes ver que estos serían mis estilos, los que yo he hecho.
Pero por defecto, en navegador le estaba poniendo todos estos estilos de aquí.
Un montón de estilos, ¿vale?
De cómo aparece, con borde, la fuente y todo esto.
Y eso es lo que estamos justamente sobreescribiendo.
No es recomendable abusar de los ID para estilar.
Buena indicación, es verdad.
La cosa es que siempre que podamos, tenemos que evitar utilizar los elementos directamente y también los identificadores.
¿Por qué es esto?
Porque obviamente, si nos ponemos a estilar identificadores, elementos únicos, constantemente,
lo que va a ocurrir es que vamos a reutilizar muy poco nuestro CSS.
El objetivo que vamos a tener cuando diseñemos nuestras páginas web es reutilizar el diseño lo máximo posible.
Tener que los títulos, subtítulos, los títulos terciarios y el contenido, que los botones, que todo se vea constantemente igual.
Si tú estás a todo poniéndole un identificador único, que lo puedes hacer alguna vez para algo muy específico,
pues lo que va a ocurrir es que vas a estar repitiendo estilos constantemente.
Entonces, la mejor práctica normalmente es intentar tener muchas clases y tener pocos identificadores, ¿vale?
¿Cómo puedes quitar los estilos por defecto en navegadores?
Bueno, Niel, lo estamos viendo. No los puedes quitar porque no le puedes arrancar los estilos por defecto, obviamente, a un navegador,
pero lo que sí que puedes hacer es sobreescribirlo. Luego lo veremos todavía más a la hora de hablar de esto.
Hay una herramienta que os recomiendo mucho para utilizar a la hora de trabajar y practicar el CSS, ¿vale?
Que es esta de aquí, que es Codilink, que lo hicimos en nuestra, la hicimos nosotros en directo.
Y vamos a poner esto por aquí.
Codilink lo que te permite es escribir el HTML y CSS y ver en tiempo real cómo se ve.
Por ejemplo, aquí podríamos poner h1 o la mundo, ¿vale?
Y aquí vamos a tener la posibilidad de poner el CSS, ¿vale?
Y ponemos aquí, pues, color red.
Y aquí vamos a ver un tema bastante interesante, que es el tema de la herencia, ¿vale?
El tema de la herencia. ¿Qué es la herencia?
Algunas propiedades de CSS, como color, font family, se heredan desde los elementos HTML, ¿vale?
¿Qué quiere decir? Pues que si en lugar de estilar el h1, yo voy a estilar aquí, voy a estilar, por ejemplo, un article, ¿vale?
Ponemos un article aquí, y aquí ponemos article, y aquí hacemos esto.
Imagínate que digo, no, todo lo que está dentro del article es que quiero que tenga el color rojo.
Claro, cuando tú haces esto, fíjate que este h1 ya tiene el color rojo.
Y esto es porque se ha heredado el estilo, ¿ok?
Hay algunas propiedades como el color que se heredan.
Un ejemplo muy claro, que lo vas a ver ahora, es el del font family, que esto lo utilizamos constantemente.
En el font family, si nos vamos aquí al curso que teníamos, imagínate que el font family que tengo aquí es bastante fea, esta fuente, ¿no?
En el body, y así conocemos otra propiedad, es la de font family,
que es la que te permite indicar la familia de la fuente que tienes que cargar el usuario.
Las fuentes, una cosa muy interesante, es que ya tiene fuentes en el sistema operativo,
y esas fuentes no necesita cargar ningún recurso el usuario para poder verlas.
Por lo tanto, hay veces que nos puede interesar, a no ser que quieras cargar una fuente en concreto,
nos va a interesar utilizar las que ya tiene el sistema operativo.
Fíjate que aquí tenemos algunas.
Si tú pones System UI, esto estaría cargando las fuentes del sistema operativo.
Estaríamos cargando la del System UI, la de Apple, Blink, Segoe, y va de izquierda a derecha.
Si por lo que sea no puede cargar esta, cargará esta.
Si no, esta, esta, esta, ¿vale?
Va de izquierda a derecha hasta que finalmente cargaría esta última,
que esta última está seguro en todos los sistemas y cargará la que pueda.
Pero lo interesante de esto es que le estamos dando lo que se le dicen fallbacks, ¿vale?
En el caso de no pueda cargar una, carga la siguiente.
Es súper importante siempre tener fallbacks de fuentes por si no puede cargar una,
que al menos nos aseguremos que lo vea de una forma controlada.
Fíjate que ya ha cambiado bastante las fuentes que carga toda la página web.
Fíjate aquí, porfolio, todo se ve mucho mejor.
Y esto se ha heredado porque yo le he puesto en el body, al cuerpo de todo el HTML,
el font family, y font family es una propiedad que se hereda, ¿vale?
Que se hereda.
Por lo tanto, todo lo que está envuelto por el body está heredando el font family.
Y hasta que yo no vaya a un elemento en concreto y le diga, no, no,
tú el font family no utilices el que has heredado, utiliza otro diferente, el mono space, ¿vale?
Y aquí sí que estaríamos como rompiendo eso.
Y aunque está heredando el valor de lo que hemos indicado en el body,
le hemos sobrescrito aquí, le hemos dicho, no,
quiero que cargues una fuente mono space, ¿vale?
Esto sería la herencia que estamos viendo.
No todo se hereda, y esto es importante.
¿Por qué no todo se hereda?
Porque imaginad que tenemos aquí este 15 años de experiencia como ingeniero de software y tal, ¿vale?
Imaginad que tengo este párrafo, este párrafo aquí, que es mainp.
Le vamos a poner una clase que le vamos a poner que sea description.
Nos vamos arriba y vamos a estilar este description, ¿vale?
Description, vamos a poner que tenga un borde con un pixel y le vamos a poner que sea rojo.
Claro, esta propiedad, la del borde, no se hereda.
¿Por qué?
Porque dentro del párrafo de description, fíjate que solo ves un borde.
Si se heredase el borde también, ¿qué es lo que ocurriría?
Que también el elemento strong, este elemento que vemos aquí, también tendría un borde y no lo tiene.
¿Por qué?
Porque no se hereda.
Para que entiendas esto todavía mejor, ¿vale?
Y no tengas ya ningún problema, vamos a ver cómo funciona realmente esto con algunos valores que tenemos en CSS para forzarlo, ¿vale?
Mira, imagínate que tenemos aquí un container.
Vamos a poner aquí un container y vamos a ponerle dentro, pues yo que sé, un child.
Vamos a poner con child, ¿vale?
Todos los CSS que vas a ver, todos los DIPs que vas a ver, van a ser estos.
Vamos a ponerle 9F, vamos a poner aquí hola mundo, ¿vale?
Tenemos aquí este texto, vamos a ponerle bastante fuente, 24 píxeles.
Fíjate que la fuente también se hereda porque estamos poniendo el font size al container y le está afectando al child.
Así que el font size, que sería el tamaño de la fuente, le está afectando, lo está heredando, ¿ok?
Y vamos a poner también el borde 3px solid 09F.
Esta es la forma de hacer un borde con un atajo.
Antes habíamos visto el border width, el border style y tal.
Y esta sería la forma de tener el width, el style y el color en una sola línea.
Vas a ver que en CSS hay un montón de atajos, márgenes, paddings, backgrounds y tal, para hacer las cosas mucho más rápido.
Porque es que si no, sería un rollo.
Como podemos ver, el child, el child que tenemos aquí, este es el container, este es el container y aquí tendríamos el child, ¿vale?
Lo que podemos ver es que el borde solo aparece una vez.
El borde no se está heredando, ¿vale?
¿Cierto?
¿Sí?
¿Qué pasa?
Pongamos aquí que tenemos el child, por ejemplo, ¿ok?
Tenemos el child y le vamos a decir que el borde vamos a heredar, vamos a heredar el valor que tiene del padre.
¿Qué ha pasado aquí?
Esto es un valor especial que tenemos en CSS que podemos indicar.
Hay diferentes valores especiales sobre la herencia que tenemos en CSS.
Uno sería el initial, que establece el valor inicial definido por las especificaciones de CSS.
En este caso, el borde, el valor inicial, no tiene ningún borde y por lo tanto no aparecería.
Luego tendríamos un set, ¿no?
Que sería resetear el valor.
Le quitaríamos las propiedades heredadas, lo pondríamos en no heredables y ya lo tendríamos.
Un set.
Tendríamos un revert, que sería para revertir el valor de la herencia, salvo que haya, por ejemplo, un valor por defecto en el navegador.
Y tendríamos la interesante en este caso, que sería forzar el inerit.
Entonces, aquí sí que estaríamos viendo el borde y el mismo borde que estaríamos viendo en el padre.
O sea, aquí sí que estaría heredando.
¿Y qué quiere decir esto?
Pues lo que quiere decir es que tanto el fontSize, como el color, como el fontFamily, como todos estos,
el valor que tiene por defecto es inerit.
Porque está heredando esos valores.
En cambio, border no tiene inerit.
El valor que tiene por defecto sería initial.
Porque lo que está haciendo es evitar heredar el valor.
Con esto se ve mucho más claro.
Porque cuando pones inerit y lo fuerzas, aquí sí que puedes ver que ahora sí que le afecta.
Pero si le pondríamos o si lo quitaríamos, su valor por defecto hace que no herede ese valor de la propiedad del border.
Así que es súper importante justamente cómo funciona.
Y hay veces que nos puede interesar.
Hay veces que podemos decir, vale, borde, quiero que heredes del padre.
Quiero que heredes también la propiedad border.
Pero ya ves que hay algunas propiedades que se heredan por defecto, hay otras que no.
Y que vosotros sí que vais a poder y tener la posibilidad de indicar cuándo queréis utilizar uno u otro.
¿Vale?
Para justamente decir, vale, pues aquí sí que me interesa que el borde sí que herede.
O el color quiero que no herede.
Pues puede pasar exactamente lo mismo como el tema del font size.
¿No?
Podéis ir al font size y podéis decir, no, pues es que quiero ir al initial, ¿no?
Y tal.
¿Ves?
Si le pones el initial, fíjate que aunque el font size del contenedor del padre era 32.
Cuando vamos al child, el font size no lo hereda, sino que se queda en el valor inicial, ¿vale?
Se queda como establece el valor inicial que está en la, como de la especificación del CSS.
Y ya está.
No intenta heredar y leer el que tenga arriba.
Que hay veces que nos puede interesar y ya está, ¿vale?
Así que tendríamos este.
Y si no directamente, pues podéis poner un revert.
Y el revert lo que intentaría, el revert, sería utilizar el valor por defecto.
Pero tened en cuenta que el valor por defecto del revert es inerit.
Entonces estaría pasando exactamente lo mismo.
Vale.
Pues esto sería un poquito el tema de la herencia, ¿vale?
El tema de la herencia que es súper importante.
Hay mucha gente que me comenta, oye, ¿y qué propiedades son las que heredan?
¿Y cuáles son las que no heredan?
A ver, es bastante complicado esto porque no puedo explicaros todas las propiedades que heredan y no heredan.
Estaríamos aquí todo el día.
Pero una cosa muy fácil para que tengáis claro esto.
Si vais a cada una de las propiedades en MDN, que es de referencia muy chulo, ¿vale?
Fijaos en una cosa.
En todas y cada una de las propiedades vais a poder mirar si hereda o no hereda.
Aquí, ¿vale?
Ves que pone formal definition.
En cada una de las propiedades que vais a tener en MDN vais a encontrar la formal definition.
La definición formal.
Y en todos vais a ver el valor inicial y si se hereda o no se hereda, ¿vale?
Vais a ver si se hereda o no se hereda.
Si se hereda, entonces pondrá aquí un yes.
Por ejemplo, font size hemos visto que sí.
Vamos a poner el font family.
Vais a ver que también va a decir que sí.
Inherited, ¿vale?
Lo voy a buscar así.
¿Ves que pone yes?
Y si buscáis border, vais a ver que pone false.
Entonces, normalmente son bastante obvias porque son...
A ver, un border no tendría ningún tipo de sentido de que se herede.
Si no, sería una locura.
Pero, ¿ves?
Pone que no.
Y esto lo podéis hacer para todas.
Por ejemplo, el background.
¿El background se hereda o no se hereda?
Bueno, pues si tenéis alguna duda, os vais a la formal syntax y aquí os lo va a decir siempre.
Os va a decir si se hereda o no se hereda.
Bueno, aquí veo que no lo pone.
Inherited, no.
¿Ves?
Así que si tenéis alguna duda a nivel de propiedad, para cuál es la que se hereda y la que no se hereda,
pues que sepáis estas.
Las que se heredan normalmente tienen que ver con las fuentes y el color del texto y cosas así.
O sea, suelen ser más las que no se heredan que las que se heredan, ¿vale?
Pero está bien muchas veces el hecho de entender cuáles son las que se heredan para que no haya ningún tipo de problema.
Pero esta es una cosa muy básica y muy importante entender la herencia porque si no hay muchas veces que se tienen problemas, ¿vale?
Vamos con el tema ahora de las pseudoclases.
Porque, ¿qué pasa?
Que yo hasta ahora os he enseñado los selectores, os he enseñado cómo poner algún CSS,
pero resulta que los elementos HTML tienen algún tipo de estado concreto en el que se encuentran.
A veces el HTML se encuentra en diferentes estados.
Mira, voy a quitar el borde este que hemos puesto por aquí.
Este borde lo vamos a quitar, ¿vale?
Vamos a quitar alguna cosita.
Vale, ¿qué pasa?
Que hay elementos HTML que se pueden encontrar en estados especiales o están en una situación especial
y vamos a querer controlar el estilo que va a tener ese elemento en ese estado.
Por ejemplo, cuando yo estoy encima de este anchor, ¿vale?
De este link, ocurre algo.
Hay un estado especial que sería el estado de hover.
Así que podemos utilizar lo que se llama pseudoclase.
La pseudoclase, podemos decirle que estos links, ¿ves?
Estos links que teníamos de color rojo, cuando me ponga encima quiero que ocurra algo.
A esto se le llama pseudoclase.
Y hay una pseudoclase que sería para cuando está en el estado de hover.
El estado de hover significa que tenemos ahora mismo el puntero encima de ese elemento.
Así que le podemos decir que el color pase a ser amarillo cuando esté encima.
Solo con este cambio, todos los elementos que tengan este selector cuando están en el estado de hover
van a cambiar la visualización, ¿no?
Y aquí podemos ver, es el color más horrible del mundo, pero podemos ver que está cambiando.
Justamente esto está cambiando.
Podemos hacer un montón de cositas más, ¿no?
Le podríamos cambiar el fondo, que ya sabemos cómo lo podemos hacer, el borde y todo este tipo de cosas.
Pero voy a hacer una cosa muy interesante y muy importante porque hay muy poca gente que entiende la diferencia entre borde y contorno.
Y a mí me parece que es muy básico.
Hemos visto el borde, ¿no?
El borde, fíjate, si ponemos aquí, vamos a poner que cuando hagamos el hover, le vamos a poner un borde a todos, ¿vale?
¿Vale? ¿Qué es lo que está pasando aquí?
Lo que está pasando es que cuando me pongo encima, ¿ves que da un salto?
Está dando como un salto los elementos.
Es súper raro.
Por muy poco que le ponga de borde, por ejemplo, si le pongo un 3, ¿ves que da como un salto?
Lo de Twitch aquí está dando un salto.
Bueno, existe, el borde sería el borde que tenemos en el contenido, pero hay otra cosa que es el outline, que el outline lo que podríamos decir es el contorno.
Y la diferencia entre el borde y el contorno es que el borde sería algo que afecta al contenido y el contorno es algo que se está dibujando encima del contenido.
Así que si en lugar de utilizar el borde, utilizamos el outline, lo que vamos a ver aquí de diferencia es que ahora no da ningún salto, ¿vale?
El borde sí que está afectando a su ancho porque es algo que afecta a su contenido y el outline es algo que no está, es un contorno que se dibuja encima y por lo tanto no cambia el ancho y no da este salto.
Esto es algo súper básico que os reirías muchas veces la de gente que tiene este error en sus páginas web, en empresas de miles de millones de euros y que al final es tan fácil a veces como utilizar el outline en lugar de utilizar el borde y ya está, en botones y todo esto, ¿vale?
Así que ahora ya sabéis la diferencia entre borde y la diferencia entre contorno.
Obviamente si le pones el contorno 100 píxeles, pues lo que va a pasar aquí es que va a ser muy difícil de leer, pero fíjate que pese a ello en ningún momento cambia el texto de situación.
En cambio si le pones el borde vais a ver que esto pues es una locura, ¿no? Y cambia incluso el layout.
Esto lo vamos a ver y vamos a revisar más cuando hablemos del modelo de la caja, pero bastante importante.
Vamos a utilizar el outline por ahora y ya está.
A ver, hay más, hay más pseudo clases, obviamente tenemos el hover, pero también tendríamos el active.
El active se aplica cuando un elemento está activo, como cuando se hace justamente click.
Y lo que podemos hacer es cambiar, que cuando se haga justo click, ¿vale?
Fíjate, bueno, le he puesto 100 píxeles que es demasiado, ¿no?
Cuando le hacemos exactamente click, vamos a cambiar aquí, aquí, he pegado esto aquí, vale.
Fíjate, el active sería cuando justamente le estábamos haciendo click.
Cuando le hago click, ¿ves? Se pone en color azul.
Cuando suelto el click y me pongo encima, está de color rojo.
Así que ya tenemos dos estados diferentes.
Y luego finalmente tendríamos, por ejemplo, también el focus, que es cuando recibe el foco.
En un campo de entrada, por ejemplo, si tenemos un input aquí abajo, ¿ves?
Que aquí teníamos diferentes inputs, ahora que tiene el foco, le ha puesto por defecto este borde.
Pero podríamos nosotros cambiar esto.
Podríamos decir que los inputs, cuando tienen el focus, vamos a poner que el borde sea un píxel, sea de color amarillo, ¿vale?
Y podríamos ver aquí, este input, no sé si me lo...
No sé si le está gustando el input a este.
Ah, es que igual se ve, pero le está quitando el por defecto.
Vamos a ponerlo en el link, a ver si lo puedo ver.
Y aquí lo vamos a hacer así, ¿vale?
¿Veis? Ahora lo teníamos ahí el focus, que se estaba viendo.
Pues ahí lo tenéis.
Casi no se ve en amarillo, pero bueno, para que lo tengamos.
Hay otros, a ver, teníamos el disable, tendríamos un montón.
Una cosa muy interesante para que sepáis, si queréis estilar este tipo de cosas,
cuando vais a las herramientas de desarrollo, aquí, podéis simular estos estados, ¿vale?
Estos estados especiales, para no tener que estar encima y verlo,
que sepáis que podéis ir al elemento, lo podéis seleccionar,
y aquí vais a ver que hay una opción que pone dos puntos hop, de hover, ¿no?
Aquí le podéis dar, y tenéis el active, por ejemplo, ¿ves?
Podemos simular el active, y ahora lo vemos estilado sin necesidad de hacerlo,
sino que lo está forzando.
Podemos simular el focus, podemos simular el hover,
si es un enlace que hemos visitado, este tipo de cosas, ¿vale?
Entonces lo podéis forzar para realmente estilarlo y ya está.
10 años en la industria como back-end, y nunca supe lo del outline XD.
A mucha gente le pasa.
El before y el after no son pseudo-clases, otro error muy típico,
son pseudo-elementos, que es una cosa totalmente diferente, ¿vale?
Luego lo comentamos, pero ahora mismo estamos comentando las pseudo-clases, ¿vale?
Que son como estados o situaciones especiales en las que se encuentran elementos HTML.
Por ejemplo, una pseudo-clase también podría ser el first child.
Mira, aquí tenemos las experiencias, ¿no?
Experiencia, tenemos a The Vintage, Hubie, Nascencia.
Claro, imaginad que aquí, ¿dónde tenemos las experiencias?
Aquí, ¿no? Los Lee.
Vale, si buscamos los Lee, digo, venga, vamos a estilar los Lee.
Y le digo, vamos a poner que sean de color, pues, pink.
Bueno, pues claro, ahora estilan todos, pero imagínate que dices,
no, quiero que el primero, solo el primero, el primer elemento se ponga de color rosa
y quiero que el resto no se ponga de color rosa.
Para eso hay una pseudo-clase, porque estaríamos hablando de una situación especial
del elemento que se llama first child, ¿vale?
Y esto es lo que estamos diciendo, es solo el primer hijo que sea Lee,
de una lista de Lee's, el primero es el que queremos que se ponga de color rosa.
Y lo mismo podríamos decir con el último.
Podemos decir, bueno, solo el último hijo queremos que sea de color lila, ¿vale?
Y fíjate ahora que el primero se ve rosa, el último se ve lila
y el del medio no se ve de ningún color, o sea, se ve normal con el color que teníamos.
Esto también serían pseudo-clases, porque estamos hablando de una situación especial
en la que se encuentra este elemento.
Vamos a, podríamos hablar ahora también de selectores combinados,
para que entendáis esto mejor, el tema de cómo referirnos a estos selectores.
Y es que hasta ahora, si os fijáis, estamos utilizando un solo selector,
o sea, un H1, un body, un link, solo el link que es del estilo hover.
El link, ¿sabes? Siempre estamos utilizando uno, aunque estemos utilizando pseudo-clases.
Son un Lee que tiene esto.
Y no estamos haciendo selectores combinados, ni estamos utilizando operadores, ni nada.
Podríamos haber, y podríamos ver algunos.
Por ejemplo, podríamos indicar, imaginad, vamos a poner aquí en un body link,
vamos a poner el ejemplo, vamos a hacer esto pequeño,
imaginad que tenemos aquí un párrafo, ¿vale?
Que podamos poner, a ver, Lorem, no.
Hola, mundo, joven, joven emponzoñado de whisky.
Menuda figurota, ¿vale?
Vamos a poner esto, ¿vale?
Imaginad, vamos a poner que este P tenga mucho, mucho font size, ¿vale?
Imaginad que el whisky es importante, porque es una bebida, pues ya sabéis, que nos da energía.
Lo vamos a poner con un strong, queremos que esté ahí en negrita.
Pero también aquí vamos a tener, pues, un strong, que vamos a decir,
la frase que te cambiará, cambiará la vida, ¿no?
Vale.
¿Qué pasa con esto?
Tenemos aquí un strong fuera de este párrafo, y aquí un párrafo, y dentro un strong.
Claro, si nosotros, con las limitaciones que hemos tenido hasta ahora,
siempre estamos utilizando una sola etiqueta,
cuando yo intente poner el strong, pues, obviamente,
si le pongo el color 09F, tanto el de fuera como el de dentro,
vamos a ver que tiene este problema.
Imaginemos que digo, no, solo quiero que sea el de dentro de la P.
Una cosa que podemos hacer, obviamente, podría poner una clase,
y poner aquí, pues, important, ¿vale?
Bueno, important, vamos a poner bold, ¿vale?
Y aquí en el bold, pues, le cambiamos por una clase.
Esto ahora, habremos conseguido nuestro objetivo,
porque hemos conseguido que este ahora no se estile,
no se vea el color, este strong,
porque nos estamos refiriendo solo a los que tenemos aquí dentro, ¿no?
Podemos repetirlo, y aquí veremos que también figurota,
si lo ponemos así, pues, también se estilará.
Perfecto.
Ahora bien, hay veces que, ya sea por clases,
porque si no, podríamos estar escribiendo clases y clases constantemente,
y hay veces que nos interesa tener clases.
Igual, imagínate que tenemos aquí otro párrafo,
y resulta que aquí tenemos una clase que sería la descripción,
description, y aquí la que sería la de secundaria, ¿no?
Secundaria.
Vale, pues, resulta que el de arriba, por lo que sea,
me gustaría que sí, que tuviese los bold que tenían el color azul,
pero me gustaría que los de abajo sean de color rojo.
Claro, como ahora estoy directamente estilando el punto bold,
necesito de alguna forma tener más contexto de que solo quiero que sean los del primer párrafo.
¿Cómo podría lograr esto?
Para esto utilizamos los selectores combinados.
O sea, le podríamos decir, oye, solo los que están dentro de description,
esos bold, son los que voy a querer que tengan el color de este color azul.
Y los que son de secondary, voy a querer que tengan el color rojo.
Lo que estamos consiguiendo con esto, a la hora de combinar selectores,
es ser más específico de cómo queremos estilar realmente las cosas, ¿vale?
Y simplemente poniéndole como un contexto sobre cuál es el padre,
lo que va a hacer es decir, primero voy a buscar esto de la izquierda,
cuando encuentre este elemento, voy a buscar el siguiente que me está poniendo aquí, ¿no?
Entonces, primero encuentra este, y al encontrar este, dice, vale,
dentro de este, este, y este, y ya se olvida de todo lo demás.
Le estamos dando como más contexto.
Ahora, otra cosa que podríamos hacer, imaginad que tenemos, por ejemplo,
y este es un ejemplo muy típico, tenemos item1, ¿vale?
Vamos a poner item2, pero dentro también tenemos otra lista que sea un ul, ¿vale?
Y aquí vamos a poner li, subitem1, y os voy a enseñar, vale, 2 y 3, ¿vale?
Tenemos aquí unas listas, vamos a ponerle, vamos a estilar el ul, fontsize 100px, ¿vale?
Bueno, 100px igual me he pasado, ¿eh?
Lo que estamos haciendo aquí es que tenemos items y dentro tenemos subitems.
Aquí alguien puede pensar, vale, quiero estilar los li,
y quiero poner que voy a utilizar justamente, pues esto, ul li, ¿no?
Y voy a poner aquí color yellow y ya está.
Bueno, color yellow igual se ve un poco, vale, así.
El problema que tenemos aquí es que imagínate que por lo que sea
solo te quieres referir a los primeros de aquí.
De nuevo, podríamos utilizar clases, podríamos hacer todo esto.
Pero también hay diferentes operadores en los selectores
que te permiten discriminar cuáles son los elementos a los que te quieres referir.
Por ejemplo, imagínate que solo son estos dos elementos
que son los primeros hijos los que quieres que tengan esto, ¿no?
Que quieres que tengan el color púrpura o lo que sea.
Vamos a ver uno nuevo en lugar de utilizar siempre el color.
Vamos a utilizar la opacidad, ¿vale?
Vamos a cambiarle la opacidad.
Imagínate que queremos bajar la opacidad.
Esto es interesante porque fíjate que cuando ahora estoy trabajando la opacidad,
fíjate lo que pasa aquí.
Que este se ve como dos veces, ¿verdad?
¿Ves que ahora se ve como endegradado?
¿Qué está pasando?
Lo que está pasando aquí, y esto es muy interesante,
es que al cambiarle la opacidad y ponérsela a un 70%,
está pasando que una vez se está aplicando este ul a todos estos li
y una segunda vez se está aplicando a este ul para todos estos li.
Y por lo tanto, está haciendo este efecto en el que primero lo vemos como una opacidad mayor,
pero luego lo que está pasando es que se está aplicando una opacidad menor
sobre una opacidad menor.
Así que esto a veces hay que tener mucho cuidado porque como podéis ver,
al final, este selector lo está llevando una vez aquí y una segunda vez aquí.
Cuando hablamos de un color, no lo estáis notando,
pero cuando hablamos de una opacidad, pues como veis, sí que tiene un impacto.
Así que hay que tener cuidado con esto.
Imagínate que por lo que sea, digo, no, no, esto lo voy a arreglar.
No quiero que aplique a todos.
Solo quiero que aplique al primer nivel del i.
¿Qué es lo que va a pasar con esto?
Lo que podemos hacer es decirle, oye, solo quiero que lo hagas al primer nivel.
Vale, pues le ponemos este operador.
El operador, lo que va a pasar con esto es que solo lo haga al primer nivel.
Pero aquí vamos a ver que está ocurriendo exactamente el mismo problema
porque tenemos aquí un ul y está pasándole a este,
pero este ul también le está pasando.
O sea, estamos viendo exactamente lo mismo.
Aquí no vamos a ver ninguna diferencia entre que sea el primer nivel
o sean todos los niveles exactamente igual.
¿Ves? Lo vamos a ver exactamente igual.
Lo que podríamos hacer en este caso podría ser cambiar a lo mejor esto.
A ver qué se me ocurre, un ejemplo que se me ocurra rápidamente.
Porque si le ponemos colores nos va a pasar un poco lo mismo.
Bueno, a ver, podemos cambiar esto y ya está, no pasa nada.
Si le ponemos por un article, es que quería reutilizar el mismo ejemplo,
que quería enseñaros que se podían aplicar dos veces los mismos ejemplos
y ahí se va a hacer un poco complicado.
¿Vale? Vamos a poner aquí un strong.
¿Vale? Y vamos a poner esto.
Esto es en negrita.
¿Ok?
Y aquí vamos a poner footer.
Y dentro del footer vamos a tener un párrafo que sea escrito por midudev.
¿Vale? Y ya está.
Entonces tendríamos, por un lado, dentro del article,
un ap con esto es en negrita.
Bueno, esto lo pongo que quita.
Esto es el contenido del artículo.
Del artículo.
¿Vale? Y dentro teníamos un footer con un ap también.
Lo que tenemos aquí es que si hacemos el article,
le decimos, oye, font size de 24 píxeles.
¿Vale? Hasta aquí bien.
Y le decimos que el p...
Aguacate.
Aguacate.
Aguacate.
Le vamos a poner que el p va a tener un color de 3, 3...
Bueno, de blue.
¿Vale? De color azul.
Aquí podemos ver justamente este problema.
El article p se está refiriendo tanto a este
como a este que tenemos dentro del footer.
Le podemos utilizar el operador este
para indicarle que solo nos queremos referir al selector
que es inmediatamente un descendiente en el primer nivel.
O sea, lo que va a pasar aquí es que le va a aplicar los estilos a los párrafos
que son hijos directos del elemento article.
Para que veamos bien la diferencia, ¿no?
Si le quitamos el operador como este párrafo y este párrafo
están por debajo de article, busca dentro de article todos los párrafos.
Si ahora lo que hacemos es utilizar el operador este,
lo que vamos a ver es que solo se lo va a aplicar a este.
¿Por qué?
Porque este operador lo que le está diciendo es solo a los hijos directos,
¿vale?
A los primeros...
Al primer descendiente, ya sea aquí en este...
O sea, puede ser más de una vez.
Si tenemos otro, pues otro.
Otro artículo, ¿vale?
Pues lo va a aplicar.
Pero no le va a llegar al footer.
¿Por qué?
Porque el footer no sería hijo de nivel directo,
sino que sería el hijo del hijo, ¿vale?
Y ahí tendríamos ya la diferencia para que veas este operador, ¿vale?
Para que lo veamos, ¿no?
Y tendríamos este párrafo y este párrafo,
por más veces que salga aquí,
pues vais a ver que está de color negro,
pero en cambio los hijos directos que son párrafos del article
sí que lo tendríamos, ¿vale?
Si ahora aquí, por ejemplo, pondríamos otro párrafo para seguir,
lo que vamos a ver es que sí que es un hijo directo,
aunque no esté...
Aunque esté después del footer, sí que es un hijo directo,
porque está en el siguiente nivel, ¿ok?
Para que sea en el siguiente nivel, ¿ok?
Así que eso sería interesante de este operador.
Hay otros operadores,
porque al final hay un montón de operadores.
Por ejemplo, tengo aquí un ejemplo.
Este sí que me había puesto un ejemplo,
porque la verdad es que me tenía que pensar ejemplos.
Mira, tengo este de aquí, ¿vale?
Os voy a enseñar otro operador.
Con este article, tenemos aquí,
esto es rojo porque aparece antes del párrafo, no sé qué.
Vamos a intentar conseguir esto.
Vamos a intentar con un operador hacer que este span no aparezca rojo,
pero los spans que están realmente dentro sí que aparezcan en rojo, ¿no?
Vamos a utilizar un operador que es el del hermano siguiente.
Hemos visto el del hijo directo,
pero también hay uno que sería el del hermano siguiente.
El hermano siguiente lo que sirve es para decir,
cuando tengo un elemento que está justo después,
justo después o después, ¿vale?
Pero los que están antes no sirven.
Pues me los estilas, por ejemplo.
Fijaos aquí que hay algunas cosas que están en rojo y otras que no.
Lo que tenemos es que este span está antes del párrafo.
Por lo tanto, por eso esto es negro, ¿no?
¿Por qué?
Porque está antes.
Luego aquí tendríamos un párrafo, ¿vale?
Teníamos aquí un párrafo, el párrafo,
y aquí pues tenemos contenido, contenido, ¿vale?
Contenido y tal.
Este contenido, pues aquí puedes poner código.
Bueno, vamos a quitar este código.
Fíjate este span.
Este span está en rojo.
Esto está en rojo porque sale después del AP.
Y este operador lo que dice es,
todos los elementos span que vienen después del AP,
me los estilas.
Claro, si está antes, pues no me los estilas.
Si está después, sí que me los estilas.
Y ya está.
Por eso estáis viendo justamente que sale de color rojo, ¿ok?
Para que lo veáis.
Ahora, este de aquí, por ejemplo, no está en rojo
porque está fuera del article y no está justo después del span.
Si queremos que este span aparezca de color rojo,
ponemos aquí un AP y lo que veríamos es que de repente,
¿ves?
Aparece el color rojo.
Este sería el del operador siguiente, ¿no?
Si sale ese elemento justo después.
Y luego tendríamos el de el inmediatamente después.
Fíjate en este ejemplo, ¿vale?
Como tenemos el párrafo y después sale el span,
pues sale en rojo.
Si pones en medio un code y pones código aquí,
va a seguir saliendo en rojo.
¿Por qué?
Porque este span sale después.
Hay otro operador, este sería el de tilde,
que sería para que cuando salga después,
pero hay uno que te asegura que tiene que ser justo el hermanos directo,
que sería el más, ¿vale?
Ahora no sale en rojo,
pero si quitamos el código, sí que aparece en rojo.
Así que esos serían tres operadores que tenéis,
que son bastante interesantes a la hora de referiros a elementos, ¿vale?
Ya tenéis el mayor que para un hijo directo,
tendríais la tilde para hermanos que aparecen después
y el más para que sea justamente el que viene después, ¿vale?
Tenéis tres operadores que son bastante interesantes
y que muchas veces te pueden salvar la vida directamente
cuando tengas que estilar.
¿Todo bien?
Y si hay dos spams después de una P,
ambos tendrán el estilo, efectivamente.
Bueno, en este caso,
en este caso uno tendrá el estilo,
porque en este caso con el más,
que tiene que ser un hermano justamente posterior,
el primero sí que es justamente posterior,
pero el siguiente no,
porque el hermano anterior es un span, ¿no?
Así que este operador funcionaría para esto.
Este operador es muy interesante
y se utiliza a veces para separar, ¿no?
Por ejemplo, si tienes un botón al lado de un botón,
¿no?
Tienes un botón al lado de un botón,
cuando tenéis dos botones,
hola,
y tenéis otro botón,
¿qué es lo que pasa aquí?
Bueno, que los botones normalmente
pues están ahí bastante juntitos.
Lo que se puede hacer es decir,
bueno, el botón que está justo después del botón,
le ponemos una separación
y así el primero no tiene ningún tipo de problema
y el siguiente es el que sí que detecta
que está al lado del otro botón y tal.
O sea, se puede utilizar para un montón de cosas.
Hay cada uno,
o sea, es que hay un montón de posibilidades.
Vamos ahora con una de las cosas más importantes de CSS,
que es la cascada.
Es uno de los conceptos más importantes
y más complicados a la vez,
porque la cascada es muy problemática.
La cascada, que es la C de CSS,
es lo que le da todo el sentido a CSS,
pero al final es lo más problemático,
porque hay algunos casos en los que los conceptos se mezclan.
Hay veces que a mí no me gusta mucho explicar
tanto la cascada,
porque a mí me parece bastante avanzado en algunos casos,
pero le voy a dar una pincelada
para que lo entiendas,
los problemas que podemos tener
y al menos la parte más básica de la cascada.
Vamos a poner aquí un texto,
con la P,
y hablemos de la cascada.
Vamos a poner aquí font size 24 píxeles,
color 09F,
y le ponemos aquí font family,
que sea el system UI.
Entonces ya se ve así,
buenísimo,
font weight,
bold.
Hasta aquí bien, ¿no?
CSS,
maravilloso,
tremendo,
me encanta,
es mi cosa favorita del mundo,
y resulta que alguien hace esto.
¡Pam!
Vale.
¿Qué está pasando aquí?
Lo que está pasando aquí
es que estamos estilando el mismo elemento,
estamos llegando al mismo elemento,
aunque sea de formas diferentes,
pero aquí tenemos el elemento con diferentes CSS,
y aquí tenemos el mismo elemento con otros CSS.
Y podemos ver que lo estamos viendo de color rojo,
pese que aquí lo habíamos puesto de que era de color azul.
Así que lo que está pasando es que lo estamos sobreescribiendo,
¿no?
Lo estamos sobreescribiendo.
Lo que está pasando aquí es que estamos viendo la cascada en acción.
La cascada es lo que está determinando el orden
en el que vamos a ver los estilos y cómo se están aplicando,
sobre todo cuando hay veces que está habiendo conflictos.
Y te voy a decir una cosa,
siempre hay conflictos.
Siempre hay conflictos.
En el sentido de que, mirad,
este párrafo ya tenía estilos,
y nosotros lo que hemos hecho es sobreescribir.
Entonces, siempre, siempre, constantemente,
lo que estamos haciendo es sobreescribir estilos.
Los navegadores ya tienen unos estilos por defecto,
las cosas ya tienen un color,
en el que vemos el color de fondo,
el color del texto,
todo ya tiene un estilo.
Pero nosotros siempre lo vamos a querer sobreescribir.
Entonces, lo que está pasando aquí,
no deja de ser lo que ya está pasando en CSS en general.
Y una de las cosas que ya podemos descubrir con este ejemplo
es que cuando se sobreescribe,
lo que tiene en cuenta es la posición y orden de aparición.
O sea, en qué orden aparecen las reglas de CSS.
Y la que aparezca más abajo va a tener más fuerza
que la que aparece más arriba.
Eso sería uno de los conceptos de la cascada,
que la posición y orden de aparición tienen que ver.
Y las que están más abajo
son más importantes que las que tienen arriba.
Porque si yo ahora vuelvo a poner esto
y le pongo que esto es de color púrpura,
pues toma, de color púrpura.
De hecho, y esto es súper interesante,
esta es la base de utilizar fallbacks en CSS.
Y te explico por qué, ¿vale?
El tema es que hay un truco
que se utiliza muchas veces en CSS
que es para utilizar fallbacks.
¿Qué quiere decir?
Pues que hay veces que por lo que sea
quieres utilizar algo que sea muy moderno
en CSS que no lo puedas utilizar.
Por ejemplo, el OK LCH, este que hemos visto antes.
Hemos visto que teníamos este OK LCH,
con el color picker.
Imagínate que quieres utilizar este
y dices, no, quiero este color
que es maravilloso.
Y lo vamos a utilizar aquí en Codilink y lo ponemos aquí y tal.
¿Qué pasa?
Que este OK LCH, por desgracia, no es compatible con todas las...
Si miramos en el Can I Use, pues igual hay algún navegador
que por lo que sea no lo soporta.
Tiene un soporte de 87%
y por lo tanto nos puede dar problemas.
O sea, hay alguno que no funciona.
¿Qué podemos hacer para aprovecharnos del CSS
y así decir, bueno, yo quiero utilizar este,
pero si por lo que sea no funciona,
vamos a ponerle un fallback
en el que el color que vamos a ver,
vamos a ver, es un azul.
Vale, pues le vamos a poner este de aquí.
Yo el que quiero realmente es este,
pero bueno, le vamos a poner un fallback.
¿Qué es lo que va a ocurrir?
Como siempre va a intentar aplicar el que está más abajo,
primero va a intentar aplicar este.
Pero si por lo que sea ese navegador no lo soporta,
pues lo va a ignorar y va a utilizar este directamente.
Así que así lo que estamos haciendo
es intentar tener un fallback siempre
en el que funcione el que queremos.
Y si no lo soporta, pues al final
que ponga el que le hemos puesto por defecto.
Y así es como que estaríamos haciendo más compatibilidad.
O sea, ya ves que muchas veces
este tipo de cosas tiene mucha funcionalidad.
Pero eso es trabajar de más.
Madre mía, de verdad, ¿dónde salís?
¿Dónde salís?
Darka Cots.
¿Cómo que es trabajar de más?
Es trabajar de más.
La madre que os parió.
Pues se trabaja, que hay que ganarse el sueldo.
No, hombre, esto muchas veces es importante
porque lo que se ve esto es una mejora progresiva.
¿Vale?
Una mejora progresiva.
Hombre, hay que trabajar, hay que mover las manitas.
Luego, hay otro tema que también es importante.
Mira, es lo que se le llama especificidad.
Porque en CSS tenemos un algoritmo que determina
que ese lector CSS es el que tiene la coincidencia más fuerte.
Por ejemplo, imagínate que este párrafo tuviese una clase
que sea text.
Y aquí vamos a hacer que esto sea el text
y esto que sea el red que hemos puesto antes.
¡Ostras!
¿Y ahora qué ha pasado?
Bueno, ¿por qué cuando esto era p?
Fíjate que estaba de color rojo porque se sobreescribía.
Pero cuando hemos hecho esto, resulta que,
aunque esto está más abajo y se refiere al elemento,
al mismo elemento que tenemos aquí,
fíjate que ahora se ve de color azul.
Bueno, CSS tiene un algoritmo que determina el selector
que tiene la coincidencia más fuerte.
Que básicamente va a calcular cómo de específico
es este selector que hemos puesto aquí
y va a decir, bueno, utilizando el algoritmo
que tiene diferentes reglas y normas,
va a decir, bueno, como esto es más específico que esto,
que es más general,
lo que vamos a hacer es vamos a aplicar este
pese a que este esté más abajo.
Normalmente esto se utiliza con un cálculo que hay de tres niveles.
A, B, C o X, X, Y y Z.
¿Vale?
Que tendríamos el primer nivel,
que el primer nivel lo que nos va indicando,
por ejemplo, bueno, lo voy a enseñar con una calculadora
que es la mejor calculadora del mundo.
¿Vale?
El primer nivel sería si tiene IDs.
¿Vale?
Aquí podríamos poner este selector para que lo veamos.
Este selector, vamos a poner este selector
para que veamos primero aquí
y os lo iré complicando para que lo veamos viendo
cada vez más complicado.
Y así podéis comparar.
¿Vale?
Tendríamos este selector que tiene,
¿cuántas IDs tiene?
No tiene ninguna, por lo tanto, puntuación,
la primera puntuación del primer nivel sería cero.
¿Cuántas clases tiene atributos o pseudoclases?
Pues tiene una.
¿Vale?
Pues la segunda puntuación sería un uno.
Y luego, ¿tiene elementos o pseudoelementos?
Un cero.
No tiene, por lo tanto, un cero.
Así que la puntuación sería cero, uno, cero.
Y esto lo tendríamos que comparar con este de aquí,
con la P.
Que es un párrafo.
No tiene IDs, no tiene clases y tiene un elemento.
Como os podéis imaginar,
cada nivel de estos es más potente que el siguiente.
Así que si, por ejemplo, ponemos aquí una ID,
text, esto va a ser más potente que el punto text.
Y aquí lo podéis, justamente,
le podéis poner sort by specificity
y os va a decir cuál es el que ganaría por específica.
Las IDs son las más potentes.
Si utilizáis una ID, son las que van a estar más arriba.
Pero claro, si vais a comparar una ID
con un A con ID,
lo que va a ocurrir aquí es que nos vamos a encontrar
que cuanta más, cuando haya un empate,
va a estar viendo los niveles inferiores.
O sea, si los dos tienen ID,
en la primera puntuación tiene un 1,
hay empate y, por lo tanto,
va a haber los siguientes niveles.
Imagínate que aquí ponemos text,
pero vamos a poner que también sea description text.
Aquí podemos ver que los tres tienen una ID,
o sea, todos están repetidos,
están empatados en el 1,
entonces mirarían el siguiente nivel.
El siguiente nivel, este es un 0,
este es un 0 y este es un 1.
Por lo tanto, si los ordenamos,
podemos ver que se queda arriba,
el que tiene el elemento se quedaría segundo
y el que no tiene ninguno se queda el tercero.
Así que esto es súper importante a la hora de entender
cuáles son los niveles que tenemos, ¿no?
Los niveles de especificación.
¿Qué pasa con esto?
La especificación es una de las cosas más complejas de CSS
y, por lo tanto, vamos a ver más adelante
que hay formas de evitar esto.
Por ejemplo, hay metodologías que te ayudan
a cómo tienes que nombrar tus clases
para evitar tener que luchar con la especificación.
Hay un montón de frameworks como Tailwind CSS
que lo que hace es reventar totalmente la especificación
para que tú no te tengas que preocupar de eso.
Hay un montón de posibilidades,
pero es importante que entendáis que por debajo
lo que estamos utilizando cuando hay un empate es esto.
¿Y por qué es importante entenderlo?
Pues es bastante importante porque muchas veces,
y seguro que te ha pasado, esta pregunta del millón.
¿Pero por qué este estilo no se aplica?
Pero si lo estoy haciendo aquí, ¿por qué no se aplica?
¿Vale?
Pues lo que podéis hacer muchas veces en este tipo de cosas
es, si vais aquí a Codilink,
que imaginad que aquí tenemos un párrafo
que también tiene una idea,
y imaginad que hay un empate
y no entendemos por qué esto se está viendo de color púrpura
cuando yo lo que estoy esperando por mi CSS
es que se ve azul.
Pues lo que podéis hacer en estos casos,
si abrís las herramientas de desarrollo,
es que vais a poder ver también
qué es lo que está machacando.
¿Vale?
Le dais un clic y aquí vais a ver.
Además, ¿veis que si os ponéis aquí,
os pone la especificidad?
Esto es súper importante, ¿vale?
Esto muy poca gente lo sabe,
que las herramientas de desarrollo os dice aquí,
cuando os ponéis encima, os dice especificidad.
Y ves que pone 1, 0, 0.
1 es el primer nivel de puntuación,
el 0, segundo nivel de puntuación,
y el 0, este, el tercero, tercer nivel de puntuación.
Y aquí vas a poder entender
por qué este te está quedando más arriba.
Oye, el estilo que tiene más especificidad
es este de aquí arriba,
fíjate que es el color purple,
te quedas encima y dices, vale, este es 1, 0, 0.
Y cuando te pones aquí abajo,
especificidad 0, 1, 0.
Y aquí entonces estás entendiendo.
Y fíjate que este está atachado.
¿Por qué está atachado?
Pues este está atachado justamente
porque el texto es más específico
y por lo tanto lo está poniendo arriba.
¿Vale?
¿Qué tiene más especificidad todavía?
Pues un estilo en línea.
Si aquí en el estilo en línea
ponemos que es yellow,
¿vale?
Se va a poner amarillo.
Y los estilos en línea,
aunque no lo hemos comentado,
porque esto a mí me parece muy mala práctica
y muy pocas veces los tenéis que hacer,
son los que utilizaríamos como un atributo
directamente en el HTML.
Si aquí ponéis style,
podéis poner lo que se le llaman estilos en línea.
Y podéis utilizar y estilar
los elementos HTML directamente.
Aquí, por ejemplo,
podríamos decirle
que esto sea de color naranja.
Y vais a ver
que este todavía
tiene más especificidad
que cualquier elemento
que pongáis aquí.
¿Por qué es importante saber esto?
Es importante
porque hay muchas veces
que lo que queréis
es cambiar con JavaScript
pues un estilo
para poner un color concreto
que no sé qué.
Y a veces se puede utilizar
estilos en línea
aplicados con JavaScript
para conseguir esto.
Ya sea estilos, fondos,
que el usuario pueda cambiar el color
y al final,
como son valores infinitos,
pues puedes usar este tipo de cosas.
Hay más formas de saltarse
la especificidad, ¿no?
Ya veis que hay diferentes niveles
también según su origen.
Por ejemplo,
es más específico
el CSS que escribo
yo como desarrollador
que el que escribe el navegador
y lo podemos ver aquí, ¿vale?
Aquí podéis ver
que este sería
el estilo del navegador.
¿Ves?
UserAgent...
Bueno, no sé si lo veis.
No lo veis.
Vale, estos son los estilos
por defecto del navegador.
¿Veis que pone
UserAgentStylesheet?
Luego estaría
el que yo he escrito
con esta especificidad,
luego este,
luego este,
luego el estilo en línea.
Entonces,
los del navegador
son los que tienen
menos importancia.
Luego estarían
los que puede hacer el usuario
porque el usuario
también puede tener estilos
y luego serían
los que nosotros añadimos, ¿vale?
Eso serían los tres niveles
y dentro de esos tres niveles
tened en cuenta también
que depende
cómo se hayan indicado.
Y luego para rizar el rizo
y este es uno que os encanta,
está la importancia.
Aparte de quién
ha creado los estilos,
también podéis saltaros
y volar por los aires,
todo este tipo de cosas,
cuando utilizáis
la palabra clave
important.
Si ponéis
exclamación important,
lo que va a hacer
es saltarse
cualquier tipo
de especificidad
ni hostias
y decir
esto es lo que hay que hacer
y lo voy a sobreescribir
por encima de todo.
Pero ojo,
cuidado con una cosa,
incluso el important
también puede tener
un empate.
O sea,
imaginar que aquí
tenemos dos importants,
entonces,
¿cuál es el que va a ocurrir?
Si los tres son importants,
¿cuál es el que va a ocurrir?
O sea,
no es tan fácil
pensar muchas veces
en cuál es el que se va a aplicar.
Lo que va a ocurrir aquí
muchas veces
es que va a tener en cuenta
el resto de cosas
que hemos comentado,
¿vale?
Así que tened en cuenta
que el important
no es que seguro,
seguro se va a aplicar ese,
sino que una vez
que ponemos el important
y lo ponemos
a otro nivel,
vamos a tener otra vez
todo este tipo
de control
de es un estilo
del usuario,
del navegador,
la especificidad
y todo este tipo de cosas,
¿vale?
Así que lo tengáis en cuenta
porque si no,
podéis encontraros
que ponéis un important
e igualmente no pasa,
pero claro,
es que si abusáis
de important
eso sí,
importantísimo
y de verdad,
importantísimo.
Hay que utilizar
el important
si puede ser
cero veces.
No tiene mucho sentido
utilizar important,
igual que los estilos
en línea
tampoco tienen sentido.
Los estilos en línea
tienen sentido
solo cuando son valores
infinitos,
como por ejemplo,
a veces se puede utilizar
el estilo en línea
con JavaScript
porque vas a querer
cargar una imagen
de fondo del usuario
y por lo tanto
no lo puedes tener
un archivo de CSS,
es imposible.
Necesitas poner
un estilo en línea
o utilizar un custom property
o un montón de cosas.
Entonces,
los estilos en línea
deberían ser
muy poco usados
y solo para cosas
que son extremadamente
dinámicas.
Y los importants,
la verdad,
es que normalmente
es un smell
de que no estás
haciendo algo bien,
¿ok?
así que tenlo en cuenta
porque si no,
al final lo que puede pasar
es que sea muy,
muy difícil
trabajar con tu CSS.
Tengo entendido
que los styling line
son malas prácticas,
eso lo hemos dicho,
¿no?
Pero cuando pregunté
en ChagPT
sobre rendimiento
lo recomendó
como buena práctica.
Bueno,
eso es bastante interesante
porque es cierto
que los estilos en línea
son mala práctica
porque al final
no se cachean,
no se reutilizan
y todo este tipo de cosas,
pero en un tema
de estilo,
de performance
y de hecho
creo que Google lo hace,
claro,
si tú pones
todos los estilos en línea
hay que tener en cuenta,
ah, no,
pues no,
no lo hace.
Antiguamente lo hacían,
antiguamente lo hacían
y seguro que lo harán
con algunos en concreto.
¿Veis que hay algunos aquí,
algunos estilos?
Ah, pues sí,
sí que lo hacen,
sí que lo hacen,
aquí tienen todos los estilos.
Claro,
si tú pones aquí estilos
directamente en el head
o si los pones
incluso en línea,
lo que vas a conseguir
muchas veces
es no descargar un recurso,
pero es algo muy drástico.
En la gran mayoría
de las páginas web
no necesitan poner estilos en línea
y directamente
lo que pueden hacer
es utilizar estilos
en archivos
de una forma
mucho más controlada,
escalable,
cacheable,
porque puedes cachear
el recurso
y solo descargarlo
cuando necesite.
Así que eso es lo que os diría.
Muy bien,
vamos con más cositas
porque vamos con unidades
y esto es súper interesante.
el tema de las unidades.
A ver,
como ya hemos estado viendo,
en realidad ya hemos visto
algunas unidades,
como por ejemplo
este font-size
le he puesto 24 píxeles,
ya hemos visto algunas unidades.
Vamos a crear,
por ejemplo,
un contenedor
para ver más unidades.
Vamos a crear aquí
un container
con el class container,
¿vale?
Ponemos aquí un div
y vamos a saltarnos esto,
container
y vamos a descubrir
más propiedades.
Tener 250 píxeles
y tener 250 píxeles
de alto,
de ancho
y vamos a ponerle
background red,
¿vale?
Ya podemos ver aquí
que podemos indicarle
el ancho y el alto
y lo podemos hacer
ahora mismo
enfocarnos sobre todo
en las unidades.
La unidad absoluta
más utilizada
son los píxeles,
pero ojo,
cuidado con esto,
hay un error muy común,
al menos,
no es un error,
pero sí es una apreciación.
Hay mucha gente
que cree
que los píxeles
son unidades
100% absolutas
y no es del todo cierto
y os explico por qué,
¿vale?
Mucha gente,
y esto era una cosa
que era antigua,
¿no?
Antiguamente los píxeles
eran una unidad absoluta,
¿por qué?
Porque antiguamente
cuando un píxel
de la pantalla
era un píxel
de esto,
¿no?
De aquí,
esto era un píxel
y entonces
un píxel de la pantalla
era un píxel en CSS.
Pero esto
ha dejado de ser cierto,
ya no es una unidad
absoluta
100%.
¿Por qué?
Porque,
por ejemplo,
la pantalla
que yo tengo
es 4K
y por lo tanto
tiene,
no me acuerdo,
4000 píxeles
por 2000 y algo,
¿ok?
Pero en cambio,
los píxeles visuales
son 1920x1080.
O sea,
como puedes ver,
no es tan absoluto,
ya no es cierto
que un píxel
de la pantalla
es un píxel en CSS,
sino que sí que hay
algo relativo
que es la densidad
de píxeles
en las que queremos
renderizar el contenido.
Así que tened en cuenta
esto de que ya no es
tan absoluto
cuando hablamos
de 250 píxeles
si tu resolución
puede ser otra
diferente
porque ya ha cambiado
bastante,
¿vale?
Dicho esto,
aún así,
aún así,
se considera
una unidad absoluta,
pero tened en cuenta
que esto es porque
mentalmente era así.
Hay otras unidades
que son relativas,
por ejemplo,
en este container
podríamos hablar
del 50%,
¿vale?
Podríamos tener
el 50%
y el 50%.
¿Qué pasa con esto?
Esto es polémico
porque fíjate
que esta altura
del 50%
no se ve nada.
Cuando teníamos
250 píxeles,
aquí sí que parece
que está haciendo
correctamente esto
y más o menos
es el 50%
mentalmente
de lo que esperaríamos,
pero cuando le pongo
que la altura
sea del 50%,
pues aquí
no funciona,
¿vale?
Y cuando digo 50%,
50%
¿pero de qué?
El tema es que
el porcentaje
es una unidad relativa
del contenedor padre,
¿sabes?
De lo que está por encima
y aquí el container este
que tendríamos
por encima del body,
su altura,
la altura que tendríamos
del padre,
en realidad
es la altura
que estamos viendo,
por lo tanto,
no hay altura
en ningún sitio.
Si le ponemos al body
para que lo veamos claro,
si al body
le decimos
que queremos
que sea de color
0.9f,
¿vale?
La altura
que tenemos
es toda,
¿no?
Todo el cuerpo
parece que es todo,
pero este contenedor,
el padre,
si va a mirar la altura,
realmente no la tiene aquí.
Tendríamos que forzar
de alguna forma
que realmente utilice
toda la altura
para saber
cuál es la referencia relativa.
Lo digo porque
esto es un error
también muy común
de que como es
el área relativa,
creemos que es lo que vemos,
pero no es tan fácil
como eso.
Por eso tendríamos
este problema aquí,
¿vale?
Es la altura relativa,
pero tened en cuenta
que del contenido
y no hay un contenido ahí
que esté empujando
todo el contenido
hacia abajo.
Para eso,
sí que tenemos
otras relativas
al viewport,
que sería el área
que vemos,
que son mucho más interesantes.
Por ejemplo,
si en lugar de la altura
decir que es el 50%,
podríamos hablar
del viewport.
Quiero que utilices
el 50%
de la altura
del viewport,
del viewport
de lo que estamos viendo.
Y ahora sí que estáis viendo
que más o menos,
si mi pantalla
es esto,
el 50%
de toda la altura,
ahora sí que la tendríamos
aquí, ¿no?
Esta sería la unidad
VH,
viewport,
y esto sería altura, ¿no?
También podríamos hacer
lo mismo del viewport,
pero con la anchura,
¿ok?
Una cosa que es interesante aquí,
fíjate que cuando he estilado
el body,
seguramente alguien
se preguntará,
oye,
¿qué pasa?
Que aquí hay un hueco.
¿Qué está pasando
con este hueco?
Hay un hueco ahí
y aquí yo no veo
que hayas puesto
ningún hueco,
ningún hueco,
ni nada.
Ahí hay un margen.
¿De dónde sale ese margen?
De nuevo,
como os he dicho,
hay muchos estilos
que son por defecto.
Fijaos aquí la diferencia
con las unidades relativas.
Cuando aquí estamos hablando
50 de viewport,
aquí tendríamos
el 50%
de la pantalla
y aquí,
como le hemos dicho
que solo es el 50%,
esto sería el resto.
Y lo mismo con la altura, ¿no?
Ahora,
el margen este que veis aquí,
fijaos que es un margen
que tiene por defecto
el navegador.
Cuando vamos aquí,
¿veis este margin 8 píxeles?
Yo no he puesto esto,
pero por defecto
el user iN style sheet
este me lo está poniendo.
¿Qué tenemos que hacer?
Pues tendríamos
que quitarlo
y para esto
le pondríamos el 0
y ahora
lo estaríamos
sobreescribiendo.
Es un estilo
que he puesto yo,
por lo tanto,
tiene más importancia
que el que tiene
el navegador por defecto,
lo sobreescribimos.
Esto es una de las cosas
muy importantes de CSS
porque durante una época,
¿qué pasó?
Que cada navegador
hacía los estilos
que le daba la gana.
Había un estilo
de Chrome
que lo hacía de una forma,
Safari de otra,
Firefox de otra,
uno con margen 4 píxeles,
otro 8 píxeles,
otro lo que sea, ¿no?
Para esto
nació justamente
lo que se llama
CSS Reset.
Mira,
por ejemplo,
dice,
¿por qué 100 VH
me genera scroll?
¿Ves?
¿Por qué te genera scroll?
Pues muy fácil.
Si haces 100 VH,
alguien podría pensar,
alguien podría pensar,
100 VH
debería ser
el 100% del viewport,
pero ¿ves que genera scroll?
¿Que puedo scrollear?
¿Sabes por qué?
Esto es justamente
por culpa
del margen este.
Si le pones un margen
de 0,
ya no tienes scroll.
Como tienes un margen
ahí añadido
de 8 píxeles,
por defecto
del navegador,
cuando tú le dices
que utilizas
el 100% del viewport,
el 100% del viewport
no es que utiliza
el 100% del viewport,
es que toma
la altura del viewport
y ese cálculo,
si tú tienes el viewport
que son 1000 píxeles,
pues lo va a utilizar,
pero si ya tienes
un margen de 8 píxeles,
pues tanto por arriba
o por abajo
vas a tener
un hueco
más 1000 píxeles
y por lo tanto
no va a utilizar
100% de la altura,
sino que vas a tener
además el margen
y por eso te va a mover,
¿vale?
para que lo tengas
en cuenta.
Bueno,
entonces,
el tema este
de los estilos
que aquí lo hemos
reseteado de esta forma
con un margen a cero
y ahora sí que
ahora sí que funca,
¿vale?
Funca
y lo ponemos con green
porque ahora sí que funciona.
El tema es que
durante mucho tiempo
se creó
una moda
que se llamaba
CSS Reset.
Esto es una cosa
que tenía mucho sentido
en su día,
¿vale?
Que está bastante bien,
que era resetear
las hojas de estilo
que introducían
los navegadores
y aquí tenemos
un ejemplo,
¿no?
Como podéis ver,
podemos tener
selectores
que están
acumulados
y entonces
puedes separarlos
por coma.
Para HTML,
para el body,
para D,
para el span,
para el apple,
no sé qué,
para todos estos,
quiero que me pongas
estos estilos,
margen cero,
padding cero,
border cero,
¿no?
Los está como reseteando.
Esto es algo muy antiguo
y a día de hoy
ya no es tan buena práctica.
¿Por qué?
Porque el CSS Reset
se puede cargar
estilos por defecto
que pueden tener sentido.
Entonces,
después de esto,
lo que nació
es lo que se llama
el normalize.
El normalize
fue una alternativa
que la idea era
como renderizar
todos los elementos
de una forma consistente
en todos los navegadores,
pero sin necesidad
de resetearlos del todo,
sino intentar dejar
como unos defaults
que tengan sentido
en todos los navegadores
y ya está.
Y esto lo han utilizado
un montón de páginas.
Y ahora,
hoy en día,
hay un montón de frameworks
que ya lo traen incorporado.
Si tú dices
las Tailwind
y este tipo de cosas,
pues ya lo tienes.
Pero solo para que te suenen.
No hace falta que lo utilices.
Ahora mismo,
lo importante es que sepas
por qué existen.
¿Vale?
No es para que lo utilizas.
Lo utilices ahora.
¿Ok?
Entonces,
ahora tendríamos ya esto.
Ya hemos visto la unidad
del Viewport,
que está bastante interesante.
Ahora viene lo interesante,
que es el modelo de la caja.
Aquí tengo un Deep,
que tengo aquí el Funka.
Hemos dicho que lo ponemos aquí.
Imaginad que vamos a poner
250 píxeles
por 250 píxeles
y vamos a poner
que esto sea White.
¿Ok?
Muy bien.
Una cosa interesante
es el hecho
de que las cajas,
el modelo de la caja,
es lo más importante
de CSS
porque es lo que representa
los elementos HTML.
Los elementos HTML
que representamos
con el CSS,
al final,
digamos que
cuando los tenemos ahí,
los visualizamos,
son cajas.
Pero las cajas
generalmente
se pueden dividir
en dos categorías.
¿Vale?
Tendríamos
lo que sería el texto.
Por ejemplo,
si nosotros,
voy a poner aquí un texto.
Imaginad un texto.
Un texto.
Esto es un texto
y lo leemos
de izquierda a derecha
y las palabras
se apilan
en línea.
¿No?
¿Qué es lo que está pasando
con esto?
Esto que veis aquí,
esto sería una caja
pero sería de estilo línea.
¿No?
O sea,
sería un estilo que
lo que estamos haciendo
es apilar de izquierda a derecha
y lo que está pasando
es que
cuando pones algo al lado
lo podemos ver a su lado.
Por ejemplo,
imagínate,
esto es un texto
y le pongo justo después
un span
y fíjate que se pone
a la izquierda.
Es como se ponen
las palabras
de izquierda a derecha
y no hay un salto de línea después
sino que pone
esto es un texto
y si le pones otro elemento al lado
pues como puedes ver
no hace un salto de línea.
¿Vale?
Y se van apilando
izquierda a derecha.
O sea,
que están en línea.
¿Vale?
Pero luego tendríamos otra cosa
que sería en bloque.
¿Qué significa en bloque?
En bloque
sería como funcionarían
los dips.
Los spans
funcionarían en línea
por defecto
y los dips
funcionarían en bloque
por defecto.
¿Qué significa en bloque?
En bloque
lo que estamos viendo
es que
si yo pongo un dip
y luego otro dip
por más pequeño que sean
por más pequeño que sean
imagínate
son así de pequeños.
¿Vale?
Fíjate que da
un salto de línea
o sea
está haciendo
un salto de línea
cada vez que tú pones un dip
está haciendo
un salto de línea.
¿Vale?
Estas son un poco
en línea
y en bloque.
Vamos a ver
bien
cuáles son las diferencias
en cada uno
porque te va a volar la cabeza
y a lo mejor
no la sabías.
El tema del span
¿Vale?
El span
o cualquiera que hagamos
con display in line
o que tengan un estilo
en línea.
Si tenemos aquí
un span
¿Vale?
Hemos dicho
que tenemos
esto es un texto.
Imaginad que yo quiero
estirar el span
y que le voy a poner
que tiene
el de fondo
color rojo.
Obviamente
el contenido
se pone color rojo.
Pregunta del millón
os he dicho
que con la propiedad
width
podríamos cambiarle
la anchura.
Si le pongo
500 píxeles
no se cambia.
Y si le cambio
la altura
le pongo 100 píxeles
no cambia.
Por más que tú
le cambies
la anchura
y la altura
los elementos
que está utilizando
la caja
de tipo línea
se comportan
como texto
y por lo tanto
no tienen
ni ancho
ni alto.
Se colocan
una detrás
de otra
funcionan
en línea
no se puede
cambiar
ni el ancho
ni el alto
y entonces
los márgenes
que tenemos
si ponemos aquí
¿Ves?
Estamos poniendo
uno al lado
del otro
pero fíjate
que la altura
y la anchura
no le afecta.
Esto es
importantísimo
porque muchas veces
a la gente
esto le vuela
a la cabeza.
Si le pones
importa
no importa
¿Vale?
No importa
El tema es
¿Qué pasa?
Que como funcionan
en línea
el padding
y vamos a ver
qué es el padding
¿El padding
le afecta o no le afecta?
Le afecta regular
le afecta más o menos
más o menos
de aquella forma
y el margen
más o menos
Vamos a hablar
del padding
y del margen
y vamos a ver
qué significa
esto del modelo
de la caja
y para verlo
uno de los sitios
mejores para ver esto
es las herramientas
de desarrollo
Vamos a inspeccionar
este elemento
que he dicho
que es en línea
y cuando abres
las herramientas
de desarrollo
fíjate que aquí
te viene un dibujito
maravilloso
y nos dice aquí
que esto es
500%
padding
borde
margen
¿Qué significa
esta caja
que nos está enseñando aquí?
Esto de aquí dentro
sería el contenido
que fíjate
que aunque aquí
me pone 500%
aquí ya me está avisando
que no lo está aplicando
porque ha quedado
con una opacidad rara
y ves que hay una ahí
si te pones encima
te dice
utilizar un display inline
que ahora te explicaré
por qué aparece esto
que es el valor por defecto
previene
de que el ancho
tenga algún efecto
intenta utilizar
un valor diferente
a display
para ver qué pasa
y es que como te he dicho
el span por defecto
tiene un display inline
esto es como funciona
por defecto
display inline
si nosotros le cambiásemos
que en lugar de funcionar
en línea
funcionase en caja
¿vale?
funcionase en bloque
si le ponemos un block
aquí podemos ver
que ahora sí
el ancho y el alto
sí que funcionan
y que por lo tanto
sí que está tomando
el ancho y el alto
que nosotros le hemos dicho
lo vamos a dejar
como teníamos antes
¿vale?
con el display inline
ahora
fijaos aquí que tenemos
por un lado el contenido
el padding
el border
y el margen
esto sería el modelo
de la caja
y vamos a ver
que dependiendo
de si estamos utilizando
en línea
si lo estamos utilizando
en bloque
y si además
estamos contando
una cosa u otra
el ancho y el alto
va a ser totalmente diferente
de hecho
aquí ya vemos
que aunque aquí ponga
500 y 100
no es lo que está aplicando
cuando estamos haciendo en línea
lo que es importante
es el contenido
que realmente tenemos dentro
como el texto
y no le podemos cambiar
ni el ancho
ni el alto
esto no ocurre
por ejemplo
si estamos utilizando
un div
¿por qué?
porque un div
como hemos visto
tiene
es el modelo de bloque
ahora alguien se le estará preguntando
oye pero yo sé
que tanto
que además de inline
y de block
hay más
está inline block
está flex
está grid
y lo cierto
es que por ejemplo
flex y grid
no dejan de ser
como tipos de caja
de bloque
pero que afectan
a sus hijos
de una forma diferente
por eso tienes
inline flex
y flex
inline
podrías tener el grid
y ya está
el tema es
que cada uno de ellos
lo que puedes hacer
es afectarlo
que la caja sea de bloque
le puedes tener
el ancho y el alto
pero
¿cómo le afecta a los hijos?
eso lo veremos
en la siguiente clase
¿vale?
las cajas flexibles
flex
y grid
que son dos tipos especiales
pero generalmente
piensan dos tipos de caja
en línea
y en bloque
y luego en bloque
hay un montón
que son especiales
y las veremos
¿vale?
muy bien
entonces vamos a ver
las que son en bloque
que obviamente
son las más interesantes
porque las que son en bloque
si tenemos span
que funciona en línea
tenemos a
que también funciona en línea
em
strong
todas estas etiquetas
funcionan en línea
pero tenemos otras
como dip
o como section
que funcionan en bloque
¿vale?
que por defecto
funcionan
como si fuesen
con la caja
un bloque
vamos a poner aquí
que tenemos el container
y aquí
sí que le va a afectar
el width
ponemos 200
y 200 píxeles
¿ves?
le está afectando
cuando nosotros vamos cambiando
cambia
el ancho y el alto
si ponemos otro section
no lo deja en línea
no lo deja en lado
sino que
hay un salto de línea
porque digamos
que esto es un bloque
y
está haciendo un salto de línea
automáticamente
no los apila
como si fuese texto
¿vale?
pues ahora que tenemos esto
vamos a ver una cosita
bastante interesante
también
por cierto
hay un error muy común
que hay gente que se cree
que todas las etiquetas HTML
son en línea
lo cual no es cierto
por ejemplo
la etiqueta H1
esto es un título
no es en línea
es en bloque
y lo podéis ver así
muy claro
cuando ponéis
esto es un título
¿vale?
veis que hace un salto
y no lo pone justo después
esto con un spam
nos pasaría
solo para que lo sepáis
que hay un error muy común
de que la gente se cree
etiqueta HTML de texto
en línea
no es así
no es tan fácil
ojalá
pero no es así
ahora que tenemos dos secciones
que son en bloque
vamos a ver una cosa
bastante importante
¿no?
que es
cómo se calcula
el ancho y el alto
o sea
cuando tenemos estas cajas
de aquí
y le he dicho
que la altura es 100
y la
o sea
el ancho y la altura es 100
¿vale?
vamos a dejar solo una
esta caja
¿vale?
la dejamos aquí
esta caja
¿vale?
hemos dicho
que en las cajas
tendríamos
el padding
¿vale?
el padding
¿qué es el padding?
el padding
tendríamos por un lado
el contenido
¿no?
el contenido sería
el content box
que es el área
donde se muestra el contenido
ahora mismo está claro
que esto sería el content box
porque es todo lo que tenemos
y el tamaño
se puede cambiar
utilizando la altura
y la anchura
¿vale?
y ya lo estamos haciendo
luego tendríamos
el relleno
que es el padding
que sería
el relleno
es el espacio
que estaría
alrededor
del contenido
entre el contenido
y el borde
y es posible
controlarlo
porque justamente
aquí podemos utilizar padding
y le podemos indicar
cuánto padding queremos
lo podemos hacer
en una dirección
por ejemplo
de padding left
10 píxeles
o le podemos decir
en más de una dirección
por ejemplo
tanto arriba
como abajo
le podemos decir
16 píxeles
y abajo
lo que estamos haciendo aquí
es un atajo
esto sería
arriba
ahora era
arriba
derecha
izquierda
arriba
derecha
abajo
e izquierda
¿vale?
sería arriba
derecha
abajo
e izquierda
y si te cuesta
como a mí me cuesta
pensar que es como
en las manijas del reloj
¿ok?
y también lo podríamos poner
en concreto
vamos a ponerlo
que si solo le pones uno
esto significa
que hacia todos los lugares
arriba, derecha, abajo
izquierda
va a utilizar el mismo
y si utilizas solo dos
estaríamos diciéndole
que arriba
y abajo
serían 16
y derecha e izquierda
sería 32
¿vale?
vamos a hacer ahora mismo
que sea todo cuadrado
y le vamos a añadir
10 píxeles
¿qué es lo que está pasando
con el padding?
fijaos en una cosa
cuando yo cambio el padding
lo que está pasando
es que la caja
está cambiando de tamaño
entonces
¿el tamaño es 100?
no
ya no es 100
el tamaño
que estamos viendo aquí ahora
va a cambiar totalmente
y es que
el tamaño
va a depender del padding
por defecto
vamos a ver
cómo funciona esto
si nos ponemos aquí
el padding
y yo me pongo a cambiarle
esto
imagínate que voy poniendo aquí
voy a poner
un poquito más
fíjate que está en la caja
y le voy subiendo el padding
¿ves que va creciendo?
la caja se va haciendo
cada vez más grande
y aquí podemos ver
en el modelo de la caja
que pone
el contenido es 100-100
que es el que hemos puesto nosotros
y el padding
ahora es 36
y conforme vamos creciendo
se va haciendo más grande la caja
por lo tanto
por defecto
no es que sean 100 píxeles
ese es el área
las medidas
que tienen el contenido
¿vale?
lo que estamos diciendo
es que entonces
el ancho y el alto
real
que va a tener
ya vemos
que va a tener que ver
con el contenido
y el padding
pero todavía hay más
porque también tenemos aquí
el borde
y es que
el borde también
lo podríamos cambiar
podríamos decirle
vamos a ponerle aquí
un borde
de 10 píxeles
que sea de color rojo
¿vale?
dejamos el padding
con 10 píxeles
y fíjate lo que pasa
también con el borde
conforme vamos haciendo
el borde más pequeño
o más grande
ya podemos ver
que también está afectando
al tamaño
de la caja
que tenemos ahí
por lo tanto
el borde de la caja
es lo que envuelve
el contenido
y el relleno
porque queda
por fuera del padding
y podemos controlar
su tamaño
pero está afectando
a como de grande
es la caja
o sea
ya no son 100 píxeles
sino que como podemos ver
son 100 píxeles
que es el contenido
más 20 píxeles
de lado a lado
o sea
10 de un lado
y 10 del otro
serían 20
más 10 del borde
de un lado
y 10 del otro
pues ya está
20, 40
140
lo podemos ver aquí
podemos ver que es 100
más 10
más 10
y por otro lado
más 10
más 10
140 píxeles
y lo puedes ver
también muy claro
si
ah bueno
pensaba que aquí
aquí
vale
si yo me pongo encima
del contenedor
podéis ver aquí arriba
aquí arriba
que no lo puedo ver
pero podéis ver
que pone 140
por 140
ese es el tamaño
real que tiene
la caja
vale
así que podemos ver
que el contenido
el padding
y el borde
son los que están
determinando
cuál es la altura
y la anchura
de nuestro elemento
y el margen
no cuenta
el margen
si lo ponemos
sí que va a separar
la caja
como podemos ver
separa la caja
pero no está
cambiando
el ancho
ni el alto
de nuestra caja
vale
no está afectando
a cuánto es
lo que mide
nuestro bloque
lo está separando
está haciendo una separación
pero está haciendo
la separación
desde fuera
vale
así que esto sería
por defecto
cómo se cuenta
el ancho
y el alto
de nuestros elementos
en bloque
ok
qué difícil
no es difícil
esto básicamente
es el modelo
de la caja
y lo único
que tienes que saber
es que
el ancho
y el alto
de el modelo
de la caja
por defecto
es
el content box
que es el contenido
el padding
que sería
el relleno
el borde
que es
lo que
lo que está
bordeando
el contenido
y el relleno
esos tres
son los que
determinan
el ancho
y el alto
no lo que
estamos diciéndole
aquí
sino que
tenemos que
sumar
ancho
tenemos que
sumar
el padding
y tenemos que
sumar
el borde
y seguramente
alguien
se estará preguntando
joder menuda mierda
vale
por qué
por qué
porque
es muy difícil
entonces
determinar
o sea
si yo
si yo hago esto
imagínate
que nos viene un diseñador
y nos dice el diseñador
oye
las cajas
tienen que ser
de 160
por 160
vale
160
por 160
y tiene que tener
un padding
de 4
de 7 píxeles
y un borde
de 3 píxeles
vale
que ha pasado aquí
lo que ha pasado
es que la caja
que se supone
que tenga que ser
de 160
es de 180
y el calcularlo
es muy difícil
pues resulta
que
por defecto
hay
una propiedad
que se llama
box sizing
que tiene el valor
de content box
y es lo que está haciendo
que tengamos este cálculo
pero por suerte
en CSS
podemos evitar esto
podemos hacer
que en lugar
de tener que sumar
el borde
el contenido
y el padding
podamos
hacer que eso
sea parte
del ancho
y el alto
y por lo tanto
lo que nosotros
le ponemos aquí
sea exactamente
lo que va a medir
nuestra caja
y para eso
que esta propiedad
por defecto
en todo nuestro documento
el box sizing
es content box
podemos utilizar otro
que es mucho más interesante
que es el border box
y el border box
lo que significa
es
que el alto
y el ancho
ves
ahora es 160
que son los mismos
que tenemos aquí
porque tanto el padding
como el borde
son los que ya están
incorporados
dentro
de lo que
ocupa la caja
entonces ya vemos
la diferencia
por defecto
ves que cambia
cuando le quitamos
el box sizing
border box
es porque por defecto
tiene el valor
de content box
el content box
sería
cuánto es
el ancho
y el alto
simplemente es
el contenido
content box
la caja
que tiene el contenido
por lo tanto
al content box
hay que sumarle
el padding
y el borde
pero luego
si el box sizing
lo pasas a
border box
significa
que el alto
y el ancho
son toda la caja
que va del borde
hacia adentro
y el borde
hacia adentro
que incorpora
tenemos el borde
el padding
y el contenido
de forma
que si le ponemos
que estos son
160 píxels
el border box
al ponerle
box sizing
border box
va a significar
que tanto el borde
como el padding
como el contenido
están siendo ya
sumados
para tener el ancho
y el alto
así que eso es
súper importante
para el modelo
de la caja
vamos a ver otra vez
vamos a repasar
como dejamos
lo del box sizing
el modelo de la caja
porque eso es muy importante
que lo entendamos
y a partir de ahí
vamos a ver también
lo que es el overflow
vamos a ver
que el tema
de desbordamiento
una cosa que da
muchos problemas
a mucha gente
y de hecho
el chiste
más mítico
de CSS
viene por culpa
del overflow
luego vamos a ver
los diferentes
position
porque la gente
se hace un lío
con los position
que es esto
de position static
absolute
sticky
fix
cuál es la diferencia
de cada uno
y vas a ver
la diferencia
y te juro
que hoy los entiendes
hoy los vas a entender
de una vez por todas
y vas a decir
pues no era tan difícil
lo que pasa
es que te lo estaban
explicando mal
luego que más
vamos a ver
también el z index
una cosa que es
muy compleja
pero lo vamos a simplificar
al máximo
y también lo vas a entender
y finalmente
flex
¿vale?
flex es el modelo
de la caja flexible
que muchas veces
a mucha gente
le vuelve loco
y también lo vas a entender
súper fácil
porque con ejemplos prácticos
todo se entiende
se aprende
y se valora
así que
vamos a ver
todos esos temas
hoy aquí
y vamos a empezar
con el modelo de la caja
que lo dejamos
al final
pero lo vamos a repasar
rápidamente
solo para ver
si ha quedado claro
¿vale?
la semana pasada
dejamos el modelo
de la caja
el modelo de la caja
de CSS
es básicamente
como se calculan
el ancho
y el alto
de una caja
¿no?
como tenemos
el contenido de una caja
y aunque nosotros
le decimos
100 píxeles
por 100 píxeles
de ancho
y de alto
esto en realidad
no mide exactamente eso
y lo vas a ver
y lo cual
esto es uno de los grandes problemas
que mucha gente
tiene en CSS
si miramos
cuánto mide esto
¿vale?
vamos a poner cuánto mide
fíjate aquí
verás aquí que sale
la altura
y la anchura
pone 120
por 120
pero fíjate que aquí pone
alto y ancho
100 píxeles
¿qué pasa?
que por defecto
la caja
en CSS
es el alto
y el ancho
más
el padding
y el borde
¿qué significa esto?
que si tú pones
un alto y un ancho
de 100 píxeles
y le dices
que tiene que rodear
un padding
de 10 píxeles
esto ya
va a ser 120
porque son 10 píxeles
arriba
abajo
izquierda
derecha
aquí tienes un ejemplo
súper bueno
¿no?
ves que tenemos
el ancho y el alto
de 100 píxeles
y luego el padding
pero si le ponemos
un borde además
borde de 10 píxeles
esto lo que va a ocurrir
es que va a hacer
que nuestra caja
pues ahora ocupe
140 píxeles
¿vale?
140 píxeles
el modelo de la caja
por defecto
se calcula así
es el alto y el ancho
más el padding
más el borde
¿y esto por qué es un rollo?
porque te viene tu UX
tu amigo UX
o amiga UX
y te dice
yo quiero que este botón
sean 150 píxeles
y claro
¿qué haces?
pues tú dices
vale
pues 150 píxeles
dices vale
150 píxeles
¿vale?
y esto
esto es un botón
¿vale?
dices vale
genial
he hecho un botón
aquí maravilloso
y te dice
y tiene que ser
de 24 píxeles
claro
tú haces esto
pero luego te viene
la persona de UX
y te dice
a ver
a ver
y dice
pero esto está mal
esto está mal
y es que resulta
que aunque tú
lo has puesto aquí
150 píxeles
resulta que la sección
ocupa 190
y es por este problema
¿no?
el problema es que
la medida que tú le estás poniendo
hay que sumarle el padding
y el borde
¿cómo se arregla esto?
esto es como funciona
por defecto
y muchas veces
este problema
igual no lo encontráis
porque por arte de magia
y por algo todopoderoso
resulta que se ha utilizado
algún tipo de reseteo
de CSS
o alguna propiedad
que hace que esto funcione
de una forma distinta
¿y cómo funciona esto?
pues
utilizando Box Sizing
Border Box
¿vale?
y fíjate que ya cambia aquí
bastante la cosa
por defecto
¿cuál es?
es Content Box
el Box Sizing
lo que mide la caja
viene por el Content Box
que quiere decir
que vamos a sumar
el contenido
más el padding
más el borde
¿vale?
y eso va a ser
el ancho y el alto
va a venir por esa fórmula
pero si le ponemos
Border Box
vamos a ver
que nos cambia totalmente
y el Border Box
¿qué quiere decir?
pues que si tú aquí le pones
que mide 150 píxeles
van a ser 150 píxeles
y si el ancho le dice
que son 24
el ancho
van a ser
40
aquí 40
bueno
¿por qué pasa esto?
mira esto es súper interesante
esto pasa justamente
por el tema del Overflow
¿no?
aquí podemos ver
que pone 40
porque en realidad
lo que está haciendo
es que el texto
ocupe un poquito más
pero aún así
podríamos llegar a un momento
en el que ahora
realmente sí que no vamos a ver
ningún
¿ves?
si le ponemos 64
cuando ya el texto
ocupa menos
pues vamos a ver
que sí que son 64
¿vale?
esto del texto
está bastante interesante
porque por defecto
veis que esto funciona así
o sea
el texto se sigue viendo
y por lo tanto
la altura
se ve
que tiene un efecto
en justamente esto
también tened en cuenta
una cosa
si se cuenta
el padding
y el borde
claro
el padding
son 10
más 10
porque es arriba
y abajo
más 10
del borde
más 10
arriba y abajo
serían 40
o sea que si vosotros
le ponéis
14 píxeles
24
tal
como mínimo
tienen que ser 40
porque ya
el padding
y el borde
son 40
aunque vosotros
pongáis una altura
e intentéis forzarla
de que sea un píxel
si el padding
y el borde
ya es más
pues ya va a ser esa altura
¿vale?
eso
utilizando el border box
tened en cuenta esto
¿vale?
ya la altura mínima
va a tener que ser
la que tenga el padding
y el border
y vas a ver
que en cuanto yo suba esto
fíjate que ya
sí que va empujando esto
¿ok?
entonces
ahí ya lo tenemos
y ya tendríamos
este problema solucionado
así que ya sabes
cómo funciona
el box sizing
border box
y es el que
porque mucha gente
y esta es una pregunta
que muy poca gente
sabe la respuesta
o la entiende
porque alguien dirá
si todo el mundo
carga esto
¿sabes?
todo el mundo pone el box sizing
todo el mundo carga esto
¿sabes?
todo el mundo
el box sizing border box
box sizing border box
vais a ver
que en todos los sitios
mira
¿qué es y para qué sirve?
mira está mi dudé
pero este
este fue el artículo
que en 2012
en 2012
popularizó
el tener que utilizar
box sizing border box
y entonces
la pregunta del millón
que muchas veces
mucha gente se hace
sobre todo gente
que no es
que no sabe mucho CSS
es
oye
o no sabe cómo funciona
el mundo del desarrollo web
es
oye
¿y por qué tenemos que aplicar esto
a todas nuestras páginas web?
si lo hacemos
constantemente esto
oye
¿por qué no
por qué no lo cargamos
por defecto?
¿por qué los navegadores
no lo cargan por defecto?
y la respuesta es
la retrocompatibilidad
esto es una cosa
que apareció en 2012
tú imagínate
que de repente
por lo que sea
¿vale?
imagínate
que aquí cambiamos
por defecto es esto
y de repente
los navegadores
dicen no
ahora
el alto y el ancho
se calcula así
¡pum!
pues imaginad
la de páginas web
que se iban a romper de golpe
millones y millones
de páginas web
entonces muchas veces
aunque ahora
queramos trabajar así
lo cierto es que
por defecto
no trabaja así
solo tenemos que añadir
ya sea de forma indirecta
si utilizas Tailwind
ya añade esto
sin que tú te des cuenta
pero ya sea de forma directa
que tú lo tengas que añadir
y la razón
por la que no la añaden
los navegadores
es retrocompatibilidad
que amigos
y amigas
esta es una de las razones
por las que muchas veces
tanto Javascript
como CSS
como HTML
tienen que evolucionar
teniendo en cuenta
todo lo que tienen detrás
algo que no hay ningún lenguaje
ahí fuera
que tenga que ocurrir
porque pueden trabajar
con mayors
cosas que
con estos tres lenguajes
es un poquito más complicado
también trabajan con mayors
pero normalmente
son 100% retrocompatibles
porque si no romperían
muchas páginas web
¿vale?
solo para que lo sepáis
ahora que ya tenemos esto
vamos a ver un caso
muy típico
imaginad que teníamos
este ejemplo aquí
esto es una caja
100 píxeles
y todo esto
vamos a poner el borde
vamos a utilizar el border box
¿vale?
vamos a ponerle que sea
un poquito más grande
y un error muy típico
que tenemos aquí
es el tema del desbordamiento
y esto es
uno de los memes
de CSS
por ejemplo
este de
CSS
is awesome
¿no?
seguro
estoy seguro
que esto lo has visto alguna vez
en alguna camiseta
lo que sea
imaginad
que tenemos el font size
y lo hacemos muy grande
¿vale?
¡pum!
¿qué pasa con esto?
que
fíjate que el texto
está saliendo
de la caja
está desbordando
esto ocurre
cuando nosotros tenemos
un tamaño
fijo
de una caja
pues nos podemos encontrar
que el contenido
no cabe en esta caja
esto os habréis pasado un montón
seguro que habéis visto
alguna taza
alguna camiseta
y tal
¿vale?
es el chiste
típico
CSS is awesome
y aquí sale
el awesome
¿no?
bueno
hay que entender
que este meme
que la verdad
es que está bastante divertido
en realidad ocurre
por no saber CSS
porque CSS
sí que soluciona esto
y hay diferentes formas
de solucionarlo
el tema es
que si tú
le estás forzando
el alto y el ancho
es normal
claro
si pasase al revés
también le harían memes
si pasase al revés
haría otro meme
porque imagínate
que tú le pones un texto
tú le has dicho
esto tiene que ser
de 150 por 150
y le pones un contenido
y se lo salta
¿verdad?
pues el tema es que
también sería al revés
un problema
al final tiene que tomar
prioridad sobre uno de los dos
y la prioridad se la da
a la altura
y la anchura
que tú le has dicho
esto es lo que se le llama
un desbordamiento
y hay diferentes formas
de solucionarlo
¿vale?
entonces
¿cómo se soluciona esto?
por defecto
cuando un contenido
desborda
¿qué se hace?
¿cómo está funcionando?
está funcionando
como un overflow visible
que es lo que justamente
está pasando
este sería
el valor por defecto
está haciendo que el overflow
o sea lo que está desbordando
es visible
esto es por defecto
porque si no
podríamos tener
un montón de problemas
pero obviamente
tenemos
otros valores también
este es
que el contenido
no es recortado
y se dibuja
fuera de la caja contenedora
pero tenemos otros
por ejemplo
tendríamos el de hidden
el de hidden
directamente lo que hace es
oye
el contenido
lo vamos a recortar
y no lo puedes
no lo puedes ver
de ninguna forma
está ahí
porque está ahí
pero no lo vamos a mostrar
y esto muchas veces
se utiliza justamente
para eso
para evitar
que una vez
que sale
y se desborda el contenido
pues que aparezca
mal por ahí en medio
¿ok?
ahora
hay veces
que pese a todo
nos gustaría
poder acceder a ese contenido
fíjate que aquí
no podemos acceder
a ese contenido
no podemos ver
que es lo que hay
debajo de esto
¿no?
no sabemos
no hay forma
de ver ese contenido
debajo de esto
no lo podemos ver
entonces
¿qué podemos hacer?
otra solución
es el de scroll
scroll lo que hace
es recortar el contenido
y el navegador web
va a utilizar
unas barras
de desplazamiento
donde se haya recortado
el contenido
si es que se ha recortado
o no
¿vale?
y esto lo que va a hacer
es prevenir
que aparezca afuera
pero vas a poder moverte
por dentro
gracias a las barras
fíjate que tenemos
unas barras
tanto horizontales
porque el contenido
sale tanto de derecha
de izquierda a derecha
de forma horizontal
como vertical
¿vale?
así que así sería
con el workflow scroll
pero imagínate
si tú tienes el visible
sale así
si le pones el hidden
está ahí el contenido
pero no puedes acceder
no puedes scrollear
y entonces tendrías
el scroll
que recorta exactamente igual
pero ahora sí que te pone
unas barras
para poder moverte
y además de esto
teníamos uno más
que sería el auto
que si vas a utilizar scroll
normalmente es el recomendado
¿por auto qué quiere decir?
pues que dependiendo
del navegador
lo que van a hacer
es poner las barras
de desplazamiento
pero igual en otro dispositivo
no pone barras
lo pone de otra forma
o sea lo va a hacer
de forma automática
depende cómo sea
el desplazamiento
en ese sitio
normalmente son barras
¿vale?
pero lo digo por si ves el auto
que sepas que se trata de esto
y lo interesante del auto
es que si por lo que sea
si tú pones el scroll
le estás forzando ya
que siempre salgan las barras
y en Windows
es posible
que si por lo que sea esto
sí que cabe aquí
imagínate que solo pones esto
puede ser que en otros navegadores
veas aquí la barra
pero la veas desactivada
entonces hay veces
que te interesa más el auto
porque va a determinar
automáticamente
si tiene que mostrar
las barras o no
si es que hay
desbordamiento o no
por eso te recomiendo
que siempre que quieras
que salgan las barras
utilices el auto
porque va a determinar
si tienen que salir las barras
o no tienen que salir las barras
¿vale?
y el tema de que desaparezcan
las barras
eso también tiene que ver
con el navegador
yo porque estoy utilizando macos
y por eso ni siquiera
aparecen las barras
solo aparece cuando
te están moviendo
¿vale?
cuando te mueves
entonces sí que aparece
pero en el caso de otros
igual siempre salen las barras
aquí a la derecha
pegadas
depende del sistema operativo
y depende del dispositivo
incluso ¿vale?
solo para que lo sepas
¿y qué más se puede hacer?
pues pensad que una vez
que tenéis este tipo de cosas
por ejemplo
si ponéis el overflow hidden
¿vale?
también se pueden llegar
a hacer otras cosas
por ejemplo
está el text overflow
que lo que te permite
es indicarle
cómo se tiene que intentar
evitar que aparezca la información
claro
aquí no se ve casi
voy a hacerlo un poquito más pequeño
para que lo veáis
pero ves
si no cabe
lo que hace ese overflow hidden
es que le puedes decir
vale
voy a ocultar
el contenido
que desborda la caja
pero si es texto
quiero que el desbordamiento
termine con un elipsis
y por eso me pone
estos tres puntos suspensivos
fíjate la diferencia
si pones esto
te lo corta así
a saco
pero puedes utilizar
para el texto
el text overflow elipsis
que lo que hace es
vale
he detectado que este texto
va a desbordar
y lo que voy a hacer
por lo tanto
es ponerle puntos suspensivos
para que ese contenido
quede claro
que no cabe
pero no lo voy a recortar
de golpe
sino que voy a poner
puntos suspensivos
y ya está
por defecto
el text overflow
también tiene un valor
que es clip
que es este que vemos aquí
el text overflow clip
lo que quiere decir es
simplemente recortar
donde sea y ya está
y luego tendríamos
el de elipsis
por desgracia
que lo sepas
esto te lo comento
para que sepas
sobre el futuro
de css
pero que sepáis
que en el futuro
la idea
es que esto
puedas poner aquí
un símbolo
esto no funciona todavía
vale
esto todavía
por desgracia
no funciona
pero la idea
ves que pone
sintaxis
clip elipsis
y pone aquí string
es porque en el futuro
la idea es que tú
puedas poner un text overflow
y aquí poner
lo que quieras
vale
puedas poner un símbolo
puedes poner lo que quieras
pero como ves
todavía no funciona
por desgracia
así que hay que tener
un poquito de paciencia
pero con esto
ya sabes al menos
cómo puedes tratar
los desbordamientos
en css
algo que ocurre
cuando el ancho y alto
que tiene tu caja
no es capaz
de contener
todo el contenido
que le has puesto
ya sea imágenes
texto
texto o lo que sea
no se podría poner un leer más
se podría poner
cuando se pueda
podrías hacer esto
pero el problema
es que con css
a día de hoy
no se puede
tienes que utilizar
solo elipsis
y lo tendrías que hacer
más con javascript
entonces
¿se puede estirar la barra?
se puede estirar la barra
la barra se puede estirar
con css
scrollbar css playground
lo podéis buscar por aquí
hay playgrounds
ves esta por ejemplo
y aquí podéis ver
que se puede estirar
por ejemplo
podéis decir que sea más finita
que no tenga
que no tenga borde
que yo que sé
le podéis cambiar los colores
podéis cambiarle el borde radius
vale
más borde radius
podéis hacer que tenga
más altura
ves que sea más ancha
más lo que queráis
le podéis hacer lo que queráis
ahora bien
yo no es una cosa
que os recomiende mucho
vale
porque
el problema de estilarlo
es que
mira también esta
que pone
feral
esta también está muy chula
¿dónde os recomiendo
estilar la barra?
yo la barra
solo la estilaría
en cajas internas
o sea
en esta tiene sentido
porque está dentro
pero
una barra
a nivel de página web
yo no la estilaría
en mi opinión
para que lo sepáis
para que lo sepáis
se puede detectar
con javascript
si un texto
es completamente visible
creo que
no se puede
no se puede
creo que no se puede
con css
hacerlo
creo que no
lo tendría que mirar
pero que yo recuerde
no se puede
no te devuelve
css algo
para decirte
si estoy utilizando esto
sería increíble
pero por desgracia no
habría que hacer
alguna magia negra
por desgracia
vamos con otro tema
interesantísimo
del css
esto muchas veces
da problemas
porque mucha gente
se vuelve loca
y hoy lo vas a aprender
ya has aprendido
el desbordamiento
que está muy interesante
pero te voy a explicar hoy
la magia del position
voy a poner
una cajita
por aquí
voy a copiar
este html
que tengo por aquí
vale
pum
y voy a poner
este css
vale
css que ya
más o menos es parecido
pero es solo
más que nada
para que veamos
una cosita
vale
imagínate que tenemos
este css
lo voy a hacer
un poquito más pequeño
para que lo veáis bien
vamos a hacer esto aquí
y ahora te explico
como es esto
vale
vamos a hacer esto
un poquito más pequeño
vale
imagínate
tenemos aquí
voy a poner en el body
vamos a poner
un color así
a ver
esto tiene
si
que bien
que maravilla
pues algo así
vale
esto
que es lo que tenemos
lo que tenemos aquí
es
una section
vale
que tenemos
un borde de 5 píxeles
de color negro
y una altura
y una anchura
de 250 píxeles
le vamos a poner
el box sizing
a border box
vale
y fíjate que ha cambiado un poco
porque así nos aseguramos
que son 250 píxeles
y dentro
tenemos un div
con la clase container
que
ahora aquí voy a ponerle container
para que veamos
que es un container
y que
básicamente
tiene
el fondo de color azul
la
la caja
de 100 píxeles
100%
y ya está
¿no?
¿cómo funcionan las posiciones
en css?
vale
y esto es súper importante
los elementos
de css
se posicionan
por defecto
de forma
estática
¿y qué quiere decir?
pues lo que quiere decir
simplemente
es que
se quedan
donde están definidos
en el html
y se van apilando
dependiendo de diferentes cosas
pero se van apilando
o sea
no hay ninguna historia
aquí como tenemos un section
y dentro tenemos un div
pues como puedes ver
dentro de
el section este
tenemos el div
no hay ningún tipo de magia
está
está directamente
directamente
está
puesto
donde le corresponde
de forma
estática
ya he terminado
que hay una etiqueta
dentro de otra etiqueta
y ya está
no se ha posicionado
de una forma mágica
no ha hecho nada
es como lo pondríamos
de forma totalmente normal
esto es como funciona
por defecto
y a esto se le llama
position static
¿vale?
toma su sitio
y ya está
si pondríamos otro div
pues esto lo que haría
es simplemente
ponerlo justo debajo
justo después
y seguiría estando
dentro del section
¿vale?
perfecto
esto es como funciona
por defecto
que está muy bien
es muy divertido
pero hay diferentes
formas de indicar
que nuestros elementos
se tienen que posicionar
con CSS
uno de los más importantes
por defecto
tenemos el position static
pero uno de los más importantes
es absolute
¿y qué quiere decir
que sea absoluto?
¿absoluto a qué?
¿no?
bueno
si ponemos el position absolute
fíjate que parece
parece
que no ha ocurrido nada
no ha pasado
no ha pasado nada
no ha cambiado nada
y es que por defecto
su posición
donde tendría que ir
este elemento section
es ese
aunque tengamos
la posición absoluta
pero cuando ponemos
que la posición es absoluta
nosotros lo que vamos a poder hacer
es determinar
sus coordenadas
en el documento
le vamos a poder decir
oye
pues ahora quiero que el top
esté en la posición 0
¿vale?
posición 0
y el left
ah es que lo
perdón
perdón
es que además
lo estoy poniendo
donde ves
lo voy a poner en el container
¿vale?
para que lo veamos mejor
ahí está
¿vale?
en el container
y ahora
el container es
la caja azul
y ahora le vamos a decir
que el top
lo vamos a poner 0
¡ojo!
¿qué ha pasado aquí?
¿qué ha pasado aquí?
se ha salido de la caja
y ahora le decimos
left 0
¿vale?
fíjate dónde me la ha llevado
si le digo
no
la posición right 0
¿qué quiere decir esto?
cuando decimos top 0
lo que quiere decir es que
del punto de más arriba
en el punto 0 píxeles
el punto de más arriba
de 0 píxeles
obviamente
es aquí
ahora
cuando decimos
derecha 0
lo que queremos decir
empezando de la derecha
empezaríamos en la posición 0
y cuanto más le digamos
¿vale?
por ejemplo
10 píxeles
sería
10 píxeles
desde la posición
más a la derecha
50 píxeles
desde la posición
más a la derecha
y lo que estás viendo
es que está empujando
y este espacio
que ves aquí
son los 50 píxeles
incluso podrías utilizar
porcentajes
claro
un 50%
se supone
que debería ser
un 50%
lo que pasa
es que aquí
hay que tener en cuenta
que el ancho de la caja
también determina esto
o sea
el punto que ves aquí
este punto que ves aquí
es el que se ha quedado
en mitad
o sea
lo está posicionando bien
pero visualmente
igual tú
no lo ves así
igualmente
lo que está haciendo
el position absolute
es que de forma absoluta
saltándose totalmente
cualquier control
que tuviésemos
de cuál eran
los alimentos html
que estaban conteniendo esto
lo está posicionando
¿vale?
¿qué pasa aquí?
bueno
que obviamente
este position absolute
se está posicionando
respecto aquí
pues respecto al documento
como puedes ver
si le ponemos
write 0
top 0
ves
se está pegando
arriba a la derecha
o sea
lo está posicionando
relativo
a todo el documento
¿ok?
¿qué pasa?
que nosotros
muchas veces
vamos a querer
que esto se posicione
respecto a otras cosas
por ejemplo
yo me gustaría
que esta caja
yo moverla dentro
pero no la quiero mover
de todo el documento
la quiero mover
dentro de esta cajita
pues imagínate
que lo queremos poner
abajo a la izquierda
¿vale?
abajo a la izquierda
¿veis?
se ha quedado
aquí
joder
aquí
no
aquí
aquí
se ha quedado aquí
¿no?
¿la veis aquí?
aquí está la cajita
pero imagina que la quiero poner
realmente aquí dentro
¿cómo podríamos conseguir esto?
pues para eso
tenemos otro position
que se llama
position relative
¿qué hace el position relative?
lo que ocurre
con el position relative
es que estamos creando
un punto relativo
para que cualquiera
de nuestros hijos
pueda tomarlo
como referencia
cuando tiene
tenemos un position absolute
va a estar buscando
a todos los padres
¿no?
a su primer padre
al abuelo
y si no
al documento
¿no?
va a estar buscando
en todos los elementos html
cuál de ellos
es el elemento relativo
cuando no encuentra
ningún elemento relativo
lo que va a pasar
es que va a utilizar
el documento
como referencia
pero ¿qué pasa?
que hay muchas veces
que vas a querer
utilizar esto
vas a querer
moverlo dentro
de esta caja
por lo tanto
necesitas un punto
de referencia relativo
así que al padre
¿vale?
este section
que sería el padre
de hecho vamos a ponerle aquí
parent
¿vale?
vamos a ponerle parent
para que lo vean más claro
¿vale?
pues vamos a ponerle
el position relative
y esto nos va a permitir
que cualquiera
de nuestros hijos
ahora se puedan
se puedan posicionar
de forma relativa a ese
así que el container
ahora por ejemplo
imagínate que lo quiero poner
aquí arriba a la derecha
pues le ponemos
right 0
y top 0
pero fíjate que ahora
esas coordenadas
siempre son relativas
al padre que está
envolviendo
este container
¿vale?
así que por eso
es súper importante
el relative
el relative en realidad
tiene mucha importancia
porque si vosotros
siempre intentáis
utilizar el position absolute
vais a ver
que no tiene
ningún tipo de sentido
vais a estar viendo
que entonces
no funciona correctamente
va a ser muy difícil
que de forma absoluta
siempre estéis
constantemente
moviendo cosas
en el documento
necesitáis pues
este tipo de referencias
relativas
para poder posicionar
correctamente
¿vale?
así que aquí tendríamos
el relative
funcionando
para que veáis
que tiene su sentido
una cosa muy interesante
de justamente
el position absolute
es que también
podríais llegar
a centrar un dip
y esto es una cosa
que se puede utilizar
mucho para modales
¿vale?
muchas veces me dice
¿cómo centrar un dip y tal?
pues mira aquí
tendríamos una forma correcta
¿vale?
mira
fíjate
imagínate que tenemos
este position absolute
aquí con el right 0
top 0
pero ¿qué pasa?
imagínate que dices
¿vale?
quiero que sea
que esté
lo más arriba
a la derecha posible
y lo más abajo
lo más abajo
a la izquierda
posible
¿vale?
fíjate dónde se ha puesto ahora
se ha puesto aquí
y dices
ostras
si yo le he dicho
que tiene que estar
a la derecha del todo
arriba del todo
abajo del todo
y a la izquierda del todo
¿por qué me lo pone
arriba a la izquierda?
bueno
lo que está pasando
es que en realidad
necesitaríamos decirle
que los márgenes
tienen que estar automáticos
y fíjate dónde
te ha dejado el dip
te lo ha dejado
en el centro
porque ha detectado
que si tiene que tener
la misma distancia
por todos los sitios
y le dices
que el margen
que tiene que utilizar
es automático
lo que va a pasar
justamente aquí
es centrarlo
ahora bien
¿esta es la forma
que tendrías que centrar
un dip?
no
esta
es una forma
que puede ser interesante
a veces
por ejemplo
para modales
para modales
para diálogos
y cosas así
pero vas a ver
que hay otras formas
mucho más sencillas
y más recomendadas
para centrar contenido
en este caso
si es un contenido
que va a quedar
por encima
de toda la página web
esto puede tener sentido
pero te recomiendo
que no lo hagas
de hecho
hay una forma
todavía más corta
de hacer esto
y es que
tienes la posibilidad
de utilizar
la propiedad
inset 0
que es una forma corta
de decirle
tanto arriba
abajo
izquierda
derecha
¿vale?
inset 0
y así
estarías haciendo
exactamente lo mismo
y con el margin auto
ya lo tendrías
¿vale?
así que ahí lo tienes
no es la mejor forma
pero es una forma
de lograrlo
que siempre es importante
saber todas las formas posibles
y ya os digo
que esta puede ser interesante
en algunos casos
¿vale?
ya hemos visto
tanto la de position absolute
y hemos visto
position relative
que ya veis
que tiene bastante sentido
vamos a ver
la tercera
que también es bastante interesante
que es position fixed
que esta
es muy chula
mirad
imaginad
que vamos a tener
más contenido
para que aquí
pues tengamos
un scroll típico
¿qué es lo que hace
el position fixed?
el position fixed
lo que hace
es parecido
al absolute
lo vamos a poner
aquí en el container
vamos a ponerle
el fix
¿qué pasa?
pum
fíjate lo que ha pasado
que me lo ha dejado aquí
¿vale?
me lo ha dejado aquí
vamos a quitar esto
del inset
vamos a poner
que se quede
arriba
y a la derecha
¿vale?
¿y qué pasa?
a ver
el fix
es parecido
al absolute
pero como puedes ver
no se mueve
al hacer scroll
ya que se queda
fijo
en pantalla
así que las coordenadas
que le vamos a poner aquí
en el top y el right
van a ser relativas
no al padre
que ponga relative
no al documento
sino a la pantalla
¿vale?
a la pantalla
se va a quedar fija
en el viewport
si le pones top 0
right 0
lo que va a ocurrir
es que se va a quedar fija
en el viewport
en esa posición
¿vale?
así que este position relative
que tenemos aquí
en realidad
no sirve ahora mismo
para nada
porque conforme
vas a tener esto aquí
fíjate que se queda
aunque tú scrolles
se queda siempre
en la misma posición
y aquí
ten en cuenta una cosa
que aquí
tenemos tres elementos
tenemos este de aquí
este de aquí
y este de aquí
para que lo vean más claro
fíjate
ahí tienes el container
pero si le doy a inspeccionar
vas a ver
que en la misma posición
tenemos
estos tres elementos
este container
tiene
claro
como tiene el fix
y tiene que quedarse ahí
tenemos tres elementos
ahora mismo
que están ahí
y fíjate
con el scroll
se queda exactamente igual
o sea
el position fix
es fijo
en el viewport
las coordenadas
que le vas a poner
son las coordenadas
como de la pantalla
de la ventana
no se ve
ni aplicado
no le afecta
ni el scroll
ni si tiene un padre
que sea position relative
nada de esto
¿vale?
así que position fix
significa
este elemento
quiero que quede fijo
y que no importa
el scroll que haga
que siempre se quede ahí
¿para qué puede ser útil este?
el fix
puede ser útil
por ejemplo
habrás visto muchas veces
abajo a la derecha
que ponen una ayuda de chat
para hacer el soporte técnico de chat
y lo ponen abajo a la derecha
pues para eso puede ser interesante
mira
te voy a poner un ejemplo
de para qué se puede utilizar el fix
en mi página de midudev
cuando tú entras
fíjate que aquí abajo
ves
aquí abajo hay como
midudev no dispone de conexión
que es mentira
porque sí que estoy conectado
pero ves
cuando tú haces scroll
aunque esto se queda aquí
fijo
se queda siempre aquí
¿no?
así que esto por ejemplo
sería con un position fix
también
¿dónde puede ser interesante?
con los menús estos que tienes
o también
seguro que has entrado
a alguna página web
que abajo del todo
te aparece un menú
y está fijo
por ejemplo
en el app ngs
no perdón
en aprendeyavascript.dev
aquí
verás
que cuando esto lo ves
en modo móvil
tienes fijo
un menú abajo de la pantalla
vale
aquí
a ver
ah ostras
no sale
ay me ha dejado fatal
a ver
pensaba que salía
hostia
no sale el menú
no sé si es porque
en modo
pensaba que debería salir
un menú
juraría que en móvil
salía un menú
igual lo he roto
igual lo he roto
pero debería
debería salir
debería salir un napbar
no sé por qué
no sé si es que dice
el que lo detecte
de una forma distinta
pero debería salir
si no lo arreglaré
pero bueno
el napbar ese típico
que ponen
también sería fijo
hay uno muy chulo
muy chulo
que vais a ver
que es la leche
y vais a entender
por fin vais a entender
cuál es la diferencia
entre fix
y sticky
vale
porque sticky
es una cosa
que mucha gente
se confunde
con el fix
pero son muy diferentes
y cada uno
muy interesante
vale
que hemos dicho
el fix
se queda fijo
en pantalla
y no le afecta
el position relative
pero qué pasa
que tenemos otro
que se llama
se llama sticky
vale
fíjate el sticky
que es diferente
fíjate que ya
solo cambiarlo
ya cambia
¿por qué?
porque el sticky
no se va a quedar
siempre fijo
en pantalla
sino que va a ser
y va a depender
se va a quedar
pegado al contenedor
vale
y va a tener
va a tener en cuenta
lo relative
y va a decir
vale
yo voy a
voy a dejar
mi posición
siempre que pueda
dentro del contenedor
en el que estoy
y vas a ver ahora
la diferencia
vale
imagínate este position sticky
fíjate
fíjate que scrolleo
y mira lo que le pasa
a este container
fíjate
¿qué está pasando?
lo que está pasando
es que lo está
empujando
fíjate que lo hago así
y lo empuja
si fuésemos a más
vamos a hacer que esto sea
como más
vamos a hacer que tenga más altura
para que lo veamos bien
¿vale?
pero fíjate
vamos a poner
100
no
igual deberíamos
sí
vamos a poner 100
vale imagínate
yo voy scrolleando
y fíjate que esto
lo que está haciendo
es quedarse ahí pegado
hasta donde puede
hasta donde puede
del contenedor
en el que se encuentra
fíjate
ves que no sale
no sale
esto es súper chulo
porque muchas veces
lo que puedes poner aquí
por ejemplo
esto lo habrás visto
en un montón de sitios
y esto solo con CSS
lo que significa
sticky
es que se está quedando
pegado
al contenedor
en el que está
por lo tanto
no es que sea fijo
como lo hemos visto antes
el fix
lo que estaba pasando
era esto
que se estaba quedando
donde no era
pero ahora lo que está haciendo
es quedarse fijo
donde debe ser
en el contenedor
también es verdad
que claro
aquí hay un tema
y es que
te habrás dado cuenta
que debería ser
position relative
porque si no
no debería funcionar
pero lo que ves
es que se queda hasta aquí
se queda hasta aquí
y ahí
como ve
dice
ya no puedo más
pues ahí me quedo
no continúo
y aquí igual
aquí se queda aquí
y entonces empuja
empuja
empuja
hasta que llega el siguiente
y ahí lo tendríamos
o sea que este sí que es importante
que entiendas
que tiene que ver
con el contenedor
en el que se encuentra
o sea no tiene nada que ver
con el fix
puede ser que
visualmente
en algún momento
tenga alguna cosa
que digas
ostras
esto sí que
sí que le afecta
de alguna forma
pero que tengas en cuenta
que no tiene ningún tipo de sentido
no se parece absolutamente
en nada
así que no tiene absolutamente
nada que ver
ese sería el position sticky
así que ya tenemos
el fix
el absolute
el relative
y el sticky
ya teníamos todos los diferentes
el static
que es el que es por defecto
o sea el static
no tiene ningún tipo de misterio
el absolute
ya lo habéis visto
que sería relativo
al primer contenedor
que fuese relative
que si no encuentra ninguno
sería el documento
tendríamos el relative
que no solo el relative
puede ser importante
en cuanto a posición
sino también
de z-index
que eso lo veremos
más adelante
y luego también
teníamos el fix
que puede ser interesante
para dejar fijo
algo en pantalla
respecto al scroll
y luego el sticky
para que se quede ahí
enganchado
ahora lo que vamos a ver
es el z-index
porque vamos a ver
vamos a ver
vamos a hacer una cosa
con el fix
aquí teníamos
el fix
¿no?
el fix
el fix
y vamos a quitar todo
no sé si quitar
o poner aquí
500
vale
vale
aquí el del fix
vamos a poner
no sé si había puesto
bottom
vale
vale
fíjate en el fix
que pasa una cosa
muy curiosa
fíjate aquí en el fix
pasa una cosa
bastante curiosa
fíjate que aquí
podemos ver
que queda por encima
de uno
pero por debajo
del otro
queda por debajo
del primero
pero queda por
no queda por debajo
del segundo
pero por encima
del otro
¿qué está pasando
con este container
que cuando le hemos puesto
este fix
vamos a poner solo
uno
vale
este fix
que se queda ahí fijo
que parece justamente
el sticky
pero fíjate
que se queda así
el fix lo que hacía
era quedarse pegado
a pantalla
lo voy a poner a la derecha
para que lo veáis bien
vale
pero fíjate
que se queda ahí
y lo tenemos aquí
justamente
queda por encima
de uno
pero por debajo
del otro
¿qué es lo que está pasando aquí?
esto lo que está pasando
es otra de las cosas
más complicadas
que ocurren
en el mundo de CSS
vale
y es básicamente
el contexto
de apilamiento
¿qué quiere decir esto?
a ver
nosotros
en realidad
vemos las páginas web
que parece
que son 2D
parece que es una caja
que la tienes ahí
y dices
bueno
esto es un plano
que está como si fuese un papel
y estás dibujando encima
pero no es exactamente así
te tienes que imaginar
que nosotros
cuando vemos los elementos
puede estar
uno por encima del otro
y en realidad
si fuésemos capaces
de rotar
la pantalla
deberíamos ver
en realidad
que tenemos elementos
que están por encima
de otros
y que realmente
sí que hay
como profundidad
en estos elementos
tenemos una capa
encima de otra
así que
digamos que
el apilamiento
cuando decimos
del contexto
de apilamiento
lo que quiero decir
es el concepto
de que en realidad
los elementos HTML
que vemos dibujados
son en 3D
por lo tanto
hay un eje Z
un eje de profundidad
es un eje imaginario
porque no lo vemos
cuando vemos
las páginas web
pero
aunque el usuario
lo ve todo plano
en realidad
tenemos que pensar
que realmente
sí que hay una profundidad
y que en esa profundidad
los elementos
están ocupando
un espacio en HTML
porque aquí
lo podemos ver claramente
aquí podemos ver
que este container
está pasando
por encima de uno
pero por debajo del otro
o sea
¿cómo podría pasar esto?
pues justamente
por el contexto
de apilamiento
el contexto
de apilamiento
¿cómo se forma?
es bastante complicado
pensar de cómo se forma
pero voy a intentar
hacer un poquito
un resumen
el elemento raíz
crea un contexto
de apilamiento
cuando un elemento
tiene una posición
relativa
con un valor
de Z index
distinto al auto
que ahora lo veremos
crea un contexto
de apilamiento
cuando tiene un elemento
flex
cuando tienen elementos
de transfer
opacity
que sean diferentes
a los por defecto
por lo tanto
cuando pasan
este tipo de cosas
crea un nuevo contexto
y por lo tanto
puede tener un elemento
encima de él
¿vale?
hay un montón de casos
y como no me lo voy a saber
de memoria
os voy a decir una lista
muy buena
donde lo vais a encontrar
que es esta
en el contexto de apilamiento
mira aquí tenéis
elementos con opacity
transform
mix blend
filter
perspective
isolation
position fix
hay un montón
¿vale?
un montón de formas
de crear contextos
de apilamiento
aquí justamente
estamos creando uno
porque fíjate
que lo pone aquí
pone position fix
¿ves?
position fix
¿qué está pasando aquí?
pues aquí tenemos
el position fix
ahora cuando esto ocurre
cuando se están apilando
una capa encima de la otra
lo bueno
es que tenemos
una forma de nosotros
determinar
qué capa es la que tiene
que quedar por delante
de la otra
¿vale?
o sea no es que esto
lo hacemos así
y ya decimos
bueno pues ya está
no hay nada que hacer
¿qué le vamos a hacer?
no se puede arreglar
no
realmente sí que lo podemos
arreglar de una forma
y para eso
podemos utilizar
la propiedad
z-index
lo que está pasando aquí
¿qué es lo que está pasando aquí?
¿por qué en uno
queda por debajo
y el otro
queda por encima?
lo que está pasando
es que el primero
fíjate que en el primero
la caja azul
queda por encima del borde
en la primera
lo que está pasando
es que este container
es el que corresponde
con este
con este container de aquí
este de aquí
y este container de aquí
está dentro de este section
este section
es el primer borde
que podéis ver
el primero que se queda por encima
y ahí obviamente
el elemento que está dentro
sí que por defecto
los elementos
que están dentro
de otro elemento
quedan por delante
de ese elemento
porque obviamente
es importante
que el contenido
siempre quede
por encima
del contenedor
esto es típico
imagínate que tienes una caja
con un fondo blanco
¿vale?
y le pones un texto
¿qué esperarías?
¿que el texto quedase
por detrás o por delante?
obviamente
esperarías que el texto
quedase por delante
así que por defecto
siempre
y esto es muy importante
cuando lo entiendas
de por qué quedan
por encima o por detrás
¿no?
es el hecho de que
siempre vas a querer
que el contenido
tenga
una zeta
mucho mayor
para que esté como
más cerca del usuario
y lo pueda ver
el ejemplo del texto
es el más típico
pero puede ser una imagen
puede ser más contenido
puede ser lo que sea
¿vale?
¿por qué en el segundo
queda por detrás?
¿por qué en este
fíjate
ves
en el segundo
queda por detrás?
lo que está pasando
en el segundo
es que ya estamos
viendo aquí
el segundo
section
y el segundo
section
está separado
de este
contenido
es como que
este dip
está quedando
por detrás
de este section
y es que
tiene sentido
porque no es su hijo
no es su hijo
por lo tanto
ya tiene
un nivel
de z
que sería
mayor
pero nosotros
podríamos forzar
que quedase por delante
podríamos decirle
que los contenedores
el índice de z
sea 10
por ejemplo
¿no?
vale
10
¿qué quiere decir este 10?
¿qué quiere decir este 10?
a ver
lo que estamos dando aquí
es un número
como para decirle
la prioridad
¿no?
la posición
que tendría que tener
en ese eje
de profundidad
que decimos
si le quitamos el z
por defecto
vemos que ya ha hecho
un cálculo
en el que ha dicho
vale
cuando es mi hijo
es normal que quede por delante
pero en el siguiente
pues voy a hacer
que quede por detrás
de hecho
podría quedar
incluso totalmente
tapado
si aquí le ponemos
background
fff
vamos a ver que esto
todavía es peor
¿no?
¿veis?
está quedando por detrás
y ya desaparece
pero lo podríamos decir
es bueno
aunque tú tengas
un z index
por defecto
lo cierto es que
este container
quiero que tenga
como más
más
importancia
en el z index
y quiero que quede
por delante
entonces por defecto
lo que le estamos diciendo
es que este
tendría que tener
un z index
de 2
pero por defecto
el otro
tiene uno menor
por lo tanto
lo que vamos a hacer
con esto
es conseguir
que quede por delante
este z index
muchas veces
el problema
es que nos ponemos
y nos volvemos locos
y ponemos unos números
así
¿no?
que la gente dice
ah pues voy a hacer
un 9
y este tipo de cosas
lo que hay que intentar
muchas veces
es utilizar
solo y simplemente
los números
que necesitas
de forma controlada
incluso eso
lo podrías hacer
con custom properties
con variables
¿no?
para decir
bueno
voy a tener
como voy a estudiar
como en mi diseño
y voy a tener en cuenta
esa capa 3D
cuáles son los elementos
que tienen que quedar
más adelante
normalmente
suele pasar
que las modales
y todo este tipo de cosas
tengan que tener
un número
mucho más grande
pero no tiene mucho sentido
que algunas cosas
empecemos ahí
a tener un z index
ahí muy bestia
porque si no
al final
lo que te cuesta
es pensar
cuál es el nivel
que tiene que tener
¿vale?
así que esto sería
un poco como funciona
z index
lo que os recomiendo
porque z index
lo mejor es practicarlo
y aquí tenéis
de web dev
que está súper chulo
este
porque tiene algún
además de que tiene
algunos croquis
que os van a ayudar
un montón
tiene un montón
de ejemplos
que están súper bien
esto es un ejemplo
muy típico
y muy importante
porque
y os lo voy a enseñar esto
un tema que tenéis
que tener en cuenta
con el z index
mirad
vamos a cambiar
este section
¿vale?
vamos a poner
otro estilillo aquí
para que lo veamos
y vamos a poner
tres cajas
aquí
¡ay!
me he copiado lo que no era
sí
me he copiado lo que no era
vamos a poner
estas tres cajas
¿vale?
que es un ejemplo
similar a este
una cosa bastante importante
del z index
aquí lo único que he hecho
es un section
que tenemos una caja
con un div
un 1
un 2
un 3
y fíjate que lo que hemos hecho aquí
es que
el div
cada una de las cajas
tiene un margin top
menos 100
¿qué pasa con esto?
claro
cuando tú le pones
margin top
menos 100
menos 150
lo que está pasando
es que por arriba
va a tomar espacio
y fíjate que va a quedar
por encima o por debajo
dependiendo de cada uno
claro
aquí lo que podemos ver
es que está funcionando
más o menos como se le espera
cuanto más abajo
también está el contenido
es normal que tenga que tener
un z index mayor
es normal que el contenido
que está más abajo
en nuestro html
queramos que quede
por encima del otro
por eso está pasando esto
de forma por defecto
¿vale?
lo podríamos cambiar
pero podemos ver que por defecto
el 3
que sería el contenido
que tenemos aquí
aquí podemos ver
que queda por encima del 2
porque está un poquito más arriba
y el 2 queda por encima del 1
porque está un poco más arriba
o sea lo que está haciendo por aquí
es justamente como machacarlo
¿no?
esto sería un poco
lo del z index
pero ahora no lo estamos utilizando
alguien puede decir
ostras
vamos a utilizar el z index
para arreglarlo
quiero que el amarillo
este de aquí
quiero que el amarillo
quede por encima de todos
lo que estamos utilizando aquí
es un selector
¿vale?
deep first child
y aquí lo que estamos haciendo
es que esto quede
queremos que quede por encima de todos
¿vale?
pues le pondríamos un z index
99999
y no funciona
¿por qué no funciona?
porque a ver
el z index por defecto
tiene que tener
algún tipo de relación
claro
yo le estoy diciendo
z index 9999
pero hemos dicho
que hay que crear
como
contextos de apilamiento
¿no?
le estamos diciendo
oye pero tienes que apilarse
¿y cómo hemos dicho
que se crean?
claro
no estamos creando ninguno
tendríamos que crearlo nosotros
entonces
si queremos que
el 1
sea el que quede por encima
que lo puedes hacer así
tendríamos que asegurarnos
que todos tienen un position relative
¿vale?
position relative
y ves
ahora sí
que ha detectado
ha dicho
vale
ahora que sé
a qué son relativos
los div
tienen el position relative
ahora voy a crear
un nuevo stack
de apilamiento
y ahora sé
que este
999
es mayor
que el que va a tener
por ejemplo
el rojo
y el azul
pero podríamos hacer
decir
bueno
vamos a hacerlo
de otra forma
vamos a decir
mira vamos a hacer un selector
que quede el segundo
¿vale?
el segundo
lo hacemos así
en excchild
y vamos a hacer
que tenga el background
de calor 0.9f
y así lo tenemos todos
imagínate que queremos
ahora que sea
el segundo
que quede por encima
de todos
pues tendríamos que hacer
un z index
todavía mayor
al que lo habíamos puesto antes
¿ves?
y ahora quedamos
tendríamos que
el 2 está por encima
de todos
el segundo
sería el amarillo
porque le hemos puesto
un valor más bajo
y finalmente
tendríamos el last child
porque es el que tiene
el valor por defecto
y es el que tenemos
el más bajo
tenemos que entender
que en ese stack
de apilamiento
tendría que tener
un z index
de 0
¿vale?
pero esto lo podríamos cambiar
fijaos que no hace falta
poner números muy grandes
una vez que tienes claro
como quieres que quede
cada uno
z index 2
z index 1
y así nos aseguramos esto
a este le ponemos
z index 3
y ya quedaría
por encima del otro
¿vale?
al final lo importante
es que entendamos
cómo funciona
el stack de apilamiento
cuando se activa realmente
que si le quitas
el position relative
entonces no lo tiene
y cuando se crean
también se pueden crear
con el position fix
que lo hemos visto antes
y con diferentes cosas
¿vale?
hay que practicar el z index
a ver
el z index
lo importante es no abusar de él
porque el problema
no es del z index en sí
que de hecho
también se pueden poner
valores en negativo
sino es cuando se abusa
y no se entienden
entonces claro
cuando abusas
y no lo entiendes
entonces te empiezas
a poner un montón
de z index
por todos los sitios
y eso lo que hace
es que sea complejo
trabajar con z index
¿no?
está general
no entendía
el contexto
de apilamiento
os recomiendo
mucho mucho mucho
el de MDN
el tema del apilamiento
porque ahí lo explican
muy bien
y os dicen
todas las veces
que se crean
¿vale?
y aquí los tenéis
todas las propiedades
y en qué situaciones
se hacen
¿no?
yo leí que es ponerlo
mejor de 100 en 100
no
o sea
no es verdad
o sea
quiero decir
puede ser una forma
de hacerlo
hacerlo de 100 en 100
pero no es tan importante
cuál es el número
sino más el control
y además
hay a veces
incluso
funciones
de sash
o custom properties
que podéis hacer
para controlarlo
¿no?
yo con mi 999
para el mayor de todos
es que
a ver
utilizar el 9999
es lo típico
pero no es lo que os recomiendo
os recomiendo de
mira
a mí
si lo queréis hacer
cada 100
puede ser
no mala
puede no ser
una mala idea
pero lo importante
es que lo tengáis controlado
¿ya explicaste los float?
no
porque yo considero
que los float
a día de hoy
no son necesarios
entonces
yo no explicaría
ni siquiera los float
porque no me parecen
ni importantes
ni interesantes
a día de hoy
y por eso vamos a explicar
flexbox ahora
el contexto de apilamiento
es el mismo
para todos
o se crean
por cada elemento
cuando lo
descloqueas
el contexto de apilamiento
es compartido
desde la raíz
para todos
pero se va creando
uno nuevo
dentro
de cada elemento
claro
va siendo un nuevo
contexto de apilamiento
que es justo
lo que hemos visto aquí
¿no?
aquí fíjate
que aquí
con este position relative
no está afectando
y hasta que no hemos
hecho el position relative
y crea el contexto de apilamiento
entonces
es que sí
que lo hemos tenido
¿no?
si sticky no se puso en write
a pesar que lo tenía
o vi mal
hostia
pues no me fijé
pero puede ser
pero puede ser también
porque en realidad
no sé si llegué a poner
el position relative
no me fijé
¿no?
los float me sirvían
por un aspecto muy particular
de una maqueta muy específica
que requería
que la imagen desbordara
su contenedor
claro
es muy específico
vamos a hablar de flex
que al final
muchas veces
lo que pasa con flex
hay muchas preguntas
de cuando utilizar flex
y cuando utilizar grid
y no sé qué
hoy vamos a hablar
de flex
que me parece como
uno de los más interesantes
e importantes
flex
porque con flex
puedes hacer
el 95%
incluso lo que haces
con grid
muchas veces
lo puedes hacer con flex
te puede solucionar
mucho la vida
te puede quitar
un montón de problemas
y al final
lo importante
es que al menos
sepas flex
grid
es genial
para muchas cosas
pero vamos a ver
sobre todo
cuando puede ser interesante
grid
os lo comentaré después
de grid
pero vamos con flex
que flex
es muy especial
os conté
de display
que había diferentes displays
vamos a ver
vamos a
vamos a quitar todo esto
voy a dejar el 1,2,3
ok
vamos a poner un section
por ahora vamos a poner
que es section
que es el padre
vamos a poner aquí
el parent
vale
vamos a poner parent
y vamos a poner aquí
un item
entonces vamos a poner
tanto aquí
aquí y aquí
class item
vale
y con esto
ya tendríamos
nuestros items
esto por aquí
esto por aquí
vale
que hacemos con el item
voy a hacer que sean cajitas
vamos a hacer que sean cajitas
con un pixel
vamos a hacer que tenga una apacidad
.9
más que nada
lo mismo
algo parecido
pero vamos a hacerlo solo con cajitas
para que lo veamos muy claro
vamos a hacer que tengan
un color así
luego le cambiamos
mira
vamos a hacer algo similar
pero que sea
como lo que teníamos
pero desde cero
vale
el item
el primer child
vamos a hacer que tenga
el color que sea yellow
y el
uy
que he hecho aquí
first child
lo he hecho bien
¿no?
first child
item
claro es que igual
no
punto item
vale
es que he puesto algo mal
me parece ¿no?
antes
last child
venga ponemos otra vez
el color rojo
y tal
vale
entonces
hasta aquí habíamos visto
el display
el display block
el display block
lo que hacía
era crear
y mostrar
ese contenido
como si fuese una caja
y en lugar
de hacer que el contenido
se leyese
de forma
en línea
lo que hacemos es
tener un bloque
y el siguiente elemento
aparece después
del salto de línea
¿no?
entonces
aquí podemos ver
que este contenedor
este div
que es lo que le está afectando
este bloque
este de aquí
display block
este es donde tenemos
el display block
lo tenemos aquí
por defecto
div
tiene display block
por eso
si le quitamos esto
y le quitamos esto
vas a ver que
se comporta
exactamente igual
¿no?
pero ¿qué pasa?
que también
podríamos decirle
el item
le podemos decir
que se mostrase
en línea
si se muestra en línea
¿qué es lo que pasa?
bueno
como puedes ver
que se muestre en línea
significa que se va a comportar
exactamente igual
que como si fuese texto
o sea
que va a ir
uno
en línea
con el otro
en dirección
a como leeríamos
el texto
en nuestro caso
es de izquierda a derecha
pero en otro sitio
¿vale?
en otro país
esto que estamos viendo nosotros
de izquierda a derecha
en otro sitio
lo podrían ver
de derecha a izquierda
¿vale?
para que lo tengas claro
cuando decimos que sea
en línea
es siguiendo
siguiendo la línea
del texto
y se pone uno
detrás del otro
como funciona el texto
una palabra detrás de la otra
es en línea
¿vale?
y lo que está ocurriendo aquí
es que después
cada elemento va
uno seguido del otro
no hay un salto de línea
y el problema
igual que le pasa al texto
es que
tanto el alto
como el ancho
no le afecta
lo que estamos teniendo aquí
es que si yo le digo
que cada item
son 100% píxeles
o sea
100 de ancho
y 100 de alto
fíjate que no está ocurriendo este
no está pasando aquí
que sean 100 píxeles
lo está ignorando
porque
cuando mostramos
la caja
en línea
lo que está haciendo es
lo que sea el contenido
y después
el siguiente contenido
el siguiente contenido
sin salto de línea
y nada ¿vale?
ahora
si ponemos el block
¿qué es lo que va a pasar?
el block
sí que va a hacer esto
le va a afectar
el ancho y alto
y después
cada contenido
lo que va a ocurrir
es que va a ser
el sentido
de la lectura general
que es de arriba a abajo
¿no?
lo está apilando
de arriba a abajo
cada contenido
no lo pone en línea
sino de arriba a abajo
que sería también
la dirección
en la que leemos
los textos
de arriba a abajo
y finalmente
hace un salto de línea
para poner el siguiente contenido
por eso
aunque este 2
aunque este 2
realmente cabe aquí
en lo que estamos viendo
es que le está dando ahí
un salto de línea
para poner el siguiente
¿vale?
muy bien
ahora
tenemos
más displays
tenemos diferentes displays
y uno de ellos
es display flex
¿display flex qué es?
es una propiedad de CSS
que establece
cómo tienen que funcionar
realmente el contenedor
respecto a sus hijos
o sea
que el flex
no lo tenemos que utilizar
directamente en el hijo
sino que tenemos que utilizar
en el contenedor
esto
lo tendríamos que poner aquí
display flex
y esto directamente
lo que va a ocurrir
es que vamos a tener
un contenedor
que es flexible
y que nos va a permitir
a todos los hijos
ser alineados
de otra manera
mucho más eficiente
tanto horizontal
como vertical
incluso cuando tenemos
tamaños desconocidos
o dinámicos
¿vale?
y fíjate ya
la diferencia
del display flex
que lo que ha ocurrido
es
uno
a los hijos
le está afectando
el alto y el ancho
pero ha detectado
que sí que tiene
espacio suficiente
para ponerlos a los lados
y lo ha puesto al lado
¿por qué?
porque ha determinado
que tiene
una dirección
en la que puede
este contenido estar
y por defecto
la dirección
en la que nosotros
estamos trabajando
es como filas
así que como una fila
ya ha dicho
vale
la dirección
del contenido
de este contenido
flexible
va a ser una fila
y por lo tanto
voy a poner
el contenido
en fila
en nuestro caso
en nuestro caso
de lectura
es de izquierda a derecha
pero luego veréis
por qué es importante
entender esto
o sea
no es correcto
no es correcto
y tenlo muy en cuenta
pensar
y decir siempre
que es de izquierda a derecha
o sea decir
en fila es de izquierda a derecha
no es así correcto
y luego vas a ver por qué
y lo vas a ver clarísimo
¿vale?
aquí que le podemos poner
el flex direction
el flex direction
por defecto
es row
¿vale?
es en filas
pero también le podríamos indicar
cuál es la dirección
en que nosotros queremos
que funcione
que realmente no sea así
le podemos decir
que sea por columnas
¿y qué va a pasar con las columnas?
que aunque tú
ahora estés viendo
que sea muy parecido
visualmente
a lo de deep
lo que está pasando
realmente
no es tanto
que está haciendo
un salto de línea
sino que está
apilando todos sus hijos
como si fuese una columna
¿y cómo es una columna?
pues arriba uno
abajo el otro
y abajo el otro
¿vale?
pero si tuviésemos otro ancho
podríamos tener algo al lado
lo podríamos llegar a hacer
podríamos apilarlo
de formas totalmente distintas
si quisiéramos
pero una cosa
que ya te estarás dando cuenta
si podemos tener la dirección
que sea columnas
o filas
es que flex
es unidireccional
es de un solo eje
siempre
siempre
siempre
flex
vamos a estar trabajando
de un solo eje
ya sea filas
o columnas
y esta
es la diferencia
clave
con grid
porque grid
justamente
es una cuadrícula
sería correcto
cuadrícula
que no me salía
una cuadrícula
entonces
en flex
siempre vamos a estar trabajando
en un eje
ya sea un eje
en filas
o en columnas
pero
en grid
al final
es una cuadrícula
entonces
al ser una cuadrícula
¿qué pasa?
que vais a poder trabajar
bidimensionalmente
vais a poder trabajar
tanto en filas
y en columnas
a la vez
y es una de las cosas
más interesantes
que tiene
ahora bien
si solo necesitáis un eje
podéis utilizar también grid
porque os permite trabajar
en dos ejes
a la vez
pero también
podréis utilizarlo
solo para uno
pero para flex
solo podéis trabajar
en una
filas
o columnas
ya veis que no podéis decirle
ni diagonales
ni cosas raras
flex direction
¿no?
flex direction
o column
o row
ahora bien
ahora bien
tened en cuenta
que también
hay otros
algunos valores
un poco especiales
por ejemplo
tenéis row reverse
que fíjate lo que hace
es darle la vuelta
le estaría haciendo
el sentido contrario
estaría poniendo
el último al final
y sería
en filas
pero al revés
sin necesidad de hacer
ninguna cosa
esto está bastante interesante
porque hay veces
que hay mucha gente
que para hacer el reverse
utiliza javascript
y hay veces
que con esto
te lo puedes ahorrar
porque en lugar
de hacer un reverse
del array
lo puedes hacer visualmente
en el caso
de que sea
un array conocido
que no sea dinámico
y que al final
pues a mejor imagínate
que son 15 opciones
y dices
reverse
hay gente que lo hace
con javascript
pero es muy fácil
hacerlo muchas veces
con esto
y así te quitas
un montón de complejidad
y lo mismo
con la columna
también le puedes dar
la vuelta a la columna
¿vale?
y ahora vais a ver
más cositas
que tienen cosas
muy chulas
pero imaginemos
que seguimos aquí
con el flex
¿vale?
esta es la dirección
por defecto
por defecto
es display flex
la dirección
es por filas
fíjate que
la dirección
de escritura
es importante
si tú le pones
direction
que el direction
es justamente
lo que indica
es la dirección
de escritura
¿no?
pues tú en la dirección
le podrías poner
rtl
rtl que quiere decir
right to left
o sea escribes
de derecha a izquierda
entonces fíjate
que solo poniendo
flex direction flex
ya le ha dado
la vuelta al contenido
¿entiendes?
ya le ha dado la vuelta
al contenido
porque el contenido
ahora se muestra
correctamente
porque la gente
que escribe
de derecha a izquierda
lo que está pasando
es que lee de derecha
a izquierda
y entonces ya tenemos
aquí
que lo primero que le dan
es el 1
luego el 2
y luego el 3
¿no?
o sea que ahí ya tenemos
la diferencia que es clave
y lo mismo pasaría
un poco con el writing mode
podemos poner writing mode
y le decimos
que es vertical
de izquierda a derecha
¿vale?
y fíjate que pasa
¿no?
que está cambiando
totalmente
fíjate que flex
lo interesante que tiene
es que aquí
ya podemos ver
cómo está ajustando
nuestro contenido
a esto ¿no?
estamos viendo aquí
que tenemos aquí
el primero
¿vale?
el primero
lo tenemos aquí
y como estamos haciendo
que la escritura
es vertical
de izquierda a derecha
pues está ajustando
el contenido
esto es espectacular
porque aunque vosotros
en el 95%
98%
del trabajo que hacéis
solo pensáis en español
y está bien
no pasa nada
pero es importante
que entendáis esto
porque esta es la implicación
importante que tiene
de flex
cuando hablamos de filas
y de columnas
y es que se adecua
también a la escritura
a los diferentes idiomas
y es clave
porque queráis o no
internet
es mundial
no es solo en español
no es solo occidental
es de un montón de sitios
entonces tenéis que tener
en cuenta también esto
¿no?
de que también
tanto el row
como el column
se afecta
dependiendo de la dirección
de escritura
tendríamos el tema
del flex grab
¿vale?
tenemos el flex direction
y tenemos otra cosa
que por defecto
sería el flex grab
que por defecto
es no grab
ahora
si no hay suficiente espacio
en el contenedor
los elementos
se van a desbordar
vamos a ver
vamos a hacer aquí
un borde
vamos a poner
4 píxels
solid
y en negro
¿vale?
vamos a forzar
que tenga 300 píxels
y
o menos
no sé
200
250
200 píxels
¿vale?
¿qué está pasando aquí?
lo que está pasando aquí
fíjate
yo le he puesto
que sea de 200 píxeles
si miramos a ver aquí
vamos a ver
de cuánto lo ha dejado esto
y cuánto está haciendo
que ocupe cada cosa
¿vale?
vamos a poner esto por aquí
quitamos al 100%
y esto lo ponemos abajo
para que lo hagamos bien
¿vale?
y aquí tenemos el section
bueno
es 208 por el borde
¿vale?
pero bueno
¡ay!
coño
le he puesto flex
aquí le he puesto flex direction flex
pero bueno
era row
y como por defecto era row
pues ya funcionaba
no sé por qué he puesto flex
pero me he equivocado
era row
entonces
dicho esto
fijaos que yo le he puesto aquí
que el padre
son 200 píxels
y cada item
tiene que ser de 100 píxels
pero claro
si cada item
es de 100 píxels
el tema
es que
no debería caber
no debería caber
pero por defecto
tenemos este flex wrap
que le decimos no wrap
lo que está pasando por aquí
es que ya está ajustando
claramente el contenido
que tenemos
para decir
bueno
como no me
no cabe
lo que voy a hacer es
hacer más pequeño
cada uno de los elementos
¿vale?
lo que estamos teniendo aquí
es
esto
fíjate
se ve
se ve un poquito
que hay como una flecha ahí
y es bastante curiosa
lo que está pasando ahí
es que está diciendo
mira
debería haber sido
esta anchura
pero lo he ajustado
he hecho un shrink
¿vale?
que sería como lo he encogido
a este ancho
para que realmente
quepa perfectamente
porque si no
lo que iba a pasar
es que no iba a caber
y claro
si no cabe
pues al final se ve mal
y la hemos liado parda
¿por qué está pasando esto?
esto está pasando por magia
este no wrap
¿no?
este no wrap
¿qué es lo que quiere decir?
lo que quiere decir
es que por defecto
no va a hacer
si no hay suficiente espacio
en el contenedor
lo que va a hacer
es decir
bueno
no quiero que me lo pongas
en una línea más
hazlo como tú quieras
intenta lo que tú quieras
pero tiene que caber aquí
¿vale?
esto no quiero que me lo cambies
por nada del mundo
tiene que caber aquí
de alguna forma
hay veces que se puede hacer
con desbordamiento
depende de unas cuantas cosas
que ahora veremos
pero lo que sí que tiene claro
es que no está haciendo
un salto de línea
para hacer que quepa
el contenido
bueno
¿qué es lo que vamos a hacer
aquí en este caso?
pues fíjate
qué pasa si le pones wrap
¡pum!
¿qué está pasando?
cuando le decimos el wrap
es que le estamos diciendo
oye
te doy la posibilidad
de que si no cabe
hagas un salto de línea
¿qué es lo que ocurre?
que no cabe
porque cada item
es de 100 píxeles
tenemos 200 disponibles
por lo tanto
lo que dice es
vale
como no cabe
porque tenemos 100 píxeles
pues lo que hago
es otro salto de línea
mira
y aquí tenemos algo interesante
porque ves que pone 200 píxeles
y no cabe
no cabe porque
dos items
deberían ser 200 píxeles
pero no cabe
y esto
no sé si con el box i
si lo arreglaremos
vamos a ver
border box
no
no
no solucionamos
porque
no sé si aquí también
lo deberíamos poner
no
pensaba que a lo mejor
a lo mejor iba a caber
pero no cabe
porque va justo
no cabe
pensaba que no iba a caber
por el borde
pero lo cierto es que no cabe
porque no cabe
no cabe por poco
no cabe por poco
pues así sigue cabe
y sería justamente por el borde
pero pensaba que con el border box
igual conseguiríamos que cupiera
pero no cabe
pues eso
pero es por el borde
por lo que no cabe
dicho esto
el tema es que como no cabe
pues lo que está haciendo básicamente
es saltárselo a una nueva línea
pero ten en cuenta
que por defecto es no wrap
así que es importante que sepas
que por defecto es este valor
porque muchas veces la gente
lo que le pasa
es que se vuelve loca
de
¿por qué me está cambiando el tamaño?
¿por qué me lo pone toda una fila?
¿por qué no sé qué, no sé cuánto?
o sea que ya está
lo que no cabe es otra cosa
en ya sabes dónde
joder Savitar
cómo estás atento
y estás aquí encima
en una clase de CSS
madre mía
estás más perdido
más perdido
que el día que te encontraste eso
en la boca
que te puse tío
trozo de carne
sí el trozo de carne
ya sabes
cuando fuimos al asador aquel
que fue buenísimo
en fin
el wrap lo que va a hacer es
si no cabe
te permito que hagas un salto de línea
si pones no wrap
es que no tienes que tener el salto de línea
¿vale?
tienes que saber
que hay una forma abreviada
de utilizar los dos
puedes utilizar flex flow
y le puedes indicar
por un lado
la dirección
row
y luego decirle
si quieres no wrap
o wrap
¿vale?
entonces aquí lo puedes decir
en una
muy poco usado
la verdad
el flex flow
lo he visto muy poco
pero que sepas
que es una forma abreviada
de hacer exactamente lo mismo
por si te interesa
vamos a poner
el espacio
controlar el espacio
de los elementos flexibles
que tenemos dentro
vamos a poner con el no wrap
que queda un poquito mejor
¿vale?
bueno
suponemos
esto ¿no?
que tenemos este contenido
200 píxeles
y ¿cuál es el problema?
imagínate
si le ponemos un poquito más
350
bueno claro
350 no lo vamos a ver
vamos a hacerlo más pequeño
vamos a poner 300
y vamos a hacer que los ítems
sean solo de 50
¿no?
vale
fíjate lo que pasa aquí
que son de 50 píxeles
y tenemos aquí
más
más espacio disponible
podríamos rellenar ese espacio
ahora vemos
como lo
lo podemos rellenar
¿no?
¿cómo
como realmente hacemos
que aunque sea 50 píxeles
le digamos
oye
quiero que estos elementos
se adecúen a ese eje
y que pueda
pueda crecer
todo lo que yo quiera
a ver
el contenedor
tiene más espacio
para mostrar los elementos
se están alineando
ahora mismo
al principio
pero yo lo que me gustaría
es que
se ocupasen
todo el espacio
¿por qué está haciendo esto
por defecto?
por defecto
lo que está ocurriendo
es que aquí tenemos
diferentes propiedades
voy a poner esto por aquí
en CSS
tenemos diferentes propiedades
una es flex grow
que por defecto
es 0
que quiere decir
los elementos
no crecen
¿vale?
no crecen
luego tendríamos flex ring
que por defecto
es 1
que quiere decir
los elementos
pueden reducir
su tamaño
a un tamaño
más pequeño
que su flex basis
¿vale?
y su flex basis
por defecto
es auto
¿vale?
que los elementos
tienen un tamaño base
en auto
en automático
que por automático
en este caso
va a tener en cuenta
sobre todo el width
que le hemos puesto aquí
claro
le hemos puesto un width
de 50 píxeles
pues va a esperar
que sean 50 píxeles
entonces ya podemos ver
que lo que está ocurriendo
es
1
le estamos diciendo
que los elementos
que tenemos en flex
no pueden crecer
o sea que no pueden crecer
no podemos hacer
que crezcan
si le ponemos un 1
podrían crecer
pero en este caso
no va a hacer nada
por el flex basis
flex spring
le estamos diciendo
que los elementos
pueden reducir su tamaño
y de hecho
antes hemos visto
que lo han hecho
si nosotros le ponemos
aquí un 100
fíjate que aquí
que ha pasado
que el no grab
que hacía
que evitase
un salto de línea
y el ancho
a 100 píxeles
junto con el flex
shrink 1
que este es el valor
por defecto
estos son los valores
por defecto
vale
que esto
valores
por defecto
lo que está ocurriendo aquí
es que como si que
le estamos permitiendo
que puedan reducir
su tamaño
gracias a esto
realmente está haciendo
esto de
de que se queda así
si no
claro lo que pasa
es que tiene el auto
que el auto ya no está salvando
sino lo que podríamos hacer
es que se redujese
su espacio
para también ajustarse
al tamaño
vale
así que este sería por el defecto
ahora cambiaremos el auto
porque el auto es el que tiene
el tamaño base
que nos está engañando
y tal
y que sepáis que todo esto
sería como el flex inicial
sería como la forma inicial
de tratar el flex
vale
ahora la clave está en el flex basis
porque imagínate que en flex basis
le decimos
oye
el tamaño es 200 píxels
ok
le decimos que
es que claro
tengo el grab aquí
y le decimos aquí
que no puedes ni ser más pequeño
ni más grande
ni lo que sea
el flex basis
va a ser el tamaño base
que vamos a tener
por lo tanto
vamos a tener ahí un tamaño
que sea de 200 píxeles
por defecto
y le podemos decir
que crezcan
o que no crezcan
y todo esto
vale
entonces
bueno yo estoy viendo
y porque no está cambiando
nada de esto
a ver a ver
a ver si es que la he liado ahora
porque me estoy volviendo
un poco loco ahora
con el flex
a ver
a ver que está pasando
esto cuánto ocupa
que me lo diga
flex
vale
esto es 100
100
50
50
ah no
claro es que
hostia
pero porque no me ha dicho
nadie nada
que le estamos poniendo
donde no es
claro es que le estamos poniendo
todo esto
todo esto flex y tal
todo esto
se lo hemos puesto
donde no es
claro es que todo esto
que se lo he puesto aquí
no va aquí tío
madre mía
ya estaba flipando
y es que esto va aquí tío
es que van el item
y a lo mejor me lo habéis dicho
y no me había enterado
igual es sabita
que me ha puesto nervioso
si sabita me lo dijo
si sabita me va a decir
lo que yo sé
no es verdad
nosotros sabíamos
por lo que era decir
si si si
porque estamos en un curso de css
bueno pero se me ha ido
se me ha ido
se me ha ido
claro es que
claro como
tengo que estar arriba abajo
y tal
claro es que esto no va
el padre
esto va en el hijo
esto va en los hijos
vale
ahora ya tiene sentido
ahora ya tiene sentido
vaya ya
claro claro
vale
ahora ya lo tenemos
vale
vale aquí por ejemplo
claro es que si no
no tenía sentido
ya estaba flipando
el tema es que estos
flex grow
flex ring
flex basis
esto va en los hijos
vale
y por defecto
ya hemos dicho
que es el flex initial
de hecho estos son
los valores por defecto
el flex grow
a 0
el flex ring
a 1
y el flex basis
a auto
vale
ahora sí
ahora sí
entonces los elementos
no crecen
pero sí que pueden reducir
su tamaño
ahora sí
que le podemos decir
esto de los 200 píxeles
vale
ahora sí que podemos ver esto
que ahora sí que está ocupando 200 píxeles
100 píxeles
lo que sea
claro
en este caso no ocupa más
pero fijaos que aquí
este ocupa un poquito más
y los otros ocupan un poquito menos
ahora sí que podemos ver
que le está afectando perfectamente
vale
entonces
el padre cuánto ocupaba
100 píxeles
perfecto
lo que podemos hacer es
por ejemplo
que ajustando el tamaño
esto sería ajustando a 100 píxeles
y que sí que se puedan hacer
un poquito más pequeño
pero podemos hacer
que se ajuste automáticamente
a su contenido
vale
si le ponemos un flex
no grab
y le decimos que se ajuste
automáticamente a su contenido
y que se pueda hacer
tan grande también
se pueda reducir
o hacer más grande
fijaos que ahora
independientemente
de cuál sea
oye
he hecho esto
independientemente
de cuál sea
el ancho del padre
le hemos puesto 200 píxeles
imagínate ahora 100
pero si ahora lo hacemos más grande
lo que estamos haciendo con esto es
oye
los elementos pueden crecer
los elementos se pueden reducir
y el tamaño es automático
esto lo que estamos haciendo es
del espacio que tiene
va a ajustarse
a todo lo que tenga disponible
independientemente
va a tener en cuenta
el contenido
fíjate que el primero este
ocupa más automáticamente
pero lo que estamos haciendo aquí
es que estos 200 píxeles
los está rellenando completamente
porque le hemos permitido
que se hagan más grandes
y que además se hagan más pequeño
que se ajusten automáticamente
vale
y esta sería la forma
del flex auto
que es como la más popular
porque es como
el contenido
se va a ajustar
automáticamente
al contenedor
y ya está
otra cosa que podríamos hacer
es
independientemente
del contenido
que todos tuviesen
el mismo ancho
o sea
en lugar de utilizar
el flex basis
le podríamos decir
vale
los elementos pueden crecer
los elementos se pueden hacer
más pequeños
pero vamos a hacer
que la base
sea cero
y esto lo que vamos a hacer
es que todos tengan
el mismo ancho
fíjate que ahora
independientemente del contenido
ahora todos tienen
el mismo ancho
si le pones un auto
ves
si que se va a ajustar
automáticamente
según el tamaño base
según el contenido
que tiene cada uno
si le pones el cero
independientemente del contenido
los tres van a tener
el mismo espacio
y la forma
abreviada de hacer esto
sería
flex 1
que esto también lo habréis visto
un montón de veces
¿de dónde sale este flex 1?
pues flex 1
lo que quiere decir es
los elementos pueden crecer
los elementos pueden reducir
su tamaño
a un tamaño más pequeño
que el flex basis
y el flex basis
si lo pones cero
que al final es
el tamaño base
claro si es cero
si todos parten
desde la misma base
si cada uno
se tiene que distribuir
el espacio
va a ser el mismo espacio
para todos
pero si le pones auto
lo que va a hacer
es tener en cuenta
el contenido de cada uno
para distribuir el espacio
¿vale?
así que ahí tendríais
un poquito la diferencia
y una cosa
que es súper interesante
de esto
una vez que por ejemplo
ponemos esto
del flex basis
lo ponemos a cero
bueno a cero
vamos a quitar todos estos
hemos dicho que la forma corta
sería esta
flex 1
pero una cosa muy interesante
es que el 1
también puede servir
como una medida relativa
para indicar
cuánto espacio
tiene que tomar
cada uno de los elementos
¿vale?
por ejemplo
cuando le decimos flex 1
vamos a poner los 3 aquí
vamos a poner el item
nc child 2
y este va a ser
el background blue
y quitamos esto aquí
¿vale?
ya tenemos aquí
el primero
el segundo
y el tercero
una cosa bastante interesante
es que cuando le decimos flex 1
le decimos
oye
todos tienen que tomar
el mismo espacio
pero imagínate
que por lo que sea
queréis que el primero
tenga el doble de espacio
que el resto
pues lo que podéis hacer es
vale
pues el primero
quiero que tenga
el doble de espacio
que el resto
por lo tanto
el primero
va a tener de ancho
el doble
que los otros elementos
y aquí lo podéis ver
por ejemplo
este
si lo medimos aquí
vamos a ver
que tiene
unos 350
si vamos al otro
pues deberían ser unos 100
no
a ver
he mirado el que no es
son 160
¿vale?
unos 160
y mirando este
pues vamos a ver
que tiene 80
¿vale?
o sea que tiene el doble
lo mismo podríais hacer
si en lugar de tener 2
vamos a decir
que tenga 4 veces
¿vale?
pues podemos decir
el primer hijo tiene 4
el segundo tiene el doble
del que solo tiene 1
y así lo podemos ver
¿no?
podemos ver
que el último hijo
que por defecto
pues ahí tendría el flex 1
se ha quedado con 1
el segundo hijo
tiene el doble
del que solo tiene 1
y el primer hijo
tiene 4 veces
del que solo tiene 1
y el doble
del que solo tiene 2
¿vale?
es una referencia relativa
de cuánto espacio
tienen que tomar
respecto al padre
¿no?
le estamos diciendo
este tiene que tomar
4 veces
lo que ocuparía
1 de los espacios
es una forma
cuando lo pensamos
muchas veces
en proporciones
como las columnas
es como decir
mira
si tengo
10 columnas
pues aquí
quiero que se queden 8
aquí una
y aquí una
¿no?
es como la proporción
que tiene que tomar
del espacio
cada uno de ellos
¿vale?
lo digo porque
podéis poner el flex 1
para que todos
tengan el mismo espacio
pero imaginad
que el del medio
queréis que tenga
el doble de espacio
pues le pondréis un 2
y tomará el doble
del espacio
de lo que tienen
cada uno
de los elementos
que tienen un 1
¿vale?
si le ponéis un 2
van a tener
el primero y el segundo
el doble del espacio
que el que tiene el 1
¿vale?
así que es bastante importante
esto porque al final
es una forma
de distribuir el espacio
de forma mucho más sencilla
y de forma
que no tengas que preocuparte
de pensar
en píxeles
en tantos por ciento
ni cosas así
porque además
en tantos por ciento
lo importante ahora es
justamente
el espacio
que tienen disponible
y punto
una cosa también
muy interesante de flex
es que podéis utilizar
el orden
para cambiar
visualmente
cómo se ven los elementos
por ejemplo
ves aquí que tengo
primero
segundo
y tercero
una cosa muy chula
es que podéis utilizar
la propiedad
order
para decir
bueno
el primero quiero que
su orden sea 3
¿vale?
ahí
sea 3
y el segundo
quiero que su orden
sea 1
y el tercero
quiero que su orden
sea 2
¿qué hemos hecho con esto?
pues los hemos desordenado
con CSS
lo que está pasando aquí
es que le estamos dando
como el orden
en el que los hijos
se tienen que mostrar
en nuestro contenedor flexible
fijaos
que el primer hijo
ahora aparece el último
porque le hemos dicho
que el orden es 3
aquí lo importante
es un poquito
como el z index
le podéis poner el valor
que queráis
y lo que va a hacer
es ordenarlo
según el valor numérico
que tenéis en el orden
así que si le ponéis
el número que sea
lo va a dejar el último
porque este número
es mayor
y van a empezar
primero a poner
el número menor
el primero
y así
consecuentemente
lo importante de esto
muchas veces
y lo que está muy chulo
es que podéis cambiar
visualmente
el cómo se ve algo
cambiarle el orden
sin necesidad
de hacer ningún tipo
de javascript
que a veces
esto muchas veces
puede ser bastante problemático
¿no?
pues podéis utilizar el orden
solo para esto
podéis decirle
bueno
imagínate que el usuario
reordena con un drag and drop
podéis utilizar el orden
para en lugar de cambiar
el html
simplemente cambiar el order
y ya está
y cada uno
le podrías dar
una prioridad diferente
para ponerlo en un sitio
o en otro
y ya está
aunque
y aquí va mi recomendación
es importante
que tengas en cuenta
que el html
es lo importante
o sea
si algo en orden
tiene que estar arriba
por tema de importancia
porque es donde tiene que estar
tienes que cambiar el html
y lo que tiene sentido
pero hay veces
que por temas visuales
o incluso responsive
hay veces que
algo que está arriba
pues que es que esté abajo
y tal
puedes utilizar
ya sea el order
o puedes utilizar
el flex direction
para cambiarlo
y hacer lo que sea
reverso
y cosas así
pero es importante
que tengáis en cuenta
que si semánticamente
tiene sentido
que esté arriba
haced que esté arriba
el html
si visualmente
solo visualmente
por un tema
de responsive
porque en ese momento
queda mejor ahí
porque lo está ordenando
el usuario
y es algo temporal
y tal
pues igual lo podéis utilizar
que muchas veces
tiene sentido
exacto
en responsive
de footer
se suele utilizar
mucho
totalmente
menos mal
que no fue
los colores
de la bandera
rusia
joder
no hombre
a ver
no sé
son tres colores
normales y corrientes
no sé por qué
estáis viendo banderas
donde no las hay
vamos a quitar los órdenes
vamos a quitar los órdenes
vamos a quitarle
también los flex
porque ahora
os voy a explicar
una de las cosas
yo creo que
lo más importante
de flex
seguramente
de lo más importante
de flex
es el tema
de cómo
cómo se queda
cada una de las cajas
vamos a poner que width
vamos a poner 50 píxeles
y vamos a poner
que sea
50 píxeles
y esto le vamos a poner
un poquito más
vamos a ponerle
mil píxeles
no 500 píxeles
vale
no
300
400 píxeles
vale
aquí es donde viene
lo divertido
amigos
lo divertido
y donde
justamente
os voy a mandar deberes
hay un juego
muy interesante
que hoy
espero que hagáis
que es
flex
froggy
me parece
flex froggy
es este juego
flexbox froggy
es un juego
que es totalmente
gratuito
que está en español
y que os enseña
flexbox
y al final
flexbox
vais a tener que
pelearos un montón
vais a tener que
preparar y tal
y aquí tenéis
24 ejercicios
que son totalmente
interactivos
para poner en práctica
todo lo que aprendéis
de flexbox
pero lo más importante
justamente
que vais a practicar ahí
es el tema
de cómo posicionar
vuestros elementos
y esto es lo más difícil
alinear los elementos
en flexbox
no es que sea difícil
pero básicamente
es lo más divertido
entonces os comentaba
que en flexbox
teníamos
el eje
el eje principal
vamos a trabajar
siempre en un eje
que va a ser
la distribución
en la que queremos
ya sea en filas
o en columnas
pero también
tenemos otro concepto
que es el eje
cruzado
porque si tú
trabajas en filas
al final
esos elementos
que hay dentro
también tienen
sus propios ejes
tanto horizontales
como verticales
y también vas a querer
centrarlos
ya sea vertical
o horizontalmente
entonces vamos a ver
cómo funciona
esto exactamente
a ver
el más importante
de todos
el más importante
obviamente
cuando trabajamos
en flex
es la distribución
del espacio
en el eje principal
el eje principal
es el que le hemos indicado
o el que está utilizando
por defecte
o sea
en línea
el eje principal
sería el flex
direction
row
o column
en este caso
column
sería así
y row
sería así
esto
esto
es el eje principal
sobre el que vamos
a trabajar
eje principal
entonces
cómo distribuimos
el contenido
en el eje principal
lo podemos hacer
con un justify content
y aquí le podemos decir
diferentes cosas
le podemos decir
que lo justifique
en el centro
y fijaos
que en el eje principal
o sea
en la fila
lo está
centrando
cuando le ponemos center
en su eje principal
lo está centrando
le podemos decir
más cosas interesantes
como el space around
por ejemplo
para que deje
el espacio
el mismo espacio
alrededor
o sea
el espacio
que está dejando
aquí
vale
es el mismo
que tiene aquí
lo que pasa
es que aquí
es el mismo espacio
que está dejando
este aquí
y este espacio
que está dejando aquí
es el mismo
que está dejando aquí
así que por eso
está llamando
space around
luego tendríamos
el space between
esto lo que va a hacer
es que
a los laterales
no deja espacio
sino que simplemente
entre los elementos
es que lo va
a separar
entonces space between
es solo espacio
entre los elementos
y luego tendríamos
el space evenly
que es similar
similar al between
pero fíjate
que la diferencia
es que el espacio
que ves aquí
es el mismo
que hay aquí
el mismo que hay aquí
el mismo que hay aquí
o sea
tiene el mismo espacio
entre cada elemento
y los laterales
es un poco
un poquito diferente
al between
porque el between
hay el
al around
perdón
perdón
al alrededor
porque el around
fíjate que aquí
hay el doble de espacio
que el que hay aquí
así que es una
diferencia sutil
pero importante
hay más
por ejemplo
por defecto
lo que tenemos
es un flex start
o sea
al inicio de la fila
pero fíjate
que el flex end
lo deja al final
uno de los más importantes
obviamente es el center
que es el que hemos visto
que los centra
y ya está
pero imagínate
que los quieres centrar
y por lo que sea
no solo quieres centrar
sino que también
los quieres separar
pero los quieres separar
un poquito
tampoco los quieres separar
tanto
y claro
el space between
space around
space evenly
como que los separa
demasiado
pues lo que puedes decir
es utilizar un gap
y en el gap
le puedes decir
cuál es la separación
que queréis
entonces
tenemos un gap
que este gap
lo que está afectando
siempre va a ser
entre elementos
no entre los laterales
¿vale?
entre elementos
aquí le podemos poner
16 píxeles
y podemos utilizar
todos y cada uno
de los valores
que hemos ido viendo
¿vale?
también podéis utilizar
porcentajes
podéis utilizar un montón
pero aquí lo que está dejando
son 16 píxeles
¿vale?
así tendríamos el gap
no tiene mucho sentido
utilizar el around
con el gap
porque entonces
ya empiezan
las cosas raras
¿vale?
tenéis aquí
una separación
con un gap de 16
pero además
otra separación
que le hemos puesto
en el space around
y en el flex start
sí que funcionaría
lo que pasa
es que la separación
la dejaría siempre
entre los elementos
¿vale?
así que nada
le hacéis el flex center
y ya lo tenéis
¿vale?
con esto tendríamos
la justificación
de la distribución
del espacio
en el eje
ay perdón
el center lo dejamos así
en el eje
el eje principal
¿pero qué pasa
con la distribución
en el eje cruzado?
y el cruzado
digamos
si el principal
es el row
¿el cruzado cuál sería?
la columna
bueno
pues podríamos decir
align content
center
¿no?
pero qué pasa aquí
aquí no parece
que haya cambiado nada
¿no?
o sea
este
¿por qué
no ha cambiado nada?
no ha pasado nada
¿verdad?
el tema
es que sí que están
centrados ya
o sea
están centrados
porque todos
están ocupando
lo mismo
en su eje cruzado
que sería la columna
o sea
en la caja esta
de primero
ya está centrada
porque ocupa
50 píxeles
y en esa fila
de 50 píxeles
ya está centrada
vamos a intentar una cosa
para que vean la diferencia
vamos a hacer
que el primero
ocupe 25 píxeles
el segundo
que sean
30 píxeles
y el tercero
que sean
40 píxeles
¿no?
vale
entonces
ahora me ha dejado fatal
porque esperaba
que me lo dejase
¡ah!
¿qué ha pasado?
me esperaba
que me lo dejase centrado
pero no me lo ha dejado
centrado en el eje
¿por qué no me lo ha dejado
centrado en el eje?
pensaba que me los iba a centrar ahí
¿por qué me lo has dejado
centrado en el eje?
vale
line item center
no
¿ves?
esto no
yo pensaba que esto
me lo iba a centrar
¿por qué no?
me lo está centrando
a ver si
o sea
esto esperaba que estos
en su eje cruzado
me los centrase
el align items
a ver si pones un flex
¿eh?
no
pensaba que me los iba a centrar
en el eje
en su mismo eje
no
el align items
es para otra cosa
el align items
que lo vamos a hacer después
es para centrarlo
a nivel de todo
¿ves?
a centrarlo de todo
pero yo no quiero centrar eso
sino que diría al final
el align self
es solo para uno
¿tiene que ser flex grab?
¡ay coño de la madre!
es que he quitado el grab
la madre que me parió
no
pero flex grab
hay flex
flex grab
grab
no
pero tampoco
es justo
lo que queríamos
no es lo que queríamos
no
me ha dejado ahí fatal
text align
text align
sí sí
no me ha dejado fatal
porque esto
lo tenía clarísimo
como decir
no esto seguro
que funciona así
no sé qué
las alturas están bien
o sea que
no tiene mucha historia
a ver
el align content
básicamente
es la distribución
del espacio
en el eje cruzado
o sea
eso no hay ningún tipo de duda
el tema es que
el eje cruzado
debería ser la columna
seguro que es una chorrada
que ahora mismo no veo
no sé por qué
pero el tema es que
la idea
es que
una cosa es
centrar a nivel de fila
¿no?
que sería el eje principal
que para eso
utilizamos el justify content
y luego dentro de la fila
lo que me gustaría
es alinear
verticalmente
dentro del espacio
que tiene aquí
y aquí lo que esperaría
con el align content
es que este
me lo despegase
me lo dejase en medio
que no me lo hace
¿vale?
que no sé por qué me lo hace
debe ser una tontería
como un piano
pero que no
no lo
no lo termino de ver
entonces
el flex direction
flex flow
esto tiene que ser
row y no grab
o sea
pero es que este es el
por defecto
y finalmente
la altura y tal
o sea
lo tenemos todo
correctamente
que te falta un
high y usar
align items
es que a ver
el align items
si es que ya sé
lo que va a pasar
el align items
el align items
te lo centra
a nivel de todo
el contenedor
y eso no es lo que queremos
que está interesante también
pero
pero no queremos
align items
para todo el contenedor
align items
que está interesante
pero es para otra cosa
no es para
para
para esto
¿vale?
o sea
align items
alinea los elementos
flexibles
en el elemento
en el eje cruzado
pero yo lo que quería
era el contenido
¿vale?
no era todo el item
pero bueno
no pasa nada
ya no pasa nada
solo que el box
está muy grande
el height
a ver
vamos a ver
si, si, no
puede ser
puede ser
que a lo mejor
es eso
que está muy grande
el height
o sea
que al final
haciéndolo así
el tema es
que haciendo
el align items
vamos a ver
correctamente
que esto sí que lo está haciendo así
o sea
esto sería con el multilínea
o sea
ya
eso ya lo he tenido claro
que lo hemos tenido así
o sea
el tema es
que con esto
estaríamos centrando
ahora vamos a decirlo bien
desde el principio
¿vale?
y porque el problema está
que es cuando tenemos
más de una línea
solo que utiliza el content
y ya lo hemos liado
el justify content
la distribución del espacio
en el eje principal
¿vale?
o sea que esto
lo que haría es
centrar
en el eje principal
que es la fila
justify content center
fíjate la diferencia
y luego en el align item center
lo que vamos a hacer
es centrar
los elementos flexibles
en la dirección cruzada
que serían en este caso
las columnas
pero también
si le diésemos la vuelta
lo veríamos al revés
o sea
veríamos
que el primero
el primero
el justify content
vamos a hacer esto
el justify content
lo está haciendo
lo está centrando
claro
en este caso
no se vería
ninguna centrada
y el align items
lo estaríamos haciendo
en el eje cruzado
que serían las filas
o sea
lo estaríamos centrando
a nivel de filas
¿vale?
ese sería el tema
vamos a dejarlo en row
¿vale?
y ya lo tenemos así
entonces ya tenemos
el tema este
de la align
claro
es que
el tema del align content
es que tenéis razón
que es que tendríamos
que tener más de unas filas
o sea
tendríamos que ponerle aquí
que fuese grab
y aquí en el align content
sí que podríamos ver
una diferencia
podríamos ver una diferencia
si le pudiéramos
a ver
500
o algo así
¿no?
y a ver
flex end
flex start
vale
aquí sí que lo tenemos
el tema es que yo pensaba
que con el align content
con una sola línea
lo íbamos a poder ver
el align content
lo que como vais a ver
es
por defecto
lo está haciendo
que ocupe
todo el espacio
que puede
pero le podríamos decir
oye
ponlo solo al principio
lo agrupas ahí
lo podríamos poner
al final
esto es lo que estaba intentando
y luego lo podríamos poner
en el centro también
¿vale?
y entonces así
en lugar de intentar utilizar
lo dejas vacío
lo que va a intentar
es dejar
o utilizar el máximo espacio disponible
para el contenido
para las dos líneas
yo pensaba que con una línea
iba a funcionar
no ha funcionado
y eso es lo que me ha vuelto
un poco loco
¿vale?
pero aquí sí que podemos ver
un poco la diferencia
la diferencia entre
alinear los items
¿vale?
alinear el contenido
la diferencia
la tenéis aquí
porque si esto
el align items este
es a nivel de cómo se alinean
en el eje cruzado
el centro
si le ponemos flex start
lo que vamos a ver
fíjate que este ha subido
para arriba
este para arriba
y tal
el align items
lo que vamos a hacer
es en el eje cruzado
que en este caso
son las columnas
al ponerle el center
vamos a ver aquí
que lo centra
pero dentro de la fila
está centrando la columna
el align content
sería a nivel
de todo el contenedor
si queremos todo el contenido
lo queremos al principio
si lo queremos al final
o queremos en el centro
¿y cuál ha sido mi error
que al principio
me he vuelto todo loco
y por qué no me funcionaba?
mi error
es porque pensaba
que en una línea
iba a funcionar igual
que en una línea
esperaba que el contenido
como solo era ese espacio
también lo hiciese
pero no
lo correcto era utilizar
el align items
que eso era
justamente lo que quería hacer
de que se centrase
esa línea
dentro del eje de la línea
cada una de las columnas
y luego dentro del contenido
pero solo íbamos a poder ver
cuando teníamos
más de una línea
todo el contenido
si lo íbamos a poder centrar
al principio
al final
o en el centro
así que por eso ya veis
que es súper interesante
y súper importante
y por eso hay que jugar
al flexbox froggy
porque hay que practicar
este tipo de cosas
también os digo
que es verdad esto
que muchas veces
y es interesante
este tipo de cosas
lo más importante
que es importante
sabérselo
pero el align content
no se suele utilizar tanto
los que se suele utilizar más
son estos dos
uno para el eje principal
el justify
sería para el eje principal
en este caso
para las filas
porque estamos en row
y luego
el align items
que sería para el eje cruzado
¿vale?
que en este caso sería
cada una de las columnas
dentro de las filas
lo que me decíais mucho
que es muy interesante
es el align self
y es que
dentro de todo el orden
que hemos hecho
podríamos detectar
cada uno de los elementos
imagínate
vamos a poner
que el elemento 2
y el elemento 4
¿vale?
lo vamos a poner de color
bueno, elemento 5
lo vamos a poner de color azul
y queremos que los de color azul
ellos
por lo que sea
no se centren
¿veis que ahora están centrados
en el eje?
dentro de este eje
están centrados
pues podríamos decirle
que se alinee el mismo
le podemos cambiar
el alineamiento
le podemos decir
que se alinee arriba
o que se alinee abajo
y esto puede ser
muy interesante
para cuando tenemos
un montón de elementos
que los hemos centrado
y por lo que sea
ya sea una oferta especial
o lo que sea
podemos dentro de un elemento
decirle
bueno, quiero que ese elemento
él se alinee
de forma diferente
a como el padre
está diciendo
que se tienen que alinear
porque es el padre
el que dice
como se alinean los elementos
pero uno mismo
puede decidir
y decir
bueno, yo voy a ser una excepción
y yo quiero centrarme
al principio
¿vale?
yo me voy a alinear
a la parte más de arriba
o al revés
podéis hacer que todos
se alinean arriba
y algunos pues abajo
en el centro
y todo esto
y para eso es el align self
para una excepción
no para hacerlos
o centrarlos todo
¿vale?
y está bastante chulo
la verdad
una cosa que no he hecho
y que os recomiendo mucho
que está muy chula
es que las herramientas
de desarrollo de Chrome
están súper súper súper bien
las de Chrome
y las de Firefox
las de Safari no tanto
pero están bastante bien
justamente por esto
fijaos que aquí tenéis esto
que le podéis dar un clic
y aquí tenéis
con unos iconitos
súper chulos
podéis ver
Flex Direction
¿veis?
y podéis incluso cambiar
visualmente
como lo podéis ver
¿vale?
le podéis dar a cada una
de unas
¿vale?
y vais viendo
cómo se va comportando
si es Flex Grab
o no Grab
si el contenido
se tiene que centrar
o no se tiene que centrar
y vais poniendo
en tiempo real
cómo le afecta
cada una de estas cosas
y se van a ir cambiando
y modificando
cada una de las propiedades
es que esto está súper bien
porque vais a entender
muy fácilmente
cómo funciona
cómo se ve
qué es lo que pasa
por qué esto no funciona
qué es lo que necesitas
y tal
y es tan fácil
como darle
a un iconito
que es este iconito de aquí
y veis aquí
como una previsualización
un poco de cómo va a quedar
y cuando le deis clic
pues va a cambiar
tanto el valor
en el CSS aquí
como la previsualización
que tenéis aquí
así que si tenéis problemas
como los que he tenido yo
que debería haber tenido
que tendría que haber revisado
pues ya sabéis
que lo podéis ver aquí
con las herramientas de desarrollo
selecciona el del padre
bueno
el del padre es el que he seleccionado
¿no?
ah
¿no es seleccionado del padre?
yo diría que sí ¿no?
ah aquí
ah es verdad
claro
que no es seleccionado el del padre
no es seleccionado el del padre
tienes razón
es seleccionado el del hijo
que bueno
que también le afectaba igualmente
pero bueno
que estaba interesante
pero sí es verdad
que no es seleccionado el del padre
es seleccionado el del hijo
pero aún así
esto es lo básico
y CSS
bueno
a ver
CSS
yo lo dije un día
CSS es un lenguaje
que es bastante más complejo
de lo que parece
porque tiene un montón
un montón de cositas
y ahora nos queda justamente
GRID
que GRID es bastante más importante
la de cosas que se puede hacer
y que es bastante complejo
así que deberes
lo que
si no lo habéis hecho nunca
yo creo que deberíais hacerlo
CSS es un lenguaje de programación
no
lo hemos dicho 80 veces
me parece una chorrada
el tema de discutir
si es de programación o no
pero sí que es un lenguaje
y eso no hay ningún tipo de duda
o sea discutir eso
sí que es una chorrada
porque CSS es un lenguaje
declarativo
para el diseño
de las páginas web
bueno
os dejo como deberes
que le dais cañita
al Flexbox Froggy
que es increíble
y que al final
tenéis 24 niveles
y que estoy seguro
que con todo lo que habéis aprendido
no vais a tener ningún problema
para pasaroslo
y que os va a ayudar un montón
hoy vas a entender GRID
te lo digo yo
que lo vas a entender
porque está increíble
la potencia
la de cosas
que puedes hacer con GRID
y no puedes dejar la oportunidad
de entenderlo
de abrazarlo
para que de esa forma
puedas maquetar
páginas web
en condiciones
así que
la semana anterior
hicimos Flexbox
que ya lo explicamos
y hoy vamos con GRID
pero también te voy a explicar
las diferencias
un poquito que hay
entre uno y otro
¿vale?
bueno amigos
Codenberg va a empezar mañana
porque hoy no he tenido tiempo
entonces mañana
arrancamos Codenberg
¿vale?
arrancamos mañana Codenberg
y lo desbloquearemos
en vivo y en directo
mientras estamos streameando
porque mañana
vamos a abrir
la plataforma de Codenberg
donde vais a tener retos
retos secretos
del mundo
de la programación
retos de programación
que podréis resolver
con cualquier lenguaje
con el que queráis
y que va a tener
un montón de sorpresas
pero no lo perdáis
porque vais a tener retos
todo el mes de noviembre
nuevos retos cada semana
he desarrollado páginas
y nunca he utilizado GRID
siempre utilizo Flex
así que sería bueno
aprender un poco de GRID
haces bien
es bueno aprender GRID
y es que a ver
Flex es genial
está muy bien
es maravilloso
es maravilloso
pero vais a ver
que hay cosas
que no se pueden hacer
fácil con Flex
y que hoy vais a entender
de ostras
pues con GRID
se puede hacer con esto
mucho más fácil
¿no?
una cosa que se suele hacer
mucho en maquetación web
que es los resultados
de una búsqueda
y vais a aprender
hoy cómo hacer resultados
de una búsqueda
responsive
súper fácil
en muy pocas líneas
de código
y lo vais a entender
que es lo mejor
¿se pueden combinar?
por supuesto
se puede combinar
GRID
con Flex
sin ningún tipo
de problema
¿vale?
un elemento
no puede tener
los dos a la vez
el mismo elemento
pero sí que se puede hacer
que dentro de cada elemento
uno utilice GRID
y dentro tengas Flex
de hecho si queréis
lo miramos ahora
en un momentito
no hay uno
que sea mejor
que el otro
esto es un error
muy común
donde la gente
se cree
que GRID
es más avanzado
que Flex
o que uno
es más nuevo
que el otro
y entonces es mejor
es más recomendable
utilizar GRID
que Flex
son diferentes
literalmente
son diferentes
y luego
os lo comento
por qué son diferentes
pero el resumen
fácil y rápido
es que
Flex
es unidimensional
o sea siempre estamos hablando
de una dimensión
filas o columnas
y GRID
estamos hablando
de bidimensionalidad
que son filas
y columnas
¿ok?
así que ahí tenéis la diferencia
clave
importantísima
claro si utilizáis Tailwind
puedes utilizar GRID
GRID
CALLS 2
pero aún así
eso sería para tener
dos columnas
pero es que vais a ver
que lo que vais a aprender hoy
lo vais a poder utilizar
con Tailwind también
porque al final
Tailwind SSS
y además
hay cosas que Tailwind
no te soluciona
porque eso que dice Nefesh
eso es muy simple
el hecho de hacer
dos columnas
y ya está
pero hay veces
que hoy lo vamos a ver
por ejemplo
este tipo
este tipo de diseño
que son los ventos
que están muy
pero que muy
muy muy de moda
estos ventos
hay algunos
que no los vais a poder hacer
tan fácil
como esperáis
en Tailwind
porque justamente
no os dan
las herramientas
pero si sabéis CSS
sí que lo vais a poder hacer
con Tailwind
sin ningún tipo de problema
estos por ejemplo
son los que utiliza Apple
esto
esto que veis aquí
esto se puede hacer
bastante fácil
con GRID
y vamos a intentar
daros las herramientas
para que podáis crear
el que os dé la gana
para que no tenéis ningún problema
de hacer esto
que esto lo podéis hacer
con CSS
facilísimo
las clases
de la semana pasada
del curso de CSS
las tenéis en mi canal
de YouTube secundario
y vamos con nuestra herramienta
favorita
que es
Codilink
vale
la semana pasada
nos quedamos aquí
utilizando Flex
hicimos un montón
de cosas raras
todo esto
lo vamos a
lo vamos a quitar
vale
porque no lo vamos a necesitar
entonces por ahora
todo esto
lo quitamos
pum
y vamos a quitar
también todo esto
y por ahora
vamos a dejar aquí
no sé si poner
un container
vale
un container
y ahora
empezaremos por aquí
estas cosas
antes de nada
vamos a definir
qué es Grid
para qué sirve Grid
cómo funciona Grid
y de qué estamos hablando
con Grid
a ver
Grid básicamente
voy a enseñaros una imagen
que
ah bueno
mira me sirve esta imagen
por ejemplo
estoy seguro que habréis visto
imágenes como esta
como esta
que
tenéis un layout
donde queréis poner
pues arriba queréis el header
en un lado la navegación
abajo queréis poner el footer
pero aquí tenéis una car
aquí otra
o tenéis los resultados
de una búsqueda
por ejemplo
el resultado de una búsqueda
donde queréis que están
una al lado de la otra
o lo que queréis
es hacer un Vento
un Vento Grid
de estos
Vento es esta maquetación nueva
en la que tú puedes poner
como columnas
y cada columna
tiene una altura diferente
por ejemplo
estos son tres columnas
como podemos ver
tres columnas
y tiene tres filas
lo que pasa es que
este cajón
este cajón
fíjate
que ocupa
dos filas
en cambio
tenemos aquí algunas cars
que sólo ocupan una
así que ya queremos
hacer una diferenciación
de que algunas ocupen
más que otras
y esto lo vamos a poder
lograr con Grid
esto de poder tener
una cuadrícula
que podamos controlar
en dos dimensiones
cómo se van a comportar
las cosas
este sistema
de maquetación
bidimensional
es lo que hablamos
de Grid
¿ok?
una cuadrícula
con un conjunto
de líneas
tanto horizontales
como verticales
que al final
hacen intersección
y aquí podemos tener
elementos
y estos elementos
pues pueden tomar
una sola columna
dos columnas
tres
cuatro filas
lo que sea
y siempre
pues que respete
el conjunto
¿cuál es el diseño
de CSS?
¿por qué es tan importante
Grid?
¿por qué le da miedo
a la gente?
¿le da miedo a la gente
porque Grid
se enseña mal?
no, hay muchos sitios
donde se enseña bastante bien
de hecho
os voy a recomendar
como siempre os recomiendo
un recurso
que os va a encantar
que está muy chulo
que es el de mi amigo
Manz
¿vale?
que está muy bien explicado
que podéis ir
y le podéis dar cañita
tiene un montón
de ejemplos
y tal
que lo explica súper bien
y eso
¿vale?
así que le podéis echar un vistazo
que además tiene un montón
de dibujitos
y así
lo podéis acompañar
con todo este tipo de cosas
y luego además
además
al final del curso de hoy
os voy a recomendar
el juego típico
que siempre se hace
que es este
Grid Garden
el juego de Grid Garden
es un juego
que tiene 28 niveles
donde vais a poder poner
en práctica
todo lo que vais a aprender
en la clase de hoy
y así os aseguráis ya
de que habéis dominado
Grid perfectamente
este juego es bastante divertido
y lo que tenéis que hacer
es aseguraros
pues que las cosas
estén en su sitio correcto
por ejemplo
las zanahorias
tienen que estar aquí
y esto no tiene que estar ahí
tienes que mover las cosas
está muy chula
¿vale?
y así que para aprender
lo que necesitas
yo te lo voy a explicar hoy
aquí
entonces ya sabemos Grid
¿no?
pero uno de los problemas
que tenemos con Grid
es
¿cuáles son las características
concretas?
¿no?
sí que te he dicho
que es una cuadrícula
pero tienes que saber
que los elementos
pueden tener tamaños fijos
o flexibles
que podemos posicionar
elementos
en cualquier sitio
de la cuadrícula
esto quiere decir
que un elemento
no tiene por qué seguir
el orden estricto
típico
que siempre vemos
de arriba, abajo
izquierda, derecha
sino que el primer elemento
lo puedes poner el último
y todo lo demás vacío
o el último
lo puedes poner el primero
y que ocupe la mitad
¿vale?
lo puedes poner donde quieras
además
los elementos
se van colocando
en esta cuadrícula
y
importante
se pueden poner
elementos superpuestos
esto quiere decir
que tú puedes poner
un elemento
encima de otro
que esto es algo
que normalmente
no se puede hacer
en todos
y necesitas utilizar
Position Absolute
que lo vimos en clases anteriores
bueno
pues en Grid
esto es como
una excepción
porque sin utilizar
Position Absolute
puedes poner un elemento
encima de otro
veremos un ejemplo después
porque es muy interesante
porque mucha gente
cree
de forma errónea
que solo se puede lograr
con Position Absolute
y no es cierto
también lo puedes utilizar
con Grid
totalmente fácil
la diferencia clave
¿vale?
la pregunta del millón
que todo el mundo se hace siempre
bueno
¿cuál es la diferencia
entre Flex y Grid?
¿por qué debería utilizar uno?
¿por qué debería utilizar otro?
¿cuál es mejor?
pregunta errónea
porque no hay nada
que sea mejor que lo otro
todo depende del contexto
a ver
Flexbox
es un sistema
de maquetación
unidimensional
es decir
que solo nos permite
trabajar en un eje
filas o columnas
y la diferencia básica
entonces es que
Grid
como ya he dicho
nos permite trabajar
en los dos ejes
filas y columnas
así que en Flex
vamos a tener que elegir
uno de los dos
y en Grid
vamos a poder utilizar
los dos
¿es mejor uno que el otro?
no
simplemente
si tú tienes un diseño
bidimensional
que vas a tener que pensar
tanto en filas
como en columnas
vas a querer seguramente
utilizar Grid
¿vale?
y de hecho
vas a ver que Flex y Grid
comparten muchas especificaciones
a la hora de alinear
y justificar
elementos
contenedores
contenido
y todo esto
así que si has aprendido Flex
muchas de las cosas
que ya sabes
te van a servir para Grid
así que simplemente es eso
ahora me diréis
bueno pero entonces
pues para eso utilizo siempre Grid
tampoco hace falta
porque hay veces
que no hace falta
que tengas columnas
por ejemplo
imagínate
que tú lo único que quieres
en este caso
aquí claramente
tenemos dos columnas
tenemos tres filas
y aquí vamos a querer
utilizar Grid
porque te va a simplificar mucho
hacer esto con Flex
es mucho más complicado
porque el tener que poner
esto
luego que esto
esté arriba
y esto se quede abajo
que esto no se quede
y que esto además
en Flex sea responsive
va a ser mucho
mucho más complicado
¿vale?
si lo intentas hacer con Flex
en cambio con Grid
va a ser mucho más fácil
ahora bien
si fuese que tienes
una sola línea
ya sea de filas
o de columnas
al final lo que tendríamos aquí
directamente
y será mucho más fácil
sería hacerlo con Flex
entonces
una sola dimensión
Flex
bidimensión
Grid
punto pelota
por eso
si solo tienes una dimensión
no te va a valer la pena
utilizar Grid
porque a lo mejor
te lo complica
sin necesidad
entonces
no es que sea mejor
o peor
sino que simplemente
cada uno
está hecho
para una cosa en concreto
vamos a crear un ejemplo básico
tenemos aquí un section
con siete elementos
que son dips
porque sé que os encantan
los dips
vamos a estilar un poco esto
para que lo veamos
un poquito mejor
vamos a estilar el container
le ponemos un background
de yo que sé
color salmón
le ponemos aquí
un borde
que sea negro
y esto será el contenedor
el contenedor
fíjate
que tiene este borde
color negro
le voy a poner un bar de radius
que creo que todavía
no habéis visto el borde radius
pero al menos para que lo tengamos
esto está funcionando
de forma por defecto
o sea
container
ya sabéis
que como es un section
tanto section
como dip
por defecto
tienen el display
lo tienen como si fuese
block
este sería el valor
por defecto
y esto
es lo que vamos a cambiar ahora
ahora
lo que vamos a hacer
es que el container
todos los containers
que el dip
que tenemos dentro del container
vamos a ponerle
un light blue
¿vale?
y vas a ver
que ahora mismo
está rellenando
todo el espacio
del contenedor
tenemos también
vamos a poner acá
un borde así
que sea de color
0.9f
y un borde radius
¿vale?
de 6 píxeles
vale
fíjate que
cada uno de los elementos
está ocupando
totalmente el espacio
¿y esto por qué está pasando?
porque ya vimos
¿vale?
ya vimos
si el salmón desapareció
pero ahí está
ahí está
¿veis?
que está ahí justo debajo
entonces
¿qué es lo que está pasando?
que con display block
lo que está haciendo es
ocupar todo el espacio
y hace un salto de línea
esto sería
el valor por defecto
de lo que está ocurriendo
¿no?
vamos a empezar a crear
nuestra primera cuadrícula
¿vale?
vamos a poner nuestra primera cuadrícula
voy a poner
para que esto no sea tan
vamos a poner
que esto tenga
un background
con un
un poquito
así
para que no sea blanco
puro
que no moleste tanto
¿vale?
muy bien
vamos a empezar con el grid
voy a querer
que mi contenedor
lo que tengamos
de color negro
sea una cuadrícula
¿qué tenemos que hacer?
pues tenemos que utilizar
display
y le ponemos
que esto es un grid
anda
si no
no ha cambiado
sigue igual
menudo timo
menudo timo
ajá
¿ha cambiado o no ha cambiado?
parece igual
¿vale?
parece igual
pero vamos a ver una cosa
fíjate
si tú abres este ejemplo
y le das a inspeccionar
vamos a ver
aquí
no sé por qué
me lo he abierto
en otra ventana
pero vamos a ver aquí
que fíjate que ahora
al lado de section
tienes este botoncito
de grid
y aquí ya
ojo cuidado
que está
trucazo
trucazo de las herramientas
de desarrollo
fíjate
que tenemos aquí
este grid
si le das un clic
¡ojo!
ya pasan cosas
¿vale?
le puedes dar un clic
aquí
justamente que te indica
si es un grid
y fíjate
que le pone aquí
como un montón
de numeritos
y no sé qué
no te preocupes
que hoy vas a salir
conociendo
entendiendo
dominando
estos numeritos
vas a saber
qué son estos numeritos
y vas a alucinar
cómo de potentes
son estos numeritos
pero por ahora
quédate
que al menos
algo diferente tenemos
porque fíjate
que si le quitas
el display grid
esto desaparece
no tenemos numeritos
si ponemos el display grid
tenemos numeritos
vale
así que algo
algo ha cambiado
no lo suficiente
¿no?
pero tenemos numeritos
¿qué significa estos numeritos?
estos numeritos
al final lo que nos está indicando
son las filas
que tenemos en nuestra cuadrícula
visualmente ahora
¿qué podríamos decir?
que esta cuadrícula
tiene una sola columna
una columna ¿no?
porque puedes ver
que solo tiene una columna
y tenemos siete filas
una
dos
tres
cuatro
cinco
seis
siete
por defecto
lo que está pasando aquí
es que nos ha
nos está
fluyendo el contenido
poniendo el contenido
uno
cada uno de los elementos
en cada fila
¿no?
eso es lo que está haciendo
está fluyendo el contenido
así
está ocupando todo el espacio
y lo está poniendo cada uno
pero yo lo que me gustaría
imagínate que quieres tener
dos columnas
en tu cuadrícula
¿no?
porque dices
ostras
que una columna
es un poco rollo
yo lo que quiero
es tener dos columnas
bueno
¿cómo definimos
que queremos tener dos columnas?
ahora mucha gente diría
pues grid calls 2
¿por qué esto es lo que hago en Tailwind?
vale
pero ¿qué es lo que está haciendo Tailwind por detrás?
lo vamos a entender
y lo vamos a ver
tenemos que utilizar la propiedad
grid template columns
¿vale?
y le vamos a indicar
cuántas columnas
queremos que tenga nuestra cuadrícula
y le tenemos que poner
el espacio
que tiene que utilizar cada columna
imagínate que queremos
dos columnas de 100 píxeles
¿vale?
pues le vamos a decir
una columna de 100 píxeles
fíjate
que ya solo con esto ha cambiado
porque ¿qué es lo que está pasando?
le estamos diciendo
que nuestra cuadrícula
tiene una columna
de 100 píxeles
y ya nos ha puesto
que esto sean 100 píxeles
y lo está agrupando así
pero le podemos decir
que tenga otra más
de otros 100 píxeles
y fíjate lo que ha pasado
ahora tenemos
dos columnas
de 100 píxeles
y lo que está pasando
es que los elementos
se van a distribuir
en esta cuadrícula
de izquierda a derecha
y de arriba a abajo
eso es porque nosotros
leemos así ¿vale?
pero ya vimos
la semana pasada ¿vale?
que la dirección
en la que se distribuyen
los elementos
es importante
dependiendo de cómo es
la dirección de lectura
para cada uno
de nuestros usuarios
para nosotros
que somos latinos
pues para nosotros
es así
pero tened en cuenta
esto que no todo el mundo
no está bien decir
de arriba a abajo
izquierda a derecha
porque no es
en todos los sitios
es así
es según la dirección
de lectura
ahora bien
imagínate que quieres
añadir un tercero
pues no pasa nada
otros 100 píxeles
y ahora tenemos
tres columnas
y cada columna
es de 100 píxeles
y se distribuye
el contenido así ¿vale?
también podemos utilizar
otros valores
por ejemplo
podríamos utilizar
el valor de auto
¿qué es lo que hace
el valor de auto?
fíjate que el de auto
lo que ha hecho
es ocupar un poquito
más que el otro
y aquí le podemos decir
que ese solo sea
20 píxeles
y la tercera columna
sea de 100
así que tenemos
que la primera columna
son automático
que ahora te explicaré
lo que es
la segunda son 20 píxeles
y la tercera
son 100 píxeles
¿vale?
el auto
¿qué quiere decir?
auto
es automático
pero auto
lo que quiere decir exactamente
es que
el navegador
es el que va a decidir
cuál es
el espacio
que tiene que utilizar
y lo va a hacer
dependiendo del espacio
que hay disponible
y del contenido
que esto es importante
según el contenido
del texto
aquí lo que está ocurriendo
es que como tenemos
dos fijos
claro
este seguro es de 100
este seguro es de 20
y ha dicho
bueno pues este
como es auto
utilizo el resto
y ya está
mucho más fácil
pero si tienes dos
que son auto
aquí sí que va a ser
un poquito más complejo
¿no?
porque podemos decir
vale
este es de 20 píxeles
pero este es automático
y este es automático
pero claro
si son automáticos
fíjate
que según
el contenido que hay dentro
pues claro
como tiene más contenido
va a decir el navegador
ah claro
como este tiene más contenido
me ha dicho que es automático
voy a hacer que sea
más ancho
que ocupe más espacio
esta columna
que la segunda
que necesita menos
¿vale?
entonces fíjate
y esto es importante
porque mucha gente
se cree que el automático
automáticamente
siempre va a tener
el mismo espacio
y no es así
¿vale?
no es así
entonces ya hemos visto
que podemos ir combinando
diferentes valores
y tenemos el automático
tenemos los píxeles
y tenemos obviamente más
¿eh?
tendríamos
podríamos
si lo ponemos todo
en auto auto auto
va a utilizar siempre
según el contenido
esto perfecto
y también
podemos mezclar
y hacer
por ejemplo
vamos a hacer ahora
cinco columnas
vamos a quitar esto
vamos a poner cinco columnas
y le podemos decir
que la primera columna
sea con porcentajes
que la segunda
sea con píxeles
que la tercera
sea automática
y que la cuarta
sean diez puntos
del viewport
¿vale?
o sea un diez por ciento
del viewport
del ancho del viewport
y lo tendríamos así
fíjate
ahora tenemos cuatro columnas
donde cada columna
esta primera columna
es un cincuenta por ciento
del contenedor
el dos
este ocupa
cien píxeles
el tercero
es automático
y el cuarto
son un diez por ciento
del ancho
del viewport
¿vale?
o sea que ya veis
que podéis mezclar
unidades
sin ningún tipo de problema
no es lo normal
lo habitual
ni lo aconsejable
¿vale?
ni lo aconsejable
porque al final
aquí la podéis liar
muy parda
pero bueno
no os preocupéis
que esto
lo iremos viendo
de cómo lo podemos arreglar
sobre todo
porque ahora vamos a explicar
una unidad especial
y es que hay una unidad
especial
y específica
que sólo funciona
con grid
y es la de fracción
¿qué significa fracción?
bueno
vamos a poner aquí
en grid template columns
fijaos que tantos valores
como ponéis
son el número de columnas
que vamos a tener aquí
tenemos cuatro valores
por lo tanto
tenemos cuatro columnas
y automáticamente
fíjate
que me ha generado
otra fila
o sea porque lo que está intentando
es
es fluir los elementos
y si no caben
pues ya
a la siguiente fila
¿vale?
ahora
si yo quito esto
y le pongo 100 píxeles
una sola columna
de 100 píxeles
pero vamos a utilizar
las fracciones
¿qué es una fracción?
es una unidad especial
que nos permite
indicar
el tamaño
de las columnas
de forma proporcional
¿proporcional a qué?
bueno
se llama fr
¿no?
si le ponemos una fracción
fíjate
que ha ocupado
todo el espacio
¿por qué?
porque una fracción
por defecto
si no tiene nada más
va a ser
el 100% del espacio
¿no?
una fracción
si tiene que ocupar
una fracción
y no hay más columnas
es el 100% del espacio
¿pero qué pasa?
que si tenemos
dos columnas
y cada una
tiene una fracción
¿qué significa esto?
pues que claro
si el 100%
lo divides entre dos
vamos a tener
que cada columna
es una fracción
y por lo tanto
cada fracción
tiene que ser del 50%
va a ser mitad
y mitad
si tenemos tres
pues esto lo que va a decir
es que es un tercio
una fracción
como hay tres fracciones
en total
cada columna
va a ser una fracción
por lo tanto
va a ser un 33,33%
y estas fracciones
no solo puedes utilizar
una fracción
imagínate que solo quieres
dos columnas
¿vale?
pero quieres que la primera
sea una fracción
y la segunda columna
sea el doble
pues haces dos fracciones
y fíjate lo que hemos hecho aquí
la primera columna
tenemos que es una fracción
y la segunda columna
es el doble
de la primera columna
lo que estamos consiguiendo
de aquí
es que haya
algún estilo
de forma relativa
de decir
que queremos que una columna
sea el doble de la otra
y ojo
no tenéis que utilizar
como forma base
una fracción
podéis decir
estos son dos fracciones
y estas son cuatro
vamos a conseguir lo mismo
pero fíjate
que lo que estamos diciendo
es que estas son dos fracciones
y estas son cuatro
es el doble
y podríamos añadir otra
que fuese una fracción
y lo que está pasando aquí
es que tendríamos que dividir
¿no?
aquí tenemos
dos, cuatro y seis
son
serían
cien entre seis
y una fracción
sería
sería justamente
esta división
y así sabríamos
perfectamente
a qué se refiere cada una
así que
esto es la clave
cuando trabajemos con grid
el conocer
las fracciones
porque las fracciones
lo que significa
es cómo tenemos que
separar todo el espacio
y va a depender
de cuántas columnas tengáis
¿vale?
fíjate
ah, que lo he contado mal
era siete
perdón
que he dicho seis
era cien
entre siete
perdón
que me equivoqué
entonces
voy a volver a explicar
lo de las fracciones
porque es muy importante
¿vale?
una fracción
si solo tenemos
una columna
y es una fracción
esto va a ser
un cien por cien
¿no?
si tenemos dos columnas
y cada columna
es una fracción
cada columna
va a ser un cincuenta por cien
fíjate en una cosa
si decimos
que una columna
es una fracción
y la otra
son cien píxeles
entonces
¿cuánto va a ser
cada una?
pues muy fácil
hemos dicho
que empezamos
con el cien por cien
¿no?
empezamos con el cien por cien
y tenemos
que una columna
esta columna
la segunda
que es esta
que tenemos aquí
son cien píxeles
pues cien por cien
menos cien píxeles
lo que tengamos aquí
va a ser
el ancho
que va a tener
la fracción
¿vale?
porque va a ser
el resto
ya está
así de fácil
o sea
lo que vamos a tener
es esta columna
que es una fracción
va a ser el resto
del cien por cien
menos los cien píxeles
¿vale?
y ahí lo tendríamos
el texto no influye
porque da igual
lo que tengamos dentro
al final es una fracción
de las columnas
que tenemos
punto pelota
no importa ya
el contenido que tengamos
porque eso solo sería
con el auto
así que básicamente
lo que no esté ocupado
efectivamente
así que lo mismo
si hacemos
una tercera columna
así que una fracción
será
cien por cien
menos cien píxeles
menos
bueno
vamos a poner cincuenta píxeles
para lo entendamos mejor
¿vale?
y esto sería
una fracción
¿ok?
así lo tendríamos
es más cómodo
escribir la fracción
que un porcentaje
porque así te evitas
de calcularlo
claro
es mucho más fácil
porque imaginad
que lo queréis hacer así
esto sería lo mismo
que escribir
una fracción
y una fracción
sería lo mismo
visualmente
pero claro
esto es un cálculo
bastante fácil
y que lo tenéis
bastante claro
pero imaginad
que tenéis
cinco columnas
y tenéis que estar pensando
y dividiendo mentalmente
cómo tiene que ser
cada cosa
y tal
¿qué pasa con una sola columna
si son dos fracciones?
buena pregunta ¿no?
no pasa absolutamente nada
si yo le pongo aquí
que tiene un millón
de fracciones
¿cuántas columnas hay?
solo hay una columna ¿no?
solo hay una columna
entonces
el cien por cien
son estas fracciones
ya está
porque solo tiene una columna
el tema es
cuando tiene más de una
que entonces
hay que empezar a calcular
pero si solo hay una columna
da igual cuántas fracciones
pongas que son
porque si solo indicas
que mil fracciones
es una columna
pues ya lo tendrías
ya lo tendrías hecho
así que
las fracciones
lo importante
es cuando queremos dividir
por ejemplo
entre tres ¿no?
pues aquí
el cien por cien
dividimos entre tres fracciones
treinta y tres coma tres
pensad en pizzas
que muchas veces
es mucho más fácil
y ya lo tendrías
pero lo importante es
cómo podemos fraccionar
nuestro contenido
para básicamente
así de esta forma
sin necesidad de poner
porcentajes
que funcione correctamente
así tenemos una fracción
una fracción
y una fracción
y de nuevo
podemos decir
doscientos píxeles
doscientos píxeles
y una fracción
¿veis aquí en este caso
lo que pasa?
que está saliendo
esto es normal ¿eh?
porque claro
le estamos poniendo
más espacio del que tiene
estamos obligándole
que tenga como más espacio
y justamente por esto
también vais a querer evitar
muchas veces
el poner
anchos fijos
que esto
lo vamos a ver después
de cómo lo podemos arreglar
para evitar
este tipo de problema
que hemos visto aquí
claro le estoy diciendo
tenemos tres columnas
la primera
doscientos píxeles
la tercera
doscientos píxeles
y luego el resto
pero claro
fíjate que el resto
ya no le queda nada
así que está rompiendo
el contenedor
esto veremos
cómo lo podemos arreglar
y vas a ver
que es muy sencillo
bueno vamos a poner
dos fracciones
o sea tenemos dos columnas
y al final
pues 50% y 50%
por ahora ponemos
dos fracciones
y ya está
pero fijaos en una cosa
automáticamente
lo que está ocurriendo aquí
es que me está creando filas
y las filas están tomando
el alto
que le da la buena
le dé la gana
o sea me ha creado aquí filas
me ha creado
una
dos
tres
cuatro filas
me ha creado
pero me los está haciendo
con el ancho
que le ha dado la gana
el ancho que está utilizando
fíjate
que es
que ha dividido
el número de filas
por el espacio disponible
y lo ha rellenado
y ya está
podríamos decir
que ahora mismo
en los rows
tendríamos una fracción
una fracción
me lo he cargado
una fracción
una fracción
y una fracción
o sea tenemos cuatro fracciones
cuatro filas
y ya está
pero vosotros podéis cambiar también
como queréis que sean
las filas
podéis hacer lo mismo
grid template
rows
y decirle
quiero que la primera fila
sean 100 píxeles
que la segunda
sean 50 píxeles
que la tercera
sean 25 píxeles
o un poquito más
30 píxeles
y que la última
sea 100 píxeles
¿vale?
y fíjate lo que hemos conseguido ya
y aquí justamente
lo que empezamos a hablar
muchas veces
con el tema
de el que sea bidimensional
y esto luego lo veremos
cuando empecemos a crear
un layout real
de una página
para que veáis
cuál es la clave
de todo esto
fijaos que lo que estamos haciendo
es decirle
la primera fila
es de 100 píxeles
por lo tanto
esta fila de aquí
de izquierda a derecha
tendría que ser
de altura
de 100 píxeles
la segunda fila
es de 50 píxeles
así que esta
como puedes ver
es más corta que la primera
y es de 50 píxeles
la tercera de 30
bueno pues aquí tenemos
esta más cortita
y pone aquí
que la cuarta
de 100 píxeles
y la tendríamos aquí
¿y qué pasa
si le ponemos aquí otra?
de 50 píxeles
tan tan tan
pues que le añade
ojo con esto
que es un error
bastante común
y es el hecho
de que la gente
cree que la cuadrícula
se crea a través
de los elementos
y no es así
o sea vosotros podéis
tener una cuadrícula vacía
fijaos en esto
fijaos que he creado
una fila aquí
de 50 píxeles
podéis poner lo que os dé la gana
¿veis?
¿y qué va a ocurrir con esto?
pues lo podemos ver fácilmente
en las herramientas de desarrollo
vais a ver que está
la cuadrícula
aunque no haya un elemento
¿vale?
si miráis aquí
y le dais a grid
fijaos que cuando os ponéis encima
¿vale?
vais a ver
como
no se va a ver casi
en el streaming
¿vale?
pero sí que se ven
como unas rayitas
un borde ahí
que no es sólido
que te indica
los elementos
que deberían ir dentro
de la cuadrícula
aunque no haya
un elemento dentro
¿vale?
importante
tú puedes tener una cuadrícula
donde dentro
no haya un elemento
y esto es un error muy común
donde la gente dice
pero ¿por qué este está?
¿por qué está este espacio?
¿por qué está?
bueno
piensa en un Excel
cuando tenemos en Google Docs
un Excel
piensa en esto
esto sería una cuadrícula
¿vale?
una cuadrícula
básicamente
en la que tendríamos aquí
el hecho de que
está totalmente vacía
pero la cuadrícula
ya la tienes hecha
donde tendrías aquí
cada una de las cosas
y puedes poner
donde tú quieras
¿vale?
así que ten en cuenta esto
ten en cuenta
que la cuadrícula
puede estar vacía
pero puede estar creada
aunque tú no veas
un elemento dentro
no significa
que no pueda haber
una cuadrícula
y aquí lo puedes ver
claramente
que hemos hecho
lo voy a hacer
un poquito más pequeño
para que lo veas
este espacio
de 10 píxeles
eso en realidad
ese espacio
fíjate
que tiene
la cuadrícula
ya preparada
¿vale?
así que ahí lo teníamos
ten en cuenta
que puedes crear cuadrículas
aunque no haya elementos dentro
importantísimo
¿vale?
y ahora que tienes esto
ya clarísimo
vamos a ver
qué hacemos
con lo siguiente
porque
antes te he comentado
que vale
podríamos cambiar esto
mira
lo podemos cambiar aquí
con el template rows
si lo quitamos
genera filas
de forma totalmente automática
¿vale?
ahora
ojo
porque también tenemos
una forma
de indicar
fácilmente
cuál es el tamaño
que tienen que tener
las filas
que automáticamente
se generan
fíjate que
yo aquí solo estoy diciendo
oye
quiero que mi plantilla
de la cuadrícula
tenga dos columnas
no le digo las filas
pero las está generando
¿no?
cuando no caben
genera nuevas filas
pues tenemos una propiedad
que le podemos indicar
oye
cuando esta grid
automáticamente
me cree filas
quiero que tengan
una altura
y creo que la altura
de todas las que genera
sea de 200 píxeles
¿vale?
y ves el cambio
lo que estamos diciendo aquí
de alguna forma es
oye
cada vez que tengas
que generar
una fila
automáticamente
quiero que tenga
esta altura
que sea de 100 píxeles
le puedes poner
lo que tú quieras
y fíjate
cómo está cambiando
la diferencia
entre lo que tendríamos
a nosotros
indicarle las filas
que automáticamente
se pongan
y ten en cuenta
otra cosa
aunque tú tengas
un template
de las filas
y le digas
la primera fila
quiero que sean
100 píxeles
¿vale?
y lo cierras
fíjate lo que va a hacer
la primera fila
que es esta que tendríamos aquí
esta que tendríamos aquí
la primera fila
le hemos dicho
que sea de 100 píxeles
pero el resto de filas
las ha tenido que generar
y por lo tanto
las ha generado automáticamente
y ha dicho
bueno
voy a ver cuál es
el tamaño
que me has dicho
de las filas
que tengo que generar yo
por lo tanto
de la primera
que le hemos dicho
ha utilizado
la de 100 píxeles
y como del resto
no le hemos puesto
ha utilizado esta
¿vale?
así que esto es bastante importante
a la hora de
controlar
cuando se generen
nuevas filas
¿qué es lo que tenemos
que utilizar?
o sea
queremos que se vean
de alguna forma
queremos que tenga
algún tipo de tamaño
lo podéis poner así
¿vale?
súper importante
se puede hacer igual
en columnas
se puede hacer lo mismo
en columnas
lo que pasa es que
para las columnas
que lo veremos después
es que a la hora de
cómo se generan
el
el auto flow
cómo se genera
por defecto
¿ves?
por defecto
se generan en filas
cuando algo no cabe
se generan en filas
este sería
el valor por defecto
¿vale?
el valor por defecto
es que se generan filas
pero puedes ver
que hay otras
por ejemplo
en columnas
¿ves?
y en columnas
fíjate lo que hace
en columnas
al final
lo que hace
es intentar
meterlas todas
en la columna
o podrían meterlo
denso
que esto lo veremos
más adelante
que lo que hace
es rellenar
los huecos
con aquellos que puede
pero por defecto
lo hace por rows
pero también lo podrías
hacer con columnas
obviamente
lo que pasa es que
tienes que cambiarle
la dirección que lo harías
pongamos que
voy a quitar esto
pongamos que tenemos
aquí tres fracciones
¿vale?
o mira
mejor
vamos a poner aquí
dos píxeles
vamos a hacer
algo así
y lo vamos a hacer también
vamos a tener
tres columnas
¿vale?
vamos a quitar
aquí
esto que lo había puesto
como un poco
vamos a poner el 1
el 2 y el 3
así normal
vamos a tener
tres columnas
100 píxeles
una fracción
50 píxeles
vamos a poner ahora
que
vamos a tener
tres filas
y vamos a decir
que sean
100 píxeles
100 píxeles
y 100 píxeles
¿no?
lo queremos así
bueno
esto normalmente
es algo que vais a repetir
mucho
cuando hacemos
una cuadrícula
un problema
que vamos a tener
constantemente
es que vamos a querer
repetir lo mismo
una y otra vez
o sea
por ejemplo
vais a querer
las columnas
que sea una fracción
una fracción
y una fracción
¿no?
tres veces estamos
repitiendo lo mismo
y las filas
estamos repitiendo
tres veces lo mismo
¿no?
esto lo vais a ver
repetido
10.000 millones de veces
y hay una función
un método
que te permite
simplificar esto
que es el método
de repeat
¿qué es lo que te permite?
imagínate aquí
que en este
grid template columns
le dices
en lugar de tener que poner
manualmente
cuántas veces
tiene que ser
lo que puedes decirle
es
oye
quiero que repitas
tres veces
una fracción
¿vale?
y esto es exactamente
lo mismo a lo que hemos hecho
lo que estamos diciéndole aquí
es que queremos
tres columnas
de una fracción
y aquí podríamos hacer
exactamente lo mismo
oye
repite
tres veces
los 100 píxeles
o incluso podríamos decirle
pues que sean cinco veces
entonces ahora me crearía
cinco columnas
de una fracción
lo bueno que tiene el repeat
es que nos va a permitir
muy rápidamente
sin necesidad de estar
todo el rato
repitiendo lo mismo
el hecho de escribir
cuántas columnas queremos
siempre y cuando
sea exactamente
el mismo valor
pero también
se puede utilizar
solo para una parte
y mira
y esto es una cosa
que muy poca gente sabe
vale
el repeat
imagínate que quiero hacer
que el primero sean
25 píxeles
una fracción
una fracción
una fracción
vale
algo así
o sea
quieres que la primera columna
esta de aquí
sea un poquito más cortita
que solo sean 25 píxeles
y estos sean
tres veces
una fracción
aquí hay mucha gente
que se cree
que entonces ya no puedo
utilizar el repeat
y he visto incluso
PRs
que la gente
a lo mejor había empezado
con el repeat
pero aquí como no se podía utilizar
pues lo quitaba
pero sí que se puede
o sea hay que tener en cuenta
que aquí
como estás repitiendo
tres veces la fracción
puedes hacer esto
repeat
3 1 fr
y lo que tienes que tener en cuenta
es que al final
lo puedes utilizar
solo para una parte
por ejemplo
imagínate
que al final
queremos utilizar
que debemos crear
una quinta columna
aquí a la derecha
que sea también de 25 píxeles
pues lo puedes poner
y fíjate
la primera columna
25 píxeles
que sea esta del 1
luego 3 veces
una fracción
que sería la del 2
la del 3
y la del 4
y finalmente
la última columna
25 píxeles
incluso
y a ver
esto lo habéis pillado
porque esto está bastante
chulo
y al final
mucha gente
se cree que
que no se puede hacer
y el tema
es que con esto
tenemos 5 columnas
la primera de 25 píxeles
3 veces
una fracción
porque estamos utilizando
el repeat
y luego una quinta columna
de 25 píxeles
¿sí?
esto entendido
perfecto
vale
es como si fuera una función
que hace un splice
es como una función
que básicamente
te cambia
esto
por esto
¿vale?
es como lo mismo
esto
mira
lo voy a hacer
para que lo veáis
más claro
es básicamente
que cuando ve esto
esto lo cambia por esto
¿vale?
es una equivalencia
perfecto
ahí está
pero espérate
porque hay otra
una cosa todavía mejor
a esto
y es el hecho
de imaginar
que queréis que sea
25 píxeles
100
bueno
50 píxeles
25 píxeles
50 píxeles
¿vale?
y 25 píxeles
y 50 píxeles
algo así
¿vale?
queréis que sea
la primera
25 píxeles
la segunda
50
la tercera
25
la cuarta
50
la quinta
entonces ya veis
que se está repitiendo
algo ¿verdad?
veis que se está repitiendo
un patrón
tres veces
se está repitiendo
25 50
25 50
25 50
se está repitiendo
tres veces
pues esto también
se puede hacer
con el repeat
otra cosa que
muy poca gente sabe
entonces se puede hacer esto
y le puedes decir
quiero que esto
lo hagas tres veces
y veis
está quedando
exactamente igual
está diciendo
quiero que tres veces
me pongas la primera
y la segunda columna
¿vale?
así que ya veis
que también es mucho más potente
de lo que parece
que también podéis utilizar esto
¿es normal poner tantas columnas?
¿es normal?
claro que sí
claro que puede ser
que tengas tantas columnas
o sea
por ejemplo
en Google
¿cuántas columnas ves aquí?
claro
es que vosotros
muchas veces
os ensimismáis un poco
en cómo son los layouts y tal
pero ¿cuántas columnas ves aquí?
1
2
3
4
5
6
7
8
9
10
11
12
13
hay un montón
al final
depende un montón
de hecho
os voy a decir algo
un ejercicio muy chulo
que podéis hacer con grid
y si queréis aprender
un poquito de javascript
es el hecho
de hacer un spreadsheet
lo podéis hacer con grid
esto
podéis hacer que cambie
y fijaos
¿qué es lo que podéis hacer aquí?
que cuando soltéis el ratón
le cambiáis este valor
lo cambiáis manualmente
aquí
¿no?
de forma que ahora
el primero sea 25
y el resto
pues debería ser
repite 10 veces
una fracción
¿vale?
y así lo podríais tener
y así podéis hacerlo
la verdad podéis hacer un clon
con display grid
bastante fácil
así que para que lo sepáis
entonces
tema de
las columnas
son muchas o pocas
es que depende de la UI
no es que sea normal
o no normal
es que depende del diseño
habrá más columnas
o menos columnas
y ya está
no pasa absolutamente nada
vamos a quitar todo esto
una cosa muy común
que vais a ver en grid
es el hecho de que
imaginad
que tenemos unos resultados
unos resultados
esto está bastante chulo
¿no?
que tenéis unos resultados
tenéis unos resultados de búsqueda
y queréis que
como mínimo
claro
normalmente decís
bueno pues quiero que sean
tres columnas
ya está
quiero que sean tres columnas
pero ¿qué pasa?
que no queréis
que pierda
un valor mínimo
o sea
a lo mejor queréis
que la primera columna
como mínimo
ocupe algo
y claro
si así siempre lo hacéis
imagínate
tú esto lo haces ahora
más pequeño
¿ves?
lo haces más pequeño
y siempre su ancho
va a ser
en concordancia
a los demás
porque es un tanto por ciento
cada fracción va a cambiar
por lo tanto
si ahora aquí
pues imagínate
tienes 100 píxeles
cada columna
será 33.3
pero imagínate
que por lo que sea
quieres que la primera columna
siempre sea
de un ancho mínimo
pues eso
lo puedes lograr
¿cómo lo puedes lograr?
utilizando otro método
una función
que CSS Grid tiene
que te permite
definir un tamaño
mínimo
y máximo
para las filas
o las columnas
eso lo puedes utilizar
ahora lo vamos a utilizar
para las columnas
pero lo puedes utilizar
también para filas
imagínate que esta
primera columna
de aquí
queremos
que como mínimo
queremos
que como mínimo
sea de
100 píxeles
¿vale?
y que como máximo
sea de un fragmento
una fracción
¿qué es lo que vamos a hacer aquí?
lo que va a pasar aquí
es que
como mínimo
siempre siempre
la primera columna
va a ocupar
100 píxeles
nunca va a ser menos
y lo que va a ocurrir
es que
en ese supuesto
se va a comportar
como si fuese así
y por lo tanto
el resto de fracciones
van a dividir
el espacio disponible
pero cuando pueda ser
de más de 100 píxeles
se va a comportar
como si fuese
una fracción más
y por lo tanto
va a conseguir
el 33,3%
del espacio
dicho de otra forma
cuando el 33,3%
del espacio
del espacio
sea menor
de 100 píxeles
se va a quedar
en 100 píxeles
¿vale?
eso es lo que explicaría esto
y este 33,3%
viene
porque como hemos dicho
que como máximo
es una fracción
cuando todo el espacio
se divide en tres fracciones
sería 33,33%
vamos a verlo
en funcionamiento
si nos vamos aquí
a la preview
¿vale?
fíjate que ahora
si lo hacemos
un poquito más pequeño
si soy capaz
de pillar
de algún sitio
¿vale?
lo vamos haciendo pequeño
pequeño pequeño
y tan pequeño
lo puedo hacer
que no lo vemos funcionando
a ver
lo voy a hacer aquí
pero se me va a romper
otra vez esto
¿vale?
fíjate en la primera columna
¿vale?
fíjate en la primera columna
¿ves?
la primera columna
ha llegado un momento
que se queda siempre
siempre en 100 píxeles
¿vale?
pero cuando su tamaño
puede ser mayor
a 100 píxeles
porque la fracción
ya tiene ese espacio
entonces
sí que crece
pero su tamaño mínimo
va a ser de 100 píxeles
y el resto
se va a tener que adecuar
al espacio
que tiene disponible
como el primero
toma 100 píxeles
el resto
va a tener que dividirse
¿vale?
y por eso estáis viendo
que los otros
sí que se quedan
un espacio igual
pero el primero
se queda fijo
en 100 píxeles
y esto lo estamos consiguiendo
gracias
básicamente
a este midmax
le estamos diciendo
oye
la primera columna
como mínimo
tiene que ser de 100 píxeles
y si no
tiene que tomar el espacio
de una fracción
¿ok?
este método
es súper importante
y súper interesante
y para que veáis
un caso súper típico
que os va a acompañar
toda vuestra vida
¿vale?
porque esto lo vais a ver
así de veces
así de veces
es el hecho de
mira
voy a hacer un
voy a hacer un ejemplo rápido
en un momento
para que os deis cuenta
mira
tengo por aquí un html
que os va a sonar
que sería así ¿no?
el tener un div
y tenéis una barra lateral
y un main
tenéis un main al lado
entonces
vamos a poner
esto así
y quitamos el de javascript
y ponemos el css
imaginad
barra lateral
contenido principal
bueno
pues tenéis el div
le ponemos un display grid
y le vamos a decir
que vamos a tener dos columnas
grid template columns
le decimos que el primero
min max 100 píxeles
y sin una fracción
y el otro
pues que sean 5 fracciones
ya tendríamos aquí
una barra lateral
¿no?
el aside
con la barra lateral
voy a poder tener border
solo para que lo veamos
un poquito
¿vale?
y luego podríamos poner
que el main
pues tenga el borde
de color azul
¿vale?
algo así
pero fijaos en una cosa
y esto lo podríamos hacer
que sea pues más grande
vamos a poner
body margin 0
y esto
en un momento
lo vamos a tener
¿vale?
vamos a decir que ocupe
todo el espacio
para que lo tengamos aquí
¿vale?
ahí tendríamos la barra lateral
¿vale?
y la barra lateral
lo que va a ocurrir aquí
es que como mínimo
va a ser de una fracción
lo que pasa es que claro
ahora aquí
no tengo mucho espacio
pero lo vais a ver ahora
¿vale?
vale
fijaos que la barra lateral
tiene este espacio
ahora se está viendo
bastante bien
entonces lo vamos a ir haciendo
cada vez más pequeño
fijaos que cada vez
se va haciendo más pequeño
hasta que digo un momento
que ya no se hace más pequeño
¿por qué?
porque lo que estamos evitando
es decir
bueno yo la barra lateral
puedo ajustarla
durante un tiempo
pero no quiero romper nada
esto seguro que te suena
por ejemplo
Spotify
Spotify
ay
Spotify aquí no
ay sí
lo puedo mirar
fijaos en la barra lateral
Spotify
es un claro ejemplo
que está hecho con Grid
en la barra lateral
seguramente vamos a ver
que se va a ajustar
un poco
no se ajusta
mira pasa al revés
pasa al revés
se ajusta
se ajusta lo otro
y eso tiene un tamaño fijo
pero
es raro
porque normalmente
lo que se hace
es que se ajuste
esta parte de aquí
¿vale?
mientras se hace pequeño
pero llega un momento
que no lo puedes hacer
más pequeño
porque no quieres
que se rompa
porque sabes
que tienes un icono
con el texto
entonces dices
vale
quiero que la barra lateral
tenga como mínimo
100 píxeles
porque sé que es lo mínimo
indispensable
para que se vean
mis botones
que tengo dentro
así esta barra lateral
que tenemos aquí
si tengo aquí
todos mis botones
imagínate pues
play
vamos a poner aquí
buscar
lo que sea
¿vale?
pues sé que este espacio
es el necesario
para que no se me rompa
pero si hay más espacio
voy a darle más espacio
y si hay un momento
en que no
tengo suficiente espacio
lo que voy a hacer
es que sea el contenido principal
el que pierda el espacio
y la barra
se quede ahí
y fíjate
que esto lo vas a lograr
gracias al min max
esto es una cosa
muy común
muy típica
muy muy muy típica
que va a ocurrir
en todas y cada una
de las páginas web
de internet
a la hora de maquetar
¿vale?
utilizar un min max
para que una columna
tenga el ancho mínimo
que nunca va a tener
que bajar
de los 100 píxeles
por lo tanto
si el espacio disponible
llega un momento
que iba a ser
de menos de 100 píxeles
se queda fijo
ahí
min max
es totalmente
específico
de grid
¿vale?
no lo puedes utilizar
en cualquier sitio
o así como cualquier cosa
y el ancho máximo
sería en este caso
una fracción
ahí tendrías
el problema
de una fracción
o sea
el máximo sería este
una fracción
lo que pasa
es
podrías ponerle
máximo 200 píxeles
por ejemplo
y ya está
podrías ponerle
como máximo
200 píxeles
y lo podrías
y ya está
pero claro
¿ves?
cuando no puede
hacer más de 200
fíjate
que se hace pequeño
pero normalmente
se utiliza
una fracción
para que tome
antes
el espacio
¿vale?
esto os evita
un montón
de media queries
también
¿por qué?
porque normalmente
esto se hace
con media queries
aquí alguien diría
no, quiero que ocupe
200 píxeles
pero cuando el ancho
que tenemos
disponible
sea mayor
a no sé qué
entonces
lo que hacemos
es ¿sabes?
y sería mucho más complejo
así que esto
es una forma
bastante chula
de evitar este tipo
de cosas
vamos a ver otra cosa
este sería un ejemplo
para que veáis
un layout
vamos a ver
un otro ejemplo
bastante típico
mira
esto
esto por ejemplo
mira esto por ejemplo
esto por ejemplo
de la Kingsley
la Kingsley
veis que tiene aquí
una cuadrícula
que sería de
con tres resultados
que conforme se va haciendo
más pequeño
veis que llega un momento
que pasa dos
y luego a una
una
dos
y tres
¿no?
o sea
dependiendo del
del punto
se van haciendo
más o menos
¿vale?
vamos a ver
voy a ver
si podemos robar
este contenido
un momento
espero que no me vuelvan
a denunciar
mira
esto es un ejemplo
buenísimo
esto es un ejemplo
buenísimo
de cómo no hacerlo
¿vale?
y os voy a enseñar
cómo hacerlo
fijaos que aquí
tiene un montón
de cálculos
súper chungos
¿vale?
de width
calc
no sé qué
no sé cuánto
margin left
menos 30
bueno
esto
en realidad
a ver si
ves
y tiene
la primera columna
o sea
primera columna
segunda columna
tercera columna
cuarta columna
o sea
como que tiene aquí
un sistema
súper chungo
en el que tiene
un montón de dips
que tiene dentro
el item
otra cosa aquí
a ver aquí
aquí sigue usted
todos
y entiendo
y está utilizando
flex
aquí es un caso
concreto
típico
y seguro
justamente
de utilizar
display grid
porque va a ser
mucho más interesante
para este caso
sin necesidad
de utilizar
media queries
veis que está
utilizando aquí
media queries
para hacer esto
vamos a hacer un
un caso
similar
vale
mira
avengers
posters
vamos a hacer
avengers posters
vamos a hacerlo
en un momento
vamos a hacer
este de aquí
no
un poster
de avengers
este
este poster
de avengers
vale
vamos a copiar
la dirección
de la imagen
vamos a poner
una imagen
source
imaginar que esta imagen
la tenemos unas cuantas veces
ok
porque es que si no
no terminamos ahí
todo el día
la tenemos unas cuantas veces
y vamos a poner
que las imágenes
tengan un máximo
de ancho
de 300
y la altura
que sea automática
vamos a hacer las más pequeñas
básicamente
para que se vean
vale
vamos a poner ahí
un montón
imaginaos que son
diferentes imágenes
que si no
no me da la vida
pero
imaginaos que son
diferentes imágenes
vamos a hacer
que esto esté dentro
de un dip
ok
lo vamos a envolver
con un dip
y vamos a poner
que el dip
tenga un display grid
vamos a hacer
nuestra cuadrícula
display grid
ok
ahora
nosotros
lo que queremos
ahora mismo
es que tenga
el grid templates
podríamos decir
si queremos que sea similar
a lo que hemos visto
en la kingsleague
deberíamos decir que
tiene que tener
tres columnas
tres columnas
de una fracción
una fracción
y una fracción
o sea tenemos
tres fracciones
vale
entonces
aquí tendríamos
las tres fracciones
cada una
bueno aquí claro
le he puesto esto
en lugar de hacer esto
no sé
así
vale
para que ocupe
todo el espacio
de la cuadrícula
porque si no
queda
ahora
una cosa
que tendríamos
en la kingsleague
fijaos
que hay una separación
en cada uno
de ellos
entonces
una cosa
que podemos hacer
para separar
las columnas
es indicarle
que las columnas
tienen que tener
un gap
un hueco
no se utiliza
el margin
ni baddings
ni cosas raras
vale
lo que se utiliza
es el gap
el gap
lo que vamos a hacer
es asegurarnos
que vamos a tener
una separación
entre las columnas
en este caso
le podemos decir
oye
16 píxeles
entre cada columna
ves que habrá aparecido
una separación
entre cada columna
quiero que haya una separación
de 16 píxeles
ojo con esto
porque
la
última forma
correcta de hacerlo
en realidad
es poniendo al principio
grid
guión
column gap
no pasa absolutamente nada
si utilizáis column gap
porque como veis
está totalmente soportado
no hay ningún problema
pero
pero
esta es la forma antigua
yo lo hago así
porque estoy acostumbrado
pero en realidad
automáticamente
va a utilizar esta
vale
o sea que deberéis utilizar
grid guión
column gap
pero bueno
si utilizáis esta
o si la veis
que sepáis que también funciona
pero es por retrocompatibilidad
con los navegadores antiguos
no la van a quitar
tampoco os preocupéis
luego tendríamos esto
column gap
vale
y ahora también
fijaos que
entre filas
entre la fila 1
la fila 1
y la fila 2
que tenemos aquí
también están pegados
tendríamos que poner
row gap
y aquí
también
podríamos poner
32 píxeles
y fijaos
que la separación
que hay entre filas
es el doble
que la separación
que hay entre columnas
porque he puesto
que la fila
tenga 32 píxeles
o sea
el doble
de la separación
de las columnas
esto
lo podéis hacer
en una sola línea
también
podéis poner gap
y podéis ponerle
creo que la primera
si no me equivoco
la primera son
las filas
32 píxeles
y la segunda
las columnas
lo podéis hacer
con una sola propiedad
y si vais a utilizar
la misma separación
entre filas
y columnas
podéis simplemente
poner 16
y ahora fijaos
que ha quedado
lo mismo
tanto en columnas
como en filas
así que
ya sabemos separar
ya estamos
nos estamos ajuntando
bastante
a esto de aquí
también cada imagen
veo que tiene un borde
de radios
pero bueno
esto tampoco es tan importante
pero lo vamos a hacer
solo por
porque quede más o menos igual
vale
hasta aquí bien
hasta aquí
perfecto
tenemos 3
3 columnas
parece que todo va bien
pero que pasa
que es verdad
que tenemos 3 columnas
y es verdad
que sí que se está ajustando
a su espacio
o sea no hay ningún problema
se está ajustando a su espacio
pero que pasa
que llega un momento
que me gustaría
cuando llega aquí
que pasase a ser
2 columnas
verdad
o sea hay un momento
que ya se ve
tan pequeñito
que realmente
lo correcto
debería ser
que se viese como
en 2 columnas
porque si no
no tendría mucho sentido
que podríamos hacer
pues podríamos decirle
a ver
vamos a hacer una cosa
cuando por defecto
vamos a hacer
fíjate
vamos a hacer algo responsive
lo voy a hacer en un momento
por defecto
quiero que sea
una sola columna
pero
si el ancho
que tenemos disponible
es mayor
a 300 píxeles
vamos a decirle
que el
el di
perdón
vale
el template
sea de 2
vale
queremos que sea de 2
entonces que va a pasar
que cuando sea de menos de 300
va a utilizar una columna
cuando es de mayor de 2
vale
ya lo estamos haciendo
ya lo estamos haciendo responsive
vale
vamos a ir más allá
cuando el width
es mayor de 600 píxeles
pues vamos a hacer
que tenga 3 columnas
vale
3 columnas
perfecto
pues una fracción
una fracción
y una fracción
y ahora fíjate
conforme va ganando espacio
vale
ahora son 3 columnas
menos de 602 columnas
vale
lo hemos hecho responsive
pero
se puede hacer mejor
se puede hacer mucho mejor
y esto
fijaos
es
es bastante código
bastante difícil de entender
y que al final
lo que está pasando
es que no estamos utilizando
correctamente grid
vale
no estamos utilizando
correctamente
porque esto al final
sería un rollo
tener que estar
constantemente aquí
pensando
en cada media query
cuánto tiene que utilizar
y aquí amigos
es donde está la magia
de el midmax
vale
voy a crear
un nuevo codilink
que con exactamente lo mismo
ok
exactamente lo mismo
pero aquí lo voy a hacer
un poco diferente
vamos a quitar las media queries
y en el grid template columns
vamos a hacer una cosa
vamos a decirle
oye
quiero que repitas
vale
quiero que repitas
no sé cuántas veces
todavía no sé cuántas veces
tienes que repetir las columnas
pero lo que tengo claro
es que
como mínimo
cada columna
como mínimo
tiene que ocupar
200 píxeles
y si no
utiliza una fracción
pero claro
cuántas veces
se tiene que repetir
cuántas veces
cuántas columnas
tendrías que utilizar
con el midmax
no lo sabemos
¿verdad?
pues por suerte
tenemos dos valores de grid
que nos va a ayudar
justamente con esto
uno sería
autofill
vale
autofill
podemos autofill
o autofit
que ahora os explicaré
la diferencia
para que la veáis claramente
voy a utilizar autofill
primero
¿qué es lo que hace autofill?
lo que hace autofill
es ubicar el número de columnas
que sean
que ocupan en el ancho
mientras
su ancho mínimo
sea de 200 píxeles
¿qué quiere decir?
que si tenemos
400 píxeles
me va a colocar
dos columnas
pero si tenemos
500 píxeles
me va a poner
dos columnas
solo que me las va a hacer
un poco más grande
hasta que sea capaz
de poner una tercera columna
que será en el punto
de los 600 píxeles
porque habrán
tres columnas
de 200 píxeles
porque 200 píxeles
es el tamaño mínimo
que le hemos dicho
que tiene que tener
una columna
¿vale?
así que con esto
justamente
ahora
lo que tendríamos que ver
es que fíjate
que automáticamente
en cuanto tiene
la posibilidad
¿qué pasa aquí?
aquí solo puede enseñar
una columna
porque no puede poner
otra columna
que satisfaga
el tamaño mínimo
y hasta que no pasemos
de 400 píxeles
para que puedan caber
dos columnas
aunque sean
cada una de 200 píxeles
que es el tamaño mínimo
que hemos puesto aquí
no va a aparecer
¿veis?
ahora han aparecido
¿por qué?
porque ya es de más
de 400 píxeles
y dice
vale
ahora soy capaz
de
con el tamaño mínimo
poner dos columnas
¿qué es lo que tendría
que hacer
para enseñar una tercera?
tener 600 píxeles
como mínimo
porque hasta que no llega
a ese punto
no va a ser capaz
de poner como mínimo
una tercera columna
cuando llegue a 600 píxeles
pondrá la tercera
y así constantemente
fijaos
constantemente
ahí lo vamos a tener
constantemente
lo vamos a tener
así que esto
sería la forma correcta
y fijaos
fijaos por favor
que son literalmente
cinco líneas de código
en cinco líneas de código
sin utilizar
ni una media query
sin utilizar
absolutamente nada
lo que hemos hecho
es este sistema
que veis aquí
este sistema
que veis aquí
bastante más complejo
lo hemos hecho
con simplemente
cinco líneas de código
¿sabes?
o sea
hemos hecho
cinco líneas
de código
no hemos tenido
que utilizar
hacks raros
de menos 30 píxeles
no hemos tenido
que utilizar
por ejemplo
aquí
cálculos
súper extraños
no hemos tenido
que poner
¿veis?
no hemos tenido
que utilizar
media queries
no hemos tenido
que utilizar
absolutamente
nada
la diferencia
con flexgrab
como puede
o sea
es que esto
es muchísimo
muchísimo más potente
que flexgrab
flexgrab
al final
lo que va a hacer
es separarlo
tirarlo abajo
y ya está
y esto
es mucho más potente
y al final
lo que estamos haciendo
es que
estamos controlando
mucho mejor
cuál es el tamaño mínimo
cómo luego se tiene que expandir
es mucho mejor
¿no?
pero ¿qué función tiene
minmax?
bueno ángel rojo
seguramente es porque
ha llegado tarde
pero es que lo hemos explicado
antes
hemos explicado el método
de la función que tiene
minmax
hemos explicado que
lo que estamos diciéndole es
cuál es el tamaño mínimo
que tiene que tener
la columna
¿vale?
y si ya llega
al tamaño mínimo
cómo se tiene que comportar
por default
digamos ¿no?
así que como máximo
va a tener un fragmento
también podríamos llegar
a decir
oye
si queremos limitar
el ancho máximo
podemos decirle
que como máximo
sea de 400 píxeles
lo que pasa es que
en este caso
ya va a ser un poco más rollo
porque justamente
lo que queremos
es que se pueda ajustar
constantemente
y luego
si queréis limitar
el número de columnas
lo que tendríais que hacer
más bien
es decir
bueno
pues lo que podemos hacer
es que esto
el contenedor
tenga un ancho máximo
por ejemplo
podríamos decir
500 píxeles
y esto lo podréis
lo podemos
centrar
¿vale?
y ahora lo que va a ocurrir
es que ya no va a seguir creciendo
podéis hacer el cálculo
de cuánto sería
lo que queréis
por ejemplo
tres columnas
y ya lo tendríais ahí
y ya estaría
punto pelota
vamos a ver otra cosa
que es bastante interesante
sobre el autofill
vamos a hacer esto
un poco más pequeño
¿vale?
que ahora las columnas
sean de 100
vale
fijaos que ahora
como son de 100
pues ahora salen más
es normal
y salen más fácilmente
la diferencia entre autofill
y autofit
hay una diferencia
muy sutil
muy pequeña
¿vale?
que es un poco
que no es tan importante
pero sí que es interesante
que sepas
claro
aquí porque tenemos
un montón de imágenes
y al final
cabe por todos los lados
pero
imaginad
que solo tenemos
cuatro imágenes
¿vale?
cuatro imágenes
esto es lo que muchas veces
nosotros esperamos
el hecho de
si tenemos una cuadrícula
y solo tenemos
tres elementos
lo que esperaríamos
es que
ocupe cada espacio
y aquí debería ir otra
pero como no lo hay
pues queda así
esto es lo que normalmente
se hace en los resultados
de búsqueda
no tiene sentido
que ocupen todo el espacio
sino tú lo que quieres
es siempre tener
el mismo ancho
para que no se rompa
el layout
¿no?
entonces lo que podríamos
hacer aquí
es decir
bueno
no
me da igual
quiero que hagas un autofit
y lo que va a pasar
con el autofit
es que va a ocupar
todo el espacio
va a decir
bueno
aunque no haya
no hay
si no hay más elementos
voy a ocupar
todo el espacio
y voy a hacer
que sean más grandes
pero esto no es normalmente
lo que quieres hacer
en los resultados de búsqueda
porque quedaría muy raro
que de repente
¿no?
te diga
ah si solo sale un elemento
sale enorme
si salen seis elementos
salen chiquititos
¿no?
entonces
diríamos que
uno sería
lo que está
rellenando el espacio
y el otro lo está
ajustando
fíjate la diferencia
autofit
es que está
ajustando
está estirando
el contenido
y lo está ajustando
hasta los límites
y autofit
es que lo está
rellenando
está dejando
trozos de la cuadrícula
vacíos
y solo está rellenando
los huecos
eso sería la diferencia
pero el tema
es que cuando tenéis
muchos resultados
no vais a
ver la diferencia
¿vale?
no vais a ver la diferencia
va a ser exactamente
lo mismo
y vais a pensar
pues no tiene diferencia
pero cuando tenéis
pocos elementos
sí que vais a notar
cuál es la diferencia
¿no?
¿contailwin esto ocupa
menos líneas de código
o más?
con tailwin el problema
es que hacer esto
esto
lo tenéis que hacer
manualmente
ocupa más o menos
lo mismo
o sea al final
va a ocupar esto
va a ocupar exactamente
lo mismo
o sea
tú igual lo haces
en menos líneas
pero tendrías que hacer
cosas así como
grid
calls
repeat
no sé qué
lo tenías que hacer
manualmente
esto es clave amigos
esto es clave
aquí es donde se ve
justamente
la potencia
que tiene
que tiene grid
porque fijaos
lo fácil
que hemos hecho
un sistema
de resultados
en una cuadrícula
que vais a ver
que un montón de veces
se hacen cosas
muy raras
como en este caso
de la kings league
con margin left
con un montón
de media queries
de decir
bueno cuando es uno
o tres
incluso si utilizáis
bootstrap
seguro que os ha pasado
que tenéis que hacer
un montón de cosas
raras
para tener que
para tener que hacer
justamente que sean
responsive
a la hora
en diferentes tamaños
y aquí es súper fácil
el hecho
de que se ajuste
a la cuadrícula
y automáticamente
en cinco líneas de código
hace unos resultados
de búsqueda
buenísimos
buenísimos
sin ningún tipo de problema
entonces ya hemos visto
la separación
los gaps
vamos a ver
el tema de las líneas
de la cuadrícula
que esto está
bastante interesante
también
y que muy pocas veces
la gente se para
a ver esto
¿vale?
mirad
cuando nosotros
voy a hacer que sean
más grandes las
vamos a hacer
autorrows
vamos a poner
que cada fila
sea de 50 píxeles
¿vale?
vamos a ponerle
un gap de 16 píxeles
para que veáis
antes me preguntaba
a alguien
¿por qué utilizas gap
y no utilizas margin?
a ver
si utilizas margin
aparte que el margen
no lo puedes poner aquí
el margen
lo tienes que aplicar
dentro de los elementos
pero claro
el margen
es bastante complicado
de aplicar
porque tú no puedes aplicar
no se aplica
exactamente igual
la separación
del margen
a cada uno
de los elementos
o sea
si tú dices
que quieres que sea
4 píxeles
fíjate que el margen
se está aplicando
también aquí fuera
que a veces
a lo mejor es lo que quieres
no pasaría nada
si es justamente lo que quieres
no pasa nada
pero muchas veces
lo que quieres
no es que haya una separación aquí
y por lo tanto ya
imagínate que te decir
no pero
entonces
y esto de hecho
es lo que hace
que es lo que hemos visto aquí
que es un hack
¿vale?
lo que pasa justamente aquí
fíjate
en equipos
aquí
¿qué es lo que pasa?
que hace la separación
con margin
como hace la separación
con margin
fíjate lo que hace
¿ves?
que hace margin left
menos 30 píxeles
¿por qué?
porque lo que quiere
es que este margen
de la izquierda
no esté
y lo que dice es
bueno
pues lo que voy a hacer
es margin left
menos
le quito
el margen
que estoy aplicando
y así
va a quedar
alineado
como espero
pero eso no es la forma
correcta
cuando lo que quieres tener
es la separación
entre elementos
lo correcto
en todo caso
además
es decirle
bueno
quiero hacer el gap
de 4 píxeles
y en todo caso
dentro
si lo que quieres
es empujar el contenido
lo que puedes hacer
es el padding
y entonces
es mucho más fácil
además de pensar
si lo estás aplicando
directamente
desde el contenedor
en lugar de tener
que aplicarlo
en los elementos
porque muchas veces
además en los elementos
tienes el problema este
de que si no quieres
que haya ningún tipo
de separación
no lo vas a poder lograr
a no ser que utilices
algún hack
no es imposible
utilizar margin
no es algo
siempre negativo
ni está mal
o sea
a veces puedes utilizar margin
y puede tener sentido
pero normalmente
si hablamos de separación
entre elementos
lo mejor
es que lo hagas
directamente
en el contenedor
o sea
sería un poco
lo que es mucho más sencillo
y te va a simplificar
a la hora de pensar
como los quieres separar
¿vale?
dicho esto
fijaos que habíamos dicho
por aquí
que teníamos el grid
¿no?
y que al darle aquí a grid
¿vale?
hay un botoncito aquí
fijaos que aquí aparecen
unos botones
uno
uno
¿veis?
uno
ahí sale un dos
a ver
aquí dos
aquí un tres
aquí un cuatro
¿vale?
y aquí también hay
uno
dos
tres
cuatro
y luego
menos cuatro
menos tres
menos dos
menos uno
vale
esto es una de las cosas
más divertidas
y con la que vas a hacer
esto de los vento grids
¿vale?
esto de los vento grids
se hace con lo que te voy a explicar ahora
este tipo de evento
se hace con lo que te voy a explicar ahora
fíjate
tenemos estas líneas
¿no?
estos números
aquí
¿qué es lo que hace esto?
esto lo que está haciendo es
las líneas de la cuadrícula
es como que estamos
está definiéndonos
cómo nos da
estas líneas numeradas
para posicionar elementos
por ejemplo
el elemento este
de arriba a la izquierda
está posicionado
entre la columna uno
y la columna dos
¿no?
está ahí posicionado
así que
tenemos aquí
uno
dos
tres
cuatro
¿no?
ahí
lo que podríamos decir
es que el primer elemento
mira
lo voy a poner
de otro color
para que lo veas más bien
¿vale?
voy a ponerle
background green
y así lo vamos a ver
mientras hablo
vale
ahí lo tenemos
vale
vamos a ponerle un light
light green
y borde
un pixel
vamos a ponerlo
bueno
no sé
de dos píxeles
dos píxeles
y ponemos
que este sea green
¿vale?
vale
fijaos en este elemento
este elemento
si lo veis aquí
si le damos a los numeritos
está posicionado
entre esta esquinita
entre este uno
y este dos
entonces
lo que podríamos decir
es que este elemento
first child
lo podríamos mover
y decirle
¿dónde está ahora mismo
posicionado?
vale
pues está
el grid
column
start
¿dónde está empezando?
pues está empezando
desde el uno
¿y dónde está terminando?
pues está terminando
en el dos
¿no?
fíjate que no ha cambiado
nada visualmente
está terminando
en el numerito uno
del uno
al dos
no ha cambiado
absolutamente nada
pero lo bueno
es que
una vez que tenemos
estas propiedades
nosotros
le podemos indicar
dónde tiene que terminar
y dónde tiene que empezar
imagínate que este primer elemento
quieres que vaya
del uno
hasta el tres
pues le diríamos
oye
quiero que la columna
empiece del uno
pero que termine
en el tres
y fíjate lo que pasa
lo que pasa
es que de repente
ese elemento
dice
vale
empiezo
desde la línea
vertical
uno
hasta la línea
tres
o sea
estoy empezando
desde aquí
hasta aquí
y ojo
lo más interesante
es que lo puedes
le puedes decir
que empiece
donde te dé la gana
por ejemplo
imagínate que quieres
que el primer espacio
quede vacío
pues le vamos a decir
que empiece
desde la línea
vertical
dos
vale
fíjate lo tenemos aquí
desde el dos
al tres
pues le decimos esto
del dos al tres
y fíjate dónde se coloca
y lo mismo
podríamos decirlo otra vez
que vaya hasta el cuatro
y entonces empuja el resto
con esto justamente
es que vamos a poder
construir los vento
porque los vento
de lo mismo que le decimos
de las columnas
también se lo vamos a decir
de los rows
mira
cuántos elementos hay aquí
uno
dos
tres
cuatro
cinco
seis
siete
ocho
hay ocho elementos
¿no?
vamos a hacer una cosa
lo he contado bien
¿no?
cuatro
cinco
seis
siete
siete
ocho
vale
vamos a hacer una cosa
fijaos lo fácil
lo fácil
que es aplicar esto
lo fácil que es aplicar esto
imaginad
¿vale?
que tenemos esto
y os digo
venga
hay que hacer
este evento
este evento de aquí
pues lo único que tenemos que hacer
es fijarnos
en las líneas
aquí podemos ver
que es
si nos fijamos
aquí sería la uno
el uno
dos
tres
cuatro
¿no?
que lo tenemos aquí
uno
dos
bueno
tenemos aquí
los dibujos
un
dos
tres
cuatro
vale
entonces
tenía que ir
del uno
al dos
¿vale?
solo de un uno
pero tendría que hacer
grid row start
del uno
grid row start
y tendría que llegar hasta el tres
ahí está
al end
perdón
end hasta el tres
y ya está
o sea con esto ya tendríamos esto de aquí
obviamente me faltaría todo el diseño y tal
pero fíjate que lo que está pasando aquí
es que está ocupando dos filas
así que aquí lo que podemos decir es que vaya del uno al tres
y así ocuparía dos filas
esto muchas veces es un poco raro
¿por qué?
porque tienes que estar pensando constantemente
dónde empieza
dónde termina
dónde tenemos que estar diciéndole
pero al final aquí queda muy claro que si lo ves dices
bueno pero si me estás diciendo que ocupa dos filas
¿por qué no puedes directamente decirle que ocupe dos filas
y te olvidas de tener que hacer
que vaya de la línea de la uno a la tres
que es un poco rollo ¿no?
de la línea uno a la tres
es un poco rollo
bueno pues se puede hacer también
le puedes decir
oye quiero que empieces
y que ocupes dos filas
fíjate que ahora ocupa dos filas
y lo mismo le podríamos decir con las columnas
quiero que ocupes dos columnas
y entonces fíjate lo que hacemos ahora
aquí lo que tenemos ahora
es que ocupa dos filas y dos columnas
y lo tenemos ahí
así que lo que estamos haciendo ahora
es decirle lo que ocupa directamente
no estamos diciendo de dónde empieza a dónde termina
le decimos lo que ocupa
y podríamos hacer esto exactamente con otros
o sea podríamos ir al deep nt child 2
creo que no sé si esto
sí creo que esto lo hará bien
vamos a poner aquí light blue
borde 2 pixels solid blue
y grow column start span 3
¿vale?
fíjate que aquí
bueno claro light red
light red no existe
light coral
ahora
es que el coral es muy parecido al salmón
cyan pink
sí green
¿vale?
y aquí le vamos a poner esto
y lo mismo podríamos decirle con el row
y le podríamos decir
row start
y span 2
¿vale?
y aquí le podríamos decir a cada elemento
cuánto es lo que tiene que ocupar
¿vale?
fijaos lo fácil que es
esto también se puede hacer de otras formas
mucho más sencillas
¿vale?
porque tienes que poner grid column start
no sé qué
no sé cuánto
y puede ser un poco rollo
pero también puedes utilizar la forma más corta
por ejemplo grid column
y le puedes decir aquí
que vaya del 2
al 4
¿vale?
y fíjate
aquí va desde la línea 2
a la 4
y lo mismo con el grid row
le puedes decir que vaya de la 2
a la 3
¿vale?
y entonces ya lo estamos moviendo
y una cosa que es muy interesante con esto
es que también
puedes moverlos donde te dé la gana
por ejemplo
aquí puedes poner que este vaya del 1 al 3
y fíjate que aquí lo que vamos a hacer es
independientemente de su posición en el html
¿no?
que era 1, 2, 3, 4, 5, 6, 7, 8, 9
lo que estamos haciendo es
bueno
como este de aquí
lo he puesto aquí
lo que voy a hacer con este
es ponerlo aquí
y esto muchas veces es interesante
con temas de responsive
porque a lo mejor
en una media query
vas a querer
que un elemento
que a lo mejor
lo quieres centrado
en algún sitio
por lo que sea
cuando cambia
a lo mejor
lo quieres poner arriba a la izquierda
pues esto lo puedes hacer
cambiando esto
y el tema de los números
por eso es importante
que lo tengas aquí
invisibilidad
que tienes los números
de las líneas
tanto verticales
que sería la de las columnas
que sería la columna
o sea la línea
1, 2, 3 y 4
y la de las filas
1, 2, 3 y 4 y 5
porque tenemos al final
4 filas
5 líneas verticales
horizontales
y ojo también
una cosa
que es bastante interesante
que también podéis utilizar
números negativos
¿qué quiere decir esto?
que podéis contar
desde el final
por ejemplo
si queréis
que la columna
o sea este 2
vaya desde
bueno el 2
será este ¿no?
queréis que vaya
desde la primera
hasta la penúltima
¿no?
pues podéis hacer esto
no el menos 1
vale
ah claro
es que he hecho columna
vale he hecho columna
vale pues sería así
menos 2
y entonces sería la penúltima
la última sería esta
y esta sería la penúltima
pues entonces lo estaríamos
haciendo así
lo estaríamos lagrando
de una forma diferente
pero lo podríais hacer
o si queréis que ocupen
todas las filas
pues podéis decirle
bueno quiero que vaya
de la 1
a la menos 1
y con grid row
ay
¿por qué no me ha hecho esto?
espérate
¿por qué no me ha hecho esto?
pues pensaba que este me iba
¿por qué no me ha hecho
de la menos 1 a la 1?
¿a la 1?
no
¿de la 1 a la menos 1?
pensaba que me iba a hacer
a ver si ponemos aquí a 1
aquí sí que la pilla
pues pensaba que este me iba a pillar
me iba a bajar de todos
pues me ha dejado fatal
¿por qué puede ser que esto no?
porque está esta
¿sabes?
porque está esta
y al final no puede
¿sabes?
porque lo empujaría
claro podría tener sentido
no
podría tener sentido
pensaba que lo iba a pillar
con las columnas
sí que lo está haciendo
ves que va desde la 1
a la menos 1
que será el final
pero con la grid row
no lo ha hecho
pensaba que a lo mejor
pillaría todo el espacio
pero entiendo que no podrá
a lo mejor por esta
del first child
pero bueno
que podéis referir
desde adelante hacia atrás
lo tenéis aquí
veis que pone aquí
menos 3
menos 2
menos 1
pues ahí lo tenéis
a ver
menos 4
es que es menos 4
es que lo he pensado mal
claro
menos 1 es el de abajo
a la derecha
ha sido error mío
porque veis
el menos 1
está aquí
claro
es el menos 4
debería ser este
y así es como ocuparía
todo el espacio
vale vale
pues ya está
ahí es que tendría
todas las filas
que serían
las 4 filas disponibles
las tendríais aquí
tendría 1
2
3
o sea llegaría hasta el final
vale
en este caso
bueno menos 4
sí
estaría haciendo eso correctamente
vale
pues así es como lo podríais hacer
lo podríais hacer también
con números negativos
pero a ver
no es obligatorio
solo
o sea
os lo explico solo para que os sepáis
porque claro
salen aquí los números
y a lo mejor os volvéis locos
pero lo único que tenéis que entender
es que
la línea horizontal 4
se refiere también a la menos 4
vale
o sea que podéis contar al revés
que la menos 3
claro
sería como la anterior
pero tened en cuenta
que lo podéis utilizar
pero tampoco lo hagáis así
de esa forma
lo importante
la más importante
es cuando queréis ir de punta a punta
y no queréis saber
cuántos tenéis
pues así lo que podéis hacer
es decir
del 1 al menos 1
y esto lo que vais a conseguir
es utilizar todo el ancho
porque vais del punto 1 vertical
¿no?
de este punto que tenemos aquí
arriba a la izquierda
hasta este punto que tenemos
arriba a la derecha
y así pues sería mucho más fácil
que lo podáis hacer
pero bueno
las formas abreviadas
yo
esta forma abreviada
no está mal
si la entendéis
pero tampoco os diría
que os volváis locos
un tema importante sobre esto
imaginad
vamos a poner que esto vaya
del 1 a la 3
y de la 1 a la 3
¿vale?
aquí ponemos al primer elemento
que vaya de la línea 1 a la 3
verticalmente y horizontalmente
pues este mismo
lo podéis poner en el mismo lugar
y veis que se sobreponen
esto es una cosa
que no se puede lograr en CSS
de cualquier manera
y muchas veces
se puede utilizar
Position Absolute
para ponerse justo por encima
pero hay pocas formas
de forma nativa
y controlada
que lo podéis lograr
sin utilizar el Left
Top
Right
cambiando márgenes raros
y hacks
aquí sí que podéis
sobreponer
dos elementos
de forma totalmente controlada
sin tener que mover nada
porque le estáis diciendo
que los dos
tienen que ponerse
en el mismo lugar
y lo podéis ver claramente
que uno está
debajo del otro
¿veis?
porque si le pongo opacidad
¿veis que están los dos ahí?
esto es muy interesante
porque a veces en CSS
la gente se cree
que para sobreponer dos elementos
hay que hacer cosas muy raras
y no tiene por qué ser así siempre
aquí lo estamos haciendo
y lo estamos haciendo
totalmente controlado
lo interesante además
es que dependiendo
del Zindex
que le pongáis
obviamente
se verá uno u otro
delante o detrás
¿vale?
si le ponemos
por defecto
debería ser el segundo elemento
que es el que tiene más
como más potencia
para que se quede encima
por eso es este
el que se está viendo encima
pero le podríais cambiar
el Zindex
y entonces la pregunta del millón
¿pero por qué querríais
hacer esto?
¿para qué serviría
una cosa de esta?
¿esto sirve para algo?
la verdad que sí
por ejemplo
imaginad que al hacer hover
pues queráis poner
que al hacer hover
a vuestras columnas
pues aparezca algo
que se quede ahí detrás
por ejemplo
en los ventos
lo podéis hacer fácilmente
imaginad
que estáis aquí
y dices
bueno
cada vez
que haga hover
en uno de los elementos
lo que voy a querer
es que aparezca
el otro elemento
que había detrás
y que haga una animación
y que no sé qué
y pues eso lo podríais hacer
por ejemplo
con esto que estamos viendo
así que todo tiene su utilidad
¿cómo se comporta ese diseño
en responsive?
perfecto
porque al final
si es que lo podéis cambiar
todo lo que queráis
o sea
vosotros podéis poner aquí
una media query
o sea
todos estos diseños
no se comportan
de forma muy complicada
porque lo bueno
que tenéis con esto
es decir
mira
imaginad que es responsive
pues lo que podéis hacer
es decir
bueno
cuando se haga más pequeño
lo que vas a hacer
es que esto se quede arriba
esto pasa a estar abajo
y esto pasa a estar abajo
y esto lo podéis conseguir
justamente con los
grid template columns
o sea
cuando justamente
podéis ir cambiando
con la media
decís
oye
cuando el width
sea mayor
a 500 píxeles
¿vale?
pues vamos a decirle
primero son dos fracciones
porque es muy sencillo
pero cuando
es más grande
pues voy a hacer
que tenga un min max
de 200 píxeles
una fracción
una fracción
y una fracción
¿no?
y así lo que podéis hacer
ay
no he hecho bien
la media query
porque
ay
porque he hecho mal
el CSS
pero fijaos
que con esto
lo que podéis lograr
es básicamente
oh que rabia
este back
hay un back ahí
¿vale?
pero veis
que podéis cambiar
totalmente la plantilla
aquí tendríais
imaginad
en un vento
pues algo que sea
muy espectacular
pero cuando es móvil
hacéis solo dos calumnas
y hacéis que esto
se quede arriba
y ya está
entonces no es
excesivamente complicado
lograrlo
y de hecho
he visto muchos ventos
que se ajustan perfectamente
y que no hay ningún tipo
de problema
y que quedan súper bien
eres un gran profe
gracias hombre
una calculadora
por ejemplo
también
así sí que es necesaria
una media query
claro en este caso
sí puedes
a ver
es que las media queries
no están prohibidas
ni mucho menos
¿no?
el tema es
que si las podemos evitar
mejor
pero claro
si tienes un diseño así
tan especial
obviamente esto
vas a querer controlar
cuando se ve
qué espacio ocupa
cada cosa
y es normal
que quieras
hacer una media query
para controlar
correctamente
cómo se ve
esto automáticamente
no te lo va a hacer
sabes
no te lo va a hacer
grid
no vas a ver
cuál es lo más especial
imagínate
es lo que os decía
en este caso
cuando es muy grande
lo especial
lo tiene aquí
y esto seguro
que con todo lo que estáis viendo
estáis viendo
ostras
aquí tiene un call span
donde este span
pues ocupa dos
y claro
cuando lo haces
media query
pues a lo mejor
este elemento
lo quiere
esta parte del reloj
que es justamente
esta parte de aquí arriba
cuando lo tenemos así
más pequeño
más grande
pues lo podemos poner
ahí arriba
o lo podemos poner
en el centro
y cuando hacemos más pequeño
lo movemos arriba
o donde queramos
o sea que lo importante
es que el diseño
no se nos rompa
directamente ¿no?
¿por qué mejor evitarlas?
porque añade complejidad
las media queries
al final no dejan de ser
como condicionales
los condicionales
en el mundo de la programación
en general
se tienen que evitar
al máximo posible
no significa que no utilices
condicionales
significa que una bifurcación
de tu código al final
añade complejidad
cuantas más media queries
tienes
más problemas vas a encontrarte
entonces
¿son malas las media queries?
no son malas
pero
si puedes evitarte
una media query
evítatela
siempre es bienvenido
evitarte una media query
¿vale?
o sea que no habría
ningún tipo de problema
bueno os voy a enseñar
vamos con otra cosa
que está muy muy muy chula
que es increíble
y que os va a cambiar la vida
para cuando hagamos layouts
¿vale?
y es que esto
para hacer layouts
es la clave
y vamos a eliminar todo esto
vamos a poner aquí 3
y ponemos esto por aquí
vale
mirad
vamos a hacer un layout
que además es un layout
muy típico
mirad
este es el html
section
class
container
tenemos un header
el aside
el main
y el footer
¿ok?
vamos a estilar
primero el container
y obviamente
con un display grid
y vamos a estilar
container
el header
le voy a poner un colorcillo
background09f
básicamente para que veáis
los colores
vamos a quitarle el margen
por defecto
que tiene el body
para que quede todo ajustado
vamos a poner
que el container
el aside
yo que sé
vamos a ponerlo de color
amarillo
¿vale?
solo para que cada uno
tenga un color
el main
vamos a ponerle
un color
no sé
a ver que color
le podemos poner
rojo
que es lo más importante
y el footer
le vamos a poner
un color menos importante
light
gray
cia
¿vale?
que no se vea tanto
bueno
vamos a ponerle gray
que así se verá bien
¿vale?
o sea
tenemos cuatro secciones
totalmente diferentes
y tal
bueno
imagina que queremos hacer
el layout
típico
típico
de toda la vida
¿no?
grid template columns
voy a hacer esto
lo voy a quitar así
y así puedo
con el bug este
que me está atormentando
pero
a ver si lo puedo ajustar
vale
grid template columns
vamos a hacer
tres columnas
tres columnas
una fr
una fr
¿vale?
fíjate que me ha hecho
tres columnas
y me está dejando esto mal
porque no es exactamente
lo que queremos
por ahora lo vamos a dejar
más o menos así
solo para que lo tengamos
más o menos claro
¿no?
vamos a poner
rows
y template
rows
y vamos a utilizar
cosas que hemos ido aprendiendo
que se repita esto
min max
50 píxeles
una fracción
¿vale?
entonces ya va pillando
un poco de forma
pero ¿qué pasa?
que el header
yo lo que quiero del header
normalmente es que ocupe
todo el espacio
pues grid column
del 1 al menos 1
esto lo hemos visto
¿no?
que si queremos que vaya algo
en la línea de las columnas
de punta a punta
le digo
me tienes que
desde la fila 1
mira lo voy a ver aquí
lo vamos a poner aquí
para que lo veáis claramente
en elementos
activamos el grid
desde
la línea 1
hasta
la
bueno no se ve
pero está ahí
la menos 1
que no
ah
ahí
¿vale?
hasta la menos 1
¿ves ahí que se ve la menos 1?
pues ahí la tienes
hasta la menos 1
de punta a punta
para que vaya de punta a punta
porque si no
tendríamos que saber
cuántas son las que queremos
que tenga ¿no?
pues tenemos que poner
hasta la línea 4
si lo queréis hacer así
así
pero lo mejor
es que hagáis así
que vaya de punta a punta
porque así no tenéis que saber
cuántas columnas son
y eso puede cambiar
en cualquier momento
ahora vamos a hacer
el aside
el aside
pues bueno
esto se puede quedar
exactamente igual
porque queremos que se quede
justo debajo del header
el footer
mira voy a hacer el footer
el footer quiero que le pase
un poco lo mismo
que vaya de punta a punta
y entonces aquí
fíjate
el footer
como tiene que ir de punta a punta
pues va a ocupar el 100%
y ahora
aquí tenemos
el lateral
la barra lateral
y el contenido
solo está ocupando este espacio
pero yo quiero que ocupe
todo lo demás
por lo tanto
le digo que el grid column
vamos a decirle
que span 2
para que rellene
dos columnas
así el aside
solo se queda con una
y el contenido con otra
vamos a hacer que esto tenga más
más espacio
así
con 100
esto
no está mal
o sea quiero decir
es algo parecido
a lo que normalmente
podríamos hacer
obviamente esto soy yo
que he puesto aquí
min max y tal
lo ideal es que cada cosa
tuviese su contenido diferente
o sea por ejemplo
a lo mejor el header
quieres que sea 50 píxeles
o menos
35 píxeles
la parte del contenido
pues a lo mejor
quieres que sea una fracción
y luego el footer
quieres que sean 100 píxeles
y ahora
el tema es que
para que ocupe todo el espacio
obviamente
tenemos que asegurarnos
que como mínimo
esto sea
todo el tamaño
que tenemos aquí
disponible
porque si no
no funcionaría
entonces esto sería
más o menos un layout
que podríamos hacer
y que incluso en móvil
lo podríamos cambiar
pero esto es un poco rollo
y os voy a explicar por qué
este tipo de
de
de templates
no se suelen hacer así
¿por qué?
porque
esto es muy típico
y esto al final
lo vais a ver repetido
una y otra vez
una y otra vez
pero el tema es que
va a ser muy complicado
que vayáis al CSS
y entendáis
lo que está ocurriendo aquí
porque tenéis que ir
a cada uno
de los elementos
para ver
cómo está funcionando esto
qué es lo que está haciendo
y todo esto
pues vamos a quitar todo esto
el grid column
grid column
grid column
vamos a quitar todo eso
y vamos a hacerlo de otra forma
¿vale?
lo vamos a hacer de otra forma
vamos a ponerle un nombre
a cada uno
de los elementos
vamos a decir
mira
el área de este grid
esto va a ser el header
el grid area este
vamos a darle el nombre
que esto va a ser el sidebar
¿vale?
a este
en el área
de la cuadrícula
le vamos a decir
que es el content
y el footer
vamos a ponerle un grid area
y le vamos a decir
que es el footer
¿vale?
ya hemos nombrado
cada uno de los elementos
ahora
lo que tendríamos que hacer
es decir
bueno
ahora que sabemos
cada uno de los elementos
a que se refiere
tenemos
que definir
la plantilla
de nuestra cuadrícula
con estos nombres
y así
en lugar de utilizar
el template columns
y todo esto
que también lo podemos utilizar
lo que podemos decir
es que quiero utilizar
template areas
y vamos a definir las áreas
y le vamos a decir
mira
arriba
quiero el header
tres veces
¿vale?
luego
abajo
quiero el sidebar
el contenido
y el contenido
¿vale?
y abajo
quiero el footer
el footer
y el footer
y fíjate
que hemos logrado lo mismo
pero hemos hecho algo
visual
imagínate
que por lo que sea
dices
no, no
el sidebar
ya no lo quiero aquí
este sidebar
que lo tengo aquí
ahora quiero que aquí
esté el contenido
y el sidebar
lo quiero poner aquí arriba
pues ya está
el header sigue así
el aside lo tengo ahí
y el contenido
lo tengo allá
ya hemos ajustado
rápidamente
donde tiene que ir
cada cosa
¿vale?
vamos a dejar otra vez
el side
pues no
voy a probar
a ver qué pasa
si el sidebar
lo pongo aquí a la derecha
pues ya está
ya lo hemos hecho
fijaos
que de esta forma
lo que estamos haciendo
es dibujando
con CSS
básicamente
cómo es el área
y no nos tenemos que preocupar
de si tiene que ir
desde una línea
desde una columna
y no sé qué
sino lo que estamos haciendo
es visualmente decir
cómo tiene que quedar
aquí tenemos tres columnas
estamos definiendo
que tiene tres columnas
y que en esta posición
de la columna
va el header
aquí va el header
aquí va el header
aquí va el contenido
contenido
el sidebar
aquí va el footer
y estas serían las filas
o sea cada línea
sea las filas
y si lo miras
verticalmente
sería una de las columnas
imagínate que quieres
quitar el header
pues lo quitas el header
ya no aparece
imagínate que además
en las media queries
y esto es muy interesante
que puedas tener una media query
que digas
vale cuando el width
sea mayor
a 400 píxeles
vale
vamos a hacer una cosa
vamos a hacer que tenga
este
vamos a hacer esto
y esto es una de las cosas
que están muy muy muy chulas
porque al final
le podéis cambiar el área
dependiendo de cómo quede
entonces
vamos a hacer que
en el móvil
esto
el sidebar se vea arriba
vale
vamos a hacer que en el móvil
el sidebar se vea arriba
vale
vamos a poner el contenido aquí
y aquí vamos a poner sidebar
vale
vamos a hacer que
en desktop
se vea el sidebar al lado
pero cuando lo hagamos pequeño
lo que hacemos es que el sidebar
vaya arriba a la derecha
por ejemplo
y así lo tendríamos
mucho más fácil
o sea
ahora lo que estamos haciendo
es de forma declarativa
estamos indicando
qué diseño es el que tiene que utilizar
en cada media query
súper fácil
aquí decimos
oye móvil
el aside
lo tienes que poner arriba a la derecha
y luego si tienes espacio
lo pones aquí a la izquierda
y ya está
o sea
fijaos que esto es súper potente
porque no necesitáis ahora
ni siquiera pensar en líneas
ni nada
simplemente
le estáis describiendo
como dibujando
cómo queréis que esté en las áreas
y ahora
lo mejor de esto
lo que podéis hacer
es decir
oye
imagínate que
en este
sería este
porque ahora estamos en modo de escritorio
si no lo hubiera visto
no lo hubiera creído
totalmente
no lo hubiera creído totalmente
imaginad
que por lo que sea
decís
mira
en desktop
no quiero que aquí aparezca nada
no quiero que aquí aparezca nada
vale
o sea
no quiero que en este trozo de la columna
haya nada
quiero que haya un hueco
pues tenéis que poner un punto
y ya está
así
este header
ocupará
dos columnas
y en esta tercera columna
en esa fila
como hemos puesto un punto
habrá un hueco
esto lo podéis utilizar
tantas veces como queráis
veis
ahí ya estamos dejando un hueco
podemos poner un hueco aquí también
no habría ningún problema
o lo podemos poner aquí
podéis poner el hueco
donde queráis
y esto lo que hace también
es que podáis hacer una composición
de una cuadrícula
mucho más fácil
vale
así que tenéis la posibilidad
de decir
pues aquí quiero un hueco
y aquí quiero que sí que se vea esto
y tal
y así es como se hacen los layouts
cuando muchas veces decís
que cuesta maquetar
que no sé qué
que no sé cuánto
pues lo que tenemos aquí
es una forma muy fácil
de hacer layouts
¿es necesario poner el min height
de 100 viewport
para que ocupe total la vista?
sí
¿por qué?
porque si yo quito esto
¿cuál es el problema?
el problema
es que el contenido
es el que están empujando
normalmente en una página
en una página normal
esto estaría lleno de contenido
tendría texto, imágenes
y no necesitaríamos seguramente esto
¿no?
pero el tema
el tema
es que a ver
si aquí en este content
empiezas a empujar contenido
y tal
claro
pues ya la altura
sería ajustando
pero para que lo veáis
lo que he hecho es que el container
como mínimo
tome la altura del viewport
y así es que va a ajustar
el contenido perfectamente
¿vale?
si no
no lo va a hacer correctamente
porque no va a saber
cuál es la altura
porque se basa en el contenido
y ya está
¿qué le vamos a hacer?
¿existe algún convenio
en las medidas de los media queries
para mobile tabletas?
no hay convenio
y por eso también es un tema
que es normalmente mejor evitar
siempre que podáis una media query
o sea
las media queries
las necesitáis
y hay que utilizarla muchas veces
pero el problema
es que a día de hoy
no hay un convenio
de media queries
hay recomendaciones
por internet
pero ¿sabes qué pasa?
que las recomendaciones
cada padre
y cada madre
dice su recomendación
las media queries
la única recomendación
son los datos
los datos que tenga
tu página web
hay páginas web
que el 60%
de los usuarios
son móviles
si son móviles muy antiguos
si estás en Japón
pues verás que se utiliza
una resolución más que otra
y a lo mejor
no tienes que tener
tantas media queries
si estás en Estados Unidos
pues a lo mejor
el dispositivo móvil
más usado es el iPhone
y es el que tienes
que enfocar
depende mucho
de tus usuarios
y tus datos
no tiene sentido
ir a internet
y buscar una lista recomendada
y más hoy en día
que además hay tantos
y tantos dispositivos extraños
como pueden ser
los plegables
como pueden ser tablets
y tal
es imposible
manejar
todos los tamaños
que uno pueda pensar
y lo mejor
es mirar los datos
de cuáles son tus usuarios
qué resoluciones utilizan
y basarte en eso
basarse en datos
eso es lo mejor del mundo
basarse en datos
porque si no
al final
lo que te está pasando
es los datos de otra persona
y no tiene sentido
ya habéis visto así
con el tema este
de alinear
que para hacer layout
es brutal
otro tema muy importante
la alineación en línea
de los elementos
¿vale?
esto lo hemos visto en Flex
que además me dio por culo
pero bueno
os explico esto
a ver
ya tenemos aquí
voy a cambiar un poco
cómo está funcionando esto
voy a poner que aquí tenga
auto rows
vamos a poner auto rows
y que sea 100 píxeles
¿vale?
para que todas queden más
bueno, un poquito menos
50 píxeles
para que queden todas igual
y vamos a hacer
template rows
3
vamos a hacer 3
de un fragmento
¿vale?
vamos a quitar aquí
el
ah mira
esto lo vamos a quitar
que tampoco lo vamos a utilizar
y vamos a quitar
todo esto
porque ahora lo que os quiero enseñar
es más bien
cómo se alinean
oye, ¿qué he hecho aquí?
ah, es que he puesto esto
y quería poner esto
¿vale?
quería poner columnas
grid tape plate columns
¿vale?
queremos tener 3 columnas
¿vale?
que se repita
hemos utilizado el repeat
solo para que lo veáis
os quiero enseñar
cómo se alinean
los elementos
en grid
porque también
igual que en Flex se puede hacer
también se puede hacer en grid
y de hecho
vas a ver
cómo se puede centrar
un div
vas a ver
cómo se puede centrar un div
que es bastante interesante
entonces
pues con grid se puede hacer
igual que se puede hacer con Flex
igual que se puede hacer de muchas formas
bueno
ya tenemos el contenedor
vamos a hacer una cosa
vamos a darle al contenedor
un ancho fijo
¿vale?
para que lo veamos
un poquito diferente
¿vale?
y así nos funcionen
vamos a ponerlo así
¿no?
tenemos un alto
de 300 píxeles
y aquí tenemos los elementos
¿vale?
muy bien
lo primero que vamos a querer hacer
es alinear en línea
nuestros items
los items sería el 1
el 2
el 3
el 4
5
6
7
y tal
¿no?
o sea
lo que queremos es alinear
nuestros elementos en línea
por defecto
¿qué es lo que está pasando?
que si miramos el justify items
tenemos aquí diferentes valores
el valor que está
no es exactamente así
¿no?
el valor por defecto
sería el normal
que funciona de una forma
muy parecida al stretch
que significa estirar
que por eso
estamos viendo
que ocupa
cada columna
dentro del elemento
está ocupando
todo el
todo el espacio
entonces el justify items
lo que vamos a hacer es alinear
en línea
¿vale?
en línea
¿cómo lo vamos a ver aquí ahora
así que noten la diferencia?
si hacemos el center
¿qué está pasando?
que está centrando
dentro de esa columna
en línea
está centrando el elemento
le podemos decir
que lo deje al principio
¿no?
y dentro de esta cuadrícula
que sería esta parte de aquí
lo está dejando
al principio
¿no?
luego si le ponemos el end
lo estaría poniendo
al final
y si no
el center
lo dejaría en el centro
y podemos poner el stretch
para que se estire
ahora bien
el justify items
lo que hace
es cambiar el valor
de cómo se tiene
que alinear
ese elemento
en línea
dentro de la cuadrícula
pero ¿qué pasa?
que a lo mejor esto
lo hacéis para todos los elementos
pero algún elemento
en concreto
lo queréis cambiar
por ejemplo
el first child
que es el verde
pues podéis decir
vale
este
quiero que se justifique
a sí mismo
al centro
y así vais a ver
¿vale?
que se ha centrado
podéis hacerlo
con los que queráis
podéis decirle
poder uno por defecto
que sea
pues al principio
al final
centrarlo
o estirar
para que ocupe
todo el espacio
y los que queráis
podéis justificarlo
lo podéis alinear
en el centro
al final
como queráis
y esto muchas veces
seguro que cuando veáis
ahora el layouts
os daréis cuenta
de este tipo de cosas
de ah mira
aquí han hecho esto
porque han conseguido
que este se alinee así
¿vale?
pues lo podéis hacer
bueno
en este caso
para que lo entendáis
ahí tenéis
start
end
y center
serían los tres
más importantes
aquí hay otros
como por ejemplo
baseline
que sería como
al principio también
que esto también
depende de la dirección
tenéis el normal
que sería el por defecto
que funciona muy parecido
a stretch
y ya está
¿vale?
esto sería
justify items
tendríamos también
la alineación
en bloque
¿no?
que sería como
de arriba abajo
para nosotros
que sería
align items
y nos pasaría
lo mismo
si queremos
que se alinee arriba
para nosotros
sería al principio
al final
o si lo queremos
centrar
¿vale?
y se queda centrado
centrado no parece
o sea no se ve fácilmente
pero fíjate la diferencia
¿vale?
y lo mismo esto
también podríamos utilizar
el align self
para que pase
lo mismo que hemos visto
para cambiar uno
en concreto
un item en concreto
lo podríamos poner
podemos justificarlo
o sea podemos poner
alinear y justificar
¿vale?
entonces ahora
lo que vamos a ver
es que nos queda
podríamos centrarlo
de las dos formas
podríamos decir
que se centre
y fíjate que dentro
de la cuadrícula
que si lo veis aquí
lo vais a ver más claro
¿vale?
fíjate la cuadrícula
esta sería la celda
de la cuadrícula
pero claro
si estamos centrando
el elemento
verticalmente
y horizontalmente
no confundáis
el tamaño
de la cuadrícula
con el tamaño
del elemento
que esto es un error
muy común
porque alguien puede pensar
pero
pero Midu
si tú me has dicho
que una fracción
era de tanto espacio
no sé qué
no sé cuánto
y aquí estás poniendo
50 píxeles
y yo te diré
es que eso es lo que ocupa
la cuadrícula
no lo que ocupa
el elemento
si tú lo que quieres
es que el elemento
se estire
y ocupe toda la cuadrícula
pues aparte
que lo puedes utilizar
dejarlo por defecto
lo que tienes que utilizar
es el stretch
¿vale?
que es el de estirar
y entonces lo que hace
es estirarse
y ocupar todo el espacio
pero los tamaños
de los que hablamos aquí
son los de la cuadrícula
no de los elementos
por lo tanto
si al final
lo que hace es
centrar el elemento
dentro de la cuadrícula
su tamaño
se va a ver reducido
porque ya no se está estirando
sino que se está centrando
y dependerá del contenido
del elemento
que será más grande
o más pequeño
o sea que
súper importante
vale
esto sería para los elementos
los items que tenemos
pero de la misma forma
también podemos
centrar el contenido
como
centrar
alinear el contenido
como un todo
o sea
todo el bloque
todo el contenido
de la cuadrícula
si miramos aquí
y miráis la cuadrícula
fijaos que la cuadrícula
el container
sería todo esto
¿no?
pero la cuadrícula
solo ocupa
esta parte de aquí
la parte esta que tenemos
con la raya amarilla
todo lo que tenemos abajo
no es parte de la cuadrícula
es espacio
que ha quedado vacío
porque no ha necesitado
la cuadrícula
llegar hasta ahí
¿por qué?
porque le hemos añadido aquí
una altura de 300 píxeles
si se lo quitamos
vamos a ver
que la cuadrícula
justamente
ocupa lo mismo
porque tiene sentido
es el único contenido
que tiene
pero pensad
que podríamos tener
otros contenidos
podríamos tener
otras cosas
y que al final
quede un espacio vacío
que vamos a querer gestionar
en este caso
lo estoy simulando así
pero para que tengáis claro
entonces
imaginad que
la cuadrícula
tal y cual
como ahora está quedando
fijaos que está pegada arriba
pues podéis decir
bueno
yo lo que me gustaría
es alinear este contenido
lo mismo pasaría
con el ancho
pongamos que tenemos
un ancho de 500 píxeles
vamos a poner 500 píxeles
y las columnas
vamos a poner que sean
50 píxeles
ah mira
vamos a hacer esto
vale
y vamos a poner
que sea 300 píxeles
vale
claro
imaginad que podríamos
tener un espacio
que dentro tengamos
esta cuadrícula
que solo ocupa
este espacio
pero tenemos
más espacio a su alrededor
entonces
¿qué podríamos hacer?
podríamos alinear
todo el contenido
en línea
o sea
horizontalmente
con el Gistify Content
por ejemplo
para centrarlo
o por ejemplo
para dejarlo
al final
o también
lo que podríamos decir aquí
es decirle que
distribuya el contenido
para que tenga espacio
alrededor
y esto sería
horizontalmente
¿vale?
porque sería en línea
pero lo mismo
podríamos decirle
con el Align Content
aquí le podemos decir
que lo podríamos centrar
y lo haría verticalmente
y fijaos
que lo que está pasando aquí
es que si utilizáis
un Align Content Center
y un
Justify Content Center
estáis centrando
los elementos
¿vale?
que muchas veces
pues así
tendréis una explicación
de cómo lo haríamos
estaríamos centrando
el contenido
tanto verticalmente
como horizontalmente
y así lo tendrías
de hecho
la forma más corta
de conseguir esto
es hacer un
Place Content Center
y esto lo que hace
es aplicar
tanto el Justify
como el Align
verticalmente
y horizontalmente
y así tendrías
centrado
todo el contenido
¿vale?
todo el contenido
todo el contenido
estaría centrado
tanto verticalmente
como horizontalmente
que sepáis
que hay otros valores
que son interesantes
yo que sé
pues si ponéis
el Justify Content
tenéis el Space Between
también
muy parecidos
a los que tenéis
en Flex
¿vale?
el Align
lo podríamos poner
Center
y el Content
perdón
no el Items
¿vale?
y ya lo tendríamos
la diferencia
el contenido
es todo el contenido
como la caja
la cuadrícula
la grilla
¿vale?
sería todo el contenido
todo el contenido
o sea
todo esto
sería lo que
estamos moviendo
como un bloque
el Items
o sea
el Content
es el contenido
como el todo
y el Item
sería cada uno
de los elementos
acuérdate
porque Items
es plural
y se refiere
a más de una cosa
y Content
es singular
y solo se refiere
a una
¿vale?
así que con eso
ya sabrías
perfectamente
centrar un Deep
con Grid
¿ese Space Between
se puede definir
espacial de separación?
no
porque el Space Between
lo que hace
es separar exactamente
los elementos
igual
¿vale?
y el Around
lo que está haciendo
es poner la misma
separación al revés
si lo que quieres
es cambiar la separación
lo que tienes que hacer
por ejemplo
pones Center
Center
¿vale?
y en el Gap
tú aquí le pones
lo que tú quieras
por ejemplo
un Pixel
10 Pixels
y ahí tú le puedes
indicar
cuál es la separación
si de fútbol
se tratara
mi DUDEF
sería Messi
con esta clase
se ganaría
su noveno
balón de oro
bueno
muchas gracias
y aquí viendo
por milésima vez
cómo se centra un Deep
bueno
pero al final
en el curso de CSS
ya hemos visto
tres formas
con el Position Absolute
lo hemos visto también
con el Display Flex
y ahora lo hemos visto
también para el Display Grid
vas a aprender animaciones
desde cero
de CSS
vas a aprender
más que eso
algo que yo
sinceramente no he visto
que expliqué en muchos sitios
que son las animaciones
basadas en
scroll
con puro CSS
con cero líneas
de JavaScript
que te van a volar
la cabeza
mira
veis esta
esto
esto es puro CSS
esto tiene cero líneas
de JavaScript
para que lo veáis
que no tiene nada
de JavaScript
mira
cero
no hay nada de JavaScript
aquí
veis
no hay nada de JavaScript
y en cambio
fijaos
fijaos
que cosa más bonita
vale
fijaos
mira
voy a ir haciendo scroll
y fijaos en el header
¿has visto el header?
que cambia
vale
pues el header
eso con CSS
está detectando
el scroll
y ojo
las imágenes
¿veis las imágenes
como van apareciendo?
¿veis las imágenes
como van apareciendo
y van desapareciendo?
todo esto
está hecho
con CSS
en menos
de 15 líneas
y eso
lo vas a aprender
hoy
para tu portfolio
para tu web
para tu producto
para tu mamá
para quien sea
y vas a ver
lo fácil que es
y va a ser tan fácil
que vas a decir
pero Midu
¿por qué esto
no está prohibido
por las autoridades?
si es que es increíble
con cero bibliotecas
esto lo vais a hacer
y lo vais a entender
súper fácil
todo esto
¿veis?
con esta animación
así
con el fading
que se mueva
para arriba
para abajo
y tal
pues vais a ver
y además el header
que también está muy chulo
el header
que veis que se hace pequeño
que cambia el color
que hace un efecto blur
y encima lo hace
con una transición
todo esto
es TSS puro
de verdad
no os engaño
porque lo vamos a hacer hoy
juntos
desde cero
vais a ver
como lo hacemos aquí
y aquí tenemos un poco
todo el spoiler
y os lo voy a explicar
no os preocupéis
funciona también con vídeos
funciona con cualquier elemento
que os echéis
a la cara
de HTML
así que
hoy os lo voy a explicar
¿se puede hacer lo mismo
pero para arriba?
se puede hacer para arriba
para izquierda
para la derecha
en diagonal
o sea lo podéis hacer
de muchas formas
con profundidad
con muchas veces
con muchas formas
así que lo podéis hacer
de maneras diferentes
os recuerdo
porque a lo mejor
pues dice
oye yo no tengo
ni puñetera idea
de CSS
bueno no te preocupes
tenemos aquí
una de vídeos
bueno y de listas
y de historias
tenemos aquí un poco de todo
fijaos
tenemos aquí
el curso de CSS
desde cero
completo y gratis
es una lista de reproducción
donde tenemos
el de CSS en general
donde explicamos
Flexbox desde cero
y donde explicamos
también Grid
para que ya no tengáis
problemas de Flexbox
de Grid
y de CSS en general
como son los elementos
como son los márgenes
los paddings
el modelo de la caja
y todo esto
y aquí
pues eventualmente
en algún día
pondremos el que estamos
haciendo hoy también
vale
en CSS
existen dos formas
de animar elementos
y son las transiciones
y las animaciones
y vamos a ver
la diferencia
entre ambas
y como podemos utilizarlas
y cuando utilizar una
y cuando utilizar otra
así que vamos a empezar
con la que yo diría
que es la más fácil
que serían
obviamente
las transiciones
vale
así que vamos
con las transiciones
y vamos a empezar
por aquí
con las transiciones
¿qué pasa?
bueno las transiciones
¿cómo funciona?
vamos a utilizar
Codilink
que es el playground
de código que tenemos
aunque como no vamos
a utilizar JavaScript
puedo ponerlo así
y quitamos
vamos a poner esto
más bien así
vale
y quitamos esto
por aquí
lo dejamos así
vale
entonces
con las transiciones
¿cómo funciona?
las transiciones en CSS
básicamente
lo que vamos a poder hacer
es cambiar
un elemento
que transicione
de un estado inicial
a un estado objetivo
un estado final
¿vale?
vamos a transicionarlo
entre dos estados
¿y qué es esto de un estado?
¿qué es esto de un estado?
bueno
no te preocupes
por ejemplo
vamos a poner un ejemplo
bastante sencillo
pero que lo vas a ver clarísimo
con un DIP
para que veas
con un DIP
que puedes utilizar un botón
puedes utilizar lo que quieras
de hecho normalmente
un botón sería bastante chulo
la verdad
pero bueno
vamos a poner aquí
un pulser
le ponemos width
30
30 píxel
¿vale?
vamos a hacer una redondita
con mi color favorito
09F
vamos a poner también
el border radius
border radius
que el border radius
sí
mira
esto es un truquito interesante
si
el ancho y el alto
son iguales
puedes hacer un border radius
100%
para que te quede
un círculo perfecto
pero
si por lo que sea
no es cuadrado
entonces te va a quedar así
un poco raro
y de hecho
vas a ver que conforme más
pues va a quedar un poco extraño
puedes hacer el border radius
esta forma que podrías hacer
es ponerle
pues un número así
99999
y así te aseguras
que sea también
totalmente redondeado
pero esto es más un hack
si es cuadrada la forma
con un 100%
te va a quedar perfecto
así que
solo para que lo sepas
de hecho
a partir del 50%
ya funcionaría exactamente igual
le puedes poner 100%
pero el 50%
ya te quedaría el círculo
solo para que lo sepas
muy bien
vamos a poner
el position relative
por si luego hacemos cositas dentro
en el after y tal
y vamos a hablar de los estados
a ver
en CSS
ya hemos visto
que hay elementos
que pueden tener
un estado
por ejemplo
que puede ser un estado
el estado hover
hover significa que
el usuario
tiene el cursor
encima de ese elemento
por lo tanto
su estado ha cambiado
también tendríamos
el estado de focus
el de active
luego veremos otros más
pero el hover sería un estado
porque estamos cambiando de elemento
el elemento ahora
tiene un estado diferente
y entonces podemos escalarlo
y hacer algo al respecto
por ejemplo scale 2
y ahora cuando os cambia su estado
ves pum
se hace más grande
vamos a utilizar
todos los conocimientos
de grid
para centrar esto
place content center
vale
y vamos a hacer que esto
min height
100
y así lo ponemos aquí
bueno
no sé si hacerlo más pequeño
solo para que lo veáis
vale
para que lo veáis ahí
voy a hacerlo más grande
para que veamos bien esto
ok
bueno
entonces este elemento
cuando se pone encima
fíjate
cambia su estado
y ya teníamos que
con el hover
hacemos que su escala
sea doble
otra forma que podríamos
hacer esto sería
cambiar el ancho
y el alto
o sea podríamos poner
que ahora pues fuese 100
y el resultado
sería visualmente
el mismo
pero no es exactamente
el mismo
en términos de cuánto
ocupa
vale
porque el scale
lo que haría sería
ocupar el mismo espacio
pero visualmente
verse más grande
en cambio esto sí que haría
que ocupa 100%
de píxeles
vale
pero si utilizas el scale
se va a ver visualmente
más grande
pero va a ocupar
el mismo espacio
solo para que lo sepas
porque si no
estas cosas a veces
tiene la gente
y se vuelve un poco
tarumba
entonces
aquí tendríamos esto
ya tenemos dos estados
estado inicial
cuando no estamos haciendo
absolutamente nada
con este elemento
estado final
que es cuando hacemos hover
dos estados
y por lo tanto
cuando ya tenemos
dos estados
podemos hacer una transición
queremos transicionar
estado inicial
a estado final
y esto muchas veces
mejora la experiencia
de usuario
y por qué mejora
la experiencia de usuario
esto
por qué ocuparía
esto algún tipo
bueno
porque le estamos ayudando
de alguna forma
al usuario a entender
de dónde viene
y a dónde va
¿sabes?
y esto muchas veces
le puede ayudar
de decir
oye
si añadimos una transición
vamos a orientar
visualmente al usuario
y le estamos dando
como una sugerencia
sobre la causa
y el efecto
de esta interacción
que ha ocurrido
entonces
¿cómo lo podemos hacer?
pues añadiendo
un poquito de CSS
mira
antes de añadir
la transición
vamos a añadirle
un poquito más de CSS
vamos a hacer que esto
lo dejamos a scale 2
vamos a hacer que
le cambiemos también
el color
¿vale?
entonces fíjate
ahora se ve mucho más claro
estamos cambiando el color
y también vamos a tener
un box shadow
0, 0, 10, px
y vamos a poner
que también sea lila
entonces fíjate
¿no?
ahora se ven los dos estados
como mucho más bestias
ok
entonces
para hacer la transición
necesitamos solo
solo una propiedad
fácil
¿vale?
necesitamos indicarle
cuánto tiene que durar
la transición
o sea por defecto
ya va a saber
que tiene dos estados diferentes
pero tengo que decir
bueno
quiero que transiciones
entre los dos estados
en un tiempo determinado
en este caso
mira voy a quitar también
el HTML
que no es muy importante
y así lo tenéis ahí mejor
lo que queremos es decirle
que la duración
de la transición
sea de X segundos
aquí podemos utilizar
segundos
o podemos utilizar
milisegundos
por ejemplo
podríamos poner
500 milisegundos
o podríamos poner
un segundo
dos segundos
o 0,5 segundos
¿vale?
segundos o milisegundos
por defecto diríamos
pues que no hay
ninguna transición
que es cero
así que
¿ves?
sale así
directamente
pero si queremos decirle
oye
he escrito mal transition
perdón
pero bueno
igualmente todavía
no ha estado funcionando
pero bueno
por defecto
diríamos que sería cero
la transición
pero si le decimos
que queremos una transición
entre este estado
y este
que sea de dos segundos
lo que va a ocurrir ahora
es que automáticamente
ya está haciendo
esta transición
y lo que es interesante
es que nosotros
no hemos tenido que decirle
qué es lo que tiene que ocurrir
en medio
cómo son los colores
que tienen que cambiar
en mitad
cómo se tiene que escalar
no le estamos diciendo
absolutamente nada
automáticamente
ya está el navegador
detectando
cómo tiene que ir
de uno a otro
ahora
error súper común
con el tema
de las transiciones
que esto lo he visto
así de veces
como puedes ver
cuando tú haces el hover
se ve la transición
y cuando sueltas
se ve también la transición
pero hacia atrás
lo cual tiene todo sentido
para volver al estado inicial
¿qué pasa?
que hay gente
que la transición
la pone en el hover
y esto
normalmente
no siempre
porque a veces lo queremos
pero normalmente
esto está mal
porque ¿qué va a ocurrir con esto?
esto lo que sí que va a pasar
es que al principio
se va a ver
pero cuando salgas
¡pum!
¿vale?
hay veces
que esto puede ser interesante
pero no siempre
así que ten cuidado con esto
¿vale?
pero fíjate
hacia la transición
¡pum!
para evitar esto
tienes que tener
la transición
la tienes que tener
como mínimo
porque luego ya veremos
que lo puedes poner
en más sitios
como mínimo
lo tienes que tener
en el elemento
en su estado inicial
¿vale?
si no tendríamos estos problemas
¿qué estados podemos encontrar?
podemos encontrar
un montón de estados
a ver
tendríamos el hover
el focus
focus within
el target
el active
¿no?
cuando se activa
el elemento
cuando cambias
una clase
de javascript
puedes cambiar
una clase
a un elemento
de javascript
y eso va a cambiar
su estado
porque estamos cambiándolo
cuando desactivas
un elemento
un formulario
un input
estamos cambiando
su estado
pero ten en cuenta
que también cualquier atributo
que cambies del elemento
si le añades una clase
si le añades un atributo
eso es que está cambiando
también su estado
y por lo tanto
ahí también
podríamos animar
entre un estado
y el otro
así que lo importante
es esa diferencia
entre un estado inicial
y un estado final
¿ok?
esa sería la transición
¿hay algún elemento HTML
al que no le puedas agregar
animaciones?
elementos HTML
a todos los elementos HTML
se le pueden agregar animaciones
lo que no se puede animar
por ejemplo
un vídeo
lo que es de dentro del vídeo
a lo mejor no se puede animar
pero más allá de eso
todos los elementos HTML
se pueden animar
de una forma u otra
eso seguro
vamos a continuar
vamos a los select
claro
los estiles
no se puede estilar
el select
pero si podrías animarlo
de alguna forma
por ejemplo
de moverlo
de mover el select
o sea
animar se podría animar
pero no se puede animar
todo
porque por ejemplo
lo de internamente
del select
no lo puedes animar
ahora bien
aquí podemos ver
que se está animando
diferentes cosas
su tamaño
su color
el box shadow
¿no?
se están animando
muchas cosas
solo con una línea
lo hemos logrado
pero por defecto
vemos que se anima todo
todas las propiedades
nosotros podemos indicar
qué propiedades
son las que queremos animar
por ejemplo
por defecto
tenemos aquí
un transition
property
all
se están animando
todas
pero imagínate
que dices
bueno yo no quiero animar
ninguna
pues pones un non
y entonces
pues te quedas sin animación
otra vez
esto no tiene mucho sentido
pero sí que podríamos decir
oye yo solo quiero
que se anime realmente
la escala
entonces vamos a ver
que ahora la transición
del color
es inmediata
no hay transición
pero en cambio
el que se haga más pequeño
o grande
¿vale?
¿ves?
sí que se está animando
el color
es inmediato
pero podemos ver
que lo otro
sí que
o sea el tamaño
sí que se está animando
también podemos decir
más de una
por ejemplo
podemos decir
bueno quiero
el background
y la escala
pero no el box shadow
así que podríamos ver aquí
que el shadow
aparece inmediatamente
y desaparece inmediatamente
pero todo lo demás
sí que está haciendo
lo podemos separar por comas
y ahí podemos indicar
qué propiedad se anima
y ahora me dirás
bueno Midu
pero esto para qué serve
esto no sirve para nada
vamos a ver
amigos
hay un tema con esto
¿vale?
si tú pones un transition all
puede haber problemas
porque si tú lo animas todo
tienes un problema de rendimiento
sobre todo si tienes sombras
las sombras suelen ser bastante
bastante caras de animar
y esto lo he visto así de veces
de que tienes una lista de elementos
de 25, 50, 80 mil elementos
y lo que estás haciendo
es una animación
cuando haces hover
sobre cada una de las cars
pues esto tiene un impacto
bastante negativo en el rendimiento
y tienes que tener cuidado
con esto
a lo mejor
te interesa evitar animar
el box shadow
pero sí que quieres animar
otra cosa
el borde o lo que sea
¿ok?
luego ¿por qué?
porque si tú pones all
a lo mejor se te animan
cosas que no quieres
como por ejemplo
a veces puede ser
que por lo que sea
tengas una fuente
esto seguro que lo habréis visto
muchas veces
cuando entráis a algún porfolio
de alguien
que mueves un poquito
la ventana
y empieza todo a moverse
animarse
el tamaño de la fuente
los colores
los tamaños
y todo empieza a moverse
parece un videojuego
eso
que en algún momento
vas a pillar el mando
de la playstation
bueno
eso es porque
ha puesto un transition all
a saco
y ahí lo que está pasando
justamente
es que
están cambiando la fuente
el tamaño de la fuente
y todo esto
y se está animando
se está transicionando
entonces
por eso a veces
es importante
nosotros controlar
lo más sencillo
es poner el all
nos quedamos a gusto
pero tener cuidado
por temas de rendimiento
y también porque a veces
puede quedar mal
en la UX
porque se estén animando
cosas o que no queremos
o que no son necesarias
¿vale?
muy bien
vamos a quitar
vamos a decir que
oye sí que quiero que sea el all
bueno
vamos a dejar el background scale
para que el shadow
sea directo
ok
aquí lo que podemos ver
mira voy a ponerle rojo
que queda más
pum
rojo
mira
entonces
como estamos viendo
la transición que ocurre
entre un estado inicial
y el siguiente
la velocidad
es lineal
o sea que siempre tiene
la misma aceleración
para llegar del principio
al final
está utilizando
la misma velocidad
de cambio
o sea podemos ver
que no es que vaya más rápido
al principio
o al final
simplemente va
de principio a fin
y lineal
va exactamente igual
entonces
¿cómo lo estamos haciendo esto?
porque tenemos un transition
timing function
y aquí tenemos un montón
de formas
y una de ellas es lineal
que sería la que tendríamos
por defecto
y aquí podemos ver
que funciona exactamente igual
tendríamos una forma
que es totalmente lineal
pero es muy artificial
¿por qué es artificial?
porque realmente
en la vida real
las animaciones que ocurren
no son lineales
existe la gravedad
que tiene una aceleración
el peso de las cosas
hace que al principio
pues pueda ir más rápido
y luego cada vez más lento
los objetos
como tienen un peso
pues se nota
¿no?
y por eso queda muy artificial
por eso muchas veces
cuando animáis cosas
en la web
tenéis que tener cuidado
de dejarlo todo lineal
a veces tiene sentido
pero hay otras
que se necesita
que tenga como una aceleración
en algún momento
¿no?
acelerar la entrada
o acelerar la salida
o las dos
que vaya más lento
por el medio
y para hacer eso
tenemos diferentes funciones
tenemos una función
por ejemplo
para iniciar la animación
lentamente
y que luego
pues vaya a toda velocidad
para eso hacemos
ease in
y lo vamos a ver ahora
¿ves?
va como
mira voy a quitar el boxado
para que lo veamos
a ver
lo vamos a animar todo
para que lo veamos
¿vale?
fíjate
al principio va más lento
y al final va más rápido
al principio va más lento
y al final va más rápido
luego también tendríamos
el ease out
que sería al revés
inicia la animación
a toda velocidad
y luego finaliza
más lentamente
¿vale?
fíjate ahora
la diferencia ¿no?
aquí tenemos que
rápidamente se ha hecho gordito
pero luego cada vez
va más lento
eso es el ease out
ease es como
voy a tomármelo con calma
me voy a tomar
la salida
con calma
¿vale?
luego tendríamos
el ease in out
que esto lo que hace
es que tanto a la entrada
como la salida
va con calma
y en el medio
es donde realmente
va a velocidad máxima
fíjate
lentito
luego acelera
luego lentito otra vez
y luego tendríamos
el ease
el ease es bastante
parecido al in out
pero comienza
ligeramente
un poquito
más rápido
¿vale?
¿ves?
comienza ligeramente
un poquito más rápido
y es casi imperceptible
hay una
estos son los más típicos
¿vale?
pero hay una
hay una que muy poca gente
conoce
que está muy chula
que está muy chula
que te tienes que entender
que es esta
mira
cuando tenemos
timing function
ease y tal
ok
pero tenemos un método
que nos puede permitir
indicar
cuántas
cuántos pasos
tiene que hacer
para terminar la animación
y se llama steps
y nosotros aquí
le podemos decir
oye
¿cuántos pasos
tienes que hacer
para hacer la animación?
le podemos decir 5
y claro
esto va a quedar muy
ortopédico
porque va a utilizar
5 pasos
para hacer la transición
entre uno y otro
mira
¿ves?
5 pasos
ha hecho
1, 2, 3, 4, 5
en 2 segundos
ha dividido los 2 segundos
en 5 pasos
¿vale?
1, 2, 3, 4, 5
¿vale?
eso es lo que ha hecho
cuanto más pasos pongáis
más digamos
más fluida
se va a ver la animación
¿ves?
aquí tendríamos 10 pasos
cuanto más pasos pongáis
20
pues vais a ver aquí
que 20
pues cada vez se ve
más fluido
pero está bastante chulo esto
y dirás
bueno pero esto
¿ves?
ahora claro
tiene 50 pasos
ya casi es muy fluido
esto es bastante interesante
porque más adelante
veréis
que hay algunas animaciones
que vais a querer
como por ejemplo
algunos loaders
y cosas así
que a lo mejor queréis
que sea en pasos
que haga 1, 2, 3, 4
y así vais a controlar
perfectamente
podríais hacer una rotación
por ejemplo en la animación
pero lo que conseguís
es que rote
y al hacer 4 pasos
sea primero arriba
luego a la derecha
luego abajo
izquierda
y luego al principio
¿no?
y así pam pam pam pam
así que hay bastantes cosas chulas
para hacer con este de steps
que al final no es muy conocido
hay otro
que es como el más top
que es el de cubic besier
nunca me acuerdo
cómo se pronuncia
cubic besier
¿ok?
que esto es un método
que recibe 4 parámetros
al final representados
como x1 y 1
y luego x2 y 2
que yo nunca me acuerdo
de esto en memoria
pero te voy a enseñar
una herramienta
que te va a encantar
para hacer esto
sin tener que acordarte
y tal
lo importante que sepas
es que esta función
lo que te va a ayudar
es que puedas personalizar
la curva besier cúbica
de la animación
no hace falta que sepas
de hecho ya te lo digo yo
que yo esto
no lo he usado a mano
nunca
pero
pero que sepas
que en las herramientas
de desarrollo
si le das aquí
inspeccionar
y esto está muy chulo
aquí hay una herramienta
muy chula
muy chula
¿veis aquí que hay
como un iconito?
¿vale?
tú le das a este iconito
y ya te sale aquí además
como una explicación
de la animación
en este caso
nos ha enseñado
la animación
que tenemos ahora
aquí tendríamos
la lineal
¿vale?
y así además puedes ver
¿ves?
que la animación lineal
siempre tiene la misma velocidad
aquí puedes ver
como la ease in out
que al principio va más lenta
y sale más lenta
pues además de todas estas
tiene un montón aquí
ya preestablecidas
que te pueden ayudar
por ejemplo
¿ves?
aquí que hay como
y las pueden modificar
aquí puedes ir cambiando
esta curva
y fíjate que cuando cambias
esta curva
de la animación
que aquí le estamos diciendo
como bueno
pues quiero que vayas
aquí súper rápido
y luego al final
vas más lento
y luego incluso
puedes ir para atrás
o sea podrías hacer una animación
que se queda al final
y luego vuelva para atrás
como si fuese un efecto rebote
y aquí te está dando
el cubic visier este
con todos los pasos
que necesitas
y ya no te tienes que preocupar
de hacerlo tú
y no sé qué
mira aquí en este caso
¿ves?
aquí podemos hacer que vuelva
o sea está súper chulo
todo lo que puedes hacer aquí
y tiene algunas preestablecidas
para que tú no tengas que preocupar
de ah y cómo se haría esto
o lo otro ¿vale?
le vas dando aquí
y vas a ir viendo
todas las que tiene
algunas están muy chulas
pues para que empiece
al principio más lento
y todo esto
y aquí ves
si dejas esta
pues ya te ha puesto este
y aquí pues podemos ver
que está funcionando
con la animación
que hemos configurado
así que ahí tendríamos
un trucazo
unas herramientas
para que no te tengas
que preocupar
con el visir este
la función
porque yo sinceramente
nunca he sido capaz
de hacer a mano
lo que realmente quería
o sea siempre lo tengo que hacer
o con alguna herramienta
y tal
y esa es la que yo utilizo
alguien estaba pasando esta
que está súper chula
también que tenéis aquí
como ejemplos
de cómo funcionan
las animaciones
¿veis?
y también tenéis aquí
como las diferentes curvas
de la animación
y aquí tendríais
la propiedad
que tenéis que copiar
o sea que está
súper súper chula
y si no podéis utilizar
un custom
que es exactamente lo mismo
que os he enseñado
esa herramienta de desarrollo
bueno he visto a alguien
eso
Feralp
gracias Feralp
no me da tiempo
a verlo
aquí tendríamos
todo esto
al menos ya hemos visto
la de duration
hemos visto
la de property
hemos visto la de timing function
pero también hay una
muy importante
que es la propiedad
de delay
que al final
lo que nos permite
es especificar
en qué momento
va a comenzar
la transición
o sea
nosotros por defecto
tenemos un delay
de cero
porque empieza la animación
inmediatamente
pero le podemos decir
oye
quiero que la animación
tarde 200 milisegundos
en empezar
¿vale?
y fíjate que ahora
pues ha tardado
200 mil segundos
para que lo notéis
ponemos un segundo
me pongo aquí
tarda un segundo
en empezar
y esto para qué
puede ser interesante
y es muy buena pregunta
mirad
una de las
una de las
cosas interesantes
en las transiciones
animaciones
y todo esto
es el hecho
de que puedes jugar
con el delay
para que se muestre
como de una forma
mucho más
bonita
¿no?
o sea
como que vaya cayendo
cada una de ellas
por ejemplo
mira
vamos a imaginar
que aquí
en lugar de tener
uno
¿vale?
un elemento
de hecho
voy a ir a otra
otra pestaña
así dejaremos el original
¿vale?
imaginar que tenemos aquí
vamos a poner
un section
y esto
vas a ver
que esto
te va a ayudar
un montón
para hacer muchas animaciones
que hasta ahora
no sabías cómo hacer
y que te van a ayudar
a decir
ah
para esto
puedo utilizar el delay
vamos a poner
tres pulsers
y vamos a hacer
que
hasta ahora
el hover
era en el pulser
¿no?
era en la redondita
vamos a hacer
que esto en realidad
sea en el section
o sea
cuando en el section
hacemos hover
vamos a enseñar
todos los pulsers
y el pulser
vamos a poner
una opacidad
que sea de uno
vamos a poner
por aquí
para que se muestre
vamos a poner
que la opacidad
es de cero
y esto
que habíamos hecho aquí
del scale
y todo esto
vamos a hacer
que sea aquí
bueno
ni siquiera
es que no hace falta
solo para que lo veáis
yo creo que esto
no hace falta
ya con la opacidad
habrá suficiente
porque lo vais a ver
mucho más claro
entonces
vamos a estilar el section
para que se vean
todos los elementos
con un display flex
separamos 17 píxeles
centramos todo
align content center
no content no
items
vale
items
y vamos a poner aquí
un mensaje
que sea
add hover
para mostrar
los elementos
vale
vamos a mover
esto por aquí
un poquito así
esto por acá
a ver si esto nos ha roto
vale
vale
muy bien
haz clic
para mostrar los elementos
el pulser
esto es cero
lo he hecho bien
¿no?
¿qué ha pasado aquí?
¿qué ha pasado aquí?
ah
ah vale
ah y porque tengo el delay
la madre que me parió
porque tengo el delay
vale
que tengo el delay
vamos a poner una buena fuente
font family
con el system UI
y vamos a poner
que el font size
sea más pequeñito
para que lo veamos bien
¿vale?
se me queda
no le queda suficiente espacio
a ver
vale
ahí está
vamos a quitar esto
vale
fíjate que ahora salen las tres
y salen cada uno
pues al mismo tiempo
¿no?
salen ahí
cuando haces hover
se muestran los tres elementos
pero aquí justamente
podrías jugar con el delay
para que quedase como
mucho
mucho más chulo
porque puedes decirle
mira
vamos a
vamos a tirar esto
el delay aquí
no tenemos ningún delay
vale
lo que podemos hacer
es que además
como podemos utilizar
la cascada de CSS
aquí por defecto
todos los pulsers
todas las redonditas
que vemos aquí
ya vemos que son redondas
que tienen este fondo
que tienen el borde radius
que la duración de la transición
esto lo voy a quitar
la duración de la transición
es dos segundos
y que el timing function
es un is
y por defecto
la opacidad tienen vacía
vale
o sea
esto sería para todos
pero ahora lo que podemos hacer
es decir
vale
vamos a ir a un pulser
en concreto
y le vamos a decir
el primer pulser
el first child
vamos a poner
que tenga un delay
y esto va a ser específico
para el primero
de cero segundos
que esto es
o sea
esto es lo
por defecto
pero solo para que lo veáis
visualmente
vale
el pulser
el segundo hijo
el segundo hijo
vamos a decirle
que tenga un transition
delay
de 300 milisegundos
y el tercer hijo
vamos a decirle
que tenga un transition
delay
de 600 milisegundos
vale
entonces ahora
ya solo con esto
ya estamos haciendo
fíjate
una animación
tal que así
y fíjate que con esta animación
tan sencilla
estoy seguro
que este loader
lo has visto
80 mil millones de veces
y no te has dado cuenta
esto es uno de los loaders
más típicos
del universo
esto de que
lo hace así con el delay
y con que creéis que lo hace
con un delay
vale
lo hace justamente con un delay
de forma que cada uno
de los elementos
dice el primer elemento
no tiene un delay
el segundo sí
el tercero sí
entonces ahora ya estás entendiendo
mucha de esa magia
como se está haciendo
y esto está muy chulo
¿por qué?
porque esto lo podéis hacer
siempre que tenéis elementos
que están en fila
y que dices
claro
si tú tienes muchos elementos
que están en fila
y haces un opacity
de golpe de todos
queda muy raro
queda muy raro
porque
no se está mostrando
como de forma
no sé
la experiencia del usuario
al verlo
es un poco extraño
seguro que has visto
alguna página
que has dicho
ay que bonita
que tiene este tipo
efecto
en el que va apareciendo
cada uno de los elementos
con un poquito de retraso
y esta sería la forma
de hacerlo
con un delay
¿vale?
así que nada
ahí tenéis el ejemplo
del delay
veis que ha quedado
uno detrás del otro
y ahí lo tenéis
y también
como podéis ver
sí exacto
no es magia
es programación
como podéis ver
además
también cuando se va
o sea cuando dejáis
de hacer el hover
también ese delay
existe
¿vale?
entonces el primero
que se va es el primero
segundo
tercero
y tal
así que es súper importante
esto
ahora
todo esto
que os he enseñado
está muy bien
esto está muy bien
esto que os he enseñado
volvemos a nuestro ejemplo
del pulser
que teníamos por aquí
¿vale?
esto está muy bien
pero
ay ¿qué ha pasado con este?
¿qué ha pasado con este?
ah porque tengo un segundo
vale
había puesto el delay otra vez
esto está muy bien
pero hemos tenido que escribir
como un montón
Transition Duration
Transition Timing Function
no sé que
obviamente existe una forma corta
de escribir esto
que es Transition
la forma corta
es poner Transition
primero pondríamos
la
bueno se puede poner
de diferentes órdenes
¿vale?
hay diferentes órdenes
que podéis utilizar
no siempre podéis utilizar el mismo
o sea podéis
por defecto
podéis
veis
tiene como un montón de formas
en que podéis poner
primero el nombre de la propiedad
depende de lo que pongáis
podéis ver la función antes
después
o sea que es un poco raro
porque podéis hacerlo de diferentes formas
porque algunas propiedades
son opcionales
pero lo más típico
es que al principio
podáis poner la propiedad
o sea
background
o poner all
pero esto lo podéis quitar
y saltároslo
pero vamos a decir
que vamos a poner el background
por ejemplo
y luego
le tendríamos que poner
la duración
que aquí podríamos poner
300 milisegundos
por ejemplo
después de la duración
tendríamos
la función de animación
que hemos visto
el is
el lineal
el que sea
y luego
sería el delay
si queremos un delay
de 200 milisegundos
200 milisegundos
o 2 segundos
vale
entonces aquí tendríamos
que vamos a animar
el background
durante 300 milisegundos
de forma lineal
y vamos a tener un delay
de 2 segundos
si nos ponemos aquí
bueno
si nos ponemos aquí
me ha pasado de mí
ah no
no ha pasado de mí
porque solo es el background
por eso el scale
es directo
pero el background
ves
tarda 2 segundos
y tal
si queremos que el scale
también tenga
una duración
determinada
podemos poner una coma
y decir vale
el scale
quiero que tarde más
o sea que sean
500 milisegundos
le vamos a quitar el delay
500 milisegundos
y que sea con un
is in out
y entonces ya veis
que cada propiedad
podéis hacer
que tenga duraciones
diferentes
y funciones
de animación diferentes
vale
veis
y por eso
y esto seguro
que lo habéis visto
un montón de veces
que se consigue
este tipo de cosas
en las que parece
que una propiedad
se anima de una forma
otra de otra
pues lo está haciendo
básicamente así
podéis tener transiciones
para cada una
de las propiedades
y lo mismo
incluso con el boxado
el boxado
podéis hacer
pues que sea
también diferente
y que también
pues tarde
un poquito más
vale
y ahí veríais
que el boxado
tarda más en aparecer
y ya está
así que esta sería
la forma
la forma corta
y que además
os permite fácilmente
hacer que cada propiedad
tenga diferentes tiempos
diferentes funciones
y ya está
así que para que veamos
un poco
cómo sería la forma larga
imagínate
pum
la forma larga
cuatro líneas
ahí a saco
la forma corta
de todo esto
pues sería así
pum
y además
como el delay
cero es por defecto
lo podrías quitar
y fíjate
te estás ahorrando
un montón de líneas
pero es importante
muchas veces
entender cómo funciona
por detrás
para no saltar de golpe
y decir
ah bueno
yo lo voy a hacer
así de golpe
bueno no
pues espérate
primero entiende
las propiedades
y luego utilizar
el atajo
vale
ya que tenemos aquí
ahora es la pregunta
del millón
oye Midu
pero qué podemos animar
y qué no podemos animar
bueno
te voy a explicar dos cosas
uno
la lista oficial
tienes una lista oficial
de propiedades
que son animables
vale
que puedes utilizar
en las transiciones
y en las animaciones
tienes la lista oficial
y bueno
pues ya lo tendrías
las diferentes animaciones
que puedes hacer y tal
pero
lo que yo os voy a decir
porque al final
es un rollo
que estéis ahí buscando
continuamente
cuál es la propiedad
que se va a animar y tal
a ver
es muy sencillo
tenéis que pensar
la propiedad
que estoy animando
podría tener
un estado intermedio
por ejemplo
un color
es obvio
que un color
de azul a rojo
sí que tiene un estado intermedio
viajará hasta ahí
también casi cualquier cosa
que vaya con
con píxeles
tamaños
posiciones
y cosas así
pero
que no se va a poder animar
hombre
si cambias
el tipo de la fuente
y pasas
de una fuente
serif
a una sans serif
no hay un estado intermedio
si cambias
un background image
una imagen
a otra imagen
no hay un estado intermedio
cuál es el estado intermedio
entre esas dos
pues no hay estado intermedio
de hecho
hasta hace poco
tampoco se podía
hacer una transición
con el display non
y ahora sí que se puede hacer
cosa que por fin
me parece maravilloso
porque antes no se podía hacer
pero que sepáis
que ahora
o sea
que no podéis animarlo
todo
sobre todo
si no tiene un estado intermedio
pensad
oye
puede tener un estado intermedio
por ejemplo
los gradientes
los gradientes
tampoco se pueden animar
no se pueden animar
al menos por ahora
así que nada
hay que tener paciencia
a ver si se puede hacer alguna cosa
solo se puede hacer
con propiedades continuas
más con propiedades discretas
casi todo lo que tenga
píxeles
y todo esto
y que puedan tener
un estado intermedio
pues ya está
yo normalmente
lo pienso así
y nunca he tenido problemas
de pensar
ah no
esto es un manual
así que en general
se puede animar casi todo
todos los elementos
casi todo
pero las transiciones
por ejemplo
un font family
que no tiene un estado intermedio
no se podría hacer
vale
ahora
cosas interesantes
de las transiciones
que hemos visto aquí
dos cosas
que son dos truquis
que están
a ver
es básico
pero es interesante
fijaos
aquí que hemos puesto
a ver
porque ahora esto
se me da
coño
ah porque he puesto
transform
voy a poner all
vale
para que se anime todo
vale perfecto
mira
hemos animado esto
pero hay veces
que queréis
que al hacer hover
al inicio
tenga una animación
y al final
tenga otra duración
o otra forma
pues esto lo podéis lograr
justamente haciendo esto
puedes decir
que aquí
en el inicio
la duración
sea de 300 milisegundos
y esto será
el estado final
vale
o sea
hay que pensarlo
como al revés
esto será el estado final
el estado final
tardará 300 milisegundos
en volver
y aquí podríamos
cambiarle la duración
y decir que tarde
un segundo
que va a pasar con esto
que cuando haces hover
tarda un segundo
pero cuando sueltas
ves es más rápido
esto está muy chulo
aunque a veces cuesta
porque es pensarlo
como al revés
como para
la primera animación
la primera animación
vale
sería como
al principio
la tienes que poner
en el hover
y la del final
la tienes que poner
en el elemento aquí
y entonces fíjate
que cuando haces hover
va más lento
y cuando suelta
va más rápido
esto también
lo habréis notado
así de veces
así de veces
un montón de veces
en un montón de páginas
y es porque tiene sentido
tiene sentido
porque muchas veces
vamos a querer
que cuando el usuario
hace la acción
por ejemplo
que se pone encima
que sea un poquito
más lenta
pero cuando se va
que sea más rápida
porque vamos a querer
que pierda la atención
en ese elemento
por lo tanto
la hacemos un pelín
más rápida
justamente por eso
eso lo vais a ir notando
ahora que lo sabéis
lo vais a notar
cuando entras
más lenta
y cuando te vas
más rápida
para que la atención
del usuario
ya se quite de ahí
ya os he comentado
el tema
de tener más de una transición
en diferentes propiedades
pero vamos a hablar
de un tema
de accesibilidad
bastante importante
y que no cuesta nada
no cuesta nada
es un momento
tema de accesibilidad
a ver amigos
hay un tema
y es que hay veces
que hay gente
que se puede marear
he visto muchas veces
páginas de productos
de millones
o porfolios
de gente
que tiene demasiadas animaciones
y incluso
hay gente
que le marea
y esto es real
hay mucha más gente
de la que pensamos
que tienen gafas
que tienen problemas
de vista
que se marean fácilmente
que tienen epilepsia
o sea un montón de cosas
por lo tanto
deberíamos tener cuidado
y entonces
se pueden desactivar
las animaciones
muy fácilmente
con una media query
¿cómo lo podemos hacer?
mira
lo que podemos hacer aquí
es añadimos
una media query
que le decimos
vale
cuando el usuario
prefiere
que hayan
animaciones reducidas
vale
vamos a decir
que el pulser
las transiciones
transition
sea none
vale
vamos a hacer
una media query
que vamos a tener
la opción
de cuando sea
prefers reduce motion
lo tenga
en reduce
o si no sería
no
no me acuerdo
no preference
creo que es
no preference
creo que
por defecto
diríamos
no preferencia
pero si el usuario
nos dice
que lo que es reducido
le vamos a quitar
las transiciones
¿cómo funciona esto?
mira
fíjate
yo ahora
veo exactamente
igual la animación
la veo igual
¿no?
pero
si yo me voy aquí
me voy a los ajustes
del sistema
vale
me voy aquí
a accesibilidad
y ahora os lo enseño
accesibilidad
aquí
me voy a la pantalla
y le digo
reducir movimiento
le doy aquí
esto va a desactivar
un montón de animaciones
del sistema operativo
por ejemplo
cuando se ponen más pequeñas
las ventanas
más grandes y tal
pero
también ha desactivado
la animación
gracias a esta media query
fíjate
si quito la media query
vemos la transición
si pongo la media query
ya no tengo la transición
entonces le estamos dando
a un usuario
una forma de decir
ostras
vale
si este usuario
no quiere una animación
pues ya está
le vamos a desactivar
esta animación
y tal
esto lo podéis llevar
a un extremo
muy brutal
de desactivar
todas las animaciones
pero a veces
una cosa que podéis hacer
es por ejemplo
que sean duraciones
más grandes
que no anime
tantas cosas
o sea
podéis hacer un montón
de cosas
no hace falta
muchas veces
que desactivéis
totalmente las animaciones
pero a lo mejor
queréis animaciones
que sean más discretas
vale
al final podéis hacer esto
que sean más discretas
no hace falta desactivarlas
y ya está
sino que con que las hagáis
más discretas
a veces ya funciona
mira ajuste el sistema
ya lo ponemos aquí otra vez
y ya me funciona otra vez
ok
así que ahí lo tenéis
hay un estándar
para el tema de accesibilidad web
sí que hay un montón de estándares
para el tema de accesibilidad web
tanto de contrastes
márgenes
como de grande
tienen que ser los botones
y todo esto
entonces
estos eran los keyframes
vamos con el tema
de las animaciones
porque los
hay los keyframes
estas son las transiciones
las transiciones
está súper bien
eso también lo tiene Windows
lo tienen todos sistemas operativos
porque es obvio
bastante obvio
de hecho esto también
lo podríais incluso hacer
en un botón físico
en vuestro sistema operativo
no con una media query
pero sí con una clase
que podéis aplicar al body
y así desactivarlo todo
lo tiene Windows
Linux
Ubuntu
Macos
lo tienen todos
es que es algo bastante básico
esto serían las transiciones
que está súper bien
porque nos permite
hacer una transición
entre dos estados
vale
pero también tenemos
las animaciones
CSS
que nos permiten animar
elementos
sin necesidad de interactuar
con ellos
simplemente
vamos a crear
una secuencia
de estados
de la animación
vale
como unos fotogramas clave
y vamos a decirle
vale
quiero que vayas
de este fotograma clave
a este
y ya está
que te animes
y le podemos decir
que eso sea infinito
que vaya hacia atrás
y tal
lo vamos a ver
porque
lo interesante de esto
es los keyframes
que son la clave
la salsa
la vida
de lo que vamos a ver
por ejemplo
los keyframes
son la forma
que nos va a permitir
que vayamos a poder decirle
cómo queremos
que se anime algo
por ejemplo
ahora
habíamos hecho dos estados
vale
vamos a quitar esto
vamos a quitar todo esto
vamos a quitar esto
le quitamos el hover
le quitamos la transición
también
no queremos transición
quitamos esto
este es el CSS
nos ha quedado esto limpio
ok
vamos a crear
unos fotogramas claves
y a los fotogramas claves
cuando queremos crear
la animación
le tenemos que dar un nombre
aquí tenemos que poner
animation name
vamos a poner
por ejemplo
yo que sé
scale
o move
vamos a poner move
solo para que veas
move
ok
y aquí
le tenemos que decir
dónde está
empezando este fotograma
le podríamos poner
una palabra clave
que significa
from
que sería como
desde el principio
esto sería lo mismo
que poner 0%
como el punto 0%
de nuestra animación
o el segundo 0
de la animación
pues from
sería como el estado inicial
de nuestra animación
el estado inicial
de nuestra animación
vamos a decir
que sea
el translate
y que vamos a
tenerlo
en 0 píxels
vamos a tener
que se quede
exactamente igual
pero vamos a decir
que su destino
el final
de esta animación
vamos a decir
que se mueva
el translate
vamos a decir
que se mueva
100 píxeles
vale
ahora vamos a querer
utilizar esta animación
esta animación
ahora la podemos utilizar
en cualquier elemento CSS
la podemos reutilizar
tantas veces
como queramos
para utilizar una animación
pues nos vamos aquí
animation
y le decimos
la animación
que tienes que utilizar
es move
ajá
pero no está pasando nada
¿qué está pasando aquí?
nos han engañado
vale
parece que no funciona
porque
obviamente
no le hemos dicho
qué duración
tiene que tener
esta animación
así que vamos
animation
duration
que ya veis
que es bastante parecido
a lo de transition
vamos a decir
3 segundos
vale
vamos a refrescar
porque
bueno
pum
ves
ya se cae
se cae
¿has visto?
vale
hemos visto diferentes cosas
uno
¿por qué tengo que refrescar?
y eso tiene que ver
por cómo es la animación
y es que la animación
solo ocurre una vez
fíjate
que voy a refrescar
y ves
ocurre una vez
y no solo ocurre una vez
sino que cuando termina
vuelve a su estado inicial
o sea
vuelve otra vez al principio
todo esto
lo vamos a arreglar
y lo vamos a entender
y no te preocupes
pero tenemos que pensar aquí
como que esto es una película
como las películas de Pixar
una película animada
lo que estamos haciendo aquí
es decirle
oye
vamos a crear una película
una película
donde su primer frame
lo primero que se ve en la película
es que nuestro elemento
está en esta posición
en la posición
del eje vertical
está en la posición 0
y quiero que en la película
cuando termine
el último frame de la película
ya cuando salen los créditos
y todo esto
lo que quiero
es que la posición vertical
en la posición del eje Y
sea 100
por eso
durante 3 segundos
lo que vamos a hacer
es que vaya de un sitio al otro
y ahora os vais a reír
lo que os va a decir
va a decir
ah que exagerado
no sé qué
esto
esto es exactamente lo mismo
que utilizan
las películas de Pixar
para animar
todos los muñecotes
que veis
lo que pasa es que
es mucho más complejo
pero la idea
de los keyframes
la idea de tener
un movimiento
de A a B
es justamente lo mismo
lo que pasa es que
aquí lo hacen
pues esta mano
tiene que ir de aquí
a aquí
y entonces
como se hace ese movimiento
de un sitio a otro
lo hace exactamente así
yo sé que ahora
vais a decir
no imposible
obviamente a una escala
mucho más compleja
mucho más complicada
pero esta es un poco
la idea
en la que muchos movimientos
se tienen que hacer
realmente así
así que
es la base
es la base
muy básica
pero de aquí van
la idea
de los fotogramas clave
también esto lo podemos ver
en un montón de cosas
que se hacían antiguamente
con flash
y cosas así
pero para que os hagáis
un poco la idea
ahora
esto del
traslet quiere decir
es trasladar
este elemento
en el eje vertical
que sería la I
aquí el 0
sería su valor
por defecto
y lo estamos moviendo
100 píxeles
hacia abajo
por eso pues
que cuando hacemos
la animación
cae hacia abajo
100 píxeles
y cuando acaba
vuelve al principio
¿ok?
flash es una cosa
muy antigua
que si me pongo a explicar
igual nos salen canas
de lo antiguo que es
o sea que imagínate
bueno entonces
ya habíamos visto
que la duración
le hemos puesto
3 segundos
y tal
vamos a hacer un ejemplo
más complicado
porque es más interesante
y que además
habréis visto
10.000 millones de veces
en un montón de sitios
y que seguro
que os habéis preguntado
oye pero esto
como se hace
mira
vamos al pulser este
le vamos a poner
un pseudo elemento
after
un pseudo elemento
es un elemento
que está dentro
del elemento html
pero que no lo tenemos
nosotros que escribir
y que el after
significa que está justo después
si alguna vez tenéis dudas
de oye pero que es el after
y tal
esto de donde sale
bueno
cuando inspeccionéis
los elementos
fijaos
que bueno ahora
no me va a salir
ahora lo enseño
mira ahora cuando
le pongamos un contenido
es que sin contenido
no aparece
ves tenéis que poner
un contenido vacío
porque si no
no aparece
pero veis ahora
que pone aquí after
es como un elemento
invisible
que no tenemos que escribir
en html
pero que quiere decir
dentro del dip
al final del dip
tenemos este pseudo elemento
que podemos poner
lo que nos dé la gana
de hecho aquí podemos poner
hola
y esto
no va
ah no ha aparecido
hola
ves
y ahí lo tenemos
hola
y lo podéis escribir
y escribís ahí el hola
o sea no habría ningún problema
en ponerle contenido
pero muchas veces
se utiliza para alguna floritura
para enseñar alguna cosa
una imagen
en un icono
o lo que sea
pero ahí es donde está
el pseudo elemento after
igual que un after
también tenemos el before
podríamos poner
un pseudo elemento
justo al principio
del elemento dip
o al final
y esto se utiliza un montón
así que está muy bien
que lo sepas
vamos a poner
que esté en position absolute
que va a ser absoluto
va a estar
como tenemos aquí un relative
esto lo vimos
en la primera clase
me parece
creo que lo vimos
en la primera clase
mira le vamos a poner
un width
que sea el 100%
vamos a posicionarlo
arriba a la izquierda
le vamos a poner
un background
que sea exactamente
el mismo que ya tenemos
vamos a poner
un border radius
de 50%
y lo vamos a poner
un z index
de menos 1
para que esté
justamente detrás
si le ponemos
un scale 2
y opacity
punto 5
vale
este que casi no se ve
o sea el que tiene
menos opacidad
es el que está detrás
y con estas cosas
esto lo voy a quitar ahora
porque le vamos a hacer
una animación
pero con esto
vamos a hacer una animación
que es como
a ver si lo encuentro
animation pulse css
es que es muy típica
esta animación
a ver si encontramos
es una animación
que se ve un montón
especialmente
a ver
en temas de
mira esto
¿veis esto?
esto es lo que vamos a hacer
lo vamos a hacer
porque está muy chulo
y se utiliza bastante
incluso en botones
en temas de notificaciones
y cosas así
y se hace en un momento
así que
vamos a quitar esto
y vamos con los keyframes
a ver
tema de keyframes
los keyframes
que vamos a querer
en este pulse
es muy fácil
le decimos
que tiene que ir
al principio
con una opacidad
de cero
porque no se tiene que ver
y luego
podemos decirle
diferentes pasos
como antes he puesto el from
lo voy a hacer
con el tanto por ciento
al inicio de mi película
en el punto cero
la opacidad de ese elemento
tiene que ser
totalmente transparente
y en la mitad
de la película
vamos a hacer
que ya se transforme
con una escala
o esto lo podemos poner
directamente
scale
le ponemos 1.4
para que salga más grande
y le vamos a poner
una opacidad
de .4
o 40%
¿vale?
lo que quieras
esto hay gente
que no sabe
que se pueden poner
tantos por ciento
en las opacidades
pero podéis poner
0.4
o como lo hago yo
que es como a mí me gusta
por la forma corta
.4
puedes obviar el cero
y ya funciona
entonces ya tendríamos aquí
la animación de Pulse
la animación de Pulse
vamos a utilizarla
en este After
¿vale?
entonces decimos
Animation Name
va a ser el Pulse
Animation Duration
vamos a poner
dos segundos
y Animation
Timing Function
vamos a decir
Is In Out
y aquí vamos a entender
una nueva propiedad
que es la que hemos visto antes
el Timing Function
esto lo que va a indicar
es con qué aceleración
se tiene que reproducir
la animación
y esto lo que quiere decir
es que tanto al principio
como al final
va a ir más lento
que en la parte central
¿vale?
como podéis ver
parece que no se ve
pero es que hay que refrescar
porque la animación
ya ha terminado
como solo funciona una vez
pues es lo que hay
ahora lo arreglaremos eso
vamos a refrescar
bueno
me he dejado
he dejado la del movimiento
vamos a quitarla del movimiento
¿vale?
quitamos la del movimiento
y lo ponemos más claro
vale
ahí lo tenemos
¿vale?
¿veis?
habéis visto lo que ha pasado ¿no?
que ha hecho esa Pulse
como así
como si fuese un corazón
lo podemos hacer un poquito más grande
para que sea como un poquito más drástico
y lo veamos
¿vale?
¿vale?
¿veis?
como más drástico
está bastante chulo
también podríamos decirle
que aquí la opacidad
se quede
al punto 6
y así nos aseguramos
que no llega a hacer la opacidad
al 100% al final
¿vale?
y así
y así
pues quedaría
una cosa así
vale
perfecto
el problema que estamos viendo
es que la animación
no se repite
la animación
solo ocurre una vez
la animación está ahí
una vez
y ya está
y dices
bueno pero yo creo que
se repita más veces
porque si no queda raro
queda como extraño
porque no se repite más veces
bueno
esto lo podemos arreglar
igual que podemos dar el nombre
la duración
la función
de cómo tiene que hacer
la reproducción
la velocidad y tal
podemos decirle
cuántas veces
se tiene que ejecutar
o tiene que reproducir
la película
por defecto
ya hemos visto
que se reproduce una vez
pero podemos decir
reproducelo cinco veces
¿vale?
entonces si ahora refrescamos
vamos a ver que lo hace
una
dos
¿ves?
tres
y cuando llega la quinta
va a terminar
va a decir
bueno yo he llegado hasta aquí
porque obviamente
no voy a estar viendo esto
todo el rato
¿ves?
termina
se acabó
pero hay veces
que por lo que sea
hay veces que hay animaciones
que quieres hacer una vez
dos veces
para que no sean muy intrusivas
pero hay veces
que por lo que sea
tú quieres que sean infinitas
quieres que lleguen
hasta el infinito
y más allá ¿no?
pues para eso
lo que puedes decirle aquí
es que te lo haga
infinitas veces
y ahora ves
que lo está haciendo
todo el rato
ahora ya no para
de hacerte esta animación
todo el rato
y ahora como la estamos
haciendo todo el rato
ya no hace falta
que la hagamos tan grande
y ya está
entonces ya la estamos
haciendo continuamente
la va a hacer
todo el rato
¿vale?
igual que hemos visto antes
que teníamos la de duration
obviamente aquí también
teníamos la animation delay
si queréis esperar
que tarde un tiempo
esto puede ser interesante
por ejemplo
imaginad que entráis a una página
y tenéis como un sitio
que son las notificaciones
de cuántos mensajes
tiene el usuario
si tiene un producto
en el carrito
lo que sea
normalmente nada más entrar
es un poco intrusivo
que ya le pongas ahí
los flasheos
pues puedes decir
oye esta animación
voy a hacer que tarde
10 segundos
para que cuando el usuario
ya ha visto bastante la página
ey
recuerda que tienes esto
entonces por ejemplo
aquí un segundo
y luego el delay
lo puedes hacer así
y es mucho más fácil
no que ya le estés flasheando
desde el principio
le pones un delay
de 5 segundos
y haces que se mueva
o lo que sea
¿vale?
entonces ya tendríamos esto por aquí
pero hay una cosa
muy interesante
muy chula
justamente sobre el tema
de las animaciones
y lo vamos a ver
en
bueno
ventana incógnito
la ventana porno
¿vale?
que es el tema de
hemos visto cuántas veces
podemos repetir
pero vamos a ver el tema
de la dirección
de una animación
mira
tengo aquí una imagen
de Mario
it's a me
Mario
bueno
pues vamos a hacer
que Mario
vamos a hacer un poquito
más chiquitito
bueno
no tan chiquitito
vamos a poner 80
¿vale?
es de Mario
un poquito cabezón
vamos a
tendremos una animación
que sea mover
le vamos a poner
un animation duration
que sea 2 segundos
vamos a decir
que se va a mover
infinito
¿vale?
infinito
le vamos a decir
que la
la secuencia
porque vamos a mover
al Mario
vamos a hacer
que la velocidad
sea lineal
durante toda la animación
y
por ahora vamos a dejar así
vamos a hacer el keyframes
vamos a llamarle
animación mover
porque vamos a mover
al bueno del Mario este
y lo vamos a mover
de izquierda a derecha
podemos moverlo
como lo hemos visto antes
¿no?
transform
transform
translate
x
y aquí moverlo
en el punto 0
pues vamos a decir
que esto sea 0
y al final
vamos a decir
que lo movemos
pues yo que sé
lo vamos a mover
translate x
lo movemos
200 píxeles
¿vale?
¿vale?
y míralo
ahí está moviéndose
muy bien Mario
muy bien Mario
ya se está moviendo
de izquierda a derecha
¿no?
de inicio a final
va del punto 0
al punto 200 píxeles
una cosa muy interesante
que no te he comentado antes
es que
el estado inicial
de las animaciones
como en este caso
ya ves que
esto sería
como el valor por defecto
esto fíjate
que lo podemos quitar
porque es que
ese es el
su punto inicial
si le quitamos el from
como su punto inicial
tampoco lo necesitamos
o sea
le puedes indicar
directamente
cuál es el destino
porque el estado inicial
ya lo sabe
ya lo conoce
y no necesitas
indicárselo
yo te lo estoy indicando
básicamente
para que lo entiendas
visualmente
pero en este caso
como el estado inicial
es exactamente el mismo
que tiene por defecto
lo puedes quitar
¿para qué es interesante esto?
porque hay veces
que por lo que sea
quieres que empiece
con una opacidad
en concreto
y que también
muevas la opacidad
hacia el final
¿no?
y aquí podemos ver
¿no?
que la animación
empezaría
desde ese punto
y luego termina
con la opacidad
al tope
y esto
como no es algo
que tiene por defecto
pues a lo mejor
es una cosa
que te puede interesar
pero si ya tiene
todos los valores
por defecto
lo podrías quitar
entonces
¿por qué te enseño
este ejemplo?
porque un tema
de las animaciones
obviamente
que es muy importante
la dirección
en este caso
nuestro amigo Mario
va de izquierda a derecha
porque le estamos
moviendo aquí
que vaya
como que reproduzca
el vídeo
la animación
hacia adelante
pero podríamos decirle
que la animación
la dirección
sea al revés
¿vale?
entonces
no es que se va a dar
la vuelta al Mario
obviamente
pero la animación
que estamos haciendo
de izquierda a derecha
de ir del from
al to
en este caso
lo vamos a hacer
en reversa
o sea
que vamos a ir
del to
al from
y esto
porque puede ser interesante
bueno
pues como puedes ver
porque hay veces
que queremos
desandar el camino
que queremos hacer
a veces puede tener sentido
especialmente
imagínate
que tienes una UI
que sea de borrar una cosa
¿vale?
y que cuando lo borres
haga el camino inverso
que habías hecho
al crearlo
¿no?
eso está muy chulo
porque lo puedes hacer
en reversa
imagínate que al crearlo
pues haces
que aparezca
y se haga grande
y cuando lo eliminas
hace en reversa
la misma animación
¿vale?
hay un montón de casos
que está bastante
bastante chulo
que puedas hacer
este tipo de cosas
también incluso
hay a veces
que lo que te interesa
es alternar
¿qué quiere decir esto?
que cuando termine
la reproducción
luego vaya
hacia atrás
y esto también
lo habrás visto
en sliders
por ejemplo
de que cuando termina
la animación
vuelve hacia atrás
además hay veces
que si por lo que sea
no tienes la iteración
que sea infinita
pues a veces
haces una vez
la animación
que vas
hacia adelante
vuelves una vez
y termina ahí
y ya está
entonces tendrías también
la posibilidad
de alternar
cuando termina la animación
entonces vuelve para atrás
y también tendrías
el alternate reverse
el alternate reverse
es como empezar
al revés
pero también
ir alternando
¿vale?
y obviamente tendrías
el normal
el normal es el que
por defecto
no hace falta
que lo indiques
pero es el normal
que va hacia adelante
y ya está
ahora bien
imagínate que estás cansado
de ver al Mario este
¿lo ves?
y ya te estás cansando
porque no para de andar
pues que sepáis
que podéis pausar
también las animaciones
esto
normalmente en CSS
no es tan
tan útil
¿no?
porque claro
pausar una animación
yo te puedo decir
animation
play
state
y le deis a pause
y lo pausas
¿vale?
y lo quitas
y se despausa
y lo pausas
y lo pausas
¿no?
pero bueno
hay veces
que sí que puede ser interesante
y te voy a explicar dos
¿no?
una obviamente
es con javascript
que tengas algún botón
o algo
de que al darle click
insertes esta propiedad
para evitar que se mueva
y hay veces que tenemos animaciones
que si el usuario
tiene que interactuar
con ese contenido
puede ser molesto
por ejemplo
imagínate
que yo te digo
tienes que darle click
al Mario
claro
pero el Mario se mueve
es un poco rollo
que yo me pongo encima
y cada vez que le quiero dar click
se sigue moviendo
pues una forma
que podrías hacer esto
es cuando hace hover
en este caso el Mario
pero puede ser cualquier elemento
que se esté moviendo
que tenga una animación
le puedes decir
bueno cuando hago el hover
entonces vamos a pausar
al bono del Mario
además le podéis cambiar
pues la opacidad
¿no?
le puedes decir
vale pues ahora
pues ponemos la opacidad
o incluso el contraste
le vamos a poner 150%
le puedes cambiar el cursor
lo que sea ¿no?
y entonces
¿ves?
ya lo tenemos así
y cuando te pones encima
se pausa
esto también habréis visto
aunque no se habéis dado cuenta
que ocurre en cars
que a lo mejor
tú estás
se está animando todo el rato
y cuando te pones encima
se pausa
o se pausan solo algunas
y otras sí que siguen funcionando
pues así es como se podría hacer
justamente esto
para aprovechar un poco
que estamos aquí
con el image
image hover
te voy a enseñar una cosita
que no hablamos del curso de CSS
y me parece que está bastante chulo
que lo conozcas
que es el CSS nesting
y es que cuando tenemos aquí
el image
y aquí tenemos image hover
ahora en CSS
podemos utilizar
el ampersand
¿vale?
para indicar también
como el parent selector
¿no?
y en lugar de tenerlo separado
lo podríamos poner aquí dentro
y esto funcionaría
exactamente igual
a como estaba funcionando antes
¿ok?
esto lo que quiere decir
esto lo va a cambiar
por el image
porque este ampersand
se está refiriendo
a este image de aquí
y ves
fíjate que funciona
exactamente igual
¿por qué me pone aquí
un montón de cosas rojas
que funciona mal y tal?
el problema
es que esta versión
de Visual Studio Code
que tenemos aquí instalada
no soporta esta sintaxis
porque es bastante nueva
pero lo cierto
es que si miráis
a Can I Use
para ver el soporte
que tiene el CSS nesting
que es la funcionalidad
que si has utilizado
SAS
seguro que la conoces
el 80%
de los navegadores
ya la soportan
así que
la verdad
que ya está
bastante
bastante bien parida
lo último
que le he añadido
es la gente de Safari
así que
nada
yo creo que ya
muy pronto
vamos a tener
un montón de soporte
pero bueno
solo para que conozcas
esta sintaxis
que hace que sea
mucho más legible
entender
que te estás refiriendo
dentro del image
pues vamos a tener
que cuando hacemos
hover en el image
le vamos a aplicar
estos estilos
y si no
tendríamos que hacer
el otro
ahora bien
vamos a hablar
de otro tema
que esto sí que es interesante
también para el tema
de animaciones
y es que
fíjate en la animación
del Mario
cuando con todo esto
le voy a quitar
que sea infinito
le he quitado el infinito
para que solo lo haga una vez
y fíjate lo que pasa
con el Mario
si yo refresco
todo esto
voy a dejar esto
como estaba
solo para que
no salga en rojo
que si no
si viene alguien tarde
va a decir
eso es tan rojo
eso es tan rojo
bueno
vamos a hacer
que solo ocurra una vez
vale
la animación
vale
y fíjate lo que ocurre
lo que pasa
cuando termina la animación
es que vuelve
a su estado
inicial
o sea
a su estado inicial
aunque ha terminado la animación
y esto es un error
muy común
que tenéis en muchas animaciones
porque decís
ostras
pero porque esto vuelve
a donde estaba
que no se que
que no se cuanto
esto es porque
como se tiene que comportar
el elemento
antes y después
de la animación
por defecto
lo que hace es
volver a su estado inicial
sin importar
la animación
los keyframes
pero a veces
lo que queremos
es decir
bueno
queremos que
si ha terminado la animación
y se ha vuelto
a la derecha
vamos a hacer algo
para que se quede
exactamente ahí
para eso
lo que
lo podemos utilizar
es una propiedad
que se llama
animation
fill
mode
ok
por defecto
sería none
que significa
que el elemento
no mantiene
ningún estado
también tendríamos
el backwards
que sería
que el elemento
al inicio
usa el keyframe
inicial
y luego tendríamos
el que nos interesa
en este caso
que sería el forwards
que esto lo que va a hacer
es que una vez
que se haga la animación
lo que va a hacer
es quedarse
al final
vale
fíjate
le damos
y ahora cuando termine
la animación
se queda
en el frame final
esto lo estamos diciendo
oye
el animation fill mode
es que tiene que ser
el forwards
podéis utilizar los both
y así lo que vais a decir
es que el elemento
al inicio
usa el keyframe inicial
y el elemento
cuando se termina
la reproducción
utiliza el keyframe final
así ya
normalmente
normalmente
no es
no se puede decir
siempre
no sé qué
pero muchas veces
vais a necesitar el both
porque vais a querer
controlar
cuando la animación
está al principio
al final
que realmente
no haya un cambio
sabes
que no de un salto
de que algo
cuando termina la animación
vuelva a su estado inicial
va a ser bastante raro
y también al principio
queréis que esté
en el sitio inicial
entonces normalmente
se utiliza el both
y a partir de aquí
vais a ver
que con los ejemplos
que haremos del scroll
y todo esto
vamos a utilizar el both
pero solo para que lo sepáis
esto lo necesitáis
en animation fill mode
para indicarle
que cuando
como se tiene que comportar
el elemento
fuera de la animación
tanto
antes de iniciarse
como después
de finalizar
y si lo que queréis
es que cuando
después de finalizar
se quede con el
keyframe final
o sea el estado final
que teníamos aquí
tenemos que indicarle
el forwards
y así nos aseguramos
que cuando termina
la animación
se queda
al final
si no lo que va a pasar
es que se va a resetear
y va a volver
al principio
ok
así que le ponemos
el both
y tal
ahora ya
otra vez
estamos viendo
muchas propiedades
el animation
duration
timing
direction
fill mode
no sé qué
de hecho el animation
es animation name
vale
que está utilizando
animation directamente
pero sea animation name
entonces todo esto
de nuevo
tenemos un atajo
no nos preocupemos
tenemos animation
que le tenemos que poner
el nombre
que se llama mover
mover
la duración
dos segundos
el timing function
que en este caso
es lineal
¿no?
cómo tiene que reproducir
la animación
que a qué velocidad
a lo largo
de los keyframes
luego tendríamos
también el delay
que en este caso
sería 0 segundos
aunque también
es opcional
o sea
podríamos evitar
poner el 0 segundos
y ponerle que
directamente
cuántas veces
se tiene que ejecutar esto
le podemos decir
que esto es infinito
también sería opcional
y si no
le podemos poner
la dirección
que en este caso
pues ya hemos dicho
que normal
pero también normal
es su valor por defecto
así que podríamos ponerle
el fill mode
que sería both
y ahora con esto
mira le vamos a poner
el infinite
aquí
y todo esto
que vemos aquí
todo esto
junto con el both
bueno el both ahora
no tiene mucho sentido
así que le voy a dejar
el both
para que sea como
el que teníamos antes
todo esto
estas cuatro
cinco líneas
que tenemos aquí
sería básicamente
una línea
con todo esto
de nuevo
esta sería la forma
correcta de hacerlo
porque ya cuando
ya tienes experiencia
pues ya sabes
dónde poner el nombre
y tal
pero es interesante
si estás empezando
lo pongas separado
para entender exactamente
qué estás haciendo
¿ok?
así que bueno
y esto ahora
¿por qué no funciona?
bueno no funciona
porque solo tenemos una vez
si queremos que se
se haga más veces
le ponemos un infinite
y ya está
ya lo hace infinitas veces
de nuevo
también interesante
tendríamos el steps
igual que teníamos el lineal
también aquí le podríamos poner
cuántos pasos tiene que hacer
imaginad que queremos
que la animación la haga
en cinco pasos
pues fíjate lo que hace
pim pim pim
vale en cinco pasos
y esto seguramente
si te suena
es con esto
podrías hacer un juego
de Game & Watch
el Game & Watch
a ver si os voy a poner
un vídeo de YouTube
para que veáis
con el Game & Watch
es justamente
este efecto
en el que
en el que está haciendo
a ver si lo encuentro
a ver
joder pero es que
estos son
esos son mentiras
esto
¿veis?
que tiene estas animaciones
un poquito
ta ta ta
pues eso sería un poquito así
ese tipo de animación
la podríais hacer así
pip pip pip
con los pasos
y lo podrías hacer
con el steps
y cuanto más le pongáis
pues más fluido sería
aquí está dando pasitos
muy pequeñitos
pero bastante animados
también tenéis que tener en cuenta
que podéis poner
más de una animación
aquí hemos puesto
una animación
de mover al Mario
vamos a quitarle el infinite
para que solo lo haga una vez
¿vale?
y lo que vamos a querer es
oye
primero vamos a querer
que se mueva
pero después
vamos a querer
agrandarlo
y para
vamos a hacer que esto sea lineal
y que tenga un delay
para que ocurra
después de moverlo
vamos a decir que tenga un delay
de dos segundos
y vamos a hacer que también
tenga voz
para que tanto el principio
como el final
se quede con los keyframes
del principio y del final
respectivamente
y podríamos añadir un keyframes
para hacer nuestro Mario
pues hacerlo un poco más grande
podemos decirle que al principio
esto es interesante
porque podemos decir
mira al principio
la escala es 1
al 25%
la escala
vamos a decir
que es 2
o 1.2
o 1.4
¿vale?
le podríamos decir aquí
que la escala
a ver que he puesto
que se me está quejando aquí
que he liado
que he liado
punto y coma aquí
y aquí
esto no necesita punto y coma
¿por qué se me pone esto en rock?
¡ah!
el nombre
joder
el nombre
se me había olvidado el nombre
vale
luego ponemos 50%
la escala
le vamos a poner 2
el 75%
volvemos con una escala
a 1.6
y al 100%
vamos a poner una escala
de 2
y entonces
si ahora
este agrandar
le hacemos un refresh
vamos a ver
que primero anda
y cuando termina
se hace grande
es un poco raro
como se hace grande
porque es una imagen
un poco extraña
pero bueno
solo para que
entendamos un poco
como hace esto
pero lo hace después
y podéis ir concatenando
todas las imágenes
o sea
lo podéis hacer
o sea
todas las animaciones
podéis hacer aquí
tantas animaciones
como queráis
las podéis ir separando
por coma
y decir
primero haces el mover
luego el agrandar
aquí con el delay
de 2 segundos
para que no se solapen
porque si aquí
no le ponéis un delay
vais a ver
que lo que ocurre
es que lo va a hacer
mientras está andando
¿vale?
y aquí lo que queremos
es que lo haga
después de andar
pues le tenemos que poner
un delay
que sea exactamente
lo mismo
que la animación
del principio
¿vale?
y por eso
pues está pasando
esto de aquí
así que ahora
ya sabéis
cómo hacer
dos animaciones
bueno
si lo bajo un poco
lo bajo un poco
la gente se me está
poniendo nerviosa
por
body padding
top
100 pixels
y así lo bajamos
un poquito
y queda ahí
¿vale?
¿cuánto pesa
hacer una animación?
pues nada
eso que estáis viendo
o sea
son bytes
entonces
son bytes
no tienen
un impacto
muy malo
de rendimiento
porque esto
se anima
con GPU
y funciona
mucho mejor
que si esto
lo hacéis con
javascript
o sea que
os recomiendo
un montón
que lo hagáis
con css
justamente
porque está animado
y el impacto
que tiene
es bastante
pequeñito
sigo pensando
que le faltan
saltitos a Mario
bueno a ver
no voy a hacer
el juego
y tal
pero bueno
steps
se va acercando
como a fps
claro
a ver
fps
serían
frames por segundo
mira steps
podrían ser
¿cuántos frames
por segundo?
si tú le pones aquí
un segundo
y aquí pones
10 pasos
significa
que esto sería
que vas a dibujar
10 frames por segundo
10 frames de la animación
por segundo
pues son un segundo
10 pasos
si quieres que fuesen
60 frames por segundo
sería
duración
un segundo
y tendrías
60 pasos
o sea que
sí
claro que sí
eso sería exactamente
lo mismo
para que sigas
manteniendo 60 frames
por segundo
tendrías que hacer
que si son 2 segundos
los steps
fueran 120
o sea que sí
efectivamente
si en la animación
metes una etapa final
repetida de la inicial
es lo mismo
que ponerle
fill mode
both
no es lo mismo
porque el both
lo que hace
es
cómo se comporta
antes de la animación
y cómo se comporta
después de la animación
no es exactamente
lo mismo
a lo que comentas
lo que comentas
sería que
inicia
y termina
igual
pero cuando tú
haces el both
lo que va a ocurrir
es que la animación
final
es la que se va a mantener
que puede o no ser
igual al principio
¿cómo podrías
posicionarlo
en un lugar específico?
eso
con position absolute
lo puedes poner
donde te la gana
entiendo que
para que vuelva
al punto de inicio
de lo suyo
sería añadir
otra animación
con delay
podríamos
lo podríamos mover
al revés
o también
como hemos comentado
antes
lo que podríamos hacer
por ejemplo
si solo fuese mover
podríamos poner
el alt
podríamos poner
que sea infinito
y alternate
alternate reverse
alternate
¿vale?
y así
pues estaría moviéndose
para un lado
y para el otro
en este caso
está haciendo el ease
por defecto
así que vamos a querer
que sea lineal
y ya está
ya lo teníamos moviendo
o le podemos decir
que tenga steps
se pone 15 steps
y así se mueve
para adelante
y para atrás
y esto sea con el alternate
si lo que quieres
que solo ocurra una vez
pues nada
le quitas el infinite
y cuando refresques
ahora una vez la animación
luego otra vez para atrás
y ya lo tendrías
ya lo tendrías
no sé si lo ha hecho
ah porque solo lo ha hecho
una vez
claro
teníamos que hacer
que lo haga dos veces
claro
queremos que haga dos veces
la animación
porque si le decimos
que solo lo haga una
solo la hace una vez
pero bueno
ves
la hace dos veces
será la de ida
y la de vuelta
no entiendo la diferencia
entre forward y both
ambos acaban en el mismo sitio
efectivamente
acaban en el mismo sitio
pero no empiezan igual
o sea
el both
lo que se está encargando
también es
que el elemento
antes de la animación
se vea igual
que al principio
¿cómo se podría poner
marios marios
y cada uno
con una animación random
que uno suba
al otro baje?
pues a ver
es un tema de trabajárselo
es un tema de hacer
más de un mario
y que cada mario
tenga animaciones
totalmente diferentes
o sea
tú aquí
si tienes dos marios
fíjate
dos marios
¿no?
ahora
están haciendo exactamente
lo mismo
mira
ahí están moviéndose
pero lo que podrías hacer
es decir
bueno
el image
el nf child
el segundo mario
vamos a hacer
que la animación
sea
no me acuerdo
como era
ay
la he quitado
ah no
está aquí
agrandar
¿vale?
pues vamos a poner
agrandar
que sea
un segundo
que sea
a ver
vamos a poner
que sea con steps
también
que sean 10 steps
¿vale?
y aquí lo que podríamos conseguir
ahora
si refrescamos
que cada mario
hace una cosa diferente
vamos a poner
que también
sea both
y vamos a poner
que el margen
de este
sea 100 pixels
ah bueno
claro
es que este
a ver
position
absolute
solo para que lo veamos
en otro sitio
que si no
no lo vemos
pero
ahora
mira
si ahora le damos
¿ves?
ahora están haciendo
cada uno una cosa
¿no?
o sea
ya está
lo único que tienes que hacer
es específicamente
hablar de uno u otro
y cambiar la animación
y ya está
y sin ningún problema
eres muy grande
gracias
me encantó la decisión
que tomaste
dejar el curro
para dedicarte a esto
gracias
he de decir
que se nota
que te mola
lo que haces
gracias también
eres toda una inspiración
para muchos
un abrazo enorme
muchas gracias
Saiko
muchas gracias amigo
gracias infinitas
¿puede una animación
hacer override de otra?
se puede hacer override
puedes cambiar la animación
sin ningún tipo de problemas
¿cómo afecta la animación
al rendimiento?
lo hemos comentado antes
de hecho es la segunda vez
que lo he comentado
esta es la tercera
y al final
el tema es que depende
de la animación
obviamente
pero las animaciones
si son normales
suelen tener
muy buen rendimiento
¿por qué?
porque están
aceleradas
por GPU
y vuestras tarjetas gráficas
por muy mala que sea
ya os digo yo
que animaciones CSS
las puede mover
sin problemas
¿vale?
así que no os preocupéis
por lo que podáis hacer
con el Mario
porque es que
si tenéis ejemplos
increíbles
de animaciones
animadas
con CSS
con la GPU
por ejemplo
3GS
que es una biblioteca
de Javascript
pero lo que hace
es utilizar
por debajo
la GPU
todo esto
ya me diréis
si funciona increíble
todo esto funciona increíble
pues
ya os digo yo
que vuestras animaciones
vuestras animaciones
que hacéis
con CSS
no son en 3D
no tienen este tipo de cosas
así que no os tenéis
que preocupar
con estas cosas
y vuestra tarjeta gráfica
integrada
también puede
sin ningún tipo
de problema
¿vale?
entonces
vamos con más cosas
porque
ahora que ya tenemos
todo esto
ahora que ya tenemos
todo esto
vamos a ver
animaciones
del scroll
que esto está
bien chulo
y es que
a ver amigos
vamos a abrir
otro codilink
a ver otra ventana
incógnito
modo porno
modo porno
porque la verdad
es que esto
es casi porno
ah vaya
se me ha quedado
el bueno del
mira
me voy a guardar
este url
por si acaso
venga
modo porno
amigos
mirad
imaginemos
claro
lo malo
es que necesito
un html
muy largo
a ver
necesito un html
muy largo
le voy a pedir
a chagpt
que me escriba
un html
muy largo
¿vale?
dame
un código html
muy largo
con títulos
y contenido
de texto
que hable
sobre
spiderman
y su
trabajo
en la ciudad
de new york
yo que sé
lo que sea
ok
si es que
pero lipsum
te da html
es que creo que
creo que tenga html
creo que tenga html
y todo esto
da igual
echa gpt
que trabaje
echa gpt
vamos a hacer que trabaje
para algo
¿vale?
entonces
mira
esto está perfecto
esto está perfecto
ya
si si
quiero html
porque quiero que tenga
elementos
y todo esto
y así
la vida heroica
de spiderman
en nueva york
los orígenes
de un héroe
spiderman
conocido también
como peter parker
pero que spoiler
es este
que le acabas de joder
le acabas de joder
toda la vida
a este chico
pero no ves que lleva
una máscara
pero menudo
menudo
madre mía
tío
le has cagao
tío
spiderman
conocido también
como peter parker
ya está
toma por culo
todos los años
intentando peter parker
que nadie se diese cuenta
que era spiderman
imagínate la tía may
doxeado a tope
imagínate
imagínate la tía may
leyendo este artículo
o sea
¿qué?
¿cómo peter parker?
o sea
le acabas de joder vivo
tío
ay dios
que bueno
peter parker
la madre que lo parió
con el spoiler máximo
muy bien
a ver
codilink
codilink nuevo
vale
esto por aquí
vamos con peter parker
venga peter parker
venga
pego todo este html
vale
todo este html
ahí a saco
y vamos a empezar
porque
ahora os voy a hablar
de cómo podéis hacer
animaciones
que funcionan
a través
del scroll
y está muy chulo
porque es algo muy nuevo
pero está bastante interesante
vamos a ver
vamos a explicarlo
a través de tres ejemplos
que son muy típicos
que normalmente se necesita javascript
y vas a ver que con esto
no vas a necesitar
ningún tipo de javascript
vamos a añadir aquí
un progres
para poner una barra de progreso
y ahora entenderás por qué
con todo este html
vale
con esa barra de progreso
vamos a dejar esto así
más o menos
y a esto
esto por aquí
esto por aquí
venga
la vida heroica de spiderman
en nueva york
que bueno
vamos a cambiarle el system
le ponemos este
este colorcito
perfecto
ahora
vamos a estilar
este progres
vamos a poner un progres
vamos a poner arriba
una barrita
que esté fijada
la vamos a poner arriba
del todo
vamos a por ahora
vamos a hacer que tenga
todo el ancho
vamos a poner que tenga
una color rojo
como spiderman
como peter parker
le vamos a poner
una altura de 1m
vale
y vale
veis que hay un margen
eso es por culpa del body
vamos a poner margen 0
y padding 16px
bueno claro
si le pongo 16
ya la hemos cagado
entonces vamos a poner esto
vamos a poner todo esto
a través de un main
para que no nos falle
oye me parece muy bien
que me ha dado semántico
bastante semántico
vamos a poner aquí
un padding
para separar
así
perfecto
vale
entonces tenemos aquí
una barra de progreso
por ahora roja
ahora la arreglamos
vale
le vamos a hacer una animación
porque quiero que esta barra roja
se vaya haciendo
o sea
vaya haciéndose más grande
conforme voy haciendo
scroll en el artículo
esto es una cosa
que habréis visto
mil millones de veces
y que muchas veces
se hace con alguna biblioteca
de javascript
que detecta
o escucha el scroll
hace unos cálculos
muy raros
y a partir de esos cálculos
lo que hace es decir
vale
pues ahora tengo que dibujar
este tanto por ciento
¿qué es lo que vamos a hacer?
bueno
lo que vamos a hacer
es empezar con el width
ahora veis que
si le pongo 50
vale
pues sería la mitad
entonces vamos a empezar
por cero
porque estamos arriba del todo
y queremos que esa barra
se vaya haciendo
más pequeña o más grande
dependiendo del scroll
de nuestra página
vamos a añadir
una animación
que le vamos a llamar
progress grow
vale
y esto lo que vamos a decir
es que va a empezar
con el width
a cero por ciento
y su valor final
vamos a poner aquí
el valor final
cuando llegamos al final
del scroll
obviamente vamos a hacer
que sea del cien por cien
muy bien
ahora
obviamente
la animación
que queremos utilizar
es la que hemos creado
progress grow
vamos a decir
que sea automático
porque claro
no sabemos
cuántos segundos
tiene que durar esto
no lo sabemos
entonces
tiene que ser automático
porque va a depender
de otro tipo
de reproducción
que no es el tiempo
o sea
la línea del tiempo
no son los segundos
es otra cosa
y es el scroll
del usuario
la línea del tiempo
en lugar de ser tiempo
va a ser
el progreso
del scroll del usuario
por lo tanto
le vamos a decir
que sea automático
y
en lugar de decirle
que la animación
va a tener algún tipo
de función
vamos a decir
que sea lineal
porque cuando el usuario
está scrolleando
es lineal
así que decimos
que es lineal
ahora bien
como le indicamos
que realmente
lo que necesitamos
es escuchar
el scroll
del usuario
pues hay una propiedad
que es nueva
que no lo tienen
todos navegadores
por ahora
y se llama
animation timeline
y animation timeline
lo que justamente
te va a indicar
es que
si por defecto
como línea del tiempo
se utiliza el tiempo
lo que te va a permitir
animation timeline
es utilizar
cosas diferentes
para hacer
esa evolución
de la animación
y en lugar
de utilizar
el tiempo
vas a poder utilizar
por ejemplo
el scroll
o por ejemplo
cuánto se ve
de un elemento
en el viewport
que también lo vamos a ver
en un ejemplo
muy chulo
entonces
animation timeline
fijaos que ya tiene
un 64% de soporte
que tampoco está mal
y
nos quedaría
safari
que por lo que tengo
en cuenta
por lo que está leyendo
ahí en
isus y tal
parece eso están pensando
pero firefox
que también le falta
ya lo tienen experimental
y en las siguientes versiones
lo van a activar
fijaos que
ves que está aquí
como con un flag
y aquí con numeritos
pues ya lo podéis activar
no está soportado
por defecto
pero lo podéis activar
en modo experimental
o sea
que va a llegar pronto
aún así
que sepáis
que de animation timeline
si por lo que sea
lo queréis utilizar
hay bibliotecas
que te da
la posibilidad
de añadirlo
con javascript
que mientras
por ejemplo
un navegador
que por lo que sea
todavía no lo soporta
pues que puedas utilizarlo
ves aquí lo podrías utilizar
gracias a utilizar
un polyfill
un polyfill
es una biblioteca
que simula
una funcionalidad
que ese navegador
todavía no tiene
y esto es una cosa
muy típica
en el mundo
de desarrollo web
pero si por lo que sea
lo que se utiliza
en tus desarrollos
que sepas
que tienes una forma
de asegurarte
que lo vas a poder hacer
y funcionar
en todos los navegadores
independientemente
de el soporte que tenga
obviamente
funcionará peor
vale
es normal
funcionará peor
si tienes que cargar
el polyfill
porque no lo va a hacer
100% nativo
pero va a soportar
el tiempo
¿por qué?
porque el día de mañana
podrás quitar el polyfill
y ya está
y no tendrás ningún tipo
de problema
¿ok?
entonces
dicho esto
ya tendríamos esto
pero le tenemos que decir
qué línea del tiempo
la que tiene que utilizar
o sea
animation
timeline
¿vale?
a partir de qué
tenemos que decir
si progresa o no
progresa la animación
pues lo vamos a hacer
a través del scroll
del scroll del usuario
pero le tenemos que indicar
dos cosas
una
de qué elemento
qué elemento es el que queremos
ver el scroll
porque ojo
no sólo podemos escuchar
el scroll
de toda la ventana
sino que podríamos
escuchar el scroll
por ejemplo
de un elemento
contenedor
¿vale?
o un elemento más pequeño
y con esto se pueden hacer
mil millones de maravillas
pero por defecto
el más interesante
sería la raíz
¿no?
el
este
el de la raíz
y luego
opcional
en este caso
le tenemos que indicar
qué
scroll es el que queremos
escuchar
si el vertical
o el horizontal
o sea
el que va de bloque
que en nuestro caso
sería vertical
o en línea
que sería
el formato texto
sería horizontal
así que
debería ser block
pero el block
si no me equivoco
es el valor por defecto
entonces ya no tenemos
que utilizar
pero si te quieres asegurar
pones block
y ya está
entonces fíjate que ahora
conforme voy
haciendo scroll
¿vale?
fíjate
que ya tenemos
la animación
claro se está animando
la barra
y está recuperando
automáticamente
cuánto
ancho
tiene que dibujar
porque lo que le estamos diciendo
es que el animation timeline
o sea la línea del tiempo
de nuestra animación
es que
si el scroll es cero
vamos a estar en este punto
en el from
en el punto
cero por ciento
¿vale?
pero cuando terminamos
de scrollearlo todo
vamos a estar al final
que por lo tanto
va a estar en el cien por cien
y entre el cero por ciento
y el cien por cien
automáticamente
como ya hemos visto
como funcionan las transiciones
y las animaciones
el navegador
va a saber
cuál es
el
o sea la parte
o sea
tienes que calcular
en qué parte
se ha quedado
no tienes que poner tú
constantemente
entonces conforme vas scrolleando
va detectando
para acercarse al cien por cien
cómo tendría que animarse
y ahí lo tendríamos
y tendríamos
sólo con css
con cero líneas
de javascript
estaríamos teniendo
una animación
del scroll
que está
súper chula
o sea
estamos aquí
scrolleando
y ya estamos animando
con css
y nos ha costado
¿cuánto?
cuatro líneas de css
oh yeah
cuatro líneas de css
ahora bien
esto está muy chulo
pero hay más
hay más
porque obviamente
entiendo que esto
os puede gustar
pero
le falta un poco
esto es un ejemplo
muy sencillo
pero que os da
para la vida
de hecho
vamos a ver un ejemplo
que es mucho más
diría yo
como más real
con vuestros porfolios
que tenéis un montón
de porfolios
que estoy seguro
que este tipo de cosas
seguro
que os van a llamar la atención
mira
voy a cambiar
voy a ir a otro sitio
me voy a ir a una ventana
incógnito
codi.link
me voy a copiar
un html que tengo
con un montón de imágenes
una chica por aquí
un montón de gente
otra chica
otra chica
la chica me sale
porque los he pillado
de unsplash
en modo random
solo hay una imagen
que he pillado
que es esta
con mi amigo
no lo veis
bueno luego lo veis
el tema
tenemos todo
todo este html
que son unas imágenes
en una section
y tenemos un título arriba
vamos a utilizar
lo que hemos aprendido
para darle un poco
de estilo a esto
voy a ir con los estilos
a fuego
vamos a ir aquí
el body
vamos a poner
el fondo de color negro
vamos a quitarle el margen
el font family
vamos a utilizar
el system UI
por aquí bien
el section
tengo un section
que es el que envuelve
las imágenes
fíjate que tengo aquí
un section
perfecto
pues el section
vamos a decir
que utilicemos
dos columnas
vamos a ponerle
un padding
de 16 píxeles
por arriba
y por los lados
de 32 píxeles
y vamos a dejarle
una separación
entre columnas
que sea de 32 píxeles
y ahora
por las imágenes
vamos a hacer que las imágenes
cada una de las imágenes
a ver
que esto es lo correcto
sería section image
pero bueno
más o menos ya entendéis
no es importante
ahora como estiramos esto
esto es para el ejemplo
vamos a ponerle un poco
de border radius
para que quede bien
fachero
vale
ajustamos aquí el auto
vamos a poner
un margin button
para separación
vertical
y ya tendríamos
algo así
donde tenemos
las imágenes
esto no sé
si lo sabíais
pero podéis poner
columns 2
y esto se hace
dos columnas
lo que pasa
es que tenéis que tener en cuenta
que este tipo de columnas
el como se está haciendo
de izquierda
no funciona de izquierda a derecha
o sea
esta por ejemplo
sería la primera imagen
y esta que ves a la derecha
no es la segunda imagen
la segunda imagen
la tienes aquí
pero igualmente
hay veces que este columns
puede tener sentido
siempre y cuando
no te importe tanto
el orden en el que se ven las cosas
porque claro
si tú esperas
que la segunda imagen
se vea a la derecha
que tengas en cuenta
que no es así
vale
la segunda imagen
la tienes justo aquí
lo cual es un poco raro
pero bueno
al menos lo tenéis
lo podéis hacer en dos columnas
y se ve bastante bien
que más
bueno
tenemos el h1
vale
tenemos el h1
que hemos dejado arriba
con esto de curso de css
animaciones
vamos a poner aquí
color white
para que lo veamos
color white
text align center
vale
vamos a poner un font size
bueno
vamos a dejarle el font size
que tiene
padding de 16 píxeles
para que tenga un poquito
más de separación
margen
le ponemos cero
el margen que tiene
por defecto el h1
vamos a decirle
que ocupe el 100%
vale
para que se nos centre bien
que no sé si hay alguna cosa
ahí que tiene algún
porque creo que no
no sé si está bien centrado
a lo mejor sí
no lo sé
alguna cosa a lo mejor
ahí que no está
de todo bien centrado
pero no es importante
eso no es lo importante
lo importante es
vamos a poner que tenga
un position sticky
que ya sabéis
que esto lo aprendimos
el otro día
y así
se nos va a quedar el título
siempre arriba
vale
se ha quedado
sería muy parecido
a un fix
en este caso
vale
o sea que podéis poner un fix
pero claro
el problema del fix
es que no ocupa espacio
y al principio
veis daría este salto
en cambio el sticky
al principio
sí que ocuparía espacio
por eso quedaría bien
y luego se quedaría pegado
o sea que importante
ahí la diferencia
vale
entonces ya teníamos
todo esto
con el color
también
no sé si el top
no sé si debería
poner el h1
que el left sea cero
bueno
veo que se ve igual
así que no hay ningún problema
hasta aquí bien
pero
imaginad
y esto es una cosa
que he visto
que hacéis muchas veces
en vuestros porfolios
vale
que lo que queréis
es que cuando hace scroll
el usuario
la navbar
cambie
ya sea de color
ya sea el título
ya sea lo que sea
y entonces lo que queréis
es animar
la navbar
para cambiarla
y que se integre mejor
con la página
y utilicéis un montón
de javascript
y he visto
verdaderas salvajadas
por ahí
pero bueno
vamos a poner aquí
yo que sé
enhance header
vamos a ponerle
vale
la animación
es que mejoramos el header
y vamos a ponerle
directamente el destino
el destino
es que vamos a querer
un background
que sea blanco
como blanco
pero con una opacidad
vamos a decirle también
que el backdrop
va a tener como un blur
para que de esta forma
como que se difumine
lo que tiene detrás
vamos a hacer
que la fuente
sea más pequeña
para que no ocupe
tanto espacio
ves que aquí
cuando hace scroll
ves ocupa demasiado espacio
igual sería interesante
que no ocupase tanto
y le vamos a cambiar
el color también
de la fuente
porque básicamente
como vamos a poner
ese fondo blanco
pues para que realmente
tenga un cambio
y ahora
vamos a decirle
oye
quiero utilizar la animación
esta de enhance header
quiero que tenga
una animación lineal
y quiero que sea
both
esto mira
ya me está enseñando esto
quiero que sea both
y para que funcione así
claro
el problema es que ahora
como la duración
como la duración
claro
si le quito el both
salde así
si pongo el both
ya se queda como al final
¿por qué?
porque la duración
que tenemos por defecto
es cero
pero claro
nosotros no queremos
tener ningún tipo de animación
de tiempo
sino que queremos
una animación
que sea por el scroll
y como hemos visto antes
vamos a utilizar el scroll
con el elemento root
y el block
¿vale?
hasta aquí
perfecto
vamos a ver ahora
cómo funciona
vale
ahora funcionar
funciona
y fíjate
que hace esto
hace esto
y se integra súper bien
pero alguien me dirá
hay un problema
y es que la animación
tarda mucho
o sea
lo que está tirando
de scroll
claro
hasta que no llegas
al final
no llega
al final
de la animación
y es un poco rollo
porque fíjate
que tienes que
bajar un montón
para que se llegue
a integrar el header
entonces
la pregunta del millón
que seguro
que alguien me ha dicho
es
oye
pero ¿qué pasa?
¿por qué no
podemos hacer una cosa
que sea más rápida?
a ver
hay diferentes formas
de hacer esto
aunque a mí
la que me gusta
especialmente
¿por qué block?
block
como he explicado antes
es porque
los bloques
van en vertical
en nuestro sentido
de escritura
y de lectura
de texto
la en línea
para nosotros
es de izquierda
a derecha
en horizontal
y los bloques
los ponemos
uno encima del otro
de arriba a abajo
entonces
nosotros lo que queremos
escuchar en este caso
sería
el scroll
vertical
o sea
cuando hacemos
vamos de arriba a abajo
por eso
le ponemos
root block
igualmente el block
es el que es por defecto
así que si lo queréis quitar
lo podéis quitar
lo que podemos hacer con esto
es ponerle
un rango
a la animación
le podemos decir
que el rango
de la animación
en el eje
de línea
es cero
y en el eje
del bloque
en el eje vertical
podemos decirle
que llegue
hasta los 200 píxeles
por ejemplo
entonces
lo que vamos a hacer
con esto
fíjate
es que la animación
va a ir de cero
a 200 píxeles
de scroll
y por lo tanto
va a ser mucho
más rápido
así que
en los 200 primeros píxeles
del scroll
se va a animar
y luego va a quedar
ya la animación
en el estado final
lo que estamos diciendo
es bueno
el scroll
que estamos viendo
aquí
en la línea del tiempo
lo único que quiero
es que te quedes
con los primeros
200 píxeles
que toda la animación
la hagas
en los primeros
300 píxeles
claro
cuanto menos pongáis aquí
si ponéis 100 píxeles
vais a ver
que se anima
mucho más rápido
si ponéis
1000 píxeles
pues vas a ver
que esto
se anima
mucho más lento
así que
es bastante clave
que pongáis un número
que tenga bastante sentido
para que haga una animación
que se integre
bastante bien
en nuestra página
¿vale?
en este caso
pues fijaos
estamos haciendo
que el navbar
cambie totalmente
su estilo
que se integre
que tenga ahí
un efecto blur
súper chulo
y lo hemos hecho
pues con
menos de 10 líneas
de código CSS
y todo con GPU
todo animado
perfectamente
¿está bien usar píxeles?
¿no sería mejor
todo con tantos por ciento?
depende
pero en este caso
podría tener sentido
hacerlo con píxeles
no pasa nada
o sea
ni está bien
hacerlo con tantos por ciento
ni está bien
hacerlo todo con píxeles
todo tiene su
su sentido
¿vale?
se puede poner
infinite
es que el infinite
ya hemos visto
que es el por defecto
o sea
si le quitas el rango
bueno es que no sé
a qué te refieres
con infinite
pero no se puede repetir
infinitas veces
el scroll es limitado
no puede
no puede hacer infinito
la animación
¿no?
para que se scrollee
y se vayan mostrando
las imágenes
que van apareciendo
poco a poco
bueno eso lo vamos a hacer
ahora a Tecnorex
de hecho os lo he comentado
¿eh?
no sería bueno un porcentaje
porque variará
dependiendo el largo
de la página
claro
es que sería un poco complicado
es como que no lo estarías
controlando también
si pones un tanto por ciento
¿no?
además del scroll
¿qué más puede usar el timeline?
el
ahora lo vamos a ver también
pero además del scroll
podemos utilizar el view
podemos indicar
cuando un elemento
está en el viewport
detectarlo
y entonces
según si está en el viewport
pues cambiar el estilo
de ese elemento
lo cual está bastante chulo
¿eh?
en mobile funciona igual
funciona igual
en los navegadores
que funcionen
¿qué tal con Guillermo San Francisco?
súper bien
míralo
qué felices estábamos ahí
fuimos a correr
y tremendo
y si se utilizan las medidas
M y REM
pues fatal
porque no vas a saber exactamente
a qué te estás refiriendo
a ver
muchas veces
leéis una cosa
lo convertís en un mantra
y no entendéis realmente
por qué se hacen
el tema de los M
y los REM
muchas veces
tiene sentido en las fuentes
porque sabes
que son relativos a algo
entonces
hay veces
que la gente se vuelve loca
y pone márgenes
con M
con REM
y tal
o con tantos por ciento
y a ver
todo tiene su sentido
en una cosa en concreto
y no de utilizar
siempre EMS o REM
o sea que cuidado
con estas cosas
¿vale?
que a veces se lea
no utilices Pixels
utiliza REM
y entonces
todo el mundo se pone
margin
margin
dos REM
y luego también
o un 1%
o sea
sí es una cosa
loca
tenga cuidado
o sea
entender por qué
por qué se utiliza
ese tipo de cosas
¿vale?
entonces
esto lo habéis entendido
hemos hecho un navbar ahí
buenísimo
¿vale?
hemos hecho un navbar
maravilloso
¿ok?
vale
se podría volver
al estado cero de animación
sin volver al top
con solo hacer scroll up
un poco
no porque tiene que ser
como que ir hacia el otro
o sea no tendría sentido
sería muy rara
la experiencia del usuario
sería muy rara
sería muy raro
que cuando bajas
el scroll sea de una forma
pero cuando subes
sea de otra
sea un poco rara
la verdad
esto es lo que hace
la librería de animaciones
por detrás
no
la librería de animaciones
a día de hoy
lo que lo hacen
es realmente
con un poquito de javascript
entonces
vamos con
más cositas
¿vale?
vamos con más cositas
porque imagínate
claro
tienes una galería de imágenes
y dices
ostras una galería de imágenes
a mí sabe lo que me gustaría
conseguir que conforme hago scroll
vayan apareciendo las imágenes
con un fade in
y eso sería
no me digáis que eso no sería increíble
para lamerlo
estaría eso para lamerlo
imaginad
poder ir haciendo scroll
y que van apareciendo
con una animación
en las imágenes
y todo con css
¿os imagináis que eso fuese capaz?
pues dejad de imaginar
que lo vamos a hacer
venga
vamos a ver
vamos a poner
vamos a hacer unos keyframes
por aquí
keyframes
¿vale?
vamos a hacer unos keyframes
y vamos a poner por ahora
keyframes
vamos a poner reveal
y vamos a hacer que empieza
con una opacidad de 0
porque al principio
no queremos que se vea la imagen
y vamos a poner
una opacidad final
de 1
¿vale?
porque lo que queremos
es que haga un fade in
que al principio no se vea
y que luego aparezca
¿vale?
eso va a ser nuestra animación
sencilla
pero bueno
mágica
igualmente
lo que podemos hacer aquí
es animación
vamos a decir reveal
le vamos a decir
que tiene que ser lineal
y también
que tiene que funcionar
hacia los dos lados
o sea
cuando termina la animación
se tiene que quedar
con su estado final
porque es que si no
no
¿veis que ahora
todo tiene sentido
todo lo que hemos visto
en la clase?
es que vamos desde 0
pero joder
es que todo tiene sentido
que luego
no es que esto
claro
yo quiero saber
pero claro
que tienes que saber
como
para qué sirve el both
porque si no
luego te pierdes
entonces hemos visto
el animation timeline
pero claro
hemos visto el scroll
pero el scroll
lo que está pasando
es que me aparecerían
todas las imágenes
de golpe
¿no?
me aparecerían
todas las imágenes
de golpe
cuando haces scroll
aparecen todas las imágenes
de golpe
no tiene sentido
no es la forma
en la que queremos
que funcione
porque lo que me gustaría
es que fuese
para cada uno
de los elementos
bueno
pues la maravilla
de CSS
es que tenemos
otro método
que está maravilloso
que se llama
view
que lo que nos permite
¿vale?
view
lo que nos permite
es que solo sea
cuando está visible
ese elemento
ahora tenemos otro problema
pero al menos
lo que podemos ver
es que ocurre
para cada uno
de los elementos
¿vale?
tenemos dos problemas
uno
que como hemos jugado
con el opacity
el opacity
si viste mi clase
del curso de CSS
crea un stack
stacking context
¿vale?
y por lo tanto
el z index
se vuelve un poco loco
por lo tanto
queremos asegurarnos
que el h1
tenga un z index
mayor
que el otro
¿vale?
le puedes poner uno
y ya funciona
y ahora
ya eso
lo tendríamos
más solucionado
ahora sí que funcionaría
perfectamente
hasta aquí bien
pero tenemos otro problema
y es que fíjate
que esta imagen
tiene más la opacidad
porque lo que le hemos dicho
con el timeline view
es cuando el elemento
esté en la vista
completamente
¿vale?
cuando ya esté en la vista
completamente
cuando haya pasado
el 100%
vamos a ponerle
la opacidad al 100%
claro
fíjate en esta imagen
conforme voy acercándome
es que entonces
cuando se acerca
arriba del todo
es que se ve
la opacidad perfecta
pero claro
cuando está aquí abajo
se ve muy raro
tenemos que arreglar
el rango
para que realmente
lo haga antes
¿no?
para que quede mejor
la imagen que tenemos
ya aquí
se debería ver bien
entonces
tenemos que trabajar
otra vez
con animation range
le tenemos que indicar
en qué rango
tiene que trabajar
y le vamos a decir
oye
cuando haya entrado
un 20% ya
de la imagen
¿vale?
cuando empiece a entrar
ya un 20% de la imagen
va a ser el inicio
y el final
el final
de nuestro
de nuestra animación
va a ser cuando ya
estemos cubriendo
en el viewport
un 30%
de ese elemento
entonces lo que vamos a
lo que va a pasar aquí
es fíjate
empieza ya
la animación
cuando está en un 20%
fíjate
cuando empieza
¿ves aquí que no se ve nada?
aquí no se ve nada
pero cuando ya hay un 20%
en el viewport
de ese elemento
¿vale?
ya hay un 20%
empieza la animación
y cuando ya hay
un 30%
de ese elemento
ya estaría al 100%
cuando ya ha cubierto
un 30%
de ese elemento
ya está al 100%
y ahora tiene
bastante más sentido
ahora ya sé que estamos
haciendo un fade in
y además podemos ver
cómo se van mostrando
cada una de las imágenes
vamos viendo
como cada una
conforme se va acercando
van apareciendo
y ya está
aquí podemos jugar
para ir viendo
cuál es el que tendría
más sentido
si queréis que sea
un poco más dramático
¿vale?
¿ves?
ahora sería un poquito
más dramático
tendría más tiempo
para hacer la animación
se tendría que acercar
todavía un poquito más
pero lo podemos ir trabajando
y esto incluso
claro
yo estoy haciendo un fade in
pero aquí
el límite
es vuestra imaginación
así que aquí
por ejemplo
podríamos poner
un translate
de 0
a 100 píxeles
que empiece así
que la opacidad
podría empezar
podría terminar antes
podríamos cambiarlo
y aquí un translate
para hacer un fade in
con un slide in
¿vale?
lo que vamos a hacer
en el eje y
vamos a moverlo
y así lo que hacemos
fíjate
que vamos scrolleando
y se va moviendo
de abajo para arriba
y se van colocando
y esto lo podéis llevar
a lo que os dé la gana
lo podéis llevar
donde os dé la gana
por ejemplo
vamos a hacer que aquí
al principio
tenga un scale
que sea muy pequeño
pero que cuando llegamos
aquí al final
pues se escale
a su tamaño
correcto
y aquí veo
que me ha ignorado
perfectamente
¿por qué me ha ignorado
el scale?
a ver
si lo hacemos grande
porque veo
que no me ha pillado
el scale
¿no?
a ver
.1
ay coño
porque lo he puesto
donde no es
porque lo he puesto
donde no es
aquí este
este no es
este no es
este no es
es que es aquí
claro
lo he puesto en el otro
en el header
scale .5
¿vale?
entonces fijaos
que ahora además
pues también vais haciendo
un zooming
o sea
el futuro está aquí
¿ok?
el futuro está aquí
fijaos
claro
hay que tener cuidado
con esto
porque fijaos
que aquí
como no
esto no llega a cumplir
con que se cubra
totalmente
el elemento
el problema es que
no termina de hacer
el scroll
y por eso
no lo vemos del todo
¿vale?
entonces
pero normalmente
ahí tendríamos un footer
podríamos ponerle
un padding final
a todo el body
y lo veríamos
correctamente
pero fijaos
en un momento
la de cosas
que hemos hecho aquí
para animar
una galería
en la que
y además
vais arriba y abajo
o sea
podéis hacer que
funcione hacia los dos sitios
¿vale?
podéis hacer que vaya
funcionando a los dos sitios
y fíjate
vas poniendo
vas poniendo
y una
mirad
mirad este rendimiento
maravilloso
60 frames
para chuparlo
esto está
para lamerlo
está
¿es como hacer un scroll reveal
solo con CSS?
hombre
sí
sí
totalmente
total
fijaos
que pocas líneas
de código
hemos hecho esto
o sea
que pocas líneas
de código
hemos hecho aquí
que no hemos necesitado
hacer absolutamente nada
o sea
en un momento
hemos hecho que esto funcione
sin necesidad de javascript
ni nada
o sea
solo con CSS
en unas pocas líneas de código
lo tenéis aquí
y ya lo tenéis
para que nos fijemos
son tres líneas
y los estilos estos
son
yo que sé
pues 10 líneas más
15 líneas
de forma totalmente declarativa
con una animación
con un rendimiento
buenísimo
buenísimo
y sin tener que instalar
ningún tipo de biblioteca
entendiendo a cada paso
lo que estábamos haciendo
así que
ahí lo tenéis
si os ha gustado
lo que hacemos
compartid este contenido
suscríbete
ayúdame a seguir creando
contenido como este
que esto
no hay curso
en todo internet
que haya visto esto
yo esto
me he chupado
solo para que sepáis
oye pero ¿dónde aprendes
todas estas cosas?
bueno
para que sepáis
esto
por si os interesa
a ver si lo encuentro
scroll
reveal
timeline
esto yo me he estado leyendo
la información esta de
ah no
encontraré
scroll
demos
timeline
a ver si lo encuentro
ah no
encontraré la página
pero bueno
alguien seguro que me la pasa por ahí
el tema
que esto es porque
me he estado chupando
toda la documentación
que hay
en las páginas
y blogs
y los vídeos
y todo esto
de la gente de Google
que obviamente esto
lo tienen bastante
bastante bien
bastante bien
documentado
por suerte
y si lo encuentro
porque aquí
hay una página
para que os recomiendo
de hecho
la página de Angular
veis esto que hay por aquí
esto se podría hacer
perfectamente
con todo lo que os he enseñado
todo esto que veis aquí
lo podríamos llegar a hacer
o sea que
para que os hagáis una idea
entonces
en la página esta de Google
que sepáis que tenéis
un montón de demos
muy chulas
en las que tenéis
ejemplos
tremendos
¿vale?
tenéis el ejemplo
típico del Progress Indicator
ellos lo hacen
de una forma diferente
porque alguien me dirá
te lo has copiado
pues no me lo he copiado
listo
no me lo he copiado
porque ellos lo hacen
de una forma diferente
ellos utilizan
scroll timeline
y lo guardan
en una custom property
que es una forma diferente
esto
el scroll timeline
no lo he explicado
a mí me parece
una forma un poco
más complicada
y que se entiende
un poco peor
y yo lo he intentado
lo he preferido
explicarlo de una forma
diferente
luego también
por ejemplo
pues para hacer
scroll de columnas
y que unas vayan
a rever que otras
esto lo podéis hacer
con todo lo que hemos aprendido
el hecho de dejar
fija una car
con toda la altura
y que cuando bajéis
esto es algo parecido
a lo que hemos hecho
aunque ellos también
lo hacen de una forma
un poco diferente
hay un montón
y hay cosas increíbles
este ejemplo
de stacking cars
esto también está hecho
con lo que hemos visto
y es brutal
al final
lo que os recomiendo
es que miréis
la documentación
también la tenéis en MDN
y que ahí podéis aprender
practicar
probar
y todo esto
vamos a ver
también
suscribete
para ver