Curso intermedio de CSS: crea hermosos sitios web desde cero

1. CSS 201: CSS. intermedio. Crea sitios web hermosos desde cero.: Bienvenido a CSS al 200 un CSS intermedio. En este curso, estaremos abordando piezas más grandes y complicadas de CSS. Eso significa que ya debes tener una comprensión básica de CSS. En este curso, vamos a estirar un poco más nuestras mentes y mirar cosas como contorno versus fronteras. Los elementos de compensación fueron posicionamiento especializado, mirando selectores avanzados, explorando pseudo-selectores, pseudo elementos, gradientes, transiciones, animaciones. Hola, me lo estoy diciendo Caleb. Enseño a más de 300 mil estudiantes cómo codificar a nivel mundial y llevo más de 20 años haciendo sitios web. He trabajado con gente como Arctic Research Foundation, nasa, y Mozilla, junto con dos firmas de desarrollo web de nivel superior en todo el mundo. Una vez más, mi nombre es Caleb telling y bienvenido a CSS 201. 2. La propiedad de visualización: Si tomaste CSS uno a uno, ya deberías conocer los tipos de visualización 3D, inline, inline, block y block. En este video, sigamos adelante y demos a prueba la diferencia entre los tres porque esto es vital saberlo para el resto de este curso. Por lo que tengo a mi editor abierto aquí. Y fui a File Open, y luego abrí una carpeta llamada Less Than files. Y voy a crear un nuevo archivo aquí llamado index.html. Y aquí dentro, hagamos HTML colon cinco, hit tab, y crea su página para nosotros. Y llamemos a este documento de trabajo CSS 201. Ahora, aquí hay tres tipos de visualización diferentes. Y lo que voy a hacer es crear un div y micrófono realmente crear tres divs y mostrarte las diferencias entre ellos. Entonces div, esta es la primera copia esa línea. Esta es la segunda copia esa línea. Y todo lo que estoy haciendo aquí y VS Code es controlar C, controlar V. Y parece copiar toda la línea hacia abajo una para mí. Y entonces este es el tercero. Ahora voy a ir a mi navegador y voy a ir a File Open. Y voy a abrir index.html. Y bien, vemos una página aburrida, aburrida, aburrida, aburrida. Pero lo que podemos hacer aquí es simplemente demo esto rápidamente. Y de nuevo, esto es súper vital saber. Entonces tenemos tres divs aquí. Vamos a seguir adelante y crear un nuevo selector. Vamos adelante y todo lo que hice ahí fue hacer clic derecho, inspeccionar y hacer clic en una de estas dibs. No importa cuál y haga clic en este pequeño botón por aquí que dice nueva regla de estilo. Voy a hacer esto más grande también. Haga clic en este botón. Me va a dar automáticamente un div. Y podríamos cambiar el tipo de pantalla. Ahora no podemos cambiar esta porque esa viene por defecto con sus cejas, pero podemos sobrescribirla y podemos decir que el bloque de visualización es lo que es actualmente. Vamos a darle a esto un borde sin embargo, borde un píxel rojo sólido. Y así es como se ve el bloque de visualización. Y esto es en vasto contraste para mostrar en línea, donde todos los elementos están uno al lado del otro. Y entonces podemos hacer bloque en línea, que realmente no parece que hiciera mucho. Se está moviendo hacia abajo Justicia y solo un toque ahí. Y lo que el bloque en línea nos permite hacer es relleno de diez píxeles. Y podríamos hacer margen cinco píxeles si quisiéramos cinco píxeles. Ahora podemos hacer un margen, podemos agregar un margen, podemos agregar un relleno con un elemento de bloque también. Y podemos activarlos y apagarlos si quisiéramos. Ahora, una cosa a tener en cuenta es que en línea se ve un poco diferente al bloque inline-block. Entonces podemos hacer bloque en línea, en línea y simplemente moviendo esto hacia arriba y hacia abajo. Solo estoy alterando esto con mis teclas de flecha arriba y abajo. Y así esto está en línea, esto es inline-block. Y es importante notar esas diferencias porque vamos a estar usando mucho bloque en línea en este curso. Y esto es bloque. También vamos a estar usando esto. Entonces estos son los tres tipos de visualización con los que vamos a empezar en este curso. Y es absolutamente vital que los conozcas porque vamos a estar trabajando con cosas como flexbox, Flex Box, y grid. Y esos no son fáciles de envolver nuestras cabezas, así que necesitamos estar bastante familiarizados con eso y lo cubrimos en CSS uno a uno. Si estás en ese curso, definitivamente siéntete libre de volver a la pantalla menos que NCSS uno a uno, donde cubrimos esto un poco más en profundidad. 3. IMPORTANTE: el modelo de caja: De acuerdo, echemos un vistazo al modelo de caja. Esto es algo que no cubrimos en CSS 101, que realmente quería, pero creo que fue un poco para avanzar. Entonces el modelo de caja es esta idea de que tienes una caja y puedes tener relleno y margen, y depende de las reglas de tu navegador sobre cómo calcular el ancho de ese elemento. Entonces si creamos un div aquí y esto se llama div class box, y eso es todo lo que vamos a hacer. Voy a guardar eso. Ven a esta página y ya preabro esto antes de grabar esta lección. Entonces si voy a inspeccionar, voy a ver que en mi cuerpo tengo caja y puedo agregar una clase aquí para caja de puntos. Y agreguemos un poco de estilo. Por lo que bordea un píxel, rojo sólido. Demos a esto una altura de 300 píxeles, un ancho de 300 píxeles. Y cambiemos ese borde en lugar de un píxel. Hagamos como cinco píxeles. Y ahora cuando baje aquí, cuando me desplace todo el camino hacia abajo, podemos ver que son 300 por 300. Ok, genial. Ahora si quisiera, podría agregar un relleno aquí, y podría decir relleno 30 píxeles. Y te das cuenta de cómo cuando enciendo y apagando esto, hace que mi caja sea más grande. Y eso no es necesariamente lo que quiero porque cuando agrego relleno 30 pixeles, esta caja ya no es de 300 pixeles. Tiene 370 píxeles de ancho. Tiene cinco píxeles a cada lado para 105 a la izquierda, cinco a la velocidad, 300 píxeles al interior, y luego 30 píxeles de relleno a la izquierda y a la derecha. Entonces si sumamos esto, tenemos cinco, treinta, trescientos treinta aquí y otros cinco. Y si nos desplazamos hacia abajo, en realidad podemos ver todos estos números aquí. Borde de cinco relleno 30 en el interior de 300. Ahora, a veces eso es lo que queremos, pero en su mayor parte, eso no es lo que queremos. Lo que queremos es decir que todo quede 300 píxeles de ancho o 300 píxeles de alto. Y eso incluye el relleno. Entonces por defecto, el modelo de caja, lo que estamos viendo aquí son modelo de caja aquí no incluye tener relleno, no incluye tener margen. Entonces lo que podemos decir es dimensionamiento de caja y por defecto es caja de contenido, pero queremos cuadro de borde y se puede ver que aquí lo hace más grande o más pequeño. Y estamos cambiando el comportamiento por defecto de un navegador. Normalmente queremos border-box. Qué border-box hace, dice Agrega ese borde en ese relleno y asegúrate de que todo eso en conjunto sea un ancho de 300. Y así ahora cuando me inclino sobre esto, podemos ver que esa caja es un poco más pequeña. Y cuando me desplaza hacia abajo, ninguno de estos dígitos cambia realmente. Pero la caja en sí es más pequeña. Dice que todo el asunto es de 300 píxeles. Esa es la diferencia entre border-box y content box. Ahora lo que me gustaría que hicieras es darle una oportunidad a esto. Crea un cuadro de 300 por 300 en tu página. No hace falta que se vea bien. Agrega algo de relleno, y luego cambia el tamaño de caja y solo nota cuáles son las diferencias y esto es realmente, realmente importante para nosotros moviéndonos a través de este curso porque vamos a estar usando mucho la caja de contenido. 4. Outlines: bordes alrededor de los fronteras: De acuerdo, echemos un vistazo al esquema. Esquema es la frontera que recorre todo. Es honestamente la frontera alrededor de una frontera. Se puede agregar un contorno y se le puede decir que tenga un desplazamiento. Utilizamos el desplazamiento de contorno para dar algún espacio entre el elemento y tu contorno lo demostrará en tan solo un segundo. Pero básicamente esbozar es como tener dos fronteras. Y es realmente agradable para la mejora visual. Ahora la mayoría de las veces que terminará son en realidad súper importantes para la accesibilidad. Entonces, siempre que pases por encima de un elemento o cuando tabulas sobre, como cuando usas un teclado y presionas la pestaña una y otra vez en tu página, a veces un botón tendrá como un contorno amarillo alrededor o un contorno rojo o un contorno negro. Y no es la frontera, es sólo este esquema y le dice a los lectores de pantalla y a las personas con discapacidad visual, las personas que no pueden ver muy bien lo que en realidad se selecciona. También para esos guerreros del teclado por ahí que les gusta usar un teclado en lugar de un ratón. Les ayuda mucho y hay muchos por ahí. Entonces es realmente, realmente importante. Entonces lo que voy a hacer aquí es que voy a guardar esto como un nuevo archivo llamado Outline. Y lo que quiero aquí es que todavía tengo esta caja. Y lo que me gustaría hacer es agregar un esquema a su alrededor. Entonces si voy aquí y esto es sólo salir de la última lección, estoy usando exactamente el mismo archivo. Está bien porque solo estoy en el editor aquí en el inspector will y nuestras herramientas de desarrollador. Puedo agregar un esquema. Y hagamos esto sólo un poquito más pequeño. Puedo agregar un esquema. Y se parece mucho a una frontera. Por lo que puedo decir cinco píxeles, negro sólido. Y se puede ver que en realidad está en el exterior de todo. Ahora si miramos hacia abajo a su modelo de caja, ni siquiera aparece aquí. Tenemos un interior, tenemos un relleno, tenemos una frontera. Tenemos margen por fuera, pero en realidad no nos muestra nada sobre el contorno. Y así es la diferencia entre una frontera y un contorno de fronteras realmente calculada. Un esquema no lo es. Y se puede ver esto. En realidad no hace que nuestra caja se mueva a todas las edades, literalmente agrega un contorno a su alrededor. Ahora, hay una forma de agregar un desplazamiento. Podemos decir offset de guión de contorno, y podemos darle a esto un valor de píxel también. Entonces digamos que no por, vamos a darnos un desplazamiento de diez píxeles. Y vamos a querer sumar algún margen aquí. Entonces hagamos margen 30 píxeles. Y lo que hace este desplazamiento es que sólo se mueve ese contorno hacia afuera. Ahora lo que me gustaría que hicieran para esta lección en particular es crear un elemento y darle un borde, luego darle un esquema. Realmente no importa cuál sea tu color. Simplemente puedes darle algún tipo de esquema. Acabo de hacer algo aburrido, cinco píxeles negro sólido, y luego le agrego un desplazamiento para demostrar que esto se puede mover hacia afuera. 5. Cómo añadir sombras al texto: La sombra tecnológica se parece mucho a una sombra de caja. La única diferencia realmente aquí es que una sombra de caja puede tener como una sombra interior llamada un inserto y el texto no. De acuerdo, entonces lo que voy a empezar a hacer aquí es que voy a escribir en CSS interno, no CSS externo, no en línea CS sino CSS interno. Para que cuando descargues estos archivos de proyecto, en realidad puedas tener acceso a todo este CSS. Entonces tengo una caja aquí, Cuckoo, cuco. Y sigamos adelante y añadamos algo de texto aquí. Y este texto va a decir hola mundo. Y cuando cargo esto en mi navegador, solo dice hola mundo. Podemos hacer esto significativamente más grande. Podemos cambiar el tamaño de la fuente si quisiéramos poco después, lo cual en realidad tal vez lo haremos también, solo para que realmente podamos sumergirnos en CSS. Entonces vamos a seleccionar esa caja por nuestra clase. Y aprendimos sobre este selector y CSS 101. Y así todo lo que esto está diciendo es seleccionar este elemento por este ClassName nos da un tamaño de fuente de tal vez como 40 píxeles. Guardemos y actualicemos. Ahí vamos. Eso es más grande. Y ahora lo que podemos hacer es añadir una sombra de texto. Entonces sombra de texto. Y esto toma una x, una y, un valor de desenfoque y el color. Entonces sigamos adelante y cambiemos ese valor x. Queremos mover esto a la derecha, digamos diez píxeles. Entonces el valor y también va a ser de diez píxeles. Eso lo va a mover hacia abajo. Un desenfoque, digamos que no se va a desenfocar en absoluto. Entonces va a ser una copia exacta, contorno exacto de nuestro texto. Y el color aquí se va a leer sólo algo odioso que realmente podemos ver lo que está pasando. Ahora tenemos un texto, una sombra de texto que nos mueve hacia abajo diez píxeles y lo mueve a la derecha diez píxeles. Y si quisiéramos algo un poco más elegante, podríamos hacer algo así como dos píxeles. Y por cierto, para seleccionar esto, todo lo que hice fue seleccionar mis diez píxeles o ahora son dos píxeles, pero seleccioné esos diez píxeles. Y si vas a Selección, agrega siguiente ocurrencia para mí, comando D, Y va a ser diferente para ti probablemente me imagino. Simplemente puedes escribir en dos lugares al mismo tiempo, lo cual es realmente, realmente útil. Porque un buen atajo para recordar, salta adelante y guarda eso, refresca, y eso se ve un poco mejor. Ahora, también podemos agregar un valor de desenfoque, este valor de desenfoque actualmente un 0, que es lo mismo que no tenerlo en absoluto. Por defecto no se desdibuja en absoluto. Sigamos adelante y agreguemos un valor de desenfoque de cinco píxeles. Y todo esto va a hacer es decir por cada píxel que está ahí atrás, cada píxel rojo borrosa cinco píxeles. Y así tenemos un bonito poco borroso. En realidad están parece que esto está saliendo de la página un poco. Ahora lo que podemos hacer es que realmente podemos cambiar el color de fondo del cuerpo. Por lo que el color de fondo del cuerpo va a ser negro. Va a ser del mismo color que nuestro texto. Y sigamos adelante y refresquemos esto. Y ahora se ve un poco espeluznante. Ahora estoy grabando esto alrededor de Halloween, así que esto es realmente, muy bien, esto es aplicable porque esto es un poco espeluznante. Pero ya no podemos ver ese texto, lo cual es realmente bonito. También podríamos intentar, en lugar de hacer eso, podríamos hacer un RGBA de color. Y realmente no importa de qué color llenemos su color. Vamos a llenarlo de negro, pero también hagámoslo completamente transparente con un 0 alfa ahí dentro. Y ahora sólo tenemos el texto borroso. Entonces eso es sombra de texto lo haría, me gustaría que hicieras es escribir algo de texto en tu página. Y solo podría decir hola mundo. Y luego agrega una sombra tecnológica, agrega tu eje X, tu eje Y, o tu horizontal en tu alineación vertical en un desenfoque y luego agrega un color. No tienes que hacer el RGBA, nos enteramos de eso y de CSS 101 también. Entonces si necesitas volver al extremo CSS uno a uno, rápidamente aprendiste lo que es RGB. Pero realmente es solo un modo de color es decir rojo, verde, azul, alfa, alfa es tu transparencia. Entonces dijimos 000, eso es negro y que sea completamente transparente. 6. Forjar un ancho mínimo en un elemento: De acuerdo, así que este es ancho mínimo. Vamos a estar hablando de lo que es ahora en CSS 101, aprendimos sobre el ancho máximo, aprendimos sobre el ancho regular. Si no sabes sobre max-width, honestamente, es exactamente lo mismo que el ancho mínimo. No obstante, es lo contrario. Entonces lo mismo, mismo pero diferente. Ahora, el ancho máximo dice a, un elemento sólo puede tener un ancho máximo. Y intentará pasar del tamaño más pequeño a ese ancho máximo antes de romper el texto en una nueva línea, el ancho mínimo es algo así pero opuesto. Por lo que puedo seleccionar esta casilla aquí, y puedo darle a esto un borde para pixeles azul sólido. Y entremos aquí y tiremos un poco de lorem ipsum en tu brazo inferior. Y luego VS Code, acabo de golpear tab. Y eso es porque tengo plantilla django seleccionada aquí. Esto debería ser un HTML. Vamos a deshacer eso. Bajarlos. Tab. Ahí vamos. Y cuando cargo esta página, podemos ver todo este texto y esto en realidad es una especie de mal ejemplo. Voy a borrar todo excepto esta línea para que tengamos este ancho aquí dentro. Adelante y eliminemos todo eso. Guardar y refrescar. De acuerdo, entonces ahora esto no va a hacer nada porque este es un elemento de bloque. Y recuerda esa primera lección que dije que la visualización de elementos de bloque es realmente, realmente importante. Adelante y recortemos esto. Queremos que no ocupemos todo el ancho. Por lo que podemos decir display inline block, y esto nos permitirá usar el elemento width con él. No obstante, también va a ocupar un ancho mínimo aquí, lo cual es realmente bonito. Por lo que este elemento aquí tiene 365 píxeles de ancho. Por lo que queremos un ancho mínimo de algo solo un poco más grande. Vamos a darle a esto un mínimo de ancho. Y digamos que el ancho mínimo tiene que ser de 450 píxeles. Y entonces lo que esto va a hacer es una especie de mover esto a algún lugar por aquí. Voy bastante buen juego. Sí, fue una conjetura bastante buena. Entonces lo va a mover por aquí. Y si escribo más texto, entonces se va a expandir. Y en realidad podemos ver esto entrando aquí. Y sólo voy a copiar esta línea un par de veces. Y se puede ver que se expandió todo el camino. Por lo que tiene ese ancho mínimo. Y todo lo que estoy haciendo aquí es deshacer y rehacer. Pero tiene ese ancho mínimo, así que no importa si hay espacio extra o no, va a ocupar ese ancho mínimo. Y luego una vez que tenga más contenido, posiblemente demasiado contenido. Lo que se va a hacer es entonces mover esto para que sea un ancho del 100%. Ahora podemos, podemos casarnos esto con max-width también. Por lo que podemos decir que el ancho máximo solo puede estar en algún lugar por aquí. Entonces sigamos adelante y combinemos estos. Podemos decir un ancho máximo de, digamos 500 píxeles. Refrescar. Parece que nada cambió. Pero lo que esto va a hacer es decir en algún lugar de aquí probablemente sea el ancho máximo. Entonces antes de que este borde azul tomara este ancho de neumático, éste ya no bien, así que voy a hacer doble clic aquí y pegar eso un par de veces. Y podemos ver que sólo retoma, hasta aquí ahora. Y nuestros elementos de caja, si bajamos aquí, 450 píxeles de ancho, es lo que es por defecto. Aquí arriba son 508 píxeles y eso se debe a que está ocupando cuatro píxeles a ambos lados. Por lo que 500 píxeles en el interior, 400 píxeles, cuatro píxeles en cada lado más bien. Y podemos cambiar ese tamaño de caja. Y hagamos border-box. Y en realidad se puede ver que está haciendo esa pequeña diferencia de ocho píxeles border-box. Y si volvemos aquí, podemos ver que todo el elemento es de 500 píxeles. Entonces ahora ya estamos usando el material de exhibición que aprendimos de nuestra lección de exhibición. También estamos aprendiendo y usando el dimensionamiento de caja desde el dimensionamiento de caja o la lección de modelo de caja. Entonces esto es min-width. La idea de nuevo aquí es sólo que va a ser un ancho mínimo. Y si tienes más contenido, puede crecer para ser más grande. 7. Introducción a las posiciones de CSS: El posicionamiento es cómo movemos los elementos alrededor de una página. Hay algunas maneras de hacer esto. Podemos hacer posiciones absolutas. Podemos escribir una posición relativa, una posición fija o posición pegajosa. También hay otra llamada estática, que todo es por defecto. Pero la idea es que si quieres hacer un píxel sitio web perfecto, algo que realmente coincida con el diseño, veces vas a tener que mover elementos. Y en las próximas lecciones vamos a estar hablando de posicionamiento relativo, posicionamiento absoluto, posicionamiento fijo y posicionamiento pegajoso. Y esto es lo que va a hacer que tu sitio arranque y la búsqueda realmente actúe más como una aplicación, sobre todo cuando se trata de posicionamiento pegajoso. Pero también te va a ayudar a mover las cosas para que podamos crear nuevos componentes dinámicos que puedan capas uno encima del otro. 8. Posicionamiento relativo: posicionamiento relativo es la idea de tomar un elemento y moverlo de un lugar donde naturalmente se sienta en tu página a otro lugar. Apenas un poco apagado por lo que toma tu posición donde estás sentado o de pie ahora mismo. Y es como moverte una pulgada a la izquierda o una pulgada a la derecha. Por lo que tengo aquí un nuevo documento para posicionamiento relativo. Y lo que queremos hacer es crear una caja y luego simplemente moverla un poco. Entonces sigamos adelante y agarremos esa clase de caja. Vamos a darle un ancho. 300 pixels, altura, 300 pixels, borde diez pixels, negro sólido. Y cuando abro esto en el navegador, es sólo una caja normal. Esto ya lo hemos visto un par de veces a lo largo de este curso. Entonces lo que quiero hacer aquí ahora es que puedo decir posición. Y hay un montón de ellos aquí. Pero vayamos posición relativa y parece que nada ha cambiado. Y eso es realmente correcto, nada debería haber cambiado. Pero ahora podemos usar arriba, izquierda, derecha, o abajo. Los selectores no son selectores sino propiedades. Por lo que podemos decir mover esto desde arriba, moviéndose hacia abajo. Bajemos esto a diez píxeles. De acuerdo, así que eso no fue muy suave, ES abajo 30 pixeles. Y vamos a mover esto hacia la izquierda o desde la izquierda, también 30 píxeles. Y cuando activamos y apagamos estos, en realidad podemos ver que esto de hecho se está moviendo. Está moviendo todo el elemento para nosotros. Y así otra vez, lo que hace el posicionamiento relativo es que dice, vale, así que aquí es donde tu elemento se sienta por defecto en tu página. Pero cambiemos nuestra posición a relativa. Tan relativo a donde suele establecerse quistes, desde arriba, moverlo hacia abajo 30 píxeles desde la izquierda, muévelo hacia la derecha, 30 píxeles. Entonces digamos en lugar de arriba, podemos decir abajo. Y se puede ver que en realidad lo movió fuera de mi mirador. Vista siendo esta gran sección blanca aquí. Y podemos activarlo y apagarlo también. Y en lugar de izquierda, podemos decir derecha. Y esto hace exactamente lo contrario. Y vamos a activar y desactivar estos también. Y así ese es el posicionamiento relativo. Ahora donde esto viene realmente, realmente útil es cuando tienes que mover algo apenas un poco fuera de donde se establece naturalmente. A lo mejor ya estás usando tu relleno, ya estás usando tu margen. Estás usando relleno negativo o margen negativo. Y necesitas una especie de alejar esto solo un poquito solo para que sea perfecto. Aquí es donde realmente entra en juego el posicionamiento relativo. Ahora bien, el posicionamiento relativo tiene otra clase de superpotencia. Y ahí es cuando se trata de elementos infantiles que usan posición absoluta, que vamos a hablar a continuación. 9. Posicionamiento absoluto: posicionamiento absoluto nos permite mover un elemento basado en su elemento padre. Pero el truco aquí es que el elemento padre tiene que posicionarse relativo. Entonces tomando el relevo de esa última lección, lo que tengo aquí es sólo una caja regular. Y si vuelvo aquí con mi editor, sigamos adelante y cambiemos su posición a no absoluta sino relativa. Y esa es esta caja de aquí. Y hagamos un poco de espacio para trabajar. Y esto realmente no hace nada desde la última lección. Ahora donde esto se pone poderoso, donde entra el posicionamiento absoluto es digamos que tengo una segunda caja. Entonces hagámoslo segundo cuadro de guión. Y esta es una abreviatura de Emmett. Entonces si te estás uniendo a este curso ahora no has tomado CSS 101 o HTML one-to-one o HTML2 01, donde hablo de em en abreviaturas. Todo lo que estoy haciendo aquí es escribir un poco de CSS y tan pronto como veas esta M se abreviatura, puedes golpear tab y crea un div para ti por defecto con una clase de segundo cuadro, igual que escribir CSS y luego acabas de pulsar tab. Y digamos que esto tiene que estar en la tarifa máxima. Entonces volvamos a nuestra página aquí y actualicemos. Y esto sólo dice Top derecha. Ahora podemos agregar un poco de estilo a esto, y digamos que necesita ser una caja en el cuadrante superior derecho. Lo que podemos hacer es ahora seleccionar esta casilla y podemos decir segunda casilla, posición, absoluta. Démosnos también una frontera. Borde de tres píxeles, azul sólido, sólo para que sepamos dónde estamos trabajando. ¿Y qué hacemos? Posición absoluta literalmente nada cambia. Acaba de agregar una frontera por aquí. Voy a acercarme aún más aquí. Ahora lo que me gustaría hacer es que esto se mueva a este cuadrante superior derecho como si estuviera haciendo una gráfica con un eje x e y y y tiene una x negativa y un eje negativo. Lo que puedo hacer es porque esta es posición absoluta. Ahora puedo decir, vamos a pegarle esto a la parte superior. Y eso va a decir 0. Ya está ahí por defecto. Pero en caso de que fueras elemento no es lo que esto va a hacer es mover esto al principio de la página. Y como ejemplo, hagámoslo abajo. Por lo que los ceros inferiores van a decir que la posición absoluta alrededor este elemento relativo se va a pegar al fondo. Y entonces podríamos decir correcto, 0. Y ahora eso lo mueve hacia abajo a la derecha. Ahora para movernos como respaldo, todo lo que tenemos que hacer es cambiar ese de abajo a arriba. Y así establecemos posición top absoluto es 0, ¿verdad? 0. Y todo esto va a hacer es mover esto a la parte superior derecha. Ahora eso es lo que queríamos, pero queríamos retomar como este cuadrante completo aquí. Entonces lo que podemos hacer es decir un ancho del 50%. Y probemos una altura del 50%. Y ahora tenemos una caja en ese cuadrante superior derecho. Y eso es lo que la posición absoluta nos permite hacer. Nos permite hacer algo como esto. Ahora bien, esto es una especie de ejemplo feo, pero si quisiéramos, podríamos darle a esto un fondo de negro. Y vamos a seguir adelante y deshacernos de esta frontera. Y ahora parece que hemos tallado un trozo de esto. Ahora si queremos hacernos aún más fantásticos, muchas veces no iban a estar trabajando con fronteras todo el tiempo. Entonces vamos a seguir adelante y deshacernos de este borde negro sobre nuestro elemento padre a la caja, el elemento relativo. Adelante y deshacernos de eso. Y ahora hemos movido esta caja a algún lugar donde no vive de forma natural. Entonces está esta caja de 300 por 300. Aquí lo puedes ver. Y hemos dicho de esa caja de 300 por 300 toma el 50% del ancho, el 50% de la altura para un 150 por 150, muévelo a la parte superior derecha. Ahora solo voy a deshacer eso rápidamente y te voy a mostrar lo que pasa cuando tome posición relativa alejada del elemento padre. Entonces estoy trabajando en la caja aquí. Y si me deshago de posición relativa, va directo a toda la página. Ocupa el 50% del ancho de la página y ocupa el 50% de la altura de las páginas o la vista, en realidad no toda la página, sino solo el puerto de vista aquí, que muy bien podría ser lo mismo dependiendo de tu página. Entonces sí, si alguna vez quieres que un elemento quede absolutamente posicionado, tienes que asegurarte de que tu elemento padre esté usando posición relativa. No, no está haciendo ningún daño. Te darás cuenta de que cuando active y apague esto, esa caja de la izquierda aquí no cambia en absoluto. Simplemente cambia el comportamiento de sus elementos hijos. Y este es un concepto realmente importante para entender en CSS. Porque cuando lleguemos al final de este curso, vamos a estar trabajando con muchos elementos infantiles. 10. Posicionamiento fijos (como como titulares): Echemos un vistazo al posicionamiento fijo, fijo. Eso es difícil de decir con un micrófono,posicionamiento fijo, posicionamiento fijo palos de posicionamiento fijos y elementos a cierta parte de tu ventanita. Y te permite deslizarte por la página a medida que la página se mueve hacia abajo. En realidad fue un ejemplo terrible. Ya sabes, cuando estás en un sitio web y hay un encabezado y Scott como la navegación y un logo y esas cosas. Y a medida que te deslizas por la página, se desliza hacia abajo por la página contigo. Esto es posicionamiento fijo. Ahora solo restablezco mi página, tengo un estilo y una caja. Seleccionemos esta caja y agreguemos un poco de estilo. Entonces esta caja, digamos que va a tener un borde, un píxel rojo sólido. Y un color de fondo de, vamos a hacer que este aspecto sea un poco más elegante. F5, E5.5. Y no hagamos frontera de un píxel rojo sólido. Hagamos fondo fronterizo. Dos píxeles, sólidos, CCC. Y se puede ver que esos colores aparecen aquí. Entonces es un extremo blanquecino, un gris claro. Y vamos a cambiar esto ahora. De acuerdo, ahí no hay contenido, pero agreguemos algo de contenido. Diga que esto es un encabezado. Y está bien, y eso es zoom que en la dirección opuesta a que voy. Y está bien, así que esto no se ve genial. En realidad limpiemos un poco esto. Deshacernos de ese margen corporal. Hagámoslo. Cuerpo. Hay un relleno que nunca puedo recordar. Hagamos margen 0. Vamos a restablecer esto y relleno 0. Por lo que estas esquinas de este encabezado en realidad tocan los lados, perfecto. Y en ese encabezado, vamos a seguir adelante y darle a esto un relleno de 40 píxeles. No, eso es demasiado odioso para esta manifestación. Ver 20 pixeles. De acuerdo, eso no se ve muy mal. Podemos convivir con eso. Ahora. Digamos que queremos desplazarnos por la página ahora no tengo suficiente contenido para desplazarse por la página aquí. Pero lo que puedo hacer es decir que el cuerpo necesita tener una altura mínima o una altura fija de, digamos, 3 mil píxeles. Y todo esto va a hacer es dejarme desplazar todo el camino hacia abajo como si tuviera más contenido. Ahora bien, ¿y si quisiera desplazarme hacia abajo y quisiéramos que esto se quedara conmigo? Podemos hacer eso. Y siempre decir aquí es la posición fija? Ahora esto podría ser un poco Jackie, dependiendo del navegador que estés usando, dependiendo de la versión del navegador que estés usando. Y en realidad se puede ver que es poco jackie, Esto es una especie de elemento en línea y elemento de bloque en línea y no ocupó todo el ancho. Bueno, tenemos que hacer es establecer un valor, superior, derecha, inferior o izquierda. Y lo que podemos hacer es decir, pegar esto en la parte superior de la página, hacer que se pegue a la izquierda de la página como es actualmente. Pero también dale a esto un ancho de un 100% de la página. Y sólo voy a subir eso un poco. Y ahí vamos. Ahora me estoy desplazando por la página y en realidad se puede ver mi barra lateral por aquí mientras me desplaza quedándome pegajoso. Ahora este es un muy mal ejemplo. Un mejor ejemplo sería si tengo un párrafo aquí dentro y tiro algo de Lorem. Y acabo de copiar esto una y otra y otra vez y una y otra vez y una y otra vez. Y así vamos a poder ver que esta página realmente se puede desplazar. Entonces guardo esa actualización. Y en la parte superior de mi página, tengo mi lorem ipsum, pero a medida que me desplace hacia abajo, ahora se queda conmigo. Esto es posicionamiento fijo. Esto lo hace una especie de pegajoso a la parte superior de la página. Ahora, el posicionamiento pegajoso es un tipo diferente de posicionamiento. Vamos a platicar, vamos a abordar ese siguiente. No obstante, el posicionamiento fijo es realmente, realmente bonito porque va a capas encima de toda tu página. Entonces ya sabes, cuando estás en un sitio web y lo consiguió tiene esa cosita molesto en la parte inferior derecha. Y es como mensajes de apoyo o lo que sea. Y está en línea. 50% de todos los sitios web en estos días, es un poco irritante Para ser honesto, pero se pega contigo sin importar dónde estés en la página y capas encima de todo. Eso es lo que la posición fija hace para ti. Sepan, lo que me gustaría que hicieran es darle un tiro a esto. Crea un encabezado fijo, como lo que tengo. Tira un montón de contenido aquí. Vas a necesitar lo suficiente para que tu página realmente pueda desplazarse y luego desplazarse hacia abajo por tu página y asegúrate de que solo capas encima de todo. 11. Posicionamiento pegajoso (como los encabezados modernos): El posicionamiento pegajoso es relativamente nuevo en CSS. Nos permite tener un encabezado para pegarse a su elemento padre. Entonces en la última lección, miramos el posicionamiento fijo, donde se fijaba a toda la página, realidad toda tu ventanal. Y acabamos de hacer un encabezado que se desplazó todo el camino por la página con nosotros. Y se parecía mucho a esto. En realidad se veía exactamente así porque esto es lo que escribimos. Ahora pegajoso puede hacer esencialmente lo mismo, tan arreglado. Y podemos decir que esto es pegajoso. Y se puede ver mientras me desplaza hacia arriba y abajo la página, se queda conmigo también. No obstante, la diferencia entre pegajosa y fija es fija va a estar aquí pase lo que pase. Y aunque me desplace por la página donde no hay contenido extra, Se va a quedar ahí. tanto que con pegajoso, va a ser pegajoso a su elemento padre. Entonces sigamos adelante y creemos aquí un ejemplo. Tenemos esta caja, y vamos a seleccionar esa caja. Y hagamos exhibición pegajosa. De acuerdo, así que acabo de escribir un montón de cosas aquí de esa última lección. Doy al cuerpo un margen de 0, relleno de 0, altura por defecto de 3 mil. En realidad tampoco necesitamos eso. Y la caja se posiciona pegajoso color de fondo es el mismo que la última lección. Borde inferior como un poco de relleno. Adelante y deshacernos de ese. Y cuando refresco la página, sólo tenemos esta barra aquí. Ahora sigamos adelante y arrojemos esto dentro de un elemento padre. Por lo que tenemos esta caja y podemos tener un párrafo con poca RAM en tu copia pegar, pegar, pegar, pegar, pegar, pegar. Y si acerco esto, vamos a ver que ya no es pegajoso. Y así sí, no es pegajoso, pero podemos hacer lo pegajoso. Esto en realidad requiere otra propiedad aquí. Entonces debido a que es la posición pegajosa, también necesita tener arriba a la derecha, abajo a la izquierda, por lo general es solo de arriba. Nosotros conseguimos esta una propiedad superior aquí, voy a decir 0. Y eso solo le dice dónde ser pegajoso, lo contrario no sabe. Y así ahora cuando me desplaza por la página, se queda pegajosa. Ahora, esa es la parte uno de dos. La segunda parte es hacerla pegajosa sólo para esta sección en particular donde hay todo esto aquí dentro. Entonces sigamos adelante y agregamos un estilo a tu estilo para tener un color de fondo de rojo y un color de blanco. Refrescar una página. Y vamos a ver, oh, me olvidé de hacer eso pegajoso agregando top 0. Por lo que se adhieren a la parte superior. Ahí vamos. Entonces ahora es pegajoso. Añadamos otra sección debajo de este azul y esto cambie ese encabezado también. Entonces sigamos adelante y básicamente copiemos todo este asunto. Y acabo de colapsar eso con una pequeña flecha aquí. Y vamos por debajo. Y este va a ser color de fondo de azul. Y el cambio lo que hay aquí dentro. Entonces digamos la sección dos de nuestra caja. Ahora estamos usando, estamos reutilizando CSS. Y en la parte superior de aquí, hagamos la sección uno. De acuerdo, volvamos a subir al principio de la página. Refrescar. Ah, no podemos ver muy bien ese color. Colores iguales al negro. Eso es mejor. Entonces esta es la sección uno, y a medida que me desplace hacia abajo, se va a quedar ahí. Y la sección dos se le da un golpe fuera del camino. Y luego su Sección dos. Y a medida que me desplaza hacia arriba, la sección uno vuelve a jugar. De verdad me gusta esta parte. Eso es realmente bonito. Eso solía ser muy difícil para nosotros hacerlo, pero viene por defecto con CSS3 en estos días, lo cual es realmente, realmente agradable. Entonces eso es lo que es pegajoso ahora en resumen, necesitas posición pegajosa, necesitas un valor superior. Por lo que tenemos un valor máximo de 0. Y todo lo que hicimos aquí fue que tenemos un elemento padre. Tengo algunos en la línea CSS aquí. No es la mejor manera de hacer las cosas, pero realmente llevó todo el ejemplo a casa. Entonces tenemos un contenedor de padres aquí. Y luego dentro de ella tenemos posición pegajosa. Y va a ser pegajoso alrededor de todo este contenido porque es pegajoso a su elemento padre. Ahora lo que me gustaría que hicieras es darle una foto a esto porque esto es realmente importante para que los sitios web se vean y actúen realmente, realmente agradables en dispositivos móviles, lo cual es parte del desarrollo web receptivo. Y eso es parte de CSS más avanzado. Por lo que conocer la posición pegajosa va a ser muy, muy útil para ti. Entonces por favor dale una toma a esto si te atascas, no lo olvides, siempre puedes hacer preguntas y el aprendizaje a codificar grupo de Facebook. 12. Controlar el texto overflowing: Desbordamiento es cuando se puede construir el ancho y la altura de un elemento. Pero entonces corres el riesgo de que tus contenidos o de un lago se desborde hacia el exterior de él. En esta lección, voy a dar un ejemplo y cómo se puede especie de crear como una barra de desplazamiento dentro de sus cajas. Ahora tenemos algunas opciones diferentes. Podemos optar por ocultar el desbordamiento. Podemos dejar que los usuarios se desplazen ya sea a la izquierda y a la derecha, arriba y abajo o simplemente arriba y abajo. Más a menudo no realmente solo queremos que el usuario se desplace dentro de una caja arriba y abajo. Entonces sigamos adelante y agregamos algo de contenido a esta caja. Ahora solo tengo este cuadro regular hemos estado trabajando con esto a lo largo del resto de este curso están hasta esta parte del curso de todos modos, , eso es algo de lorem ipsum aquí dentro. Y vamos a añadir otra línea y otra línea. Y vamos a hacer esto realmente largo. Y la idea aquí es que esta caja se supone que tiene 300 píxeles de ancho por 300 píxeles de alto. Y esto va a ser más contenido del que puede contener esa caja. Entonces si refresco esta página y acerco, woo, en realidad no es suficiente. Sigamos adelante y copiemos esto sólo un par de veces más. Aquí vamos. Y la idea aquí es si me alejo, tenemos esta caja y el contenido del arte se está saliendo de ella. Ahora la razón por la que esto sucede es porque hemos establecido un ancho y una altura. Dijimos específicamente con este, la altura de esta caja es de 300 pixeles y necesita ser de 300 pixeles porque tal vez eso es lo que dijeron nuestros diseñadores o diseñador. Tiene que ser de 300 píxeles, no puede ser más grande. No está permitido crecer, de lo contrario se va a ver un poco raro. Entonces lo que podemos hacer es agregar esta pequeña barra de desplazamiento al lado derecho aquí. Y lo hacemos con bastante facilidad. Entonces en nuestra clase box, todo lo que tenemos que hacer es decir desbordamiento. Y cambiemos esto por un documento HTML. Nuevamente, leí mucho Django, por lo que mis archivos HTML automáticamente por defecto a una plantilla de Django. Your should automáticamente default a HTML por defecto, tan pronto como tengas la extensión HTML de punto en tu nombre de archivo. Por lo que desbordamiento, tenemos algunas opciones diferentes aquí. Y esto es realmente genial. Voy a jugar hizo fue mover mi ratón ahí y dice sintaxis, visible, clip oculto, scroll auto. Hagámoslo, hagámoslo primero escondido. Y así si quisiéramos ocultar ese contenido, oculto ocultará ese contenido extra. En realidad hay más contenido aquí abajo. Y en realidad podemos ver cuando paso el cursor sobre este texto, que este texto ocupa toda esa sección, pero se está ocultando. También podemos decir visible. Y eso es sólo el defecto. Eso es lo que vimos originalmente. Y entonces podemos hacer auto. Y este es el que vas a querer con más frecuencia que no es desplazarte aquí atrás, voltear hacia atrás tu auto de desbordamiento. Y cuando me refresco , me permite desplazarme hacia arriba y hacia abajo así. Ahora esto va a ser realmente importante si estás creando una zona Lake, una lista de características de producto. No quieres que ocupe toda la página y haga que tu usuario se desplace para siempre. Y pueden elegir en un dispositivo móvil para simplemente desplazarse dentro de esta caja. O si tienes una sección de preguntas frecuentes, lo mismo. No quieres retomar toda la página. Si hay como 100 preguntas, posible que solo quieras que ocupe como 300 píxeles y pueden desplazarse por las respuestas aquí dentro. Entonces eso es desbordante. Adelante y dale una oportunidad a esto. Recuerda que necesitas establecer una altura I, necesitas tener más contenido de lo que tus elementos pueden sostener actualmente con esa altura y luego establecer el desbordamiento en auto. Y eso sólo te dará este pequeño bar así. 13. El núcleo de elementos de bloques en el centro de la página: Para horizontalmente el centro un elemento. Necesitamos utilizar los elementos de bloque para que puedan reservar todo el ancho de su tipo de sección. Y trata de reservar como todo el ancho. Supongo que lo demostraré en tan solo un segundo. Y luego podemos usar margin-left auto, margin-right auto. Y así todo lo que tengo aquí es un bloque, y no quiero que este sea bloque en línea, quiero que este sea bloque, que es el predeterminado. Entonces en realidad no necesito eso para un div. Y así tengo cuatro píxeles, azul sólido, minWidch y max width. Vamos a cambiar eso a un ancho y una altura. Copié el archivo equivocado. Y eso está bien. Es bastante fácil de cambiar. Entonces con los 400 píxeles y una altura de 400 píxeles. Y cuando abro esto en este elemento o esta página en mi navegador, podemos ver que tengo este cuadro ahora digamos que quería que estuviera justo en el centro. Lo que puedo hacer es decir aquí abajo, y lo haré un poco más grande. Margen izquierdo auto. Y eso va a volver a aplicar automáticamente todo el margen. Por lo que realmente lo movimos a la derecha. Eso es algo genial. Pero si queríamos que estuviera en el centro, hacemos margen, ¿verdad? Auto. Y esto lo equilibra a ambos lados. Y un atajo que a menudo me vas a ver hacer es algo así como margen. Digamos que la parte superior va a ser de 50 píxeles e izquierda y derecha van a ser auto. Esto es de arriba, esto es correcto, esto es de abajo. Esto queda. Y así podemos desactivarlos porque no están siendo utilizados en absoluto. Y ahora tenemos margen en todo el camino y nuestro elemento está centrado. Ahora, ¿por qué esto es importante? Porque eventualmente vas a necesitar poder centrar un elemento en función de su margen, no solo del texto, quieres centrarlo en base a su margen. Por lo que siempre está centrado. Ahora es en este punto probablemente te estés preguntando, wow, OK, esto es genial. Estamos haciendo todas estas cosas, pero en realidad no se ve muy bien. Y el problema con el aprendizaje de CSS, ya que necesitas aprender estos componentes más pequeños, estos pequeños consejos y trucos. Antes de que realmente podamos empezar a hacer algo realmente hermoso, necesitamos saber cómo funcionan todos estos pequeños componentes juntos. Y así es como centramos algo en el centro de nuestra página. Y vamos a hacer, hacer, hacer, hacer. Ahí vamos. Está en el centro de nuestra página usando márgenes. Adelante y dale una oportunidad a eso cuando estés listo. Pasemos a la siguiente lección. 14. Selectores CSS avanzados: De acuerdo, echemos un vistazo a selectores avanzados. Tenemos unos selectores diferentes con los que podemos trabajar. En realidad hay una tonelada de selectores en CSS, pero vamos a estar trabajando con selectores descendientes, selectores infantiles en selectores Jason y selectores hermanos generales. Entonces sigamos adelante y creemos aquí un montón de cajas. Y voy a poner esto en un padre con una identificación llamada padre. Y sólo movamos eso hacia arriba. Y vamos a crear todas estas cajas. Y vamos a darle estilo a estas cajas también. Entonces tenemos caja de puntos y vamos a darle a esto una altura de 20 píxeles y un borde de un píxel, azul sólido. Eso sólo va a crear un montón de estos apilados uno encima del otro. Y esto es lo que vemos en nuestra página. Esto no es lo más lindo de la historia, pero esto es una lección de selector. No necesitamos que se vea bien. No necesitamos que haga demasiado aparte de seleccionar lo que actualmente queremos que seleccione. Entonces lo que podríamos hacer es como selector general descendiente, solo usamos un espacio y aprendimos sobre esto y CSS 101. Entonces podríamos decir padre, esa es la identificación de los padres y va a coincidir con esto. Y luego todos los niños de la caja aquí dentro. Y lo hacemos con un espacio. Y así cuando guarde esto, vuelva aquí y me refresco, íbamos a ver que nada cambia y eso se espera. Pero todo lo que estamos diciendo es que si había una caja fuera de esto y se debe a esta caja, esta no es una caja bordeada azul. Podemos ver que esta caja, aunque hacemos clic con el botón derecho e inspeccionamos, tiene la clase de caja, pero no está siendo peinada. Y así ese es un selector descendiente. De igual manera, también podemos hacer solo selectores infantiles. Entonces en lugar de explícitamente, decir explícitamente selector descendiente, podemos decir que el dieléctrico del niño usa el signo mayor que. Entonces este es tu padre, tu selector de hijos, y este es tu hijo. Y de hecho, en realidad podemos ver que cuando vamos aquí en VS Code, usa el mismo símbolo aquí. Entonces tenemos div dot box, esa es nuestra clase y nuestro elemento. Y entonces tenemos esa mayor que señal que va para nuestro padre. Y eso va a hacer exactamente lo mismo que un selector descendiente. Y cuando me refresco, no ves nada cambia. Ahora podemos hacer esto donde seleccionamos selectores adyacentes. Por lo que ahora podemos decir padre. Y luego quiero seleccionar todas las cajas más más más cajas. Y podemos decir que el color de fondo es igual al rojo. Y así este de aquí es nuestro selector adyacente. Y sólo va a seleccionar elementos que son, supongo adyacentes a ella. Y así no selecciona esa primera, pero selecciona la siguiente y la siguiente, y la siguiente, la siguiente todo el camino hacia abajo. Y para que eso sea un adyacente para seleccionar o no va igual que el primero, va a seleccionar los siguientes. Y entonces tenemos este selector general de hermanos. Para que podamos seleccionar todo en nuestro padre, seleccionar nuestras cajas, y luego tenemos esta tilde. Y así en mi teclado, está justo al lado del número uno en la parte superior izquierda de mi teclado. Podría ser diferente dependiendo de si tienes un teclado internacional. Pero un teclado inglés genérico está justo al lado del número uno y es esta tilde. Es mi invitado que es una tilde. De hecho puedo recordar, de todos modos es una línea garabateada. Y entonces podemos decir caja de puntos. Y cambiemos el color de fondo de este color de fondo. Pero nota no accesorio de fondo, color de fondo a negro. Y esto no va a funcionar porque escribo padre que se supone que es Perrin, guardar, refrescar, y selecciona todos los similares. Y la idea aquí es que en mi herramienta inspect, en nuestras herramientas de desarrollador, vaya a seleccionar esa primera. Y luego dice, oh, en realidad más todos los demás por el camino. Así que son dos formas diferentes de hacer lo mismo. Ahora lo que me gustaría que hicieras es seguir adelante y darle una oportunidad a esto. Algo de lo que vas a querer tener cuidado es que estoy seleccionando el cuadro parent que el child para darle estilo a todos estos con un elemento azul. Se da cuenta de que esta casilla de aquí abajo no está siendo seleccionada en absoluto. Pero también puedo hacer es seguir adelante y deshacerme de padre. Y cuando me refresco, se puede ver que mi caja azul o mi caja no bordeada ahora tiene un borde azul, pero no tiene ninguno del fondo negro. O si comento esto fuera, ahora hay leídos. Entonces solo voy a deshacer eso. Pero algo de lo que hay que tener cuidado es esta cosa llamada especificidad. Entonces si estás diciendo selecciona el ID de padre y luego selecciona los elementos hijos aquí, llamados cuadro, y dale una altura de 20 píxeles y un borde de un píxel, azul sólido. Entonces tu siguiente selector para seleccionar estas mismas cajas exactas necesita ser exactamente este específico. De lo contrario, vigila esto. Y este es un curso vertiginoso sobre especificidad y cómo puede ser una pesadilla en CSS. Por lo que ese fondo ahora es negro. Pero si sigo adelante y me deshago de esto, efectivamente va a ignorar esto porque esto es más específico. Refresca la página. Ignoró el fondo negro y se fue con los específicos por lo que coincide diciendo seleccionar el ID de padre, luego las clases de caja, ID de padre, clases de caja, no hay idea de padre solo decir cualquier caja con otra caja a su lado. Así que adelante y dale una oportunidad a esto, juega con esto. Siéntase libre de experimentar con la especificidad también. Si te pierdes un poco con la especificidad, honestamente, no necesitas saberlo ahora mismo, pero si eres un aficionado y realmente quieres saber sobre la especificidad, siempre puedes ir a Google eso un poco también. Eso podría ser alguna tarea complementaria adicional si realmente estás sintiendo que quieres aprender CSS a un 150% 15. Introducción a los selectores de pseudo: pseudo-clases son una forma de vincular estados. Podemos controlar el estilo CSS cuando pasas el cursor sobre un elemento. Aprendimos de eso en CSS uno a uno. Y ese es un pseudo selector o pseudo-clase, creo que en realidad se llama. Pero con otros pseudo selectores. Y también podemos seleccionar elementos que no deben tener una clase en particular. O incluso podemos seleccionar el elemento exacto en una página usando el nésimo selector hijo. Entonces en la siguiente lección vamos a echar un vistazo a hover nth child y al no selector. 16. Selectores de Pseudo: empezar: Pseudo-selectores. Hablemos de no nth-child y hover. Por lo que hace un par de lecciones hicimos todas estas cajas. Vamos a seguir adelante y sobre todo deshacernos de esto. Y lo que cargo esta página, es sólo un montón de líneas azules. Entonces es solo un montón de divs y podemos ver todos estos divs aquí. Y así tengo un elemento padre. Tiene una idea llamada Padres, y sabemos que es el padre. Y un montón de cajas. Ahora un pseudo-selector, usaremos el solo un colon regular para usar o para activar el selector. Hay muchos de ellos. Pero en esta lección realmente sólo vamos a trabajar en no nth-child y hover. Y se ve como este punto box colon y luego tu nombre pseudo-clase. Entonces este se llama hover, y podemos cambiar este color de fondo a gris si quisiéramos. Y vamos a acercar aquí. Y cuando paso el cursor sobre estos, cambia el color de fondo. No, no sólo tiene que ser el color de fondo. Podemos cambiar, podemos cambiar el color del borde, podemos cambiar el tamaño de la fuente, podemos cambiar la familia de fuentes. Podemos cambiar literalmente todo funciona exactamente de la misma manera. Pero todo lo que estamos diciendo aquí es seleccionar todas las clases de caja. Entonces todos estos aquí dentro. Y luego cuando pones el ratón sobre él, cuando pasas por encima de él, ¿qué va a hacer? Eso es un pseudo-selector. Ahora nos enteramos de esto y CSS uno-a-uno muy rápido. Vamos a seguir adelante y usar algo un poco más avanzado. Por lo que ahora podemos decir box. Usemos el no y en realidad veamos que hay muchos de ellos aquí. No vamos a pasar por todas estas. Simplemente hay tantos, y francamente la mayoría de ellos en ganado, típicamente utilizado, pero son apoyados. Entonces vamos a hacer una caja de colon nought. Y entonces lo que hacemos aquí es darle otro selector. ¿ Qué no debería ser seleccionando? Entonces, no me selecciones. Sigamos adelante y copiemos eso y arrojemos eso en como, no lo sé, el tercero. Y vamos a terminar esto. Hacer un color de fondo de azul. Por lo que estos ahora todos deberían tener un borde azul, un fondo azul cuando pasas por encima de él, todos se van a poner grises. No obstante, la caja no me selecciona, esa es ésta, no va a tener un color de fondo azul. Entonces sigamos adelante y refresquemos y puedes ver que selecciona éste justo en el medio. Ahora una cosa a tener en cuenta aquí es que CSS, como la mayoría de los lenguajes de programación, funciona de arriba a abajo. Entonces dijimos, dale un color de fondo de gris cuando pasemos el rato. Pero entonces dijimos, si la caja no lo es, no me seleccionen, clase no tiene ésta. Después cambia el color de fondo a azul. Y cuando volvamos aquí, vamos a ver que en realidad no pasa nada excepto éste. Para solucionar esto, solo seleccionamos eso y simplemente lo movemos arriba. Guardar, refrescar. Y ahora funciona para nosotros de la forma en que queremos que funcione. Hermosa, belleza, belleza MALO. De acuerdo, digamos que queríamos seleccionar uno en particular. Ahora, va a haber un tiempo en el futuro en algún momento en que estés trabajando en un sitio web que tienes, todo este HTML y no vas a poder editar ese HTML. A lo mejor estás trabajando con un framework como Django y necesitas poder simplemente trabajar con HTML directo. Esto es muy, muy importante. Esta es una de las habilidades clave en CSS, es que necesitas poder no tocar tu HTML y aún así seleccionar lo que necesitas seleccionar. Entonces sigamos adelante y seleccionemos como esta casilla aquí. Digamos seleccionar nombre. Y cambiemos ese color a blanco. En todas las cajas, el color va a ser blanco para que podamos leerlo. Ahí vamos. Queremos que este sea seleccionado y luego no queremos que ninguno de los otros sea seleccionado. Ahora el problema es éste es el mismo que éste es el mismo que éste es el mismo que éste. Y los tres de abajo, todos son idénticos. Todos viven dentro del padre que no hay nada único en ellos. ¿ Cómo seleccionamos esto? Podemos abofetear esto con el nésimo selector de niños. Y así lo que podemos decir es seleccionar por todas partes cajas, luego hacer nth child. Y se necesita corsé rizado, llaves pero paréntesis. Y este enésimo niño toma un número. Y así cuál queremos esto como 12345. Entonces tiramos el número cinco ahí dentro. Y cambiemos este color de fondo. Ya es azul. Eso no va a hacer nada que cambie el color de fondo a amarillo. Y cambiemos este color a negro. El color del texto a negro. Y cuando refrescamos nuestra página , selecciona sólo esta. Por lo que sabemos que hay una cantidad establecida de cajas. Y dijimos, oh, sólo necesitamos seleccionar éste, pero no podemos tocar el HTML. Podemos decir saltar 1234, seleccionar el número cinco con el selector nésimo niño y luego aplicar nuestro estilo. Ahora esto es realmente importante porque esto se mete selectores avanzados y esto te va a ayudar inmensamente en el futuro en algún momento en que estés trabajando con un diseñador, muy probablemente. Entonces cuando estés trabajando con tu diseñador web, diseñador web va a decir, aquí hay un montón de cosas que podrías estar trabajando con un dev back-end, de vuelta en profundidad dice, vale, vamos a hacer que esto funcione en Django y va a tener un montón de casillas de verificación, por ejemplo. Pero queremos que el tercero, el tercer elemento de la casilla de verificación tenga un borde a su alrededor para que realmente sobresale. Por lo que es más probable que la gente haga clic en esa. Podemos hacer eso con. Y el niño. Podemos asegurarnos de que cuando se cierne sobre algo, las cosas cambien. Podemos asegurarnos de que no selecciones ciertos elementos. Se pueden seleccionar todos ellos, excepto ciertos. 17. Introducción a los elementos pseudo: pseudo elementos son similares en sintaxis a pseudo-clases son selectores. Lo que aprendimos en esa última lección. La diferencia es cómo actúa. Por lo que se ve muy similar, pero es ligeramente diferente. Entonces en esta lección en particular, vamos a estar usando a la de Colin. Entonces podríamos seleccionar una caja acostumbrada a Colin y luego como sea que se llame o no el selector en esta lección, pero en el próximo par de lecciones, vamos a estar aprendiendo sobre estos pseudoselectores. No son pseudo-selectores, y estos son en realidad pseudo elementos. Entonces lo que hicimos antes fue una pseudo clase o un pseudo-selector de Hover. Esta vez vamos a decir seleccionar la caja y luego podríamos hacer antes o punto cuadro colon, colon después. Y esto va a hacer cosas diferentes por nosotros. Ahora. Antes y después es de lo que vamos a estar aprendiendo primero, estos son elementos realmente, realmente interesantes. Porque lo que hace es, y vamos a ir más a fondo sobre esto en las lecciones particulares. Pero en realidad va a crear elementos va a hacer ciertas cosas que HTML debería estar haciendo. Por lo que CSS es una especie de paso por encima de su, su límite aquí y entrar en el mundo del HTML. Ahora otra diferencia es que estos realmente no tienen acciones. tanto que como hover es, ya sabes, estás rondando sobre algo, en realidad estás haciendo algo. Se va a tomar algún tipo de eventos de hover. Pones el ratón sobre él y puede cambiar. tanto que como antes y después, estos no están realmente diseñados para hacer eso, aunque absolutamente se puede hacer eso. Pero estos van a ser básicamente agregando elementos HTML a tu página. Entonces sigamos adelante y saltemos al antes y al después. 18. Los elementos de pasos y pasados de los pasados de antes y: Antes y después de pseudo elementos son mucho como elementos HTML en línea. Pero no tenemos que escribir ningún HTML para estos. Para que podamos apuntar a ciertas cosas en nuestra página. Y básicamente podemos tener más HTML o al menos agregar HTML falso y luego agregarle un montón de estilo para que en realidad no tengamos que modificar nuestro HTML en absoluto. Entonces un buen ejemplo de esto es una caja. Y si vuelvo a mi navegador, así es como luce la caja. Es página centrada que tiene un borde negro. Es solo una caja de 300 por 300 píxeles. Ahora, lo que podemos decir es seleccionar esa caja y luego antes podemos hacerle todo tipo de cosas. Entonces lo primero que vas a querer hacer es que vas a querer un poco, para agregar algún contenido. Esto facilita la propiedad de contenido y típicamente simplemente agregamos un, un espacio vacío ahí dentro. Y eso solo le dice al navegador: Oye, mira, se supone que hay un elemento aquí. Y ya sabes, como cuando escribes un div vacío, no aparece en tu página. Lo mismo, pero vamos a agregar un espacio y eso asegura que sí aparece en la página. Entonces podemos hacer una exhibición. Por lo que podemos decir display block. Y entonces podemos dar un borde de diez píxeles, rojo sólido. Y veamos cómo se ve esto hasta ahora, esto no va a ser perfecto, pero va a estar bastante cerca. Y en este punto, en realidad, cuanto refresque esta página, vamos a ver si. Entonces tenemos algo ahí dentro que es genial y en realidad podemos entrar en nuestro elemento inspeccionar aquí y seleccionarlo. Podemos hacer todo tipo de cosas con él. Ahora podemos editar este CSS directamente en nuestras herramientas de desarrollador. Vamos a seguir adelante y darle a esto un ancho del 100%. Veamos qué hace esto. Y en este punto sólo vamos a experimentar. Se puede ver que le da un ancho de un 100% abultado por las fronteras, los bordes negros. Es decir, digamos que queremos darle una altura y un 100%. A ver si esto también se honra. Está bien, no está mal, no está mal. Digamos que queríamos mover esto. Entonces vamos a meternos en algún posicionamiento. Hagamos posición relativa en toda la caja misma. Pero luego en el pseudo elemento antes, este elemento falso que en realidad no existe en la página. Aquí no hay HTML. Podemos editar el HTML. Podemos decir, vamos a mover esto. Entonces vamos a mover esto a la parte superior derecha. Y así podemos decir posición absoluta. Y sabemos que esto va a funcionar porque es padre. Selector está usando posición relativa. Su elemento padre está usando posición relativa. Hacemos posición absoluta. Hagamos top menos diez píxeles, y hagamos a la izquierda menos diez píxeles. Y vamos a ver este tipo de golpes aquí arriba. Ah, en realidad eso es porque tenemos fronteras ahí dentro. Sí. Y diez píxeles, borde rojo sólido. Entonces simplemente lo solapamos. Adelante y hagamos 30 en su lugar. Ahí vamos. Ahora en realidad se puede ver que esto antes está encima del borde negro. Y un mejor ejemplo de esto es si hago el color de fondo es igual al negro en la caja, no el pseudo elemento. Antes. Podemos ver que el rojo está delineado encima de él. Ahora si quisiéramos cambiar cómo podíamos absolutamente, podríamos hacer. Y esto es parte del posicionamiento. Podríamos decir índice zed menos uno. Y eso lo estrena detrás. Ahora, de igual manera, podemos hacer lo mismo pero con después. Por lo que cada elemento puede tener un antes y un después. Podemos hacer. Cuadro colon, colon después. Y vamos a seleccionar esta casilla, pero vamos a crear un elemento after en lugar de un elemento Before. Adelante y copiemos. La mayoría de estas cosas va a ser muy, muy similar. Y en realidad podríamos agrupar estos selectores juntos si quisiéramos. Cambiemos esto de rojo sólido a azul sólido. Y en lugar de arriba, Hagamos abajo y derecha. Y veamos cómo nos resulta esto. Y no va a ser exactamente lo que esperas, pero lo va a hacer, va a mostrar algo y podemos ajustarnos a partir de ahí. Está bien, genial, genial. Entonces tenemos estos en estos elementos antes y después y están atrás. Vamos a seguir adelante y deshacernos de ese índice conjunto. O podemos hacer que sea positivo está en índice. Tengo como uno o dejar decir diez. Y eso son solo capas en la parte superior. Entonces ahora tenemos este lindo pequeño errado. ¿ Qué pasa si nos deshacemos de fondo? Y ¿verdad? Ok. Entonces justo después del elemento, va a estar justo dentro. En realidad se puede ver que aquí hay esta frontera, esta pizarra o ese borde de diez píxeles. Está justo en el interior. ¿ Y si dijéramos arriba e izquierda son los mismos que el antes? Se mueve exactamente donde esperamos que vaya. Entonces ahora como un ejemplo más, vamos a seguir adelante y deshacernos de esta parte de arriba a la izquierda. Vamos a deshacernos de esta parte superior izquierda. Y estos van a ser exactamente los mismos. En realidad ya no podemos ver estos, pero sí podemos seleccionarlos. Entonces tenemos un antes, y podemos decir que antes va a ser superior menos 30 píxeles y a la izquierda. Y yo solo subiré eso en el video aquí. Menos 30 pixeles. ¿ De acuerdo? Y podemos seleccionar el después y podemos hacer lo mismo, pero fondo diferente. Menos 30 pixeles, ¿verdad? Menos 30 pixeles. Y eso sólo nos da este bonito efecto de capas. Ahora veamos un ejemplo del mundo real. Esto es realmente, realmente genial, pero esto no es realmente un ejemplo del mundo real. Entonces lo que voy a hacer es que voy a crear aquí una RRHH, sólo una regla horizontal. Y voy a crear un nuevo enlace. Entonces un, un elemento no va a ir a ninguna parte y darle a esto una frontera. Adelante y pongamos algo de lorem aquí también. Y tira esto justo en el centro. Y para que eso deshizo mis cosas allá arriba, eso está totalmente bien. Y cuando acerque aquí, voy a acercarme de verdad, muy bien aquí. Déjame acercar al 200%. Digamos que queremos darnos una frontera. Deshaznos de este estilo predeterminado y vamos a darle a este un borde adecuado. Y cuando se cierne sobre él, es, la frontera se hace más grande. Entonces lo que podemos hacer es seleccionar R, un elemento, decir decoración de texto. Ninguno. No hagamos nada ahí dentro. Cambiemos el color a negro. Y veamos cómo se ve esto. Ok, genial. Encaja. Ya ves que es un eslabón, encaja. No le dijimos que se vinculara hasta que pasáramos sobre él. Lo que podemos hacer ahora es decir, Hey, elemento, antes. Hagamos contenido con un espacio. El ancho es igual a un 100%. La altura es igual a, digamos, cuatro píxeles. Esto nos da un color de fondo. Y sólo voy a mover eso hacia arriba al centro del video. El color de fondo va a ser azul. Y vamos a ver cómo se ve esto. Nada todavía. ¿Por qué es eso? Bueno, tenemos que darnos un puesto. Entonces hagámoslo en nuestro elemento principal aquí, posición relativa. Y luego en el antes, hagamos posición absoluta. Abajo 0, izquierda, 0 tiene un ancho de un 100%. Por lo que esto ahora debería aparecer para nosotros. Ahí vamos. Entonces eso en realidad no se ve muy bien en absoluto. Y ese no es realmente el punto aquí. El punto es mostrarles que podemos darle una frontera a esto. Ahora esto no es diferente a fondo fronterizo. ¿ Qué dijimos aquí? Cuatro píxeles, azul sólido. Pero ahora en el hover, podemos empezar a emparejar, mezclar y emparejar estos. Podemos decir un hover antes. Y cambiemos esa altura a 14 píxeles. Dale un refresco a eso. Y mira eso. Ahora cubre el texto. En realidad ya no podemos ver el texto ahí dentro. Y en cambio lo que podemos hacer es decir, estar siempre debajo del texto, estar debajo de él como estamos, como si estuviéramos estratificando un trozo de papel encima de otro pedazo de papel. Entonces podemos decir que el índice va a ser menos uno. Por defecto, todos los índices zed o los índices Z están en 0. Vamos a decir, tira esto justo detrás de este texto. Y ahora bam, bueno, todavía no podemos ver realmente eso es, cambiemos eso de azul a amarillo. Ahí vamos. Eso se ve un poco mejor. Eso sigue siendo muy difícil de ver en el video. Hagamos rojo. Eso está mucho mejor. Y así ahora tenemos este pseudo elemento usando un estado hover, y en realidad estamos modificando este elemento en sí. Entonces si entramos aquí y ampliamos nuestra a, podemos ver que hay un antes. Y otra cosa genial que podemos hacer es hacer clic en ese punto punto-punto, esa elipsis. Y podemos hacer por el hover estatal. Y eso se cierne este estado para nosotros como si pusiéramos nuestro ratón sobre él de forma permanente. Y luego podemos hacer click en esto antes y podemos ver qué está pasando aquí dentro. Incluyendo el un selector usando una pseudo-clase de hover usando un pseudo elemento antes. Ahora lo que me gustaría que hicieras es darle una oportunidad a esto. Esto es muy, muy importante porque esto es parte de CSS avanzado. Nos estamos metiendo en las partes carnosas de CSS. Entonces dale una oportunidad a esto. Intenta crear un enlace, prueba a crear cuadros con elementos antes y después. 19. Cambiar la primera letra y la primera línea utilizando elementos pseudo: Con el selector de pseudoelementos, podemos apuntar a la primera letra de un elemento. También podemos apuntar a la primera línea de un elemento. Entonces sigamos adelante y creemos un párrafo aquí con un montón de Lorem. Y vamos a poner mucho calor aquí. Y todo va a estar en un solo párrafo. Y voy a poner varias líneas, solo mantén limpio mi código, pero va a parecer un párrafo en la página. Entonces ve aquí. Está bien, demasiado pequeño. Vamos a acercar. Y digamos que esto es como si estuviéramos escribiendo un sitio web o recodificando un sitio web para un periódico o algún tipo de revista. Y queremos que esa primera carta sea enorme. Podemos apuntar a eso. Podemos decir en nuestro estilo aquí, apuntar al elemento P. Y podemos hacer primera carta. Y entonces podemos hacer tamaño de fuente de, hagamos algo grande. Hagamos como 50 pixels. Y esto va a hacer de este l sólo el primero l, no los otros, sólo este mismo primero. Realmente grande. Adelante. Está bien, se ve bien, es más grande. Pero queremos que el texto se envuelva alrededor de él. Y sabemos que podemos hacer cosas envolvidas con flotar, flotar a la izquierda. Y esto es muy, muy importante saber, pero también es algo que hemos aprendido y CSS 101. Por lo que si no estás familiarizado con el flotador, tal vez quieras familiarizarte con el flotador. Es muy útil en ciertos casos como este. Y para que L siga siendo un poco demasiado grande. Pero lo que podemos hacer es seleccionar este p, bajar al fondo. No, no está ahí porque no es un elemento. Sudo y ahí vamos. Elemento de primera letra. Vamos a seguir adelante y cambiar el tamaño de la fuente. Sólo una justicia a no lo sé. Vamos a seguir haciendo esto más pequeño hasta que se vea decente. Sí, algo así. Y entonces también podemos agregar un margen de Lake 50 pixels. Si queríamos que realmente se destacara, podemos agregar un margen de cinco píxeles para que sea un poco más de aspecto liso. Y sólo voy a mover esto hacia arriba. Y este es el primer selector de letras. Entonces sigamos adelante y sumamos ese margen ahí también. Margen cinco píxeles. Ahora también podemos seleccionar la primera línea, y no va a ser necesariamente, esta línea de código va a ser esta línea. Y eso va a depender de tu navegador. Entonces nos estamos metiendo en algo un poco más sensible aquí. Y así sigamos adelante y digamos P. Primera línea. Y hagamos font-weight de negrita. Ahorra, refresca, y ahora está bowled. Ahora lo bonito de esto es que siempre va a ser esa primera línea. puede ver que son sólo las cuatro primeras letras aquí. Eso es realmente difícil de ver. Pido disculpas por eso. Pero si hago esto, siempre es esa primera línea. Por mucho texto que haya, siempre es esa primera línea. Entonces esa es tu primera letra y tus selectores de pseudo elementos de primera línea o pseudo selector. Y honestamente no vas a usar esto con demasiada frecuencia, pero es bueno saber que es posible hacerlo. No te voy a dar tarea para esta, pero sólo mételo en el bolsillo trasero, guárdalo para después. Sepa que esto es completamente posible en caso de que alguna vez esté trabajando con un cliente que tenga un sitio web estilo artículo como una revista o un periódico. 20. Resalta el texto con selección: Usando la selección, podemos decirle a nuestro navegador cómo debe ser el texto cuando el usuario lo selecciona. Así que al igual que cuando pasas el ratón y luego haces clic y arrastras LED, puedes ver que cambia el mío en el código VS un poco. Eso también podemos cambiarlo en el navegador. Entonces vamos a abrir esto en cromo. Abriéndolo en Chrome. Tenemos lorem ipsum, nada importante aquí. Y cuando seleccionamos, es solo el navegador predeterminado. Entonces, ya sabes, honestamente no hay nada de malo en eso. Pero si quisieras hacerlo un poco más interesante, sobre todo si tienes un artículo, sitio web como Medium, donde creo que si pasas el cursor sobre él, cambia el color de fondo a verde y el color a blanco. Entonces vayamos realmente y hagamos ese ejemplo exacto. Entonces lo que podemos hacer aquí es que podemos decir, y esto ni siquiera necesita un elemento en particular. Simplemente podemos decir, en cualquier momento que hagas cualquier tipo de selección, cambia ese color de fondo a verde, y cambia el color a blanco. Y ahora cuando guarde y vamos a ver esto es lo que era antes. Refrescar. Esto es lo que es ahora. Y eso es la selección. A mí personalmente me gusta eso. Me gusta eso cuando estoy en una página y quiero copiar algunos textos que sé exactamente dónde estoy, estoy seleccionando esto. Me dice que el desarrollador front-end que hizo este sitio web realmente puso el pensamiento en tiempo y esfuerzo en hacer esto. 21. Cómo añadir transiciones fluidas: Echemos un vistazo a las transiciones. Las transiciones nos permiten realizar ajustes sin problemas. Así como, ya sabes, cuando pasas el cursor sobre un elemento y lo mueves hacia arriba como diez píxeles lo harán actualmente se ve un poco yonkie. Es muy abrupto. Y en cambio con una transición, podemos hacer que sea suave por lo que se mueve suavemente hacia arriba y podemos decirle que escuche un cierto tipo de cambio como un ancho o un margen o posición, cualquier tipo de cosa. Realmente podemos transitar muchas cosas aquí. Pero en este ejemplo, deberíamos transitar usted enlaza. Entonces hagamos un enlace en un botón. Entonces hagamos un botón. Y no va a ser nada en ella. Y esto va a decir, haz click conmigo. Y así vamos a apuntar a este enlace. Y esto le da un color de fondo de fff. Entonces va a ser blanco. Ya se va a ver blanco, pero vamos a darle un blanco de todos modos, podemos transitar eso más adelante. Podemos decir que la pantalla es bloque en línea, y podemos decir que el relleno en la parte superior e inferior va a ser de cinco píxeles. Y a la derecha y a la izquierda van a ser de 15 píxeles. También le da a esto un color y color explícito. Y esto va a ayudar con nuestras transiciones. Por lo que los colores en realidad no van a ser blancos va a ser negro 000. Y vamos a ver cómo se ve esto. Sí. Está bien. Ahora bien, no del todo texto-decoración. Ninguno. Y vamos a darle una frontera. El borde es de un píxel, negro sólido. Y vamos a seguir adelante y hacer esto más grande. Zoom, zoom, zoom, zoom, acercar, in. Estoy al 500%, así que este es el botón. Y cuando se cierne sobre él y no pasa nada, vamos a añadir un hover. Podemos decir un flotador. Y así cuando pasemos por encima de esto, cambiemos el color de fondo para que sea negro. O podríamos hacer un color hexadecimal 000. Y cambiemos el color para que sea blanco o fff. Sigamos adelante y guardemos eso. Y está bien, entonces tenemos un estado flotante. Es un pequeño jackie. No realmente genial para los epilépticos Para ser honesto, pero podemos hacer que esto sea mucho más suave diciendo transición. ¿ Y qué queremos transitar aquí? Podríamos transitar todo y podríamos decir que tardaríamos 0.2 segundos en hacerlo. Entonces decimos transición todo como primer parámetro. Eso es lo que queremos que pase. El segundo parámetro es el tiempo que debe tomar. Y cuando refrescamos la página, se puede ver que se desvanece y se desvanece. Ahora, eso es mucho mejor. Ahora en realidad podríamos hacer que esto sea significativamente más preciso. Y honestamente, esto no es super performant porque tus navegadores ahora buscan cada cambio individual, va a buscar relleno de pantalla, texto coloreado, declaración, borde, y color de fondo en el estado de desplazamiento. A lo mejor no queremos eso. A lo mejor sólo siempre quisimos cambiar el color de fondo. Podemos decir cambiar ese color de fondo. En lugar de todo lo cambiamos a color de fondo, coincide con este nombre exacto de propiedad aquí arriba. Y va a tomar 0.2 segundos. Ahora esto va a cambiar. Ese color de fondo se va a desvanecer y en realidad podemos un poco difícil de ver. Entonces hagámoslo como 2.2 segundos. Y puedes ver este color de fondo cuando refresco la página aquí arriba, este color de fondo va a tardar un poco en desvanecerse, pero ese color va a ser instantáneo. C. Eso se ve un poco cool. Supongo que si te gusta ese tipo de efecto. También diga coma. Y me gusta poner esto en otra línea, color. Vamos, cambiemos esa longitud de transición a algo realmente largo. Digamos como cinco segundos. Y cuando subo aquí arriba, toca refresco. Vamos abajo. Desvaneciendo dentro y fuera. Tan agradable y lento. Ahora típicamente tus transiciones no son tan lentas. Normalmente tus transiciones son como 0.2 segundos y ésta podría ser de 0.5 segundos. Adelante y refresquemos algo así. Y así eso sólo lo hace un poco más agradable. Ahora también podemos cambiar cosas como el relleno. Pero mira esto cuando digo hover, relleno con cambio en el relleno de cinco píxeles y 15 píxeles. Cambiemos eso por el doble. Por lo que arriba y abajo van a ser diez píxeles. Izquierda y derecha van a ser de 30 píxeles. Esto va a parecer un poco Yankee c que realmente no queremos que queramos que sea agradable y suave. Entonces lo que podemos decir aquí es coma, comunidad coma coma y relleno. Y podríamos decir 0.4 segundos o porque es mucho más grande, en realidad podemos hacer esto como 1 segundo así. Ahora eso es otra vez, no el mejor ejemplo de la historia, pero es un buen ejemplo. Y esto es realmente bueno para el lago. Cuando tengas un sitio como vamos a ir a cohete man, no aprendas wag tail.com. Y se puede ver que este flotador tiene un poco de efecto ahí. O si fueras a flotar sobre esto, a esto se le llama tarjeta. Podrías cambiar el color de fondo. Puedes hacer que se desvanezca, se desvanezca. Puedes hacer este movimiento. Podrías hacer todo tipo de cosas con una transición para que no se vea tan adicto. Entonces eso es una transición. Lo que me gustaría que hicieras para esta lección es crear un enlace, convertirlo en un botón, igual que lo que hice, y luego cambiar el color de fondo cuando pases el cursor, no necesitas hacer todas las demás, pero solo cambia el color de fondo al pasar el cursor y asegúrate de agregar esa transición a tus elementos principales, no a tu pseudo selector, no a tu pseudo-clase. Tu elemento principal. 22. Cómo añadir fondos de degradado: De acuerdo, hablemos de gradientes. Existen dos tipos primarios de gradientes. Ahí hay lineal y radial. Un gradiente lineal va de lado a lado. Cualquier gradiente radial especie de emerge del centro. Ahora, sólo vamos a trabajar con lineal porque se ve mucho mejor. Y honestamente, no creo que alguna vez haya visto un caso en el que un gradiente radial se vea realmente bien. Pero si quisieras, si quisieras aprender un poco más allá de lo que te voy a enseñar en el ámbito de este curso, puedes buscar gradientes radiales y probablemente vamos a ver un ejemplo de ello de todos modos. Pero vamos a estar trabajando con gradientes lineales sólo porque en su mayor parte se ven mejor, al menos, al menos durante esta década en diseño web, se ve bien. A lo mejor volverán los estilos viejos y se verá bien tener tipo radial de gradientes pero lineares, mientras que en estos días, así que sigamos adelante y agreguemos un cuadro, y es debido box. Y en este recuadro vamos a tener algún tipo de gradientes. Entonces no lo llamemos caja, llamémoslo gradiente. Y en nuestro CSS podemos hacer gradientes, seleccionar ese elemento y podríamos decir la imagen de fondo background va a ser un gradiente lineal. Y esto va a tomar una dirección. Entonces una dirección, color uno, color dos. Y así esto en realidad no va a hacer nada. Voy a dejar esto aquí sólo por un segundo. Simplemente deja eso en la pantalla y vamos a hacer una altura de 500 píxeles. Y no necesitamos establecer un ancho porque es un elemento de bloque. Pero ya sabes, para buena medida ese es el ancho, 100%. Y así hay gradiente lineal aquí. ¿ Cuál va a ser esa dirección? Digamos que la dirección va a ser dos, ¿verdad? Entonces va a ir de izquierda a derecha. Se va a empezar con el color del negro, y luego se va a poner en amarillo. Y así vamos a seguir adelante y cargar esta página en Google Chrome. Y ahora tenemos este bonito pequeño gradiente. Ahora lo que está bien de esto es, esto va de izquierda a derecha, pero no necesitamos decírselo de izquierda a derecha. Podemos darle y ángulo. Podemos decir algo así como 45 DEG cuatro grados. Y eso lo cambia, lo cambia de negro en esta esquina a amarillo en esta esquina en lugar de izquierda a derecha, es de esquina a esquina. Ahora voy a ser honesto aquí, la mayoría de la gente en realidad no memoriza esto. Esto es algo realmente más agudo. La gente no usa gradientes lo suficiente para ser siempre memorable. Y también es un poco difícil averiguar exactamente qué tipo de ángulo quieres. Por lo que generalmente usamos algún tipo de herramienta CSS Gradient. Y entonces lo que voy a hacer es simplemente subirme a Google y voy a escribir generador de gradiente CSS. Y así hay punto CSS gradiente IO IO, Mozilla. Este es uno popular. Este ha sido popular desde hace varios años. Pero quiero decir, es justo como ese primero porque tengo en otros cursos dado a este una atención suficiente, vamos con CSS gradiente dot IO. Y así la idea aquí es que tienes un gradiente y podemos hacer, podemos hacer radial aquí. Entonces sigamos adelante y agarramos esto. Y yo sólo arrastro eso hacia abajo y eso se deshizo de él. Y así vamos a hacer radial. Y así es como luce la radio. Se inicia desde el interior y va hacia el exterior. Entonces hay un caso donde se ve bien. En este caso se ve bien. Ahora lo que estábamos haciendo era escuchar por alto este color era negro y luego este color por aquí. Y sólo seleccionamos que uno es blanco. Y así eso es radial, eso es lineal. Y podemos cambiar el ángulo y esas cosas bajando aquí, cambiando así este ángulo. No hay ángulo cuando se trata de radial aunque. Y ahora lo bonito de esto es que típicamente estos te darán exactamente el CSS que estás buscando. Y así esto en realidad es realmente agradable. Esto nos está diciendo que se trata de un gradiente radial. Es un círculo. Lineal va a ser de 0 grados. Adelante y cambiemos eso a 68 grados RGB 000, eso es RGBA negro, que tiene el alfa aquí, ese es uno, por lo que es completamente visible. Y 0% y luego otra vez, RGBA al 555255 al 55, eso es blanco. Una transparencia al 100% o tal vez esa es la redacción equivocada. De cualquier manera, lo puedes ver por completo y va a ir a un 100%. Por lo que empieza a 0 y va a 100. Y podemos cambiar eso. Eso es lo que significa ese 0 100%. Vamos, se puede ver que ese número está cambiando ahí. Y lo que parece esto es que podemos hacer esto agradable y apretado si quisiéramos, algo así. Y luego puedes tener texto a la izquierda. Podrías tener una imagen a la derecha si quisieras, si quisieras hacer ver a través de ésta. Justo así. Y puedes tener una imagen, una imagen de fondo así. Por lo que la mayoría de nosotros en realidad no recordamos todo esto sólo porque lo usamos con tan poca frecuencia. Son agradables de tener. Pero normalmente solo usamos algún tipo de herramienta que nos va a ayudar. Ahora, lo que es realmente bonito es que podemos hacer esto. Entra aquí, haz click derecho en el medio, y vamos a hacer este verde. Y podemos hacer todo tipo de cosas con esto, y no tenemos que averiguarlo a través del código. Hay herramientas que nos ayudan a hacer eso. Yo sugeriría usar una herramienta para algo como esto. Lo que me gustaría que hicieras es seguir adelante y Google CSS, generador de gradientes usó esta herramienta, usa otra herramienta, realmente no importa. Todos hacen lo mismo. Simplemente experimenta, y luego mira el código que te da. Copia ese código, y luego póngalo en tu página. Puedes cambiar todo el fondo de gradiente de tus elementos corporales. No olvides darle una altura de un 100% si seleccionas el elemento corporal o una clase o un elemento div como lo que hice. Y seleccioné el gradiente y luego simplemente lo aplicé ahí. Así que sólo sigue adelante y dale que un tiro es realmente, muy divertido. Se agrega un poco de especia agradable aquí página web también. 23. Cómo captar fondos y gradientes juntos y gradientes juntos y de: Etiquetando a lo largo de esa última lección, podemos crear una imagen de fondo para que parezca más oscura sin tener que hacer realmente mucho trabajo. Y ahora hay un par de maneras diferentes de lograr esto. Uno está usando un filtro que aún no hemos aprendido. O otro es usar un gradiente para capas en la parte superior. Y en esta lección vamos a usar el gradiente en la parte superior. Sólo porque a veces quieres un gradiente en la parte superior y vas a ver esto por todo el lugar. Una vez que veas esto, lo puedes ver como en todo Facebook. Se puede ver en todo Twitter. Hay gradientes por todas partes y son agradables y elegantes también. Entonces lo primero es lo primero, sigamos adelante y seleccionemos el elemento corporal. Y voy a dar este no, no sólo cuerpo. Es decir, es como el cuerpo y los elementos HTML. Voy a dar esta altura de un 100% y vamos a deshacernos del margen y el relleno. Y luego quiero seleccionar sólo el elemento corporal. Y aquí lo que puedo hacer es decir que la imagen de fondo va a ser un gradiente lineal. Vamos a darnos como un 180 grados. Y digamos que esto va a pasar del negro al negro, pero diferente, diferente opacidad. Entonces RGBA es 000, y entonces el alfa va a ser 0. Y eso va a empezar en 0%. Y luego se va a ir a RGBA 000, eso es negro otra vez, y eso va a ir a mientras podamos decir 0. Entonces eso en realidad no va a hacer nada, eso no va a degradar en absoluto. Pero podemos decir 0.6 para empezar con 60% negro transparento y luego dos. Y esto es tan difícil de leer. Adelante y pongamos esto en nuevas líneas, algo así. Ahí vamos. Y esto en realidad es una especie de meterse en la programación porque eso es lo que significan estos paréntesis. Significa que esto es una función. Hablaremos de eso en JavaScript. Una vez que hayamos terminado con CSS, aprenderemos más sobre eso en JavaScript. Pero lo que estamos diciendo aquí es que tenemos un gradiente lineal, un 180 grados, inicio con negro, es 60%, ve a través, va al 80% y va a terminar a un 100% por el camino. Entonces, solo veamos cómo se ve esto en Google Chrome. De acuerdo, así que ese es un bonito gradiente. Adelante y en realidad hagamos esto un poco más. Sí, ahí vamos. Por lo que el más tarde en la parte superior, más oscuro en la parte inferior. Ahora si quisiéramos agregar una imagen a esto, absolutamente podríamos. Pero primero necesitamos una imagen. Entonces vayamos a un Splash.com y echemos un vistazo a esta imagen. Rock, consigue este. Y voy a hacer clic derecho y copiar dirección de imagen. Y voy a hotlink directo a esto a esa imagen. Y lo que podemos hacer aquí es coma. Y vamos, quizá en realidad pongamos esto de nuevo en su línea original allí. Y me gusta hacer estas alineaciones, así que se ve bien. Y entonces podríamos decir URL, como una imagen de fondo regular. Pega esa URL ahí, punto y coma. Y sigamos adelante y echemos un vistazo a esto. Eso se ve bastante bien. Ahora sigamos adelante y eliminemos este gradiente lineal. Vamos a cortar eso por un segundo. Así es como se ve normalmente la imagen con un gradiente lineal encima de ella. Cómo se ve ahora. Ahora lo bonito de esto es que podemos agregar algo de texto. Pero antes de que hagamos eso, sigamos adelante y añadamos colores va a ser blanco. El tamaño de fuente va a ser algo enorme, como 90 píxeles. Y alinear texto va a ser Centro. Y así en nuestro cuerpo, ahora podemos decir, esto es un cohete. Guarda esto como un cohete. Y así este texto es un poco más visible frente a esto. Si sigo adelante y solo borro eso, ya sabes, es, no está mal, todavía lo podemos ver. Hagamos incluso esto. Hagamos relleno. Top 200 pixels. Nota vamos más allá, y eso es ir 500 píxeles. Entonces ni siquiera podemos ver todo eso ahora. Esa es sólo la naturaleza de esta imagen. Y no necesariamente podemos cambiar la imagen todo el tiempo. Pero lo que podemos hacer es que podemos arrojar esos gradientes lineales de vuelta aquí. Y ahora lo podemos leer perfectamente bien. Ahora, un caso en punto es si tomaste el CSS uno, oh, una clase. Si tienes un cohete man más opaco y espera till.com, eso es exactamente lo que está pasando aquí. Incluso es exactamente la misma imagen. Ahora me gustaría que le diera una oportunidad a eso. No olvides que tienes acceso a este archivo. Además, puedes hacer preguntas en el grupo de aprendizaje de código de Facebook si alguna vez tienes preguntas o tienes curiosidad por algo, o simplemente quieres obtener retroalimentación. 24. Cómo utilizar fuentes web personalizadas: Podemos cargar fuentes web personalizadas en nuestro sitio. Por lo que funcionan las fuentes de onda es que intentará acceder a la fuente en su computadora. Y hemos visto este tipo de antes en CSS 101, donde es como font-family y luego tiene como la primera fuente y luego como alguna especie de retroceso. Y la mayoría de la gente tiene como Arial. Y luego va a decir algo así como una fuente serif y una fuente Serif. Y así se va a probar este. Si no existe, va a probar este. Y si no existe y va a dejar que tu computadora elija. Pero digamos que éste no existe. ¿ Cómo hacemos que exista? Ahora una cosa bonita que podemos hacer es básicamente importarla de otro lugar. Para que podamos ir a fuentes dot google.com. Y sigamos adelante y solo agarremos una fuente de aspecto fresco que podamos encontrar algo que realmente sobresalga que va a ser un poco diferente. Ninguno de estos es bastante salvaje. Ahí está uno a éste, específico O. Y así solo hago clic en eso, selecciona este dial. Y puedo añadir diferentes variaciones de fuente si quisiera. No voy a hacerlo, sólo voy a incrustar aquí arriba. Y podemos importar ya sea a través, directamente a través de nuestro CSS, que es bastante cool, o a través de nuestro HTML. Voy a hacer la manera HTML. Entonces toma toda esa copia. Pido disculpas, eso es pequeño de ver, pero si te sigues, será más fácil en tu computadora verlo. Y luego por encima de nuestro estilo, solo pega eso ahí dentro. Ahora aún no sabemos cuál es este nombre. Pensamos que es específico o, pero podría ser minúscula. Las mayúsculas podrían tener un nombre diferente. Nosotros, nunca lo sabemos. Entonces lo que hacemos es volver aquí y dice reglas CSS para aplicar familias de fuentes, font-family Pacifica o cursiva. Adelante y cambiemos eso. Y lo que voy a hacer es voy a comentar eso fuera y vamos a ver algo de Lorem Ipsum, Lorem Ipsum. Y sigamos adelante y cambiemos de nuevo ese tamaño de fuente a algo más grande, algo así como 45 píxeles. Y esto es lo que vemos. Esta es nuestra fuente estándar. Si descomento Pacific, oh, lo cambia. Ahora, esto es lo que pasa es que si no agrego esta línea aquí, si acabo de cortar eso de mi código. Se va a cursiva. Esto es lo que usa mi computadora cuando se le dice que use cursiva. Entonces está diciendo: Oye, la computadora de Caleb usa Pacifica, pero si no tiene Pacifica usa cursiva, bueno, Pacific o no existe. Y así lo que dijimos, que exista en este elemento HTML va a decir, oye, entra aquí, descarga este archivo llamado Pacifica. En ese archivo, sabemos que se llama Pacific o.Así que ahora podemos tener acceso a él y usarlo. Justo así. Lo que me gustaría que hicieras es darle una oportunidad a esto, ve a fuentes dot google.com, elige una fuente que sea gratis. Sí tienen algunos aquí que se pagan. No pague una fuente En este punto, por favor. Simplemente encuentra una fuente gratuita como Robodog. Robodog es uno bueno. Podrás elegir todos los estilos diferentes si lo deseas. Estos son diferentes pesos de fuente también. Entonces llegamos hoy como nosotros, como si eso fuera como si eso fuera así. Y podemos usar estas diferentes familias de fuentes aquí. Adelante y dale una oportunidad a eso. Intenta usar una fuente personalizada. 25. ¿Qué son las transformaciones?: De acuerdo, hablemos de transformaciones. Una transformación es una forma en la que podemos rotar, sesgar escala, o alejarnos en elemento de su punto natural. Ahora en este ejemplo, solo tengo un cuadro regular en mi página. Y cuando acabo de abrir esto a caja regular, De hecho, vamos, vamos a añadir un margen a esto. Hagamos margen 50 pixels y auto. Y eso va a centrar una línea que para mí. Ahora, sigamos adelante y pasemos por algunas de estas transformaciones. Ahora las transformaciones no son difíciles. Podemos mezclarlos y emparejarlos si quisiéramos. Pero vamos sólo de uno a la vez. Entonces empecemos primero con traducir a este es interesante. Traducir, creo que personalmente no es el nombre propio. A la propiedad se le llama transformada. Y la clave, o la declaración completa se va a transformar traducir, y luego toma paréntesis. Y podemos mover esto en el eje x y eje y. Por lo que podemos decir movernos en el eje x, a 100 píxeles, en el eje y, a 100 píxeles. Y cuando volvemos a nuestra página, refrescamos, podemos verlo realmente movido. Entonces eso es lo que hace Traducir. Simplemente lo mueve, se traduce donde se sienta naturalmente en la página. Esto lo hemos hecho con posición, posición relativa, posición absoluta, posición fija, pegajosa. Hemos hecho todo tipo de movimientos así. También podemos usar margen en la parte superior y la izquierda para una especie de empujar el elemento alrededor, pero traducirse como otra forma de hacerlo, que es realmente, realmente agradable. Echemos un vistazo al siguiente. Entonces voy a comentar esto. Y voy a comentar esto usando CSS adecuado. También podemos hacer rotar. Veamos qué hace Rotar. Por lo que queremos hacer transformar, transformar, rotar. Hagamos 45 grados DEF por grados. Y eso sólo lo rota para nosotros. Y podemos hacer cualquier tipo de licenciaturas que quisiéramos. Podríamos hacer como rotarlo 68 grados o 91 grados, lo cual es algo parecido a rotarlo un grado o diez grados. Podemos rotar esto tanto como queramos. Si sí rotas perfectamente 90, va a parecer que no pasó nada sólo porque se trata de un cuadrado. Entonces eso son 90 grados, eso 0 grados, 90 grados. Y luego sólo porque de nuevo, la forma en que funciona la geometría. Entonces si alguna vez te gusta, oh, no sé si realmente está funcionando. Intenta cambiarlo de como 90 o de un 180 o 270. Intenta cambiarlo a como 200 y no, no a 370. Hagamos como 310 grados y esto va en círculo también. Por lo que el número máximo de grados es de 360 grados. A continuación tenemos forma de tendencias. Y me encanta este se llama Escala. Y así podemos escalar esto. Básicamente acercar este elemento y podemos, podemos decir escala en 200% o escalar a, y esto lo va a hacer más grande. O si escala en 1.1.3. Entonces aún más grande, pero no tan grande como dos. Y comentemos eso fuera. Entonces no hay escalado. Esto es lo grande que naturalmente es ese escalado. Y por último, vamos a tener sesgo. Entonces podemos hacer transformar sesgo y tenemos x e y. podemos decir sesgo en la x e y, o podemos decir simplemente sesgar X si quisiéramos. Hagamos sesgo X e Y toma dos valores. Entonces hagamos 20 grados, y también hagamos otros 20 grados. Entonces eso va a escalar en la x e y. y se ve sesgada. Y lo bonito de esto es que va a sesgar tu texto. Entonces si hago lorem aquí, disculpe mi texto. Y si quisiera como solo ejemplo, podríamos comentar eso fuera. Y podemos decir que se forman tendencias. Vamos a ver que askew como ejemplo de sesgo X apenas 20 grados. Y no vamos a sesgar la y en absoluto. Y eso es lo que parece. Por lo que lo sesga a lo largo del eje x izquierda y derecha. Y lo va a sesgar a lo largo del eje arriba y abajo así. Entonces esa es la transformación. No vas a usar estos demasiado hasta que te metes en diseños realmente elegantes es realmente dementes en los que me gustaría que te metieras con el tiempo. Entonces solo escribe esto en tu bolsillo trasero y sabes que puedes transformar cosas como esta. ¿ En caso de necesitar alguna vez? 26. Cómo hacer animaciones con CSS: De acuerdo, echemos un vistazo a las animaciones. Animaciones Moveamos las cosas de una manera suave y controlada. Se parece mucho a una transición, pero no necesariamente necesitamos algún tipo de evento para activarlo. Al igual que, ya sabes, cuando pasas por encima de un enlace y esa transición tipo de cambios. Bueno, eso es porque pasas el ratón sobre él. Pero y si solo quisiéramos que algo se moviera en la página sin algún tipo de disparador, podemos hacerlo con una animación. Y lo bonito de eso es que podemos decirle a la animación que empiece de inmediato. Podemos darle algún tipo de retraso. Podemos hacer todo tipo de cosas con animaciones. Por ejemplo, podríamos hacer que las cosas se muevan, podemos hacer que las cosas roten y podemos hacer que las cosas salten o reboten si quisiéramos. O realmente cualquier cosa que podamos hacer con CSS podemos animar. Entonces lo que voy a hacer aquí es que tengo una caja. Y vamos a seguir adelante y sólo mostrar esta caja y vamos a hacer radio de frontera 50%. Y esto va a ser una caja, pero también va a ser un círculo. Se va a exhibir como un círculo. Entonces aquí vamos. Tengo este círculo. Nada de fantasía. Es completamente estático. Entonces lo primero es lo primero, cuando estamos creando una animación, necesitamos darle un nombre de animación. Entonces sigamos adelante y creemos una nueva animación. Utilizamos el símbolo at, marcos clave y luego un nombre. Entonces voy a llamar a esta diapositiva me. Y va a tomar un de, y va a tomar a2. Ahora, quiero asegurarme de que esto sea movible. Entonces digamos que esta posición de este elemento va a ser absoluta, absoluta. Va a estar en la parte superior de mi página y en la parte superior izquierda de mi página. Y cuando refresco la página, simplemente abraza esa parte superior de esa pared superior de aquí y esa pared izquierda de allá. Entonces lo que ahora puedo decir es de arriba es igual a 0. Y digamos que la izquierda es igual a 0. Y a donde quiero que se vaya queda al 100%. Entonces, solo movámoslo a la izquierda todo el camino a través de la página. Y cuando refresque esta página, no va a pasar nada porque creamos una animación, pero no configuramos la animación para que sea aplicable a nuestro elemento. Entonces lo que hacemos en nuestro elemento es decir nombre de animación es igual a deslizarme y esto es sensible a mayúsculas y mayúsculas. Entonces tengo una M mayúscula ahí dentro. Asegúrate de tener M mayúscula en la tuya si estás usando mayúscula M. Así que tiene que ser exactamente igual. Cuando guardamos esto y refrescamos. En realidad vimos que no funciona. Vamos a seguir adelante y darle a esto una duración de animación. No sabe cuánto tiempo, para deslizar cuatro. Digamos que se va a deslizar durante cuatro segundos. Ahora volvamos atrás. Y en cuanto le demos una duración se va a mover todo el camino través de la página y luego fuera de ella, y luego empieza de nuevo. Ahora si quisiéramos hacer esto para siempre, una animación, iteración, recuento, recuento de iteración, lo clavó. Y diríamos infinito, infinito. Y va a ir hasta el final y empezar de nuevo y empezar de nuevo así como así. Ahora si quisiéramos movernos hacia la izquierda y luego volver, podemos darle una dirección de animación y dirección de animación. Y podemos decir que todos cumplen ocho. Aguanta. Nos refrescaré y se irá a la izquierda y luego se va a deslizar. Se fue todo el camino a la izquierda y luego se va a deslizar hacia atrás a la izquierda y se va a mover hacia atrás a la derecha y luego deslizarse hacia la izquierda. Ahora esa es una animación sencilla. Podemos hacer que estos sean significativamente más complicados si quisiéramos. Podríamos simplemente comentar esto por completo y vamos a crear una nueva animación. Entonces comenté eso fuera y es como si ni siquiera existiera. Para que podamos hacer fotogramas clave, deslízame. Entonces este va a ser exactamente el mismo nombre que éste de aquí. Simplemente pasa a ser que éste está comentado. Y luego podemos decir algo así como al 0%, hacer algo, luego agregar 50%, hacer otra cosa, y luego agregar un 100%. No, ahí no. Entonces a un 100%, haz algo más. Entonces al 0%, ¿qué queremos que haga esto? Queremos que esto sea en la parte superior, 0, izquierda, 0 al 50%. Cambiemos el color de fondo a azul, y en realidad pongamos el color de fondo a negro. Por defecto. El color de fondo es igual al negro. Y luego a un 100%, cambiemos nuevamente el color de fondo, color de fondo es igual al amarillo. Y sigamos adelante y veamos cómo se ve esto. Ah, en realidad necesitamos un 100% para quedar, 100%. Y entonces lo que esto va a hacer es decir al 0%, Aquí es donde se debe aplicar el CSS. Este tipo de CSR debe aplicarse al 0%, al 50% de lo que sea que sea la animación, esa duración de animación es de cuatro segundos. Por lo que al 50% o dos segundos cambia el color de fondo a azul y debe ser completamente azul en ese punto. Y va a tratar de ser agradable y suave. Y luego a un 100%, a cuatro segundos, ese color de fondo va a ser totalmente amarillo y la posición se va a dejar al 100%. Adelante y demos un tiro a esto y dejemos ver cómo se ve esto. Al igual que eso y luego va de amarillo a azul a negro. Ahora lo que me gustaría que hicieras es que crearas una animación que haga algo como esto. No obstante, quiero que hagas una caja o un círculo o algo así. Incluso puedes animar una imagen si solo quisieras hacer un div poco con una imagen en ella, quiero que hagas la tuya ir de arriba a la izquierda arriba a la derecha, abajo a la derecha, abajo a la izquierda, y luego volver arriba a la parte superior izquierda. Por lo que quiero que el tuyo recorra todo el marco de tu página. No lo olvides, vas a necesitar usar posición absoluta para esta posición absoluta. Vas a querer establecer el estado inicial en tu elemento antes de entrar en los fotogramas clave. Entonces esto dice que top es 0, left es 0, pesar de que lo estoy redeclarando aquí, eso es ALK y es bonito y explícito. Y luego quieres darle un nombre de animación que necesita que coincida con tu nombre de fotogramas clave aquí abajo. Darle una duración, de lo contrario no se va a trabajar. Y luego para tu tarea, para esto, vas a estar usando para porcentajes. Entonces 02550%, 70 o 75% más bien. Y entonces tal vez posiblemente un 100% de media deja eso a ti, mira cómo te funciona eso. Adelante y dale un tiro a eso si te atascas, no lo olvides, puedes hacer preguntas y el aprendizaje a codificar grupo de Facebook estamos aquí para ayudar. 27. Flexbox: el nuevo tipo de diseño de página: De acuerdo, hablemos de los diseños de tablas no son diseños de tablas por diseños de página. Por lo que hasta este punto, probablemente has estado usando display inline-block. Probablemente has estado usando tablas o flotando para mover tus elementos a través de tu página. Pero hay una mejor manera. Hay dos mejores maneras de hacer esto en realidad en la primera es flexbox. Entonces te voy a enseñar flexbox. Es importante que te familiarices con flexbox. Te voy a enseñar la, la base de flexbox. Y luego quiero que te vayas y quizá explores flexbox un poco más allá. Ahora, la cosa con flex y lo que vamos a estar aprendiendo después de grid es estos son módulos CSS muy grandes y no necesitas saberlo todo. Come como si no fuera necesario memorizarlo todo honestamente. Necesitas recordar una especie de como funcionan ciertas cosas. Pero entonces solo necesitas poder Google tus respuestas más adelante. Porque honestamente, llevo mucho tiempo escribiendo CSS y aún no recuerdo todas las formas de aplicar flexbox de la parte superior de mi cabeza. Y esa es sólo la naturaleza de la bestia. Hay mucho que aprender en CSS y no hay forma posible de que puedas aprenderlo todo y recordarlo todo. Solo necesitas poder recordar cómo obtener tus respuestas. Y de nuevo, eso es alrededor del 50% del desarrollo web en estos días es saber encontrar tus respuestas. Entonces hablemos de flexbox. Flexbox es un módulo de diseño que facilita el diseño de estructuras de diseño flexibles y receptivas sin usar flotador o posiciones o tablas y cosas por el estilo. Entonces sigamos adelante y creemos un div. Y voy a llamar a esto el nominal, llamar a esto contenedor. Y aquí digamos que tengo dos elementos y los quiero lado a lado. Entonces tengo un div aquí y llamo a esto a la izquierda y tengo un div aquí. Recuerda esto, ¿verdad? Y cuando arranque esto en mi página, y esto es sólo de la última lección que hay ahí. Dice Izquierda y Derecha. Ahora, ¿y si queremos que en realidad sean izquierdas y derechas? Si bien podemos flotarlos, podemos posicionarlos, podemos hacer todo tipo de cosas, pero hay una mejor manera. Y eso es flexbox. Entonces lo bonito de esto es que es bastante sencillo empezar y se puede poner realmente, realmente apresurado por la línea porque hay mucho que aprender, pero empezar es realmente fácil. Entonces sigamos adelante y seleccionemos nuestro contenedor. Y vamos a decir exhibición. Esto como un nuevo tipo de pantalla es el lino. Vamos a guardar eso, refrescar nuestra página, y ahora es de izquierda y derecha. Y sigamos adelante y seleccionemos esos contenedores, elementos de contenedor o artículos de contenedor. Y vamos a darle a esto una frontera. Un píxel, rojo sólido. Enfriar. De acuerdo, entonces tenemos algo que se sienta uno al lado del otro. Adelante y hagamos. Cada uno de estos artículos. Podría ser, digamos 50%. Entonces decimos base flex y queremos que esto sea del 50%. Ahora esto es flexible por lo que no usamos la palabra width porque width está implicando un valor codificado duro. Base flexible va a decir inicio al 50%. Pero sabes qué pasa si la columna derecha ocupa más espacio y la columna izquierda, se permite que se encoja la columna izquierda, o viceversa. Se permite que se encoja la columna derecha o se permite que la columna derecha crezca. Entonces lo que podemos hacer aquí es que podemos decir que la clase es igual, ¿verdad? Y entonces podemos decir, ya sabes, si hay, vamos a disfrazarnos con nuestros selectores aquí, container div dot, ¿verdad? Podemos decir que esta base flex necesita ser del setenta y cinco por ciento. Adelante y refresquemos nuestra página y vemos que ahora ocupa un 75%. Y esa izquierda en realidad se encogía un poco. Y aquí podemos hacer un ejemplo realmente drástico de decir como 95% Y se está encogiendo tanto como sea posible aquí. Ahora podemos decir que, hey, por cierto, estos no se les permite encogerse, Estos tampoco se les permite crecer. Por lo que podemos decir flex shrinking es igual a 0 y flex grow también es 0. Y lo que esto va a decir es esta base flexible, esta columna de la izquierda siempre será de al menos 50%. Y ahora lo que no ves es que puedo desplazarme por aquí, es que a la derecha es el 90% del ancho de la ventana. Simplemente pasa a estar pasando a la parte de la página que no podemos ver por defecto. Ahora me voy a deshacer de eso justo ahí. Sólo porque creo que iba a hacer esto un poco demasiado complicado, pero ese fue un pequeño ejemplo divertido. Y ahora no podemos desplazarnos a la izquierda y a la derecha, y tenemos el 50% aquí y el 50% allá. Ahora qué pasa si quisiéramos agregar otro contenedor que pudiéramos, u otro artículo, podríamos decir que éste debería ser centro. Entonces nos queda por centro y luego por aquí tenemos escribir. Y de nuevo, esto está ocupando el 50% de mi ventana, 50% de mi ventana, y luego escribir solo ocupando el 50% de mi ventana para un ancho total de un 150%. Y esto puede volverse realmente, realmente frustrante. Hay una manera de evitar esto. En nuestro contenedor. Podemos decir flex wrap, envolver la página. Entonces lo que esto va a hacer es decir, esto es 50%, esto es 50%. Si algo va por encima de un 100%, simplemente baje hacia abajo a una nueva línea. Y estos en realidad sí van a sus propias líneas porque esto es del 50% más un píxel a ambos lados. Sigamos adelante y cambiemos todo en nuestra página a caja dimensionando caja de borde para que nuestras cajas también incluyan el ancho del borde. Y boom, ahora estamos trabajando con diseños. Ahora solo podemos seguir agregando elementos a, solo podemos seguir agregándolos y ellos solo seguirán apilándose de la forma en que queremos que se apilen así. Ahora, podemos cambiar esa base flexible. Cambiemos esa base flex a algo así como el 20%. Y ahora tenemos diez celdas, todo tipo de lado a lado y bonitas y apretadas juntas. Y son flexibles. Significa que ya no necesitamos usar tablas. Ya no necesitamos usar flotante o posición absoluta con relativa y cosas así. Podemos usar flexbox para poner las cosas una al lado de la otra. Ahora bien, este no es el mayor ejemplo. Un mejor ejemplo va a ser si hacemos esto, vamos a crear en nuestro contenedor div, y esto se va a llamar navegación. Entonces démosle a esto una clase de navegación. Y vamos a crear otro llamado contenido. Contenido aquí. Y así lo que puedo decir es, mantengamos el dimensionamiento de caja. Mantengamos nuestro contenedor para ser display flex, flex rap, por lo que se envuelve en una nueva línea si lo queremos. Vamos a deshacernos de estas cosas aquí dentro excepto la frontera. Y vamos a reiniciar efectivamente. Está bien. Por lo que no tenemos una base flex o un ancho de flexbox es una forma que se puede pensar en ello. Tenemos que establecer ese ancho ahora. Ahora bien, no queremos establecer necesariamente la base flex en ambos. Esto es seleccionar el contenedor y ambos desarrolladores, queremos seleccionarlo en la navegación y contenido. Entonces sigamos adelante y tecleemos Navegación. Demos a esto una base flexible. Y 20%. ¿ Y se permite crecer flex, crecer? No. ¿ Se permite encogerse sin embargo? Flex retráctil, sí. Vamos a decir que se permite encogerse si es necesario. De acuerdo, así que eso es 20% del ancho de mi ventanal. Esa es toda esta sección blanca que estamos viendo aquí. Y para el contenido, hagamos contenido de punto. La base Flex es igual al 80%, el resto del 100% menos 20%. Y hagamos lo mismo aquí donde decimos flexionar, crecer, y encogernos. Pero el contenido es más importante. Entonces, ¿se permite crecer? Sí, se le permite encogerse. Digamos que no. Ahora tenemos algo de contenido ahí dentro y podemos deshacernos de todo eso ahí dentro y podemos hacer todo tipo de cosas. Podemos decir H1, párrafo HelloWorld con un menor ellos. Podríamos hacer otro H2 y otro rumbo, Hola mundo otra vez. Y podríamos hacer otro párrafo con algún lorem ahí dentro. Y boom, tenemos navegación, tenemos contenido, tenemos un diseño de página. Podemos, aunque quisiéramos poner un encabezado aquí, podemos hacer encabezado de punto. Y vamos a seguir adelante y darle estilo a la cabecera R-dot. Eso es decir cabecera de punto. Base Flex es un 100%. ¿Puede crecer? No, no queremos que sea más de un 100%. ¿ Puede encogerse, flexibilizarse, encogerse? No, tiene que ser un 100% todo el tiempo. Digamos que el encabezado bonito tiene un color de fondo de fff. No. Hagamos CCS, CCC. Y digamos que el color necesita ser cinco por cinco. Parte inferior del borde, dos píxeles, negro sólido. De acuerdo, eso casi funcionó. Solo necesitamos algún contenido real ahí dentro. Entonces cabecera. Piensa en eso. Está bien, eso se ve un poco terrible. No puedo convivir con eso en buena conciencia. Entonces vamos a hacer el color de fondo es igual a cinco f cinco de cinco colores va a ser relleno negro. Van a ser 20 pixeles. Ahí vamos. Y si seguimos adelante y nos deshacemos de esa frontera, y porque es lo único ahí dentro, podemos deshacernos de todo, pero solo comentemos eso para que puedas acceder a este código más adelante si quisieras. Tenemos algún tipo de diseño de tabla o no una tabla a o, pero en CSS 101, lo hicimos con una tabla en CSS 201. Por favor, no uses más mesas. No necesitamos tablas para diseños. Ahora podemos usar flack. Y esta es la forma en que deberías estar creando diseños de página en el futuro. Flex o grid hablará de grid en la siguiente lección. Ahora lo que me gustaría que hicieras es pasar probablemente 20 minutos, tal vez incluso más. Vas a querer establecer el flex de visualización en un elemento padre. Por lo que tenemos nuestro elemento padre. Todos los elementos secundarios serán elementos flex. Eso es lo que se llaman elementos flexibles. Por lo que hemos conseguido contenido de navegación y elemento de encabezado. Y luego quiero que establezcan la base flex de ellos. A ver si puedes conseguir que el flex rap funcione. Flex crece y encoge, límpiate con eso. Entonces ya ves si puedes conseguir que eso funcione para ti o no funcione para ti y tener una idea de cómo se supone que funcione. Y quiero que, antes de pasar a la cuadrícula, creéis algo que se parezca un poco a esto. Ahora no necesita lucir guapo. Nos estamos centrando en el diseño aquí, donde tenemos una columna izquierda aquí. Tenemos una columna derecha aquí, y tenemos una fila en la parte superior llamada cabecera. Adelante y dale una oportunidad a eso. Recuerda si te quedas atascado, haz preguntas abajo, haz preguntas en el grupo de aprendizaje a codificar Facebook. muchos los que sabemos mucho de flexbox, podemos ayudarte a que tuvieras clades de un momento. 28. Cuadrícula: la tierra prometida de los diseños de la página: Grid es una forma aún mejor de crear un diseño de página. Es más avanzado y flexbox y está específicamente diseñado para ser bueno en la elaboración de diseños de página. Entonces si bien flexbox tiene su propósito como poder alinear verticalmente las cosas, lo cual es bonito, no cubrimos eso. Eso es algo que tal vez quieras ir y google en tu propio tiempo aunque como un poco de tarea extra. Grid no está diseñado para hacer eso. Grid tiene literalmente para un diseño de plantilla. Entonces cuando se trata de grid, hay algunas cosas que necesitamos saber. Hay columnas, filas y canaletas. Y a estas canaletas, les llamamos brechas. En marcos como Bootstrap, los vas a ver llamados canalón. No los llamamos canaletas técnicamente, y CSS se llaman brechas. Entonces tenemos columnas, filas y huecos entre las columnas y las filas. Y al igual que una tabla HTML, podemos hacer que cada celda pase una o más columnas o filas. Entonces vamos a sumergirnos en esto. Entonces sigamos adelante y creamos nuestra primera cuadrícula. Vamos a crear un ID aquí y tengo que cambiar de plantilla de Django de nuevo a HTML. Vamos a seguir adelante y crear un elemento contenedor llamado grilla. Y tiene un ID de grilla. Y vamos a darle a este un artículo, y sólo llamemos a éste. Y acabo de hacer nueve artículos aquí. Ahora, si refrescamos nuestra página, vamos a ver del uno al nueve en sus propias líneas. Esto es completamente esperado porque actualmente esto no está usando una cuadrícula, esto está usando bloque de visualización predeterminado básico, y estos son todos divs. Entonces lo que podemos hacer aquí es que podemos seleccionar nuestra cuadrícula y podemos decir display grid y un nuevo tipo de display aquí podemos decir grid. Y esto sólo lo va a convertir en una grilla. Entonces si echamos un vistazo ahora, no pasa nada. Tenemos que decir que esto tiene una plantilla de cuadrícula, cuadrícula, columnas de plantilla. ¿ Y cuántas columnas queremos? Bueno, tenemos nueve secciones, así que hagamos tres por tres. Entonces hagámoslo auto, auto, auto. Entonces estas son columnas, y ésta va a ser la columna 123. Adelante y veamos qué hace esto. De acuerdo, estamos llegando a algún lugar ahí todos uno al lado del otro. Eso es realmente bonito. Vamos a seguir adelante y seleccionar cada elemento aquí. Hagamos artículo. Y vamos a darle a esto un borde, un píxel rojo sólido. Y esto sólo nos permite ver con qué estamos trabajando aquí. Ahora digamos que queremos crear algún tipo de brechas entre éstas. Podemos hacer esto con una brecha de columna de rejilla o brecha de fila de cuadrícula. Se va a ver así un hueco de columna de rejilla. Entonces brecha de columna de cuadrícula, y eso va a ser, digamos 20 píxeles. Y así crea un pequeño hueco entre nuestras columnas. O podríamos hacer brecha de fila de cuadrícula. Y eso crea espaciado entre filas r. Y en realidad podemos tener ambos al mismo tiempo. Por lo que brecha de columna y brecha de rollo de 20 píxeles. Y ahora tenemos una cuadrícula bonita aquí. Pero esto no es tan grande para plantillas de página. A las plantillas de página suelen tener algún tipo de encabezado, algún tipo de navegación, Algún tipo de pies de página. Sigamos adelante y creemos eso. Vamos a crear el elemento uno. Hagámoslo a través del 123 y luego nos desharemos del 23. Y esto se parece mucho a trabajar con la tabla, pero está usando CSS. Entonces lo que voy a hacer aquí es que voy a copiar todos esos. Copia. Pega y sólo da estos nombres de elementos aquí. Por lo que todos estos van a compartir el estilo del borde rojo sólido de 11 píxeles. Seleccionemos el elemento uno. Elemento uno. Y podemos decir que la columna de cuadrícula va a comenzar en el ítem número uno y va a terminar columna de cuadrícula y en el ítem número tres. Y entonces lo que estamos diciendo aquí es empezar en la columna uno justo por aquí, 23. Y va a hacerse cargo de todo esto. Y en realidad hago eso mal. Deberían ser arranques a una aquí, dos allá, tres allá, y luego por ahí, cambiemos eso a cuatro. Y ahora el punto uno va a ser cabecera y se desplazó, desalojó el número 23. Entonces si quisiéramos, podríamos deshacernos de esos si quisiéramos. No necesitamos hacerlo. Vamos a seguir adelante y en realidad deshacernos del 23. Por lo que el punto 23. Ahí vamos. Ahora fusionemos un 69 juntos. Y podemos hacer eso con inicio de fila de cuadrícula y final de fila de cuadrícula. Y queremos trabajar con el punto seis aquí. Entonces vamos a hacer el punto seis, inicio de fila de cuadrícula. dónde va a empezar esto? 1234. Entonces digamos que esto empieza a las dos. Y es debido grilla, final de fila y 1234, vamos a hacer cuatro. Y de vez en cuando en realidad me meto estos mezclados. Sí, ahí vamos. Hizo eso, correcto. Y así ahora desalojamos a los que estaban justo después de él. Entonces sigamos adelante y tratemos de retocar esto. Ahora, a veces cuando estás aprendiendo esto, es un poco de conjeturas, pero ahora tenemos la fila seis. De acuerdo, así que tenemos 1456. Adelante y deshacernos de que no lo sé. Vamos a deshacernos de nueve. Y vamos a deshacernos de nueve. Ok, eso es lindo. Adelante y fusionemos 45 juntos. Por lo que queremos Artículo 45 juntos. Entonces vamos a hacer ítem para y estamos fusionando columnas la otra. Por lo que queremos hacer que las columnas de cuadrícula comiencen. Y éste es uno de aquí a por aquí, 34. Entonces fuimos dos a cuatro. Y podemos hacer esto. Está bien, eso funciona. Ahora hagamos lo mismo con 57 porque y veamos qué pasa cuando hacemos 57. Podemos hacer lo mismo, punto cinco, y esto es simplemente aplicar el mismo tipo de estilo. Y ahora podemos ver que todo esto es desalojo. Su, se ve bastante bien. Vamos a seguir adelante y fusionar 78 juntos. Y vamos a deshacernos de ocho. Y así queremos que siete se vean como el artículo número uno aquí arriba. Y en realidad podemos empezar a reutilizar las cosas. Porque el elemento uno y el ítem siete van a tener exactamente el mismo diseño en el sentido que quiero que el ítem siete aquí ocupe todo el ancho. Y el punto uno va a ocupar todo el ancho. Por lo que bien podríamos reutilizar este estilo. Tenemos algo con lo que trabajar aquí. Tenemos un encabezado aquí arriba, tenemos un pie de página aquí abajo, tenemos un espaciado perfecto. Tenemos una sección de navegación o tal vez una sección de publicidad. Tenemos algunos contenidos para el contenido superior, tal vez como una sección de resumen y el contenido de la página. Y así es como se hace un diseño de página usando Grid. Y así la grilla se vuelve mucho más compleja que esto también. Pero este es un comienzo realmente, realmente bueno para aprender a usar Grid. Ahora, cuando estés creando una página en el futuro, intenta usar Grid como tu módulo de diseño de página. Se puede usar flexbox, no se puede en técnicamente usar tablas y flotadores, mostrar inline-block. Puedes hacer todo tipo de cosas, pero intenta usar Grid a partir de ahora. O si no quieres usar grid, siempre puedes usar flexbox. Ambos son completamente aceptables de aquí en adelante. Pero lo que me gustaría que hicieras es que quiero que intentes crear un layout como este. Ahora lo que quiero que hagas es sudar tu cerebro. No hagas referencia a mi código, aunque tienes acceso a él. No hagas referencia a mi código. Quiero que intentes y recuerdes cómo hacer esto. Y si no te acuerdas, quiero que vayas y te un poco de práctica googling cómo hacer esto. Recuerda, solo los términos son lo que necesitas saber. Adelante y dale un tiro a eso. Si realmente te atascas o quieres unirte a una comunidad, siempre puedes unirte al grupo de aprendizaje para codificar Facebook. Estamos aquí para ayudar. 29. Tu proyecto final: Tu proyecto final va a ser encontrar un diseño de sitio web realmente bonito y replicarlo tanto como puedas. Te vas a tropezar con una plétora de vallas. Va a ser muy duro, va a ser realmente buena práctica. Yo diría que solo haz lo mejor que puedas y simplemente diviértete con él. Si si no puedes hacerlo perfecto, eso está totalmente bien. Entonces lo que me gustaría que hicieran, abran su navegador favorito, vayan a Pinterest.com y simplemente escriban diseño web o inspiración de diseño web, maquetación de diseño web, cualquier cosa por el estilo. Hagamos inspiración de diseño web. Y crear un sitio de aspecto agradable. Conoces todas las piezas y no olvides descomponer las cosas en componentes más pequeños. No trates de mirar una página y van a ir, no sé cómo hacer todo eso, dividirlo en pequeños componentes. Entonces una buena sería como ésta. Y esta es una plantilla de sitio web de Squarespace aparentemente. Pero lo que puedes hacer es que ahora sabes hacer esta navegación aquí arriba. Ya sabes hacer las cosas Centro, sabes seleccionar el elemento central para tu logo. Ya sabes hacer un héroe. Usted Nóbel relleno y margen. Por lo que ya tienes este apartado cubierto. Aquí abajo. Tenemos como una tarjetita. Ya tienes esa sección cubierta. Por lo que acaba de estilizarse. No necesita ser funcional. No necesita ser un carrusel real y tobogán y todo. Pero sí quieres asegurarte de que sí tiene como un color de fondo que los diseños agradables. Puedes intentar agregar y flechas y cosas así. Esta sección aquí también utiliza una cuadrícula. Este es un candidato realmente bueno para grid, y luego solo usas imágenes de fondo. Para que puedas seguir adelante y empezar con algo así. Si no quieres hacer ese sitio en particular, eso está totalmente bien. Tampoco necesitas encontrar esa. Puedes ir y, ya sabes, si te sientes realmente picante, puedes intentar hacer algo como esto con todos los ángulos. Se puede utilizar. Transformar para sesgar las cosas, para rotar, cosas para usar como esta sección aquí en realidad sería un cuadrado y luego simplemente se giraría un poco y para que se reúna justo en medio. Sí. Dale un tiro a eso. No olvides descomponer cosas así podría ser flexbox. Esto sería flexbox, no necesariamente grid sino flexbox. Y este sólo tenemos un margen superior de un extra como 50 pixeles. Entonces lo que me gustaría que hicieras es seguir adelante y darle un tiro a esto y solo tratar de descomponerlo pieza por pieza. No trates de abordarlo todo a la vez. A lo mejor esta noche trataste de hacer como la navegación y mañana trataste de hacer con la sección de héroes y al día siguiente tratas de hacer la siguiente sección. Tómate tu tiempo con él, diviértete con él, y realmente trata de meterte en la tontería del CSS. Todo lo que has aprendido en este curso es aplicable a este estilo de diseños. Estos diseños son bastante salvajes en realidad. Y para ser totalmente honesto, este es un diseño muy, muy avanzado. Entonces tal vez, ya sabes, si no te sientes cómodo, no empieces con esa. Pero puedes empezar con algo como esto. Este es uno realmente bueno. Tiene tu navegación, tiene un encabezado, tiene un botón ahí dentro. Tiene diferentes tamaños de fuente, diferentes tipos de fuente. Aquí tienes diferentes estilos. Por lo que esto podría ser flexbox también, o flotante o posición relativa o posición absoluta. Puedes probar algo así. Yo diría que pruebe uno de estos. Si quieres empezar con algo más fácil, diría que ve a cohete man, no aprendas wag tilde.com y solo trata de recrear este sitio. La página de la justicia, no todas, no todas las páginas de aquí, sólo esta página. Entonces tienes navegación aquí. Es bonito y sencillo. Tienes imagen de fondo, gradiente en la parte superior. Tienes un botón, y tienes diferentes textos, tienes diferentes fuentes, así que fuentes web personalizadas. Y aquí tenemos flexbox, tenemos dos tarjetas lado a lado. Aquí tendríamos dos cartas lado a lado, pero esta está usando posición relativa y posición absoluta para especie de golpearlo en tan solo un poquito. Por lo que está estratificado en la parte superior usando un índice zed. Lo mismo con esto, justo por la vía opuesta en lugar de moverse a la izquierda y el segundo se mueve a la derecha. Y aquí dentro podríamos usar Grid o flexbox. Yo sugeriría flexbox para este. Y luego puedes usar Grid aquí abajo. Adelante y dale una oportunidad a eso. Sé que es mucho para aceptar, pero honestamente y no puedo recalcar esto lo suficiente. Empieza poco, empieza solo con la navegación. Empieza con sólo el encabezado. Tómate tu tiempo en ello. Google mucho, hacer muchas preguntas. Estoy aquí por ti. El aprendizaje a codificar Facebook, una comunidad. Están todos aquí para ti. Adelante y dale una oportunidad a esto y siéntete libre de compartir tu progreso en el camino. Ah, y una última cosa, porque estás en cuota de habilidad, tienes tu parte de habilidad sección Proyecto. Entonces si entras en tus proyectos y haces clic en el botón verde que dice Crear Nuevo Proyecto. Creo que eso es lo que dice. Podrás compartir tu proyecto para poder compartir capturas de pantalla y compartir tu código, cómo puedes hacer todo tipo de cosas ahí dentro. Así que asegúrate de compartirlo ahí dentro. Pero sobre todo, lo más importante, diviértete un poco con esto. 30. Resumen: Muy bien, ya has terminado CSS 201. Este es CSS intermedio y en realidad esto es CSS intermedio a ligeramente avanzado para ser completamente honesto. Pero, ya sabes, gran trabajo completando todo este curso. Esto es mucho contenido para aceptar. Espero que hayas aprendido algo divertido. Espero que tengas algo de experiencia en manos. Espero que hayas estado codificando junto conmigo a través de las lecciones. Pero hablemos de tus próximos pasos. Tus próximos pasos van a ser crear una hermosa página web usando CSS y HTML. Quiero que intentes desafiarte y hacer que un sitio web se vea lo más hermoso que puedas. Siéntete libre de inspirarte en lugares como Pinterest también. Porque honestamente esa es la razón por la que existe CSS. Css puramente para hacer que tu sitio web se vea hermosa. Ahora una vez que hayas terminado con CSS, puedes ir a aprender JavaScript, pero por favor no aprendas JavaScript hasta que estés bastante familiarizado y bastante contento con tus habilidades CSS. Javascript es un juego muy diferente para jugar. Pero una vez que estés listo para JavaScript, tengo varios cursos de JavaScript también. Por lo que solo echa un vistazo a mi perfil en esta plataforma para todos mis diferentes cursos. Y por último, si necesitas o si quieres algún apoyo extra, por favor ven a unirte al grupo de aprendizaje para codificar Facebook donde puedes hacer preguntas sobre cualquier cosa relacionada con CSS. último, pero no menos importante, me gustaría decir gracias por tomar mi curso de CSS. Sé que hay otros cursos por ahí y te agradezco que tomes mi curso. Una vez más, me llamo Caleb Colleen, y con orgullo he sido tu instructor garganta CSS al 201, y espero verte en otro de mis cursos. Diviértete codificando y te veré por ahí.