Fundamentos del diseño web: aprende a describir tu diseño con HTML y CSS

1. Por qué deberías tomar esta clase: Oye, aquí es Rich. Recuerdo diseñar mi primer sitio web. Fue divertido e impresionante pero tratar de codificar fue una pesadilla. No entendía cómo hacer las cosas bien. Una de ellas, no sabía por qué todo empezó en la parte superior izquierda. No sabía cuándo usar flotador o posición. No entendía profundidad. No sabía por qué algunos elementos son más anchos de lo que los puse a ser y ciertamente no sabía cómo conseguir mi contenido en medio de la pantalla. En resumen, No fue para nada como Photoshop. El caso es, que fue en 2007 y aunque las aplicaciones de diseño web son impresionantes, lo que diseñas y luego aún nunca el sitio web final. El sitio web final es el que puedes navegar. Es el que está frente a tu cliente y la habilidad de saber describir un diseño a un navegador usando HTML y CSS se está convirtiendo en una habilidad fundamental y muchas veces requerida. HTML y CSS son un par de lenguaje de diseño descriptivo que se puede igual que aprendes a usar Sketch o Photoshop. Entonces, después de esta clase comprenderás el Modelo de caja HTML, flotadores, tipos de visualización, posicionamiento y profundidad. Sabrás cuándo dejar que el navegador ponga las cosas, lo que hace un muy buen trabajo, y cuándo debes tomar el control. Entenderás más de cómo funciona el navegador y cómo se diferencia de las aplicaciones de diseño. Cuando estás diseñando, conocer estas cosas te permitirá tomar decisiones de diseño informadas y cuando estás escribiendo el HTML y CSS, hace que todo sea más fácil de entender. Entonces, en pocas palabras, esta clase abarcará cinco tipos diferentes de posicionamiento, gestión de profundidad, tipos de visualización comunes, relleno, márgenes, bordes, translate X e Y, terminología HTML y CSS y muchos ejemplos. Lo terminaremos creando una página web usando lo que hemos aprendido durante la clase. Entonces, si eso suena divertido, entonces síguelo. 2. Modelo de caja de HTML: Cubramos lo que me gusta llamar HTML Box Theory. Es útil hacer esto para que entiendas cómo funciona HTML. En la mayoría de las aplicaciones de diseño como Photoshop, Sketch e Illustrator, una capa aparecerá visualmente a mayor profundidad a otra si es más alta en el panel de capas. Esto también se aplica a grupos y subcapas. En HTML, es ligeramente diferente. Cuando un elemento HTML, que es una especie de capa, es más alto en el documento HTML que otro, aparece antes de elementos subsiguientes en la página. Si viene primero en el documento, viene primero visualmente, es más alto arriba. El código se correlaciona con lo que vemos. En HTML, los elementos son como cajas y se apilan por defecto desde la parte superior del documento hacia la parte inferior. Un elemento HTML se caracteriza por una etiqueta de apertura y una etiqueta de cierre. Cuando añades otro elemento, es como agregar otra caja encima de todas las demás. Ahora, puedes poner elementos dentro de otros elementos y esto es exactamente lo mismo que poner una caja dentro de una caja. En HTML puedes poner tantas cajas dentro de cajas como quieras y se aplica la misma regla dentro de una caja. Por defecto estas cajas se apilan de arriba a abajo. Lo que es sorprendente de las cajas HTML es que se expanden para contener todo lo que pones dentro de ellas. Por defecto, no hay dimensiones establecidas. La mayoría de los tipos de cajas HTML que se colocan dentro de otras cajas expanden su ancho para llenar el espacio disponible. Cubriremos algunas excepciones más adelante aunque. Lo que es impresionante de esto es que como humanos, no tenemos que escribir ningún código para administrar las posiciones X e Y de ninguna de estas cajas. El navegador hace esto todo por nosotros. Las cajas se apilan prolijamente y se expanden cuando lo necesitan. Hay excepciones por supuesto, y luego estamos haciendo nuestras propias excepciones porque queremos que nuestro tamaño se vea de cierta manera. Podemos establecer todo tipo de propiedades y tener un control súper fino sobre cómo se ven y operan nuestras páginas web. Es súper divertido y es gratificante y también es un poco desalentador al mismo tiempo. Esta clase progresa desde la forma predeterminada de trabajar las cajas HTML hasta conseguir que las cajas hagan todo tipo de cosas como levitar, pegar y cambiar la profundidad. Empezamos a tomar el control desde el navegador donde nos beneficia. 3. Terminología HTML y CSS: Entonces, no usualmente me gusta usar terminología web oficial. Suena geek, suena raro, y a menudo lleva a la gente a rascarse la cabeza. Pero creo que para esta clase y para sus beneficios, entrar en la misma página sería realmente útil. En HTML, tienes un montón de conjuntos de etiquetas que componen tus documentos. Cada conjunto de etiquetas tiene un nombre, una etiqueta de apertura, una etiqueta de cierre, y tal vez algún contenido. Una etiqueta también puede tener atributos que consisten en un nombre de propiedad de atributo y valor. Un nombre de atributo seguido de un signo igual con información en comillas simples o dobles es lo que compone ese atributo. Los atributos le dan al navegador información adicional sobre el conjunto de etiquetas como, cómo darle estilo, dónde debe ir el navegador siguiente, y dónde está la fuente de una imagen, etcétera. Algunos conjuntos de etiquetas, no necesitan una etiqueta de cierre, por lo que puedes escribir solo una etiqueta especial como esta. En CSS, puedes darle estilo a un elemento HTML o a varios elementos HTML con un conjunto de reglas. Pero, ¿cómo nos referimos a todas estas partes en un conjunto de reglas? En primer lugar, tenemos nuestro selector, que le dice al conjunto de reglas qué elementos darle estilo. Esto puede incluir cláusulas, identificadores, etiquetas, pseudo cláusulas, múltiples seleccionados, hijos anidados y más. Después, viene el bloque de declaración, todo dentro de los tirantes rizados. Aquí es donde escribimos las reglas para darle estilo a nuestros elementos seleccionados. A cada regla que escribimos se le llama declaración, y se compone de un nombre de propiedad y un valor de propiedad. Están separados por un colon y terminan con un punto y coma, y todo esto se llama conjunto de reglas. Entonces, espero que eso ayude para esta clase y para la información futura que consuma. 4. Modelo de caja y tamaño de caja: Lo que he hecho a menudo en el pasado es establecer un elemento al 100 por ciento de ancho, luego dar otro borde y algo de relleno, y luego se extiende más allá de los límites de los documentos. Súper frustrante. Entonces, entender cómo funciona el modelo de caja es súper importante. Se puede evitar la frustración y los interminables hacks estúpidos. Se puede agregar margen, relleno y bordes a la mayoría de los elementos. Estas tres cosas conforman el modelo de caja y afectan el ancho y la altura de un elemento. El margen es el espacio respiratorio. El elemento se da a sí mismo a partir de otros elementos. Es como si fuera espacio personal. Borde es entonces la capa exterior, que se puede peinar. Es como la primera capa de ropa. Después está el relleno, que es el espacio de respiración el elemento da entre su borde y su contenido. Entonces, de forma predeterminada, si establece el ancho de un elemento 400 píxeles y luego agrega algo de relleno y un borde, el ancho real del elemento aumenta más allá 400 píxeles porque el ancho que está configurando es el ancho del contenido interior. Lo mismo se aplica a la altura. No obstante, si cambia su valor de tamaño de caja a border-box, el ancho que establezca se aplicará en el nivel de frontera y no en el nivel de contenido inner-content. El valor predeterminado para box-sizing es contenido-box. Pero, rara vez me gusta usar border-box para el dimensionamiento de caja. Entonces, aquí hay un ejemplo en vivo en CodePen. Tenemos esta caja uno, tiene un ancho de 400 pixeles, relleno de 50 pixeles, y tiene un borde negro sólido que es de 20 pixeles de ancho. Entonces, cuando inspeccionamos esta caja, haga clic derecho, inspeccione, podemos ver que al pasar el cursor sobre esta caja, tiene un ancho de 540 píxeles. ¿ Por qué? ¿No tiene un ancho de 540 píxeles? Bueno, si dibujamos aquí abajo, podemos ver que el h2, que forma parte del contenido, tiene un ancho de 400 píxeles. Eso es lo que hace esta línea por aquí. Establece el ancho interior en 400 píxeles, y luego agrega el relleno, que sería relleno a la izquierda de 50 píxeles y relleno a la derecha de 50 píxeles, que suma 100 píxeles a los 400 píxeles existentes. Después añade un borde más a la izquierda de 20 píxeles y borde derecho de 20 píxeles, lo que te da un total general de 540 píxeles. Entonces, bueno saber. Se puede trabajar con esto y muchos tienen en el último par de años. Pero, tenemos esta gran nueva forma de trabajar con el modelo de caja, y se llama box-sizing: border-box. Increíble. Si quisieras saber cómo acabo de hacer eso, puedes escribir bz y presionar tab, y con algo llamado Emmet, que está disponible en todo tipo de editores de código. Simplemente lo expande. Puedes escribir content-box, si prefieres las cosas de la manera antigua y quieres ser explícito, pero para mí, solo me gusta usar box-sizing: border-box la mayor parte del tiempo. Esto es realmente fácil para mí. Pongo el ancho y luego digo que quiero 50 pixeles relleno y quiero un borde de 20 pixels y me funciona todo. Muchas gracias. 5. Margen, espacio adicional y borde: El margen, el relleno, y las declaraciones de borde tienen cuatro lados de la caja que se puede establecer. Se puede establecer margin-top o remo izquierdo o border-bottom. Por ejemplo, si quisieras establecer los cuatro lados, podrías hacerlo con cuatro declaraciones separadas. Pero, también se pueden utilizar declaraciones abreviadas. Al usar margen, puedes establecer los cuatro lados a la vez. Puede establecer los valores horizontales y verticales, o puede establecer los cuatro lados en valores únicos. El orden del atajo es superior, derecha, inferior, izquierda. Si es solo un valor, los aplica a todos los lados. Si hay dos valores, aplica el primer valor a la parte superior e inferior y un segundo valor a la derecha e izquierda. Si hay tres valores, aplica el primer valor al principio, el segundo valor dos a la derecha e izquierda, y el tercer valor a la parte inferior. Se aplican las mismas reglas al relleno. Los tipos de valores que puedes usar para margen y relleno son valores típicos de longitud CSS: píxeles, porcentajes, em, rem o em y rem, etcétera. La declaración abreviada de frontera es ligeramente diferente ya que la declaración border-bottom o border-top también es un atajo. Entonces, cuando estás usando border-bottom, por ejemplo, puedes establecer el ancho del borde, el color del borde y el estilo del borde todo al mismo tiempo. Entonces, cuando se utiliza la declaración fronteriza, sólo se puede establecer para los cuatro lados. Pero puedes establecer el color, el ancho, y el estilo de los cuatro lados al mismo tiempo. En la mayoría de los elementos, el ancho suele ser del 100 por ciento, y la altura suele ser lo suficientemente alta para que su contenido se ajuste. No obstante, este ancho 100 por ciento no está establecido. Simplemente llena el ancho disponible. Por lo tanto, es bastante fácil establecer márgenes, paddings, y bordes y dejar que el elemento llene el espacio por defecto. La complejidad se introduce cuando un elemento no hace esto por defecto. Elementos como las entradas son ejemplos primarios. Es una vez de ejemplo otra vez. Entonces, tenemos esta caja. Dentro de la caja, tenemos este h2. Ahora, este h2 es bastante especial. Tiene un color de fondo. Entonces, si solo tenemos que quitar eso, verás que el color de fondo de la caja viene a través. Entonces ahora, agreguemos algunos remo, algunos márgenes, y juguemos con la taquigrafía para los márgenes, remo, bordes. Entonces, primero, agreguemos algo de relleno. Podemos agregar 20 píxeles de relleno. Sí, eso se ve genial. Ahora, podemos ver el azul entrando. Enfriar. Añadamos margen a continuación. Añadamos 40 píxeles de margen. Fantástico. Ahora bien, si empezamos a cambiar el relleno, podemos cambiar esto a 30 píxeles. Vamos a cambiarlo a 70 píxeles. Podemos empezar a ver qué está pasando aquí. Eso es realmente genial. ¿ Qué pasa si cambiamos este a 50 píxeles. Bastante cool. Entonces, puedes ver cómo podemos usar taquigrafía y eso es mucho mejor que ir padding-top 20 pixels y padding-right de 40 pixels y padding-bottom de 100 pixels y padding-left 30 pixels. Eso llevó mucho tiempo, pero también puedes ver que solo quieres especificar un relleno como remo derecho, puedes escribirlo. A veces cuando estás escribiendo HTML de la vieja escuela, especialmente para boletines HTML, esta sintaxis es necesaria. Entonces, es bueno saberlo. Algún margen puede hacer más o menos lo mismo. Ahora, intentemos fronterizo. Entonces, frontera, vamos por 10 píxeles negro. Esto realmente no importa de qué manera lo pongas. Podemos decir sólido. Eso es bastante guay. Podemos ir por disgustado. También, bastante cool. Ya verás que si me quito ese negro y lo pongo por aquí, no hace diferencia. Puedo cambiar esto a rojo, puedo cambiarme a amarillo o cualquier otra cosa que realmente quiera cambiarlos también. Entonces, eso es bastante guay, y entonces también podemos decir border-top, podemos cambiar el border-top a, digamos, 20 píxeles negro sólido. Entonces, se puede ver cómo se está llevando a cabo esto. Es realmente genial y lo que ni siquiera podemos hacer aquí es incluso ponernos más específicos. Entonces, border es un atajo, border-top es un atajo. Pero ahora podemos decir border-top-width, y podemos decir algo así como 30 pixels. Podemos decir border-top-color, y podemos decir rojo. Entonces, esa es la diferencia entre atajos y sintaxis realmente longhand, es realmente bueno conocer ambos. Entonces, el segundo ejemplo aquí es cómo hacer marginación negativa. Bueno, tenemos este h2 y se llama el h2 negativo. Ahora mismo, no se ve demasiado negativo, no tiene ninguna negatividad sobre él. Vamos a sacar esto. Entonces, simplemente vamos algo así como margen, o tal vez podamos simplemente presionar tab cuando tengamos m para margen. Fantástico. Entonces, podemos establecer un negativo de 20 píxeles. Wow, mira eso. ¿ Qué pasa si vamos negativos 120 pixeles? Aquí vamos, 0,0,0. Entonces ahora, es literalmente justo en la parte superior que es una cantidad negativa. Bueno, también podríamos hacer el fondo, pero eso realmente no ayudaría. ¿ Qué pasa con la izquierda? Entonces, vamos a ir negativos 120 píxeles ahí, y qué pasa si tengo un relleno de 50 píxeles. Entonces, si acabamos de poner eso en un 50 negativo, debería alinearse a la derecha con el lado izquierdo. Bastante cool. Si vamos un 100 negativo más, debe alinearse todo el camino hacia la izquierda. Esa es una forma bastante fácil de hacer marginación negativa. Voila. El h2 negativo. Este es nuestro tercer ejemplo. Ojalá alguien me lo hubiera dicho antes en mi carrera de desarrollo frontend. Me frustró sin fin. La pregunta que quería contestar y tuve que trabajar por mí misma fue, ¿cómo obtengo algo central alineado horizontalmente? Yo quiero que este gran bloque azul esté en medio de la página. ¿ Cómo los consigo en el medio? En realidad es muy simple. Comprueba esto. Simplemente vas m por margen, presiona tab, y luego vas '0 auto '. Boom. Está en el medio. Lo que esto está diciendo es que, para los márgenes izquierdo y derecho, es auto. Entonces, el navegador simplemente lo resuelve para ti. Fantástico. Tienes un ancho de 400 píxeles, podemos cambiar eso a 600 píxeles. Boom. Hace lo mismo, aunque tomemos el ancho que. Todavía bastante dulce. Deshacer, mira eso. Si querías escribirlo manualmente, puedes hacerlo así. Entonces, ml para margin-left, auto y mr, también auto, entonces podemos sacar eso. Hace lo mismo. Dulce. Ahora, déjame contarte sobre el colapso de los márgenes. Entonces, lo que tenemos aquí es un montón de p, todos tienen una clase de caja y cada caja tiene un número, y esos números se correlacionan con un color de fondo. Fantástico. Ahora, cada caja también tiene un relleno de 10 píxeles y un margen superior e inferior de 30 píxeles. Pero, si tienes que mirar de cerca estas cajas, puedes pensar que no son 30 píxeles en la parte inferior. Entonces, si inspeccionamos esto, veremos que esa zona naranja arriba de la caja dos, eso son unos 30 píxeles. Enfriar. Pero, seguramente debería haber otros 30 pixeles desde el margin-abajo de la caja uno. Entonces, si pasamos por encima de la caja uno, veremos que seguro, tiene un margen de fondo, pero se superpone. Entonces, qué carajo está pasando aquí. Bueno, uno de los márgenes se está colapsando y es el más pequeño de los dos márgenes. Simplemente desaparece lo cual es cool a veces, pero si no lo esperas y no sabes lo que está pasando, es frustrante. Entonces, solo ten en cuenta eso. 6. Tipos de visualización, estilo predeterminado y anulación: Cada etiqueta tiene un tipo de visualización predeterminado. La mayoría de las etiquetas tienen un valor predeterminado de visualización: bloque. Otros valores comunes son inline y inline-block. También hay tipos de pantalla súper impresionantes como flex y grid, pero estoy liderando aquellos fuera de estas clases. Son un poco más complejos. Otros valores de tipo de visualización que puedes encontrar son tabla, list-item, run-in, table-cell. También hay un montón más. Lo bueno es que cualquier elemento puede obtener el estilo de visualización predeterminado anulado, igual que cualquier otra propiedad. Entonces, permítanme hablarles de las diferencias entre display: block inline, y inline-block, y block elementos como un div, una etiqueta p, o uno que haya establecido una pantalla: block declaration on. Empezaremos en una nueva línea y llenaremos todo el espacio horizontal disponible que se le dé. El alto será suficiente para encajar en su contenido. Es una caja bastante mágica. Incluso si establece un ancho y un alto, el elemento comenzará en una nueva línea. Un elemento en línea, como una etiqueta, un span, una etiqueta em, o uno en el que has establecido una declaración en línea de visualización, funciona casi igual que una pieza de texto. Ocuparán el menor espacio que puedan y se sentarán junto a otros elementos en línea y en bloque en línea. Los elementos en línea están destinados principalmente para texto y datos. No debe anidar un elemento de bloque dentro de un elementos en línea. Además, los elementos en línea no comenzarán en una nueva línea. Al establecer márgenes y remantes en elementos en línea, no se verán cambios verticales. No obstante, las horizontales serán. Si añades un borde, puedes ver lo que realmente está pasando. Es bastante increíble. Un elemento de bloque en línea, al igual que las entradas, selecciona, o uno en el que has establecido una declaración de bloque en línea de visualización, tiene lo mejor de los mundos de bloque y en línea. Puede sentarse junto a elementos en línea y en bloque en línea. Cuando establezcas márgenes , rebaños y bordes en él, ocupará tanto espacio horizontal como vertical. Este tipo de visualización suele utilizarse también con elementos de texto y datos. Como bono extra, si alguna vez quieres simplemente ocultar algo, usa display: none. ¿ Qué está pasando aquí? Parece un lío absoluto. Bueno, es un desastre. Hay un montón de elementos en línea, hay estos elementos de bloque, y luego está esta entrada, que es un elemento de bloque en línea simplemente escalofriante en medio de la nada. Entonces, ¿cuál es el punto de esto? Solo te voy a mostrar cómo anular los tipos de visualización predeterminados. Entonces, lo primero que voy a hacer es mostrarte cómo cambiar el tipo de visualización div. Entonces, vamos a d tab. Voy a cambiar es a inline-block. De esa manera, pierde su capacidad de ampliar el ancho completo. No arranca en una nueva línea. Si cambiamos inline-block a inline, nada cambia mucho ahí. Entonces, eso es bastante guay. Ahora, ¿qué pasa si vamos por nuestro em? Cambiamos esto para mostrar: bloque. Al igual que eso, ocupa todo el ancho. Comienzan unas nuevas líneas. Fantástico. Es realmente fácil. Echa un vistazo a esto. Si cambiamos esto para mostrar: ninguno, los ems se han ido. Vamos a deshacer eso, cambiarlo de nuevo a bloque, y luego lo final es esta entrada el tipo de texto. Cambiemos a este tipo para mostrar: bloque. Se puede ver que empieza en una nueva línea, pero no ocupa el ancho completo. ¿ Qué pasa con eso? No del todo seguro. Entonces, vamos con w y ampliamos eso. Vamos a establecer en 100 por ciento de ancho. Ahí vamos. Pero sabemos que esto puede ser un problema a la hora de decidir agregar relleno. Entonces, vamos a añadir algo de relleno. Acolchado superior e inferior, 10 píxeles. Acolchado izquierdo y derecho, vamos por 40 pixeles. Pero ahora como que se va fuera del borde de la página, que no es lo que queremos hacer. Entonces, ¿cómo cambiamos esto? Vamos por el bz, que es box-sizing, y configuramos nuestro box-sizing a border-box. Al igual que eso, son cosas arregladas. Podemos agregar un margen. Entonces, arriba e abajo, vamos por 20 píxeles. Izquierda y derecha, vamos por cero. Ahí vamos. Nuestra entrada, que tenía un tipo de display de bloque inline-block, ahora tiene una pantalla de bloque y está funcionando perfectamente. Entonces, ahí vamos. Es así como anula sus tipos de visualización. Es realmente fácil. 7. Elementos flotantes: El siguiente tema que vamos a cubrir es flotante, lo cual es bastante impresionante pero puede ponerse bastante complicado si comienzas a usarlo para las cosas equivocadas. Para lo que es realmente bueno ser utilizado es conseguir que el texto se envuelva alrededor de un elemento. Si tienes un elemento div padre, con un elemento p dentro, agrega otro elemento como un div o una imagen al elemento padre y dale un ancho y alto. A continuación, dale una declaración de flotación izquierda. Puedes elegir entre un valor flotante de izquierda, derecha o ninguno. Podemos agregar otro elemento y flotarlo bien. Verás cómo fluyen las texturas a su alrededor. Podemos entonces darle algún margen a estos elementos flotantes para que el texto no esté súper cerca de él. Lo que significa flotar es que un elemento se rompe del flujo normal y deja el resto tal como está, o elementos en línea se envolverán alrededor de él. No sugiero usar mezclas de elementos en línea y en bloque cuando se trata de flotar. Un elemento flotante flotará a la izquierda o a la derecha si hay espacio para hacerlo. De lo contrario, pasará a una nueva línea. En ocasiones, quieres que un elemento sea un elemento flotante, pero quieres que comience después de otros elementos flotantes, o quieres que se muestre un elemento regular después de un elemento flotante que lo precede. El mejor modo de hacerlo es utilizar una declaración clara. Se puede establecer de qué lado debe borrar, izquierda, derecha, ambos, o ninguno, y se mostrará después del último elemento que tenía una clara declaración izquierda o derecha, o vendrá después de todos los elementos flotantes precedentes. Pero cuidado. Debido a que un elemento flotante se rompe del flujo normal, si un elemento padre solo contiene elementos flotantes, no puede calcular su altura correctamente. Entonces, a menudo aparecerá como si no hubiera elementos padre. Hay algunos hacks y correcciones para esto pero ten cuidado. Es tiempo de ejemplo. Está bien. Entonces, ¿qué tenemos aquí? Bueno, tenemos esta etiqueta div y dentro de esta etiqueta div, tenemos otra etiqueta div con la clase de imagen uno, y luego tenemos una etiqueta de imagen con la clase de imagen dos, y tiene una fuente, que apunta a esto pequeñito aquí. Después nos dieron una etiqueta p con un montón de texto dentro de ella. Lo que queremos que haga es que flote estos dos caracteres dentro del texto. Entonces, vamos a nuestro CSS. Iremos a la imagen uno primero, que es el div y vamos fl para float, presiona Tab para expandir eso, por defecto a flotar izquierda, lo cual es fantástico. También podríamos flotarlo bien, lo cual sería genial. Entonces, tal vez intentemos eso. Entonces imagen dos, iremos por carrozas, que podemos hablar si quieres, y podemos decir flotar a la izquierda, y verás que todos los textos simplemente se envuelven a su alrededor y se ve muy bien. Si hacemos esto un poco más pequeño, verás eso, porque no hay suficiente espacio, solo irá y empezará tras otra cosa que estaba flotando antes. Entonces, eso es realmente fácil, eso es genial. También puedes ponerle algunos márgenes a este tipo. Entonces, queremos margen izquierda, margen inferior. Entonces, cero, cero, 20 píxeles y 20 píxeles. Eso es genial. Entonces nuestra imagen dos, casi inversa de eso. Sólo recuerda poner un punto y coma después de flotación a la izquierda ahí, y vamos a ir cero, y luego queremos 20 píxeles a la derecha, 20 píxeles a la parte inferior, y cero a la izquierda. Entonces, eso se ve genial. Lo que realmente es importante darse cuenta aquí es que esto funciona porque estas dos imágenes están en la parte superior de este div, vienen antes de la etiqueta p. Entonces, si tengo que cortarlas y ponerlas debajo de la etiqueta p dentro de este div, bueno, realmente no funcionaría porque no están flotando en ningún lado todavía. Están flotando después de esta p. Entonces, si fuéramos a copiar esta etiqueta p aquí, allá vamos. Empezará a flotar justo donde está esa etiqueta p. Entonces, bastante importante saber si quieres que las cosas floten, ponlo por encima de las cosas que quieres que flote entre y entre. Está bien. Entonces, sabemos flotar las cosas, pero ¿cómo vamos en contra del grano ahora? ¿ Cómo hacemos que las cosas no floten? ¿ Cómo hacemos que las cosas floten después de otros elementos que flota? Bueno, echa un vistazo a esto. Sólo vamos a copiar estos dos a la parte superior otra vez. Entonces, ahora, tengo algunas imágenes en la parte superior, algunas imágenes en la parte inferior. Ahora, vamos a nuestro CSS. Ahora recuerda, imagen dos, esa es la que llegó segundo en realidad. Entonces, hay imagen uno, hay imagen dos. ¿ Qué pasa si quisiéramos voltear ambos de la izquierda? No queremos que estén uno al lado del otro, eso sólo se ve raro. Entonces, lo que podemos hacer aquí es decir, flotar a la derecha, como teníamos, o podríamos decir algo como izquierda clara. De esta manera, pasa a la siguiente línea. Ahora, estamos como, ¿qué está pasando aquí? Tenemos cosas pasando por todo el show. Bueno, de nuevo, en la imagen uno, podemos decir, despejar a la izquierda, y ahora, va a las nuevas líneas. Entonces, nunca vas a tener dos imágenes o dos cosas flotando una junto a la otra en el lado izquierdo. Entonces, eso es realmente útil. Ahora, podemos tener un montón de texto y se va a envolver alrededor de todas estas imágenes. Podemos poner la misma cantidad de marginación a ambos, y ahí vamos. Se ve realmente bonito. Se envuelve alrededor de estas imágenes de verdad, realmente muy bien. La otra cosa que podemos hacer es que simplemente podemos poner flotante a ninguna. Algo así. Pero si quieres que el texto lo envuelva, bueno, dejemos eso fuera. Ahora, de nuevo, si las cosas están flotando bien, también puedes hacer cosas como claras ambas, que, en este caso, tendrán el mismo efecto. Pero tal vez, tenemos derechos e izquierda y, ahora sólo queremos decir en realidad sólo despejar ambos lados de estos. si acaso, cambiamos el flotante al lado derecho. Entonces, si no tuviéramos aclaraciones aquí, eso sería lo que pasaría. Entonces, solo saca esto aquí otra vez. Si cambiamos esta imagen dos por despejar a la derecha, o despejar ambas, entonces empezará en una nueva línea, y luego, ésta es derecha flotante. Entonces, queremos decir bien claro, o bien claro ambos. Está bien. Se pasa a una nueva línea. Entonces eso es fantástico. Es así como hacemos el despeje. De verdad ayuda a veces. Entonces, de nuevo, esta etiqueta p, si no queremos que se involucre con estos elementos claros, vamos a echar un vistazo a esto. Simplemente íbamos a despejar ambos, y, voila, va al fondo. No quiere nada que ver con estos elementos claros. Bastante fácil, ¿verdad? Entonces, tenemos estas tres imágenes, este tipo, y dos de estos tipos azules, y queremos flotarlas uno al lado del otro. En ocasiones eso es bastante útil, y verás en el siguiente ejemplo por qué esto puede ser especialmente útil. Entonces, ¿qué pasa aquí? Vamos flotando a la izquierda, lo cual es genial, y luego, vamos flotando a la izquierda, lo cual es genial. Pero entonces, ¿a dónde van nuestros antecedentes? ¿ A dónde va nuestro div padre? Simplemente desaparece. ¿Dónde está? Bueno, porque está flotando, padre va. Bueno, realmente no sé lo alto que debería ser. Esto es un problema. Entonces, mencioné un par de correcciones que puedes hacer. El primero que podemos hacer para ir con nuestros padres y simplemente vamos a desbordar y nos vamos escondidos, lo cual es genial. Excepto, si entonces cambias tu imagen una, si empiezas a traducirlas. Entonces, transforma y traduce Y, digamos, y vas a algo así como 50 píxeles. Se lo corta, y cuando vamos a algo así como quizá 100 píxeles. Hombre, eso no lo va a cortar. Entonces, si ven por aquí, sólo vamos a quitar esto de nuevo. Se pueden ver sus piernas, y si le ponemos eso de nuevo, no se pueden ver sus piernas. Entonces, lo que hacemos aquí es ir a los padres de punto, ahora pondremos un after pseudo-clase. Entonces pondremos su contenido en nada. Después estableceremos su tipo de visualización en tabla y diremos, despejen ambos. Ahora, eso debería hacer el truco, y esto realmente llamó el Clearfix. Podemos quitar nuestro desbordamiento oculto, y así, las cosas están funcionando de nuevo. Bastante dulce. Ahora bien, si quieres que esto funcione en todos los navegadores, hay muchas formas diferentes de hacer esto llamado Clearfix, pero para los navegadores modernos, esto es todo lo que vas a hacer. Justo en el div padre, o el elemento padre, solo estableces una pseudo-clase de después, estableces su contenido en nada, tabla de tipo de visualización, simplemente bastante raro, y luego vas a borrar ambos. Fantástico. Entonces, ¿de qué se trata este ejemplo? Bueno, en realidad voy a hacer algunas columnas dentro de un div padre o un div de fila. Entonces, lo primero que voy a hacer es, voy a poner estas 1, 2, 3 columnas dentro de un div fila. Vamos a cortar eso, vamos a sangrar nuestro código. Vamos a crear una clase de fila así, y luego mi col, voy a flotar a la izquierda así, y eso en realidad se parece bastante a una estructura de menú o a una estructura de barra de navegación. Tengan eso en cuenta. Entonces, lo que quiero hacer es, quiero poner un poco de margen entre aquí. Entonces, margin-izquierda, quiero decir 20 pixeles. Enfriar. Eso se ve realmente bien. Entonces, vayamos a mi fila. Quiero establecer un color de fondo. Eso es genial. Sólo diré rojo por ahora. ¿ Qué está pasando? Bueno, porque están flotando, ahora necesitamos un Clearfix. Entonces, vamos a punto fila y vamos después de pseudo-clase. Está bien. Entonces vamos a decir que el contenido no es nada. Vamos a establecer la tabla tipo de pantalla dos, y luego vamos a decirle que despeje ambas. Está bien. Entonces, ahí vamos. Ahora tenemos un fondo, ahora tenemos algunas alturas, y nuestra fila. Pero, lo que quiero hacer ahora es, quiero quitar este margen a la izquierda del col. Entonces, lo que puedo hacer es decir dot col primero-hijo, esto es otra pseudo-clase, y puedo decir margin-izquierda, nada. Ahí vamos. Entonces, acabo de tener un margen izquierdo entre col dos y col uno y entre col tres y col dos. Ahora, lo que puedo hacer es establecer el ancho de estos dos. Digamos 100 píxeles. Fantástico. Pero, recuerda que aún no hemos establecido nuestro tamaño de caja. Entonces, caja-dimensionamiento border-box. Simplemente los haremos un poco más pequeños, o simplemente los haremos 100 píxeles de ancho. Entonces, ahora podemos establecer nuestro ancho de fila. Entonces, serían 100 pixelos,100 pixelos,100 pixeles, más 20, más 20, lo que nos dará 340. Entonces, ancho de 340 píxeles. Perfecto. Entonces, podemos decir margen, podemos decir cero y auto. Se alineó centralmente para nosotros. Fantástico. Ahora, podemos copiar nuestra fila. Ahí vamos. mejor, nuestra fila, tal vez queramos simplemente poner un poco de margen superior o margen inferior en. Entonces, vamos por 20 píxeles ahí. Fantástico. Podemos quitar nuestro color de fondo, y ahí vamos. Tenemos esta estructura bastante similar a una mesa excepto que no es una mesa, está hecha de divs que están flotando. Fantástico. 8. Transformar y translate: Puedes usar la declaración de transformación para todo tipo de cosas: rotaciones, escala, cosas 3D, y simple movimiento de elementos. No vamos a cubrir mucho de lo que puede hacer la declaración de transformación excepto por los valores de TranslateX y TranslateY. La declaración de transformación es un poco rara ya que el valor es parte declaración y parte valor mismo. Agregamos corchetes al final del valor de TranslateY o TranslateX e insertamos un valor de medición. Es realmente fácil de usar, y es casi como un posicionamiento relativo, que vamos a cubrir pronto. El asunto al usar translate es que el elemento se mueve ya sea en el eje horizontal o vertical sin afectar a ningún otro elemento. Es casi como si los otros elementos todavía piensen que es donde está, pero en realidad se está moviendo. Es muy astucia. Ya, hagamos este ejemplo. Entonces, lo que vamos a hacer es que vamos a hacer algo de “tf” para transformar, expandir eso e ir a “TranslateX”, y luego entre paréntesis, podemos poner algo así como 30 píxeles. Va al lado derecho si vamos negativo 30 pixels. Ahí vamos. También podemos hacer algo así como el 90 por ciento. Todo el camino a la derecha, 100 por ciento, aún más, todo el camino a la derecha. Entonces, esto es bastante guay. Lo que podemos hacer ahora es que podríamos, puedes pensar, ir “transformar”, y “TranslateY”, y luego ponerlo negativo 40 píxeles. Pero, ¿qué pasa aquí? Bueno, lo que pasa aquí es que esta declaración de transformación sobrescribe esta. Entonces, ¿cómo escribimos en realidad TranslatEy y TranslateX juntos? O simplemente podemos tomar esta línea aquí. Voy a copiarlo, pegarlo por aquí, y allá vamos. Entonces, podemos cambiar esto de nuevo a como 50 píxeles tal vez. Entonces, puedes tener TranslateX y TranslateY en la misma línea. También podrías hacer algo más transformador. Entonces, vamos por una escala de 1.5. Ahí vamos. Bastante guay, ¿verdad? Si quisieras hacer esto mucho más corto, podríamos simplemente ir a “translate ()” y poner dos valores aquí, valor X, por lo que 30 píxeles. 50 píxeles. Ahí vamos. Entonces, traducir con transformada es realmente fácil traducir la posición X e Y y ninguno de los otros elementos se ve afectado. ¡Fantástico! 9. Terminología de posición: Hasta el momento, hemos aprendido algunas formas de exponer las cosas con HTML y CSS. Bueno, ahora, voy a estar cubriendo el posicionamiento, que, en mi opinión, es súper importante y el meollo de esta clase. Entonces, me gustaría explicar alguna terminología que me gusta usar. También lo he incluido en una descarga de cheatsheet, que puedes referirte a medida que vayas. Para un elemento que tiene una declaración comprendida por una propiedad de posición y un valor estático, lo llamaría un elemento posicionado estáticamente o un elemento estático. Para un elemento que tiene un valor de posición de relativo, lo llamaría ya sea un elemento relativamente posicionado o un elemento relativo. Yo llamaría a un elemento que tiene un valor de posición de absoluto, un elemento absolutamente posicionado o un elemento absoluto. Para un elemento que tiene un valor de posición de fijo, simplemente lo llamaría un elemento fijo. Por último, entonces llamaría a un elemento con un valor de posición de pegajoso, un elemento pegajoso. 10. Posicionamiento estático: Por defecto, la posición de un elemento es estática. Por lo que no hay necesidad de configurarlo usted mismo a menos que desee anular un valor previamente establecido. Los elementos estáticos que aparecen primero en HTML deben aparecer primero en el navegador. Al igual que una pila de cajas lo haría visualmente. Especialmente, si todos los elementos también son estáticos. El navegador posiciona dinámicamente los elementos estáticos después del elemento estático o relativo anterior. También calcula el ancho y la altura. El ancho suele ser del 100 por ciento y la altura suele ser lo suficientemente alta para que su contenido se ajuste. También puedes establecer manualmente el ancho y la altura si lo deseas. Los elementos estáticos son súper prácticos y eliminan la mayor parte del trabajo duro al que estamos acostumbrados en la mayoría de las aplicaciones de diseño que utilizamos. Con elementos estáticos, las declaraciones superior, inferior, izquierda y derecha, así como las declaraciones de índice z o índice z, no funcionan. Todavía se puede compensar esta posición usando márgenes y una transformación y una declaración de traducción si lo desea. Si utilizas margin-izquierda y margin-derecha, calculará el nuevo ancho para ti. tanto que el uso de transformar y traducir no cambiará el ancho. Los elementos estáticos son geniales para piezas de texto, imágenes, citas, listas y tablas. Básicamente, cualquier cosa que pueda tener una longitud variable. 11. Posicionamiento relativo: Relativo de los elementos son casi exactamente lo mismo que los elementos estáticos, excepción de algunos beneficios agregados. Cuando posicionas elementos relativamente, básicamente estás diciendo: “Si te posicionamos, será relativo a dónde estás”, lo cual no tiene ningún sentido, pero escúchame. Entonces, con un elemento relativo, ahora están disponibles las declaraciones superior , inferior, izquierda y derecha. También ves en Chrome, que estos valores de posición son visibles en el diagrama de modelo de caja. Lo que esto significa, es que podemos movernos en elementos alrededor desde arriba, abajo, izquierda, y derecha si queremos. Es casi como transformar y traducir. Si quieres que sea a 10 píxeles de la parte inferior, selecciona eso. Si quieres 10 píxeles de la derecha, selecciona eso. Cuando coloca un elemento relativo con una de estas declaraciones, no ajustará automáticamente el ancho o la altura. Los tipos de valores que se pueden utilizar para la declaración superior, inferior, izquierda y derecha son valores típicos de longitud CSS, píxeles, porcentajes, EM, REM, etcétera. Está bien. Es una vez de ejemplo otra vez. Entonces, lo que vamos a hacer aquí, es meternos en algún posicionamiento relativo. Entonces, en la casilla tres, podemos ir pausa R. Si solo vamos pausa y presionamos tab, su relativo a, pero podríamos ir pausa R para posición relativa. Fantástico, entonces podemos establecer un valor a la izquierda, tal vez puedas ir por 20 píxeles y lo mueve hacia arriba en 20 píxeles. Verás que el ancho no cambia. Podemos cambiar esto a un valor negativo dos. También podemos cambiar los valores correctos donde se puede decir 20 píxeles. Pero esto es algo raro porque esto es una especie de lo que realmente está haciendo la izquierda. Entonces, vamos por 50 píxeles. Todavía no hace nada y eso es porque tienes un valor izquierdo y un derecho. Entonces, solo saquemos eso. Ahí vamos, correcto. Ya trabajaremos. Entonces, o bien ir por izquierda o derecha, también puedes ir negativo 50 píxeles a la derecha, lo cual es algo igual que hacer una izquierda de 50 píxeles. Podemos entonces ver la parte superior de 30 píxeles y se puede ver que esto se parece mucho a transformar y traducir. También podemos establecer una parte inferior de píxeles o 30 píxeles negativos. Bastante fácil. Es realmente, muy útil. También verás que no afecta a ninguno de los demás elementos también. Fantástico. 12. Posicionamiento absoluto: Elementos absolutos son donde las cosas se ponen súper interesantes. El modo en que funciona es similar a la mayoría de las aplicaciones de diseño y le da a los humanos mucho control y poder muy parecido a Spiderman. Cuando colocamos un elemento absolutamente básicamente te estamos pidiendo que salgas del flujo normal de documentos, cualquier otro contenido alrededor de él se posicionará como si el elemento absoluto no estuviera ahí en absoluto. Verás que su ancho y altura se encogerán para que contenga su contenido. Ahora tenemos control sobre su ancho, altura y dónde se ubica este elemento en el documento. Todo depende de nosotros. Si tuviéramos que hacer esto con cada elemento, podríamos estar aquí por días. Es por eso que el posicionamiento estático y relativo es tan increíble la mayor parte del tiempo. Se posiciona un elemento absoluto en relación a sus primeros elementos no estáticos y hermanos. Tal vez no sean sus padres directos. Se desplazará por el árbol de documentos hasta que encuentre un elemento que no esté posicionado estáticamente. Entonces, el primer elemento que tenga un valor de posición de absoluto, relativo, fijo o pegajoso se convertirá en su posición padres. Si no hay elementos no estáticos en la ascendencia de los elementos, seleccionará la ventana del navegador como sus padres de posición. Esto significa que el elemento absoluto va donde va el padre y puede verse afectado por los valores de ancho y altura de su padre. Ahora podemos usar las declaraciones superior, inferior, izquierda y derecha para posicionar un elemento absoluto relativo a su posición padre. Entonces si establecemos el valor superior en 20 píxeles, se posicionará 20 píxeles desde la parte superior del padre. Si no hay un conjunto de ancho y altura o si están configurados en auto, podemos usar las declaraciones superior, inferior, izquierda y derecha para establecer dinámicamente el ancho y la altura. Al igual que siempre ser 10 píxeles de arriba y siempre ser 10 píxeles de abajo. De acuerdo entonces, primer ejemplo es este niño 12, este tipo que va absoluto que tiene un poco de texto blanco. Entonces, lo primero que hacemos es ir pos A, posición absoluta, presionar tab para expandir y verás automáticamente sale del flujo documentado. Es casi como si fueran hermanos simplemente van, “Ahora, ya no eres parte de la familia. Ni siquiera te vemos”. Y verás que parece que solo está flotando por encima de sus hermanos. De acuerdo, entonces ahora solo es escalofriante porque no hemos establecido un valor superior, una izquierda, una derecha, un valor inferior. Entonces, empecemos con el valor máximo. Vamos a cero píxeles por ahora y verás que va a la parte superior del cuadro padre, y el cuadro padre tiene una posición de relativa. Ahora, elige este elemento y podemos ver por aquí este niño 12 ahora está eligiendo esta caja de padres para ser su posición padre padre. No es elegir a este niño cinco porque este niño cinco tiene una posición estática. Entonces. Si tenemos que cambiar la posición de cinco de nuestro hijo a familiar, verás que ahora el niño 12 va a la cima o se pega a la parte superior del niño cinco. Bastante impresionante. Entonces, si tenemos que volver a sacar esto, verás que aparece todo el camino hasta la caja de padres. Y si tenemos que ocupar la posición de la caja de padres, va todo el camino hasta la parte superior del documento lo cual es bastante cool. Y ahora si fijamos aquí una posición de izquierda, así. Está literalmente en la parte superior del documento y así es como elige su posición padre. De acuerdo, entonces lo que quiero hacer aquí es que quiero hacer del niño cinco un elemento absoluto, también. Entonces pos A, se convierte en un elemento absoluto y ahora puede parecer que está pasando algo loco. Echemos un vistazo rápidamente al HTML y verás que el niño 12, que está por aquí, está dentro de este elemento niño cinco, que está por aquí, y acabamos de poner a ese niño cinco elementos en posición absoluta. Entonces, si cambiamos el valor superior del niño cinco a cero, como que nos mostrará dónde es el padre de posición que parece ser la ventana del documento. Entonces si nos desplazamos hasta aquí y ponemos la caja de padres para posicionar relativo, bien ahí vamos. Entonces, el niño cinco ahora se está posicionando de acuerdo a la caja de padres y luego el niño 12 se está posicionando según el niño cinco. Bueno se puede complicar un poco, lo sé. Oso conmigo. Entonces en nuestro hijo cinco, ahora vamos a fijar el ancho temporalmente al 100 por ciento. De acuerdo, eso nos da un poco más de espacio para respirar. No se ve tan complicado ahora. Está bien. Entonces, lo que voy a hacer aquí es, voy a poner el fondo a cero, también, y lo que esto hace es que diga que me van a posicionar cero píxeles desde abajo. Entonces, si tuviéramos que sacar este pariente de posición en la caja de padres, ahora eso es realmente genial. Ahora se está posicionando en relación con la ventana del documento, y en lugar de ancho 100 por ciento, podemos cambiar esto a derecha, cero, e izquierda, cero. Y saquemos el ancho y así no debería haber espacio a su alrededor. Fantástico. También podemos establecer estos en 30 píxeles y eso no se ve tan bien, 30 píxeles, y este tipo de actos como un marginador. Así que arriba, derecha, abajo, izquierda esto es realmente genial. Por lo tanto, podemos establecer ancho y alto sin usar realmente declaraciones de ancho y alto. Estamos usando arriba, abajo, derecha, izquierda y acabo de mostrarte cómo posicionar un elemento dentro de un elemento absoluto. Entonces ahora, cuando vamos a nuestro hijo absoluto y decimos abajo cero píxeles, fantástico. Lo siguiente que voy a hacer es mostrarte cómo posicionar negativamente un elemento absoluto. Esto es bastante útil para cerrar botones y cosas así. Entonces tenemos a este niño 12, este niño glorioso 12, has sido un ejemplo fantástico, muchas gracias. Entonces, vamos a cambiar esto de abajo a arriba otra vez y podemos ajustarlo a 30 píxeles negativos, tal vez vayamos negativos 50 píxeles y izquierdo negativo 50 píxeles, ahí vamos. Y si tuviéramos que establecer este ancho en algo así como 30 píxeles, ahí vamos y las alturas de 30 píxeles, también, eso sería genial y desbordamiento de oculto. Ahí tipo de conseguir el. “ Oye, esto es un tipo de ejemplo de botón de cierre”. Entonces ahí vamos. Es realmente útil. Algo de lo que debes estar consciente sin embargo, es que si tienes un desbordamiento oculto en la posición padres, se ha ido. Ya no lo puedes ver. Por lo que sólo ten en cuenta eso. Entonces, ahora llegamos a algunas cosas un poco más avanzadas. Tenemos un ejemplo más sencillo sin embargo, acabamos de conseguir esta caja, es caja uno con un par de caja dos niños dentro y ahora lo que voy a hacer es que te voy a mostrar cómo usar una pseudo clase en conjunción con posicionamiento absoluto. Entonces, te vas .box-1 y una pseudo clase de después, y luego dentro de esto normalmente podemos simplemente ir contenido y para mostrarte lo que esto hace puedes decir: “¡Hola ahí!” Y al igual que hay algo de contenido en el HTML, pero no podemos seleccionarlo y eso es lo que realmente es genial esta declaración de contenido dentro del after o dentro de la pseudo clase antes. Es realmente genial. Entonces volvamos al después y ahora lo que podemos hacer aquí es decir pos A para absolutos de posición, vale. Y quizá podamos darle un color de fondo, así que color de fondo, vamos a elegir uno de estos, vamos por este color azul, y entonces quizá podamos decir izquierda, cero; derecha, cero y lo que está pasando aquí, bueno la posición padres no es en realidad nuestra caja uno. Entonces, digamos posición relativa y ahí vamos. Podemos decir que es de fondo, cero. Fantástico. Ahora, donde esto es bastante útil es, puedes empezar a establecer fronteras como este. Entonces, si tuviéramos que sacar nuestro contenido básicamente hemos traído una frontera aquí. Está bien, no hay ahora mismo pero vamos por una altura de cuatro píxeles y ahí está nuestra frontera. Y si tenemos que establecer nuestro fondo en menos cuatro píxeles y qué pasa con nuestro derecho, menos cuatro píxeles, izquierdo menos 4 píxeles. Ahora tenemos esta frontera azul. También podemos establecer su opacidad 2.5 y ahora tenemos este tipo de frontera verde. Realmente interesante ahora se está mezclando con nuestro color de fondo. Realmente genial. Por lo que ahí se puede ver que estamos usando un posicionamiento absoluto con una pseudo clase after. De verdad, realmente genial. 13. Profundidad y Z-Index: Ahora, eso hemos cubierto elementos absolutos. Podemos empezar a cubrir profundidad lo cual puede llegar a ser un poco confuso. Entonces, ¡escuchen! cualquier elemento no estático se le asigna una profundidad por el navegador automáticamente. Si no haces nada al respecto, más abajo en el árbol de documentos y los elementos, mayor será su valor de profundidad. Básicamente, tendrá mayor altitud. Recuerda que HTML es lo contrario a las capas de aplicaciones de diseño. Es un mundo de caja al revés. Entonces, porque nuestro elemento absoluto no es levitante, se puede pensar que debe levitar sobre todo pero no necesariamente. Si hay elementos no estáticos debajo de él en el árbol HTML, estos elementos tendrán un valor de profundidad mayor que los elementos absolutos y pueden aparecer por encima del elemento absoluto. Si tienes dos o más elementos absolutos levitando alrededor de la misma posición en una página, verás que el que está más abajo el árbol HTML tiene una mayor altitud y parece estar encima. Pero podemos cambiar manualmente cualquier profundidad de elementos no estáticos. Esto lo hacemos dando al elemento un valor de índice zed o un valor de índice Z. Z-index es el valor de profundidad asignado por el hombre de un elemento. Tan pronto como le dimos un valor de uno o más alto, será a mayor altitud en comparación con los demás elementos de su caja. Si a todos los elementos no estáticos de una caja se les da el mismo índice zed o índice Z, la profundidad volverá a ser determinada por la posición en el árbol HTML. La indexación Z no es sólo para elementos absolutos aunque. Cualquier elemento no estático puede tener un valor de índice Z. Establecer un índice Z es bastante mágico. Pero, hay que asumir la responsabilidad de la gestión de profundidad en la que normalmente el navegador hace muy bien. Cuando usas indexación Z usas valores enteros solo 1, 2, 5, 10 etc. No usas píxeles ni ningún otro valor de medición. Algo muy importante a recordar es que si estás usando el índice Z, mayoría de las veces una altitud de elementos estará tapada por la altitud de su padre. Entonces, si hay dos elementos absolutos y se superponen y había un elemento absoluto hijo en la inferior de estos dos elementos, la altitud máxima será la de sus padres de posición, a pesar de que usted dijo un alocado valor de índice Z . El valor del índice Z determina su profundidad en el reino del cuadro padre de la posición, no todo el documento a menos que sea padre sea la ventana del documento. Esto incluso aplica para elementos fijos a los que nos pondremos a continuación. 14. Posicionamiento fijo: Un elemento fijo es exactamente lo mismo que un elemento absoluto. Excepto que lo posicionamos, siempre será relativo a la ventana del navegador. Esto es bastante poderoso, y a menudo se usa con cosas como barras de navegación fijas, menús y ventanas emergentes. Está bien. Entonces tenemos nuestras cajas de nuevo. Fantástico. Lo que les voy a estar mostrando ahora es cómo trabajar con posicionamiento fijo y posicionamiento absoluto. Hay toneladas de ejemplos por los que podríamos pasar. Pero creo que uno que funciona muy bien es mostrarte cómo crear un popup. Entonces hagamos nuestro html. Vamos por un div para la clase de popup, y dentro del popup, vamos a tener un div para la clase de manta, y nuestra manta va a ser este rectángulo que abarca todo el ancho y alto de la ventana. Va a ser negro y semi transparente. Después nos dieron nuestro contenido div, y dentro de este contenido div, tal vez podamos tener algún contenido y luego también queremos un botón cerrado. Entonces vamos por una clase de botones de ropa. Voy a poner algo de texto cerrado ahí dentro. Fantástico. Ahora, hagamos nuestro CSS. Lo primero que quiero hacer es ir por mi popup. Quiero cambiar esto a posición de fijo y luego pongamos nuestra parte superior a cero y pongamos nuestro fondo a cero. Izquierda, oye Elizabeth, a cero también, y nuestro derecho a cero. Fantástico. Eso es todo lo que realmente necesitamos hacer para el popup. Después conseguimos nuestra manta dentro del popup. Todo bien. Esto es más o menos va a ser exactamente lo mismo que nuestro popup excepto que va a ser absoluto. Vámonos. En realidad estoy deletreando eso todo fuera. Absoluto. Fantástico. Para este, voy a establecer un color de fondo y vamos a usar RGBA, que es rojo, verde, azul, canal alfa y decir 0, 0, 0 y 0.7. Por lo que este es negro con una Opacidad 0.7 que es fantástico. Entonces vamos a decir.popup.content. Ahora, el contenido va a tener una posición de absolutos. Para que pudiéramos copiar esto o simplemente podríamos escribir algo de ello nosotros mismos. Ya que conseguimos pos absolutos, y vamos a poner el color de fondo en blanco. Eso es genial. Entonces, vamos a establecer un ancho de 400 píxeles y una altura de 300 píxeles. Fantástico. Ahora, quiero conseguir esto en medio de la ventana de mi navegador. ¿ Cómo hago eso? Bueno, podríamos hacerlo con Flex pero esta clase no se trata de Flex. Entonces, descartemos eso como una posibilidad. Echa un vistazo a esto. Voy a decir top, le voy a dar un valor del 50%. Ahora esto haría que empezara a mitad de camino hacia abajo. No está en el medio realmente. Pero si establecemos margen superior y le dimos un valor negativo, y debido a que conocemos la altura, podemos decir negativo 150 píxeles que es la mitad de la altura. Significa que siempre está en el centro. Ahora podemos hacer lo mismo por nuestra izquierda. Pongamos eso en 50%, y luego decimos margen izquierdo menos 200 píxeles porque sabemos el ancho. Lo que realmente es genial de esto es que si tenemos que cambiar nuestro popup que no es fijo, podemos establecer top, digamos 100 pixels. Verás que nuestro contenido emergente se queda en el medio. Aunque cambiemos esto a 200, siempre va a estar en el medio lo cual es correcto y sorprendente. Entonces ahí vamos. Tenemos algo de contenido. Tenemos nuestra manta. Ahora, vamos a darle estilo al botón cerrado. Entonces manta.cerrar. Está bien. Lo primero que quiero hacer es quitarme ese estilo por defecto. Entonces voy a decir frontera ninguno, y luego, voy a decir color de fondo y podemos robar un color de aquí arriba. Ahí vamos. En lugar de decir manta, voy a decir popup. Ahí vamos. Mucho mejor. Voy a poner su color a blanco y darle algo de relleno. Digamos 10 píxeles. Dale un tamaño de fuente de 30 píxeles. Está bien. Font-peso - Vamos por negrita. Cambiemos el tamaño de fuente a 20 píxeles. Fantástico. Entonces, podemos decir posición absoluta, y podemos decir top. Vamos por menos 20 píxeles. Entonces se va a poner un poco fuera del contenido de, y luego podemos decir, correcto. Se supone que va menos 30 píxeles más o menos, y ahí vamos. Tenemos un botón de cierre. A lo mejor podemos decir cursor, puntero. Ahí vamos. Fantástico. Quizás también podamos simplemente cambiar nuestro contenido a un tamaño de caja. Ponga una caja y podemos poner algo de relleno dentro de ella. Digamos 20 píxeles. Voila, tenemos este pequeño popup perfecto. Ahora, probablemente no tendrías un trozo de texto cercano en tu botón de cierre. Probablemente tendrías una X o algo así. Pero por ejemplo, esto funciona perfectamente. 15. La función Calc: Después de que un estudiante planteara una pregunta realmente buena, pensé que sería una buena idea agregar este video sobre la función calc a la clase. Podemos utilizar la función CSS calc para conseguir que el navegador calcule números para nosotros los humanos perezosos. Por ejemplo, podemos calcular los valores de medición realmente, muy fácilmente. Lo que es súper cool de la función calc es que podemos combinar diferentes tipos de valores como píxeles y porcentajes en la misma suma. Podemos utilizar los operadores de agregar, restar, dividir y multiplicar además de poder usar corchetes para decirle al navegador qué partes de la suma calcular primero. Es la mejor práctica rodear cada parte de la suma con cierto ritmo de blancos. Entonces, antes y después de cada operador, agregue un espacio. Ahora ya hemos visto este cuadro antes. Todo es popup. Fantástico. Pero ahora te voy a mostrar un poco sobre la función calc. Entonces, por ejemplo, tenemos este ancho, los 400 píxeles, usemos la función calc para hacer algunos cálculos. Entonces, podemos decir 200 pixeles más 200 pixeles que equivaldrían a 400 pixeles, ¿verdad? Podemos decir que algo así como 600 píxeles menos 200 píxeles nos volverían a dar 400 píxeles. Podemos cambiar esto en todo el show y el navegador simplemente lo calcula para nosotros. Fantástico. Ahora, también podemos hacer cosas como basadas en porcentajes, así que además digamos 20 por ciento, vamos por 300. Fantástico. Entonces si tuviéramos que hacer esto pequeño o más grande, se puede ver que el ancho realmente cambia, realmente genial, ¿verdad? También podríamos agregar un par más aquí, así que tal vez como menos digamos 150 píxeles. De acuerdo, agreguemos algo así como el 50 por ciento, realmente genial. También podemos hacer algo así como 100 píxeles multiplicados por cuatro, que serían de 400 o dos píxeles, que serían de 200 píxeles. Se puede ver a dónde voy aquí. También podemos hacer corchetes, así que podemos decir paréntesis ahí, paréntesis ahí por lo que se está multiplicando por dos, pero si vamos a más cinco, va a 700 píxeles. Si no tuviéramos esos corchetes ahí dentro, iría 100 pixeles multiplicados por dos más cinco, en ese orden. Entonces, cuando ponemos los corchetes, entonces hace primero los corchetes, así hace estos primero y luego calcula 100 píxeles multiplicados por este valor, que serían siete. De acuerdo, así que hemos jugado un poco lo cual es genial pero ahora ¿cómo es esto realmente útil? Bueno, entonces queremos ir por un ancho de un valor porcentual. Entonces, di algo así como 80 por ciento y luego quieres ir por un margino-izquierda, deja ir por menos 40 por ciento. Eso tiene sentido, intentemos por la parte superior ahora. Entonces, vamos por un valor de 80 por ciento otra vez y luego margin- top, vamos por menos 40 por ciento. Esto no funciona, ¿por qué no funciona? Bueno, no funciona porque el valor del porcentaje margin-top no lo resuelve en la altura de su padre, Lo resuelve en el ancho de su padre, algo así como una locura. Entonces, ¿cómo arreglamos esto? Bueno, solo voy a comentar esto así y luego voy a usar la función calc de por aquí. Entonces, calc y yo vamos a decir 50 por ciento menos 40 por ciento, igual y ves que esto no funciona del todo y eso es porque no tenemos un espacio extra entre el menos y el 40 por ciento. Ahí vamos, eso debería resolver todos los problemas y ahora hemos usado calc y estamos usando valores basados en porcentajes dentro de nuestro popup. Eso significa que cuando hacemos crecer esto, nuestro popup también crece. Fantástico. 16. Posicionamiento Sticky: Lo que hace el posicionamiento apestoso es que permite que un elemento se pegue en algún lugar cuando alcanza cierta posición. Se alterna automágicamente entre el posicionamiento relativo y el fijo para ti además de agregar espacio extra para recuperar dónde se colocó en los documentos. Pero la cosa es que el posicionamiento pegajoso te está fanfarronando y no funciona en todos los navegadores, puede que necesite un prefijo de navegador o alguna ayuda de Javascript. Para obtener más información sobre qué navegador lo soporta y cuáles no, echa un vistazo a caniuse.com. Usar posicionamiento pegajoso es una técnica realmente agradable para mejorar sutilmente y progresivamente tus sitios web. Significa que si no es compatible, no es tan notable pero si es compatible, se suma a la experiencia. Para que el posicionamiento pegajoso funcione, tendrás que establecer una posición en la que se pegue. Prueba un valor superior o inferior y recuerda, aún tendrás que gestionar la profundidad. De acuerdo, hagamos un poco de posicionamiento pegajoso. Tenemos todas nuestras cajas aquí otra vez. Hay muchos de ellos. Lo que vamos a estar haciendo es replicar como una dirección brickfield. A medida que te desplazas hacia arriba, entonces algo se pega a la parte superior. Voy a estar trabajando con la caja dos, principalmente. Entonces, lo que necesitamos hacer es darle una posición de pegajosa. Pegajoso, fantástico y luego necesitamos una posición de configuración en la que debe pegarse. Entonces, vamos a decir, top. Vamos por cero. A medida que nos desplazamos, verás que, oye, se pega cuando llega a cero píxeles desde la parte superior. ¿ Qué pasa aquí? Verás que éste tiene mayor profundidad y así se cruza por encima de la parte superior y luego lo cubre. Cuando éste va por encima de la parte superior, lo cubre, bastante cool. Entonces, lo que realmente está pasando aquí. Pongamos esto en 60 píxeles en la parte superior. Desplázate a la parte superior otra vez y vamos a desplazarnos. Ahora está a 60 pixeles, genial y luego... A ver qué pasa ahí, al igual que casi lo recoge. Realmente genial, ¿verdad? ¿ Qué pasa si tenemos que poner la opacidad en 0.5 y luego podemos ver qué está pasando. Entonces, caja 2a, va aquí, pero se queda ahí, ya ves que no retrocede porque está en la parte superior, no se mueve. Es solo que la caja 2b está ahora encima de ella. Bastante guay, ¿verdad? Entonces, quitemos la opacidad. Entonces, verás que, oye, funciona que debería haber esta gran brecha que quede sobre ellos, navegador es bastante inteligencia. Antes de que saliera esa posición pegajosa, tendrías que hacer esto con Javascripts, era un poco complicado. Ahora, puede que aún tengas que hacer eso si quieres apuntar a navegadores más antiguos. Entonces, eso es realmente fácil de hacer, ¿verdad? Echemos un vistazo al fondo. Abajo 60 píxeles, ¿qué está pasando aquí? Bueno, la mejor manera de comprobar lo que está pasando aquí es si tenemos que ir hasta el fondo y nos desplazamos hacia arriba. Al llegar a 60 píxeles desde abajo, se pega. A medida que 2e obtiene 60 píxeles de la parte inferior, se pega. Pero la cosa es que la caja 2f tiene una profundidad más alta que la caja 2e y es por eso que realmente no funciona tan bien. Entonces, en realidad podríamos hacer algún manejo manual de profundidad aquí. Entonces, vayamos hacia abajo hasta el fondo aquí, casilla 2e. Pongamos un estilo aquí. Podríamos hacer algo así como, z-index; 2. ¿ Qué tal eso? Realmente no le gustó eso, ¿verdad? De acuerdo, desplácese todo el camino hacia abajo. Está bien. Por lo tanto, la casilla 2e está por encima de la casilla 2f. Entonces, a veces es realmente bueno hacer algún manejo manual de profundidad y eso es un posicionamiento pegajoso. Hay muchos otros usos para ello pero ese es un ejemplo realmente útil. 17. Reunirlo todo: En los próximos videos, te voy a llevar por hacer un sitio web utilizando los diversos tipos de técnicas de diseño que hemos aprendido en los videos anteriores. Puedes seguir adelante, y luego hacer tu propia página web usando lo que has aprendido en la clase. 18. Proyecto: la configuración: Para juntar todo lo que hemos aprendido en el último par de videos, te voy a llevar a través de la construcción de sitios de ejemplo. Es simple, es audaz, es grande y es colorido. También tiene estos pequeños personajes realmente geniales y va a ser un gran ejemplo de cómo implementar un par de estas técnicas de diseño Web de las que hemos aprendido. Entonces, ¿por dónde empiezas? Bueno, para mí voy a empezar desde sketch, a veces puedes empezar desde Photoshop o Illustrator, alguna otra aplicación de diseño, a veces todo lo que podrías tener es un Garabateado en una servilleta, a veces tienes algunos Mockups, a veces tienes algunos Wireframes, a veces simplemente comienzas directamente en el navegador. De verdad depende de ti y si eres más de un diseñador, un desarrollador o un unicornio, como yo. Por lo que puedo pasar del diseño al desarrollo muy fácilmente, y muchas veces puedo terminar muchos de mis diseños en el navegador y uso el navegador como herramienta de diseño. Entonces, ¿qué tenemos aquí? Bueno, tengo este banner y dentro de este banner tengo algo de información, tengo un botón de llamada a la acción, tengo un par de estos personajes los cuales pueden estar absolutamente posicionados. Entonces conseguí esta barra NAV que es un NAV pegajoso y en realidad ves lo grande que es esto si solo acerco al 100%, es bastante grande. Bueno, sí. Está bien. Entonces tengo un poco más de información. Tengo un botón Inscribirme. Después voy a una historia y cosas que la pandilla encuentra realmente importantes. Está bien. Después consiguió una bonita foto de pandilla en la parte inferior con un pie de página realmente, realmente simple. Eso es genial. Si alguien hace clic en inscribirme o apuntarme a la derecha aquí, se abrirá este pequeño pop up. Entonces eso es realmente sencillo. Lo que he hecho mientras tanto es que he exportado todos los activos que necesito dentro de una carpeta de imágenes. Tengo personaje uno, personaje dos, personaje tres y cito este botón de cierre. Todo este extra en el botón de cierre, también tengo la foto de la pandilla, tengo esta imagen de mano, tengo este archivo raro, no sé qué es eso y luego el logo de la pandilla. Estos podrían ser todos SPG porque su vector dentro de sketch pero por el bien de esta clase ahí todas solo imágenes, las he exportado a un nivel de pantalla de retina, por lo que eso significa que son dos veces el tamaño ya que están dentro de sketch. Ahora, abramos nuestra carpeta WWW. Podemos abrir eso en sublime. Voy a usar sublime, podrías usar pluma de código, puedes usar cualquier editor de código o IDE que te guste. Entonces lo primero que voy a hacer es, voy a crear un nuevo archivo y voy a guardar esto. Entonces Command S como index.html, y esto solo significa que el navegador busca este archivo index.html, cuando lo encuentra, lo abre primero. Fantástico. Y luego con Emmetts, tengo toda una clase sobre esto. Puedes expandir este signo de exclamación presionando la pestaña o control E y pone todo este precioso código para ti. Entonces diré la pandilla. Lo siguiente que voy a hacer es que voy a poner algo de CSS y voy a decir style.CSS. Fantástico. Voy a salvar esto. Entonces voy a crear un nuevo archivo, va a un guardar esto como style.CSS. Enfriar. Entonces solo para doble comprobar que todo está funcionando, quiero establecer un color de fondo en mi cuerpo así BGC tab. Se trata de Emmett de nuevo. Voy a decir, Yellow. Guarda eso. Volvamos a un buscador intenta un índice a html a Chrome y es amarillo. Está bien. Entonces esas son buenas noticias. Volvamos a Texto Sublime. Cerremos nuestro archivo style.CSS. Lo último que tenemos que hacer para que todo esté configurado y listo para que codificemos es, necesitamos comprometer nuestro proyecto y nuestra base de código a un repositorio. Me gusta mucho usar git y git hub y me gusta mucho usar git hub desktop. Significa que no tengo que saber nada de git realmente, significa que puedo usar una app para hacer cosas en lugar de la terminal y abramos eso. Es genial, escritorio github. Está bien. Fantástico. Ahora bien, si vamos a nuestro buscador, tenemos como WWW. Pero simplemente arrastramos al escritorio de Github. Dice: “Este directorio no parece ser un buen repositorio, ¿te gustaría crear repositorio aquí en su lugar?” “Sí, por favor”. Y podemos llamarlo, la pandilla. Y la descripción, podemos decir los sitios Web de la pandilla y luego podemos decir inicializar este repositorio con el yo real. Y se puede decir crear repositorio. Ahora tenemos este repositorio en nuestra computadora local. Lo siguiente es que vamos y publicamos el repositorio en Github.com. Y esto es realmente genial porque significa que si nuestra computadora falla, algo malo sucede, tenemos nuestro código en línea en la Nube, en internet, en Github.com. También significa que con las páginas de Github podemos publicar nuestros sitios web bajo una URL de Github de forma gratuita. Es bastante guay. Estoy tratando de usar el mismo nombre aquí, no voy a mantener mi código privado y luego voy a decir, publicar repositorio. Y esto literalmente lo envía a Internet. Fantástico. Entonces puedo ir a Google Chrome, puedo ir a Github.com/Mrra, es mi nombre de usuario. Se puede ir a repositorios y pandilla está ahí. Ahora index.html está aquí y nuestro style.css está aquí. Fantástico. 19. Proyecto: HTML: Lo que vamos a hacer en este video es, vamos a construir la estructura general de nuestro sitio. Me referiré al boceto con bastante frecuencia solo para ver todos los diferentes elementos que necesito poner en mi HTML. Y luego lo voy a codificar dentro de texto sublime. Entonces, ¿qué tenemos? Bueno, tenemos esta cosa grande como el tipo de pancarta de héroe. Tenemos este nav bar. Tenemos esta mas info, pequeña sección aquí. Tenemos estos pequeños separadores y luego tenemos la sección de historias. Ahora el separador, una imagen y un pie de página. Entonces, empecemos a entrar en HTML. De acuerdo, así que dentro de nuestro cuerpo, tal vez aquí podamos decir.herobanner, algo así. Eso es genial. Vamos a bosquejar y podemos ver que tenemos una barra de navegación. Entonces podemos decir nav, vale. Entonces tenemos más secciones de info, so.moreinfo. De acuerdo, ¿qué sigue? Tenemos un separador así que quizá puedas decir, .sep para separador. Está bien. Y luego tenemos nuestra sección de historias so.story. Ahí vamos. Y debajo de nuestra historia tenemos otro separador, so.sep. Y debajo de eso tenemos una imagen así que vamos IMG. Y aquí podemos decir imagen y luego podemos decir gang.PNG. De acuerdo, y para esto, echa un vistazo a esto. Es 1426 por 796 pero sabemos que eso no es realmente el caso. Entonces, si volvemos al boceto y solo echamos un vistazo a esta imagen en 735 por 399. Entonces voy a copiar eso y recordar 399. De acuerdo, entonces con el 735 y un Alt podemos decir la pandilla. Y luego tenemos nuestro pie de página. Fantástico. Y entonces también tenemos nuestro pop up. Entonces hagamos una.popup y por dentro aquí podemos decir, mantas. Y ya lo hemos hecho en esta clase así que esto no debería ser nada demasiado nuevo. Después nos dieron contenidos, y dentro de nuestro contenido, podemos tener un button.close. Todo bien. Ahora podemos empezar a llenar todas las partes en medio. Volvamos aquí. De acuerdo, así que dentro de nuestra pancarta de héroe, tenemos uno, dos, tres, cuatro tipo de elementos y tenemos un par de estos personajes. Entonces lo que está pasando aquí es que este elemento tiene alrededor de 960 píxeles de ancho que es una especie de tamaño estándar. Yo quiero algunos marginados a la izquierda y algunos marginados a la derecha. Siempre quise estar en el centro, pero quiero que el texto quede alineado. Entonces 960 ancho es el ancho pero quiero que esto sea todo dentro de un contenedor. Y verás más abajo aunque esto también tiene 960 de ancho y así es esto. Por lo que en realidad podemos hacer una clase de este ancho 960. Por lo que dentro de nuestra pancarta de héroe podemos decir algo como.wrapper y entonces podemos hacer lo que sería esto. Este es un tamaño divertido de 20 píxeles por lo que quizá podamos decir un H3 o un H4 y simplemente copiar esto, pegarlo. Tap tap kabum es una etiqueta A así que voy a ir a Control W para envolverlo con Emmett y luego escribir mi URL. Está bien. Y luego después de la H4 tenemos el H1 que podemos copiar. Entonces H1, espacio eso. Y aquí podemos cambiar esto a un amplificador. Está bien. Ahora podemos poner un salto de línea por ahí. Pon un salto de línea aquí. En realidad se puede poner barras allí si se quiere. La pandilla más tonta más impresionante del mundo. Eso es un H1. Entonces tenemos esto que podría ser un H2 tal vez o podría ser solo un P. ¿Quién sabe? Entonces tal vez podamos incluso convertirlo en un H3. Pon un salto de línea y ahí, convierte esto en un ampersand real. Entonces tienes H1, H3. Entonces necesitamos este CTA así que vamos por un botón y llamarlo CTA. Pero también hay otro CTA aquí abajo, ¿cuál va a ser la alternativa? Bueno, también hay otro CTA en nuestro pop-up, quiero entrar. Por lo que quizá ésta pueda ser la alternativa. Entonces voy a decir, CTA y sólo decir, Alt por alternativa. Y podemos decir, leer más. Está bien. Entonces eso se ve bastante bien, creo. Y luego dentro de esta pancarta de héroe, podemos poner a estos personajes. Entonces, en la parte inferior aquí, dentro de banner de héroe podemos decir.character1, ampliar eso, solo copiamos y pegamos esto dos veces. Carácter 2, carácter 3. Y estas no tienen que ser imágenes, solo pueden ser divs. Podemos establecer sus antecedentes solo hace las cosas un poco más fáciles. He usado un método diferente aquí abajo con esta imagen sólo porque podemos ser diferentes. Voy a presionar guardar, vamos a Chrome aquí y refrescar. De acuerdo, empezando a tomar forma. Sí, se ve bien. Entonces si volvemos al texto sublime dentro de nuestro nav tenemos- así tenemos el logo y tenemos un par de estos enlaces a la derecha. Entonces vayamos por un.logo y tal vez podamos simplemente poner un hash ahí por ahora. Eso podría llevarnos de vuelta a la parte superior de la página. Aquí podemos decir, la pandilla. Y luego con CSS realmente podemos configurar imagen de fondo en eso. Y luego una vez que tengamos el logo arreglado, ahora necesitamos crear estos enlaces que en realidad podríamos hacer realmente fácilmente solo usando algunos flotantes. Por lo que realmente no tenemos que usar una lista pero me gusta usar una lista cuando se trata de elementos de navegación. Por lo que en una lista desordenada y dentro puede haber elementos de lista y luego dentro puede haber enlaces. Tenemos tres de ellos. Entonces con Emmett solo hacemos eso. Yo sólo voy a poner hashes aquí por ahora y después tenemos apuntar la historia y más info. Vamos a inscribirnos y vamos a flotar esto justo tal vez. Date de alta, el spot de la historia justo ahí vamos, y más info, y así spot derecho. Entonces esa es la navegación, tenemos a la pandilla, te tenemos una URL ahí dentro. Fantástico. Entonces nuestra más info, voy a guardar esto, volver a bosquejar. Tenemos un encabezado de tamaño de 50 píxeles que es casi igual que solo H1. Entonces volvemos realmente uno dos H1s en la página, voy a hacer de esto un H2 y decir, únete a nuestro club de fans. Entonces voy a copiar y pegar eso. Está bien. Y luego voy a copiar y pegar todo esto y poner esto en una etiqueta P. Está bien. Yo sólo voy a quitar el espacio extra ahí y hacer una fiesta. Nosotros queremos hacer algo diferente con esto. Entonces, sí incluye el tope completo real o el periodo. Entonces, solo envolveremos eso con una clase de punto culminante. ¿Es así como deletreas resaltado? Yo creo que sí. Y va a ser lapso de una clase de punto culminante. De acuerdo, entonces tenemos nuestro H2, tenemos una P, y luego debajo de la P vamos a tener este botón CTA. Entonces button.cta y el contenido del botón va a ser inscribirme. Vamos a expandir eso. Está bien eso se ve bien. Vayamos al cromo. Refrescar. De acuerdo, Regístrate la historia más info. ¿ Por qué no está todo esto en sus artículos separados? Volvamos atrás y comprobemos. Está bien. Por lo que en realidad tenemos tres Como dentro de un elemento de lista. No es bueno. Entonces aquí solo podemos pegar uno, pegar el otro. De acuerdo, vamos a guardar eso y volver tot a chrome, refrescar. Ahí vamos. Y esto es realmente importante porque así es casi como tu navegador lo ve sin el CSS. Y si puedes darle realmente buen sentido a tu página web, si no hay CSS generalmente es una buena página web. Entonces, aquí está. Se ve bastante bien, simplemente no vemos nuestras caras amigables por aquí. Pero eso está bien. Únete a nuestro club. Inscribirme. No pasa nada con estos. Eso es genial. Volvamos a bosquejar para ver qué podemos hacer a continuación. Está bien. Entonces tenemos el separador, que ya has hecho. Y entonces tenemos esta sección. Echemos un vistazo a esto. Esta es la talla 40. Entonces quizá sea un H2 o un H3. Nosotros hicimos de este un H3 creo. Entonces lo hicimos un H4 y eso era talla 20. Esta es la talla 40, está bien y esta es la talla 50. Muchas tallas divertidas para recordar. Está bien. Entonces dentro de la historia digamos que aquí tenemos un H3 y podemos simplemente copiar y pegar esto y poner otro salto de línea aquí. Está bien. Después de esto podemos tener una etiqueta P que es genial. Vamos a copiar todo esto y pegarlo y sólo voy a cerrar esta etiqueta P y luego abrir otra aquí. Está bien. Entonces el último, sólo escríbalo manualmente. Estas formas eran, ahí vamos, muy tristes, así que hagámoslo y acabemos de cerrar esa P otra vez. Entonces, ahí vamos. Entonces, si tenemos que volver a Chrome y refrescar, eso se ve bastante bien. Tenemos entonces esta lista de cosas que nos parecen importantes. ¿ Cómo se va a ver esto? Bueno, esto puede flotar a la izquierda. Entonces, tal vez podamos poner esto aquí y decir, div.list de nb o tal vez puedas simplemente decir nb-list. Fantástico. Quizás podamos cambiarlo de un div a un ul. Sí, hagámoslo. Entonces aquí dentro tenemos un par de artículos de lista. Entonces, tenemos Rock and roll así que sólo voy a ir al Rock 'n Roll. mejor hay un apóstrofe ahí. No estoy seguro. Después nos dieron Risas. Después nos dieron Square Offs. No voy a poder deletrear eso, Rutas Circuitosas, Trigonometría, Sombreros Rad, quiero decir, Ser Tonta. Ahí vamos. Entonces con sublime solo selecciono eso. Voy a selección, luego voy dividida en líneas o comando shift L, y luego presiono comando y izquierda O, escriba Alt LI, y luego termino con un LI. Escape de prensa. Ahí vamos. En boceto, tenemos este Risas uno, que es bastante especial. Entonces, ¿qué vamos a hacer aquí? Bueno, quizá podamos hacer especial a este elemento y a este elemento especial. Entonces, aquí adentro podemos ir LI, y no va a haber nada aquí, así que voy a decir, y espacio no rompiendo y no nbsp, espacio no rompiendo. Entonces, eso es básicamente términos HTML para el espacio que no deberían colapsarse. Entonces, tenemos esta de Risas, que quizá podamos decir, “Clase de especial por ahora” o tal vez arrastrando. ¿ Qué tal eso? Está bien, eso se ve bastante bien. ¿ Cómo les vamos a decir de qué colores son estos? Entonces, vamos por una clase de azul, y vamos a copiar y pegar esto. Rock 'n Roll, éste. El espacio no rompiente será gris. Risas, creo que eso fue amarillo. Offs cuadradas son rojas. Las Rutas Circuitosas son rosas. La trigonometría es, ¿qué es eso? Salmón. Después azul y luego amarillo otra vez. Fantástico. Entonces, vamos a guardar eso. Volvamos a bosquejar, luego vamos al separador, luego dentro de nuestro pie de página, tenemos Made by Rich de Tap Tap Kaboom de nuevo. Yo sólo voy a ir a la cima aquí y copiar esta etiqueta A, soy perezoso. Bastante bien, bastante dulce. Creo que eso es todo lo que necesitamos desde el punto de vista HTML. Volvamos al crimen. Vamos a refrescarnos aquí. Sí, eso se ve genial. ¿ Qué es esta cosa? No sé qué es esta cosa. Entonces, vamos a hacer clic derecho, inspeccionarlo. Hay un botón, está bien. Es un botón de cierre. Genial, eso es genial. mejor por ahora sólo podemos ponernos cerca ahí para que sepamos qué es. Entonces dentro de nuestro pop up, en realidad podemos poner algunos contenidos. Entonces, esto son 50 píxeles. Es más o menos lo mismo que éste. Unirse a nuestro club fue un h2. Entonces, pongamos aquí nuestro h2. Rellena tus datos, y ahí tenemos un formulario. Entonces, vamos por la forma, acción por ahora, dejemos eso fuera. Podemos tener una etiqueta. El sello puede ser tu nombre de pila. Entonces debajo de la etiqueta, podemos tener una entrada, el tipo de texto, y un Marcador de posición con, ¿cuál debería ser un nombre de Marcador de posición? A lo mejor podemos decir simplemente, cara impresionante. Sí, eso es bueno. Podemos darle un valor de Shirley. Esto es solo para que podamos darle estilo realmente fácilmente. Entonces, a continuación, bastante copia y pega todos estos. Pero antes de eso tal vez podamos simplemente envolver la etiqueta y la entrada en un div así. Entonces, en realidad es un elemento de formulario. Entonces podemos flotar estos al lado del otro. Simplemente copia esto y pega esto. Entonces, tu nombre, tu apellido, y es cara de círculo. Simplemente podemos quitar los valores de estos insumos. Tu color favorito. Ahí puedes pegar. Tu comida favorita. Se puede pegar ahí. Tarta de manzana, esa es parte de mi comida favorita. Además, hay pastel de manzana. Este es de color rosa en lugar de cara impresionante. Tu color favorito, rosa. Tu comida favorita, pastel de manzana. Eso todo se ve muy bien. Entonces tenemos otro botón. Entonces, podemos decir, button.cta y el contenido puede ser: Quiero In, y ampliar eso. Fantástico. Ahora, voy a ir a Google Chrome y refrescar. Ahí vamos. Eso es todo. Entonces en realidad podemos simplemente quitar estos fors. No son realmente necesarios en este ejemplo. Está bien, ahorra. Lo último que quiero hacer es cuando presiono un botón determinado, como si voy a leer más, quiero que salte a diferentes lugares de la página. ¿ Puedo hacer esto con un botón? No del todo seguro, así que vamos a comprobarlo. Si subimos a mas info aquí y le damos un id de mas info, y cambiamos esto a href. No estoy seguro si puedes poner esto en un botón. Más info, refresher, nah. Entonces, cambiemos esto de un botón a un refresco A. Haga clic en Leer más. ¡Whoah! ¿A dónde nos llevó eso? Debí haber puesto un hashtag ahí. Refresca, lee más. Ahí vamos. Entonces, salta a la parte Más Info. Eso es fantástico. Entonces, sólo voy a buscar botón. Esto está bien, la parte Regístrate Me Arriba, eso es genial. El cuento, podemos decir, historia, y luego aquí podemos decir Id de historia. Date de alta, eso está bien, y muéstrales lo mismo, Más Info. Entonces, si nos refrescamos aquí y este es nuestro menú, Regístrate solo nos llevará a la cima. En realidad abrirá el pop-up. El cuento nos llevará a la historia, que es esta parte de aquí. Entonces More Info nos llevará a Unirse a Nuestro Club de Fans. Fantástico. Entonces lo último que tenemos que hacer es que debemos comprometer nuestro código. Entonces, vamos a, llegar al escritorio, falló en buscar, vale. Entonces hemos cambiado este archivo index.html. Entonces, sólo podemos decir, escribió escrito correctamente, escribió html para sitio web. Comprometerse con dominar. Fantástico. Vamos a decir Push to origin, para enviarlo a github.com, lo cual siempre es una gran idea. Ahí vamos. Entonces, hemos configurado nuestro html. Ahora, sólo necesitamos darle estilo a nuestro sitio, que va a ser divertido, va a ser cuando las cosas se pongan un poco complicado. Entonces, hecho el html, eso es super cool. 20. Proyecto: la imagen principal en CSS: Ahora, llegamos a hacer algo de CSS. Entonces, empecemos por lo alto con nuestro estandarte de héroe. Lo primero que tengo que hacer es conseguir esta fuente. Entonces, ¿qué fuente es ésta? Se trata de Open Sans. Entonces, en Google, vamos por las fuentes Open Sans Google. Vamos a dar click en esa, y luego se carga por poco. Una familia seleccionada. Vamos a personalizarlo. Aquí hay bastante, algunos regulares que quiero y extra audaz y audaz. Eso es genial, vamos a incrustarlo. Pero quiero importarlo, así que vamos por una importación así. Copiar eso. Voy a ir a Sublime Text y luego abrir mi estilo que es CSS, y solo lo voy a pegar ahí. Para mi cuerpo color de fondo de color amarillo, puedo quitar eso. Guardemos eso. Volver al refresco de Chrome. Entonces, ¿qué tenemos que hacer aquí? Copia eso, pega. Fantástico, estamos en los negocios. Ahora, algunas cosas que tengo que hacer primero. Este cuerpo y HTML, solo voy a establecer un relleno de margen cero de cero. Guarda eso, refresca, cool. Eso funciona muy bien, y luego volvamos a bosquejar. Hasta conseguí este fondo grande, azul, y lo que pretendía aquí es que sea 100% de altura del Navegador. Entonces, lo que me gusta hacer es, dentro de mi HTML, me gusta simplemente copiar el banner de héroe y luego insertar algunos comentarios, me gusta pegar eso en lugar de tener que referirme a ello todo el tiempo. Entonces, puedes ir.hero-banner, y luego obtener una.wrapper al que puedo referirme un poco más tarde, entonces tengo un h4 que es bastante predeterminado, entonces me dieron un h1. Entonces tengo un a con cta. Entonces, puedo ir, a.cta, y a.cta.alt. También podemos tener algunos botones que son así. Entonces, se puede decir, button.cta, y podemos decir button.cta.alt. Entonces conseguimos el personaje uno, dos, y tres, lo cual es genial. Character 1, character2, character3, y eso es fuera bandera de héroe más o menos en pocas palabras. Ahora necesitamos darle estilo. Entonces, banner héroe, vamos por el color de fondo, ¿qué color de fondo es? Es éste, así que vamos a copiar eso. Entonces vamos a decir, altura de 100vh, que es la altura de la ventana gráfica y vamos a guardar esto. Vayamos a ver cómo se ve esto. Eso se ve realmente bien. Entonces, ¿qué sigue ahora? Vamos a hacer nuestro envoltorio. Entonces, esto tenía un ancho de 960 píxeles y podemos establecer un margen de cero y auto, y luego para nuestro banner héroe podemos establecer un relleno para el momento de cero en arriba e abajo, tal vez como 20 píxeles en izquierda y derecha. Fantástico. Eso se ve bien. Ahora, vamos por nuestro h4. ¿ Qué es este h4? Atrevido y tamaño de 20 y es blanco. Entonces, vamos a los pesos de las fuentes. Probablemente ya sea negrita y el tamaño de fuente es de 20 píxeles. Entonces porque está en la pancarta de héroe, voy a decir, .hero-banner.h4 y voy a hacerlo blanco. Echemos un vistazo a eso. No es una.h4 es solo un h4. Ahí vamos. Entonces digamos esta misma cosa.hero-banner h4 a, también puede tener un color de blanco. Eso se ve muy bien y luego deja ir por nuestro h1 ahora. Los pesos de fuente pueden ser súper audaces, así que quizá vayamos por 800 y esbozemos de qué tamaño era este, 50. Entonces, tamaño de fuente 50 pixels. Guardemos eso. Vamos a echar un vistazo. Boom. Eso se ve bien. Entonces podemos hacer lo mismo por esto, excepto que es un h1. Entonces, vamos a cambiarlo a h1, color blanco, refrescar. Sí, eso se ve bien. Entonces, ¿cuál es el margen de este texto a este texto? Dice 14 píxeles y está 20 píxeles por debajo. Entonces, lo que podemos hacer aquí es que podemos decir, el héroe h4, y h4 a, podemos poner eso en margen, cero. Entonces el h1, podemos establecer su margen superior dos 14 píxeles izquierda y derecha, cero, luego 20 píxeles en la parte inferior. Ahí vamos. Entonces, volvamos a bosquejar. ¿Qué es esto ahora? Son 30 pixeles, y este es el h3. ¿Es el h3? Es el h3, no hicimos ningún h3s aquí, así que vamos por h3. Decir font-weight; negrita, font-size; 30 píxeles. Entonces lo mismo aquí. Simplemente lo colorearemos de blanco. Ahora también podemos establecer el margen a cero. Genial, fantástico. Entonces, este es el h1, no el h3. Oye, eso se ve bastante bien. Ahora, leeré más botón. Es un CTA. Echemos un vistazo a este tipo. Entonces, es un tamaño de fuente de 30 píxeles. Es audaz, así que font-size 30 pixels, font-weight es negrita. El normal tiene un color de blanco y un fondo de ese precioso azul. Entonces, vamos a ponerlo ahí. Voy a decir display y voy a decir, block, o tal vez pueda decir inline-block en realidad, inline-block. También le voy a dar una frontera. Este tiene un borde de 10 píxeles. Tiene un 15% de opacidad. Entonces, vamos a decir border; 10 pixels sólido rgba, 0, 0, 0, y 0.15, que es bastante sutil. Solo echemos un vistazo a cómo se ve esto. Genial, eso se ve genial. Éste, veamos cuánto espacio tiene. Alrededor de 20 píxeles en la parte superior e inferior, y 30 píxeles en la izquierda y la derecha. Entonces, vamos a darle algo de relleno, así 20 píxeles y 30 píxeles. A ver cómo se ve eso. Oye, eso se ve bien, y entonces podemos darle algunas esquinas redondeadas. Entonces, radio fronterizo, que no es frontera-derecha. El radio fronterizo, ¿qué es ese boceto? Aquí son 10 píxeles. A ver cómo se ve eso. Sí, eso es bastante bueno. Podemos decir texto-decoración; ninguno. Entonces, se deshace del subrayado. Sí, eso se ve bien. ¿ Qué más hay que hacer con este tipo? Tenemos que hacer la alternativa ahora. Entonces, vamos por la alternativa, y ahora solo vamos a anular algunos de los estilos predeterminados que ya hemos escrito. Entonces, color de fondo, vamos por este amarillo. Copiemos eso, pongamos eso ahí dentro. Después el color del borde. ¿ Cuál es el color del borde? Creo que es lo mismo, en realidad éste podría ser negro, y éste podría ser azul. Sí, ese es el caso. Entonces, esta frontera, cambiemos esto por aquí. Pongamos este color para que esté por aquí. Vamos si rgb. RGB cero, 127, 255. Entonces, cero y 255, lo recordaré. Cero y 255. Está bien. Entonces, ha vuelto aquí. Refrescar. Interesante. Ahora, el borde en el exterior y el boceto no está funcionando realmente con el borde en el interior en el navegador. ¿ Cómo vamos a arreglar eso? Entonces, quizá lo hayas entendido mal. A lo mejor no es una frontera, tal vez es contorno. Entonces, voy a hacer una búsqueda rápida de CSS de contorno, ya que no uso tanto contorno. Vamos por esbozo sobre indio y esto es lo que hago cuando estoy atascado. Yo sólo Google cosas. Esquema sólido, contorno discontinua. Se ve bastante similar a la frontera. Enfriar, usémoslo. Entonces, en lugar de borde, vamos por contorno y contorno de color. De acuerdo, vamos a guardar eso. Volvamos a Chrome. Sí. Eso se ve bastante bien. Simplemente no tiene ningún bonito rincones redondeados. Para el radio, ahora quiero ir esquema, radio, ¿cómo hago esto? Está bien. ¿Hay alguna forma de conseguir esquinas redondeadas? ¿ Y qué hay de box-sombra? Ahí vamos. Probemos eso. Sombra de caja. Entonces, box-shadow x y y azul vamos por dos pixeles, vamos por rgba, Vamos a copiar esto pega aquí, solo anula eso para nuestro botón alternativo, refresca. Eso se ve bastante bien y comprueba en ese botón, bastante bien también. Entonces, ahí vamos. Así es como haces un poco de googling, un poco de tallo desbordante. No necesitas saberlo todo. No sin botón alternativo también necesitamos simplemente cambiar el color. Bastante seguro que es negro. Pero, vamos a asegurarnos, Vale, uno, uno, uno, genial. Podemos simplemente dejarlo así, pero sólo pongamos todos los de ahí, para estar doblemente seguros. Sí, está empezando a lucir realmente bien aquí. Necesito un poco de marginación entre el botón leer más, simplemente no negro y solo refrescar y este encabezado. Entonces, en boceto ¿qué es? 47, es probablemente alrededor de 37 así, podemos hacerlo como 35 o algo así. Entonces, vamos por nuestro hero-banner, h3 ¿fue? Podemos establecer el margen inferior a 35 píxeles. Vamos a refrescarnos aquí. Está bien. Se ve realmente bonito. Fantástico. Ahora dentro de mi héroe voy a poner un poco de relleno superior. Entonces, vamos a hero-banner. Voy a ir por, digamos 50 píxeles arriba y abajo. También voy a cambiar esto a box- dimensionamiento, border-box. Muchas gracias, sublime o eso, solo quiero uno por ahora, box- dimensionamiento, border-box, refrescar. Sí. Eso se ve bastante bien. Sí eso funciona. Fantástico, volvamos. Leer más. Ahí vamos. De acuerdo, entonces, está viniendo muy bien. Ahora, necesitamos agregar algunos personajes. Hagámoslo. Entonces, en sketch personaje este tipo. Bueno, ¿quién era? Bueno, vamos a echar un vistazo a las imágenes y a su personaje uno. Entonces, el personaje uno es el tipo rosa y tiene un ancho de 363 y 344 es su altura. Entonces, carácter uno, ancho y su altura, lo olvidé, 344, 344 pixels. personaje dos es el tipo del sombrero. Entonces, vamos al tipo del sombrero y 309 por 371. Eran 371 pixeles, ¿verdad? Yo creo que sí. Entonces el personaje tres es 297 por 286, ¿qué tal eso? Fantástico. Entonces solo podemos decir “posición absoluta”, y podemos decir, algo así como top y le damos un valor 10 píxeles y derecha, un valor de 10 píxeles y solo podemos copiar y pegar esto por ahora. Entonces desde el lado derecho, éste tiene un giro. Entonces, solo tomemos la rotación por ahora y verás que son 89 píxeles del lado derecho. Entonces, vamos por 89 personaje 309 y este tipo es 277. Probablemente podamos cambiar estos valores. Entonces desde arriba, este tipo es 117, este tipo es 213 y luego personaje tres, este tipo de abajo es 74. Veamos cómo se ve esto, así que refresca. Aquí no hay nada. ¿ Qué está pasando? Entonces, no sé qué está pasando así, voy a inspeccionar. A ver si hay algún personaje sentado por aquí. Están aquí, pero no tienen ninguna imagen de fondo. Bastante error novato. Entonces, bg deja ir por url y aquí, podemos ir a imagen y carácter uno. Podemos establecer la repetición a, no repetir y decir que va a empezar en cero píxeles x y cero pixel y Podemos decir tamaño de fondo, lo hacemos de nuevo, solo quiero tamaño de fondo, porque son 100 por ciento o nosotros podría decir algo como cubrir o contener. Pero, sólo voy a ir por el 100 por ciento. Podemos copiar eso, ir al personaje dos, cambiar eso al carácter dos, y luego cambiarlo al carácter tres. Guarda eso, vuelve a chrome y refresca, y ahí están nuestros personajes. Ya lo verás cuando inspeccione y mueva mi navegador. Porque este tipo es de abajo, va a cambiar un poco, lo cual es perfectamente genial. Lo que no quiero es, no quiero que este tipo esté navegando fuera del borde de la página. Entonces, para volver al texto sublime y vayamos a nuestro hero-banner y podemos decir posición relativa, que todos esos elementos absolutos elijan un hero-banner como sus padres de posición. Entonces podemos decir “desbordamiento: oculto”. Refresca aquí. Se ve bastante bien. O podemos hacer aquí, solo para asegurarnos de que el botón leer más no se corten, es que podemos poner un min-altura. Mi hero- pancarta. Entonces, vamos a refrescarnos aquí. Ahí vamos. Eso se ve bastante guay. Si tenemos que redimensionar esto, verás que todos estos tipos se mueven con nosotros. Podemos usar porcentajes así, quizá podamos usar un valor porcentual para este carácter uno. Entonces, desde el lado derecho tal vez vamos 10 por ciento. Guardemos y refresquemos. Ahora ves que se mueve a una velocidad ligeramente diferente si empezamos a cambiar el tamaño de nuestro navegador. Eso es totalmente genial. Entonces, estos son nuestros personajes, y ahora necesitamos simplemente rotar a este tipo. Entonces, vamos a echarle un vistazo. Tenía una rotación de 15 grados creo. Entonces, vamos a ponernos eso. Entonces, es transformado y está rotando. Entonces, vamos a ir a rotar 15 grados. Refrescar. Ahí vamos. Yo quiero cambiar un poco este valor máximo, tal vez cambiemos este valor máximo a 10 por ciento también. Refrescar. Ahí vamos. No del todo como el diseño, pero oye, se ve realmente bien. Entonces, este es nuestro hero-banner que es de lo que se trataba este video. El siguiente video nos pondremos a hacer la sección de más información, para unirnos a nuestra sección de club de fans, Ha sido realmente bueno. Ya hemos visto cómo ha funcionado mucho de esto. En el siguiente video estará subiendo a la barra de navegación y a la sección leer más. Se ve realmente bien hasta ahora. Entonces lo último que tenemos que hacer es, tenemos que comprometernos con ello. Entonces, vamos a conseguir un escritorio, el estilo del CSS cambió y vamos héroe banner styling y nos comprometemos a dominar, luego empujar al origen. Aguanta, y ahí vamos. Está en línea. Podemos felizmente dejar que nuestro equipo se estrelle. Entonces, en ahora estilizar y leer más estilo en el siguiente video. 21. Proyecto: barra de navegación Sticky y la sección Leer más: Entonces, el siguiente es el navbar y el únete a nuestro club de fans o sección más info aquí. Entonces, hagamos primero la barra de nav. Lo primero que quiero hacer, es que quiero echar un vistazo a mi logo. Sé que son 600 por 80, sí. Eso probablemente significa que son 300 por 40. Es alrededor de 300 por 40. Está bien. Vayamos a Sublime Text y myindex.html. Tengo mi barra de navegación por aquí, podemos copiar eso y simplemente ponerlo en algunos comentarios por aquí. Podemos sacar este hero-banner HTML, y pongamos nav y qué tan grande es nuestro nav? Volvamos a bosquejar. Tiene 100 de alto. Entonces, altura de 100 pixels, fantástico, y su consiguió un color de fondo de blanco, y su también consiguió una sombra de gota o una sombra de caja y recuerda su x, así que nada e y ¿Qué es? Entonces, 5y. Entonces, cinco píxeles y luego ocho píxeles se desdibujan, y luego ¿cuál es el color? Es negro y tiene un 20 por ciento de opacidad. Entonces, podemos ir a nuestro RGBA, cero, cero , cero, cero y una opacidad de 0.2. Fantástico. Veamos cómo se ve esto. Sólo tienes que ir a Google Chrome. Refrescar. Sí, eso se veía bastante bien. Parece que hay una ligera sombra por encima. Eso está bien por ahora, y luego llegamos a hacer un logo. Entonces, tenemos nav.logo, se puede poner un ahi pero si alguna vez lo cambiamos de una a, solo una clase de logo sería genial, y podemos decir, display y voy a decir display block, y voy a establecer el ancho a, yo no puedo recordar ahora. Ninguno. Está bien. Esto fue 300. Entonces, 300 y una altura de 40 píxeles. Fantástico. Digamos posición absoluta. Ahí vamos, y luego tiene un valor máximo de, y lo que podríamos hacer, es que podríamos simplemente establecer el valor máximo en 30, o simplemente podríamos hacerlo en medio de todo un tiempo. Entonces, porque sabemos que las alturas son de 40, en realidad podemos decir 50%, y luego decimos margen superior. Podemos darle a esto un valor negativo de 20 píxeles. Está bien, eso es perfecto. Entonces podemos fijar a la izquierda de digamos 30 píxeles también. También podríamos establecer eso como cero píxeles y luego establecer el margen izquierdo de 30 píxeles. Lo que sea que quieras hacer realmente, así que para guardar eso y luego agreguemos nuestra imagen. Entonces, bg es a la url, está dentro de la imagen, y es un logotipo. Poom, aquí vamos a hacer lo mismo. Entonces, no repetir cero, cero. Entonces decimos que el tamaño de fondo es del 100 por ciento. Es realmente bueno poner tus prefijos de navegador como Webkit o Mozilla, lo que sea si vas a estar apuntando a navegadores más antiguos. Pero para esto, realmente no se necesitaba más. Entonces, tenemos un tamaño de fondo que se ve fantástico. Veamos cómo se ve esto. No hay nada. Se ha ido. ¿ Por qué es esto? Es porque nuestro nav, comprueba dónde está. Es porque nuestro nav no tiene una posición ni un pariente o absoluto. Entonces, en realidad vamos a hacerlo pegajoso. Entonces, hagámoslo pegajoso, y luego vamos a ver qué pasa aquí. El Pandillero. Sí, eso se ve bastante bien. Sólo inspeccionemos esto. No se ve como bastante en el medio, ¿verdad? Parece que es un poco de relleno o algo pasando aquí, pero se ve bien por ahora. Está bien. Lo siguiente que quiero hacer, es que quiero ir a mi lista desordenada navs, y aquí, sólo podemos establecer el relleno en 0, el margen en cero. También podemos ir al nav uli, y podemos fijar aquí el margen a cero, el relleno a cero. Veamos qué hace esto. Está bien. Mucho mejor, y entonces podemos decir, vale, el li en esta pantalla u como bloque, y deja flotar u derecha. Sí. Eso es genial. Fantástico. Entonces, tenemos a la pandilla encima de la pandilla. ¿ Qué hacemos al respecto? Bueno, podemos simplemente establecer un desbordamiento de oculto, y ellos pueden hacer una sangría de texto de menos 999 píxeles, o algo así, y se ha ido. Entonces, necesitamos ordenar a estos tipos, ¿qué tamaño de fuente es este? Treinta píxeles, y es mayúscula. Está bien. Vayamos por el nav ul. Tengo un, así que el a dentro del elemento de lista, dentro de la lista desordenada, dentro de los elementos de navegación, y podemos decir, bloque de visualización. Sí, eso debería ser bueno. Entonces, podemos decir que la altura va para el 100 por ciento, y decimos que el tamaño de caja es cuadro de borde, entonces podemos decir tamaño de fuente, 30 píxeles, y texto- transformar mayúscula, peso de fuente negrita, fantástico. Vamos a refrescarnos. Está bien. Entonces también podemos decir, color #111111. Está bien, y la decoración de texto y guardar. Refrescar. Tenemos a estos tipos en el medio, tienen un tamaño de fuente de 30 pixeles, el nav tiene 100 pixeles de altura. Eso significa que 70 divididos por dos, 35 píxeles superior e inferior relleno o marginación, estoy aquí por el relleno. Entonces, vamos por el relleno, y 35 píxeles. Enfriar, y entonces tal vez sólo 10 píxeles a la izquierda y a la derecha. Ahorra.Así que refrescamos aquí. No se ve del todo bien. Alguien inspecciona a este tipo, no habla, inspecciona. No le va tan bien ahí. Entonces, digo que la altura es del 100 por ciento con un relleno de 35 y 10. Entonces, ¿qué pasa si empezamos a disminuir esto. Una vez más. Entonces, 30 más 30 más 30. No te preocupes qué es eso. Pero, hey tienes esa apariencia de 30 píxeles ahora mismo. Fantástico, refrescar. A lo mejor es por poca altura de línea. Entonces, para cambiar esto en altura de línea, altura de línea a 30 píxeles, y luego cambiamos esto. Entonces probablemente podamos volver a cambiar esto a 35 píxeles. Sí. Entonces, hagámoslo. Acaba de tener una línea alturas. Treinta píxeles y cambia esto a 35 píxeles. Refrescar, hecho. Eso se ve realmente bien y luego, en ul podemos poner algunos marginados en el lado derecho tal vez. Entonces, vamos a cero, vamos 20 píxeles, cero cero, refrescar. Más info. El cuento. Date de alta. Hombre, esto no está bien. Ahora, vamos a conseguir que mi barra de navegación haga algo de pegarse, Entonces, nav, nav, aquí vamos. Pongamos la parte superior a cero. Guarde eso. Vamos a refrescarnos y se pega. Sí, mira eso. El pandilla tiene una barra de navegación que es pegajosa. Eso es realmente genial. A mí me gusta. Entonces, lo siguiente es nuestra sección más info. Eso es un problema un poco, sólo lo voy a ocultar. Entonces, ¿qué hacemos aquí? Bueno, vamos a copiar nuestra sección más info. Vayamos a nuestro estilo aquí. Podemos simplemente reemplazar esto y vamos a ir por.moreinfo. No creo que ponga un envoltorio aquí en realidad. Te mostraré por qué el envoltorio es tan genial. Entonces, tenemos más info, tenemos un h2. No sé si tenemos que hacer algo por el h2. Tenemos una etiqueta P. En realidad puedo simplemente darle estilo a la etiqueta P. Entonces tenemos un botón. Que es un CTA, así que no parece que tengamos que hacer tanto. Está bien, probemos esto. Entonces, cuando le peinan nuestros Ps y nuestros Ps son 30. ¿ Son 30? Sí. Entonces P, vamos por un peso de fuente de negrita, vamos por un tamaño divertido de 30 píxeles y luego bajemos aquí y veamos cuál es la altura de la línea, ¿41? Yo quiero ver, me estoy imaginando entre cada etiqueta P es, así que por ahora solo voy a establecer esto como 30 píxeles cero. Podemos cambiarlo un poco más tarde si es necesario. Entonces lo moveré un poco más alto a donde está toda la otra tipografía por defecto. De acuerdo, entonces podemos guardar eso. Vamos a comprobarlo. A ver cómo se ve. Sí, eso se ve bastante bien. Únete a nuestro club de fans. Eso se ve realmente pequeño. Esto se ve realmente grande, no estoy seguro de que sea tan grande. Entonces, nuestro P es divertido tamaño 30 pixeles y luego configuramos esto como un h2. En realidad no tenemos ningún estilo h2 todavía así que, hagamos un poco de estilo h2 y el estilo h2 es extra audaz 50 así que, es más o menos lo mismo que nuestro h1. Simplemente no es un h1. De acuerdo, volvamos a Chrome, refresca. Sí, eso se ve bastante bien. Entonces podemos escribir algunas sobreescrituras ahora. Entonces, volvamos al fondo otra vez. Más info.more-info h2. O tal vez podamos incluso simplemente ir y decir, más info text-align: center. Vamos a guardar eso, refrescar. Casi hizo el truco, es sólo todo el camino hasta el borde de la pantalla, casi. Entonces, quiero envolverlo con un envoltorio que ya tenemos aquí arriba. Entonces, tienes esta clase de envoltorio que envuelve el contenido y el banner de héroe. Entonces, voy a hacer lo mismo dentro de nuestra más info div.wrapper, cool, cool. Entonces solo sangra nuestro código. Guardemos eso. Al igual que eso, todo se arregla, realmente bonito. Entonces, puedo ver, mas info, wow, esconde mas info. ¿ Cómo logramos evitar esto? Es una pregunta realmente buena, en realidad. Te mostraré cómo en un segundo. Pero, por ahora esto se ve, sí, se ve realmente, muy bien. Sólo para explicar ese envoltorio un poco más, voy a buscar envoltorio. Si tenemos que poner un color de fondo de amarillo sobre esto se puede ver que, está en el medio. Igual que éste. También está en medio. Enfriar. Entonces, sólo nos quitamos eso. Ahora, el problema de hacer clic más info y saltar hasta aquí abajo es problemático. ¿ Cómo vamos a arreglar esto? Bueno, una cosa que podríamos intentar es en realidad cambiar el ID de más info de unirse a nuestro club de fans a otra cosa. Entonces, vamos a darle una oportunidad a eso. Entonces, tenemos esta idea de más información, quizá lo que podamos hacer es ponerla en el nav. Probemos eso. Entonces, vamos a refrescarnos aquí, más info. Ahí vamos. Eso estuvo bastante bien. Ahora bien, si voy a la historia, o si voy a más info eso no funciona del todo. Entonces, en lugar de cambiarlo ahí, tal vez podamos simplemente poner un cosita astuto por aquí. Quizás como un br con una id de más info, veamos si esto funciona. Está bien. ¿Qué pasa si es solo un div, así. Vamos a refrescar, más info. Ahí vamos, eso funciona. El cuento, más info regístrate. Enfriar, leerá más. Ahí vamos, ordenados. Entonces, hemos hecho nuestra barra de navegación, hemos hecho nuestra sección de leer más y hemos hecho nuestra parte de héroe. Lo que queda por hacer para este video es solo comprometerse. Entonces, vamos a conseguir el escritorio de GitHub y hemos cambiado index.html y style.css. Entonces, podemos decir que hemos hecho “Estilo Nav y leer más”. Entonces en la descripción también podemos decir: “También hicieron algunos cambios en HTML. Boom. Comprometerse a dominar, Empujar al origen, lo envía a internet, fantástico. Pero, simplemente no hicimos una cosa. Lo que hemos olvidado es, cuando vas a bosquejar esto una fiesta tiene esta gran cosa de frontera rosa a su alrededor. ¿ Cómo hacemos eso? De acuerdo, así que solo ve al texto sublime, recuerda con estilo tenemos este poquito de HTML aquí, tengo el punto culminante de la clase span, que es genial. Entonces, vamos por lo más destacado, diremos, color de fondo, iremos a bosquejar para ver de qué color es este. Está bien, es esa. Pongámoslo ahí, y luego diremos, color y es algún tipo de color rojo. Está bien. Fantástico. Entonces podemos decir un relleno de, tal vez sea como 10 píxeles. A ver cómo va eso. Después un display de inline-block. Vamos a refrescarnos aquí. Eso se ve bastante bien. Bastante cerca, en realidad. Vamos a deshacer, tal vez no tan alto, para que podamos ir algo así como cinco píxeles, 10 píxeles. Está bien. Sí, eso se ve bastante bien. Entonces ni siquiera podemos hacer una altura de línea de, ¿cuál era la altura de la línea aquí? 50. Entonces, voy a hacer 50 pixeles. Sí, eso se ve bastante bien. Yo creo. Todavía hay un poco de un espaciado raro aquí. Entonces, tal vez cambiemos esto a inline. Veamos qué pasa. Sí, en línea funciona mucho mejor que el bloque en línea. Fantástico. Entonces solo comprobemos dos veces nuestros márgenes 18 y 40. Eso no se ve bien. Así que vamos a hacer más info h2 margen inferior, vamos por 18 pixels. Entonces también podemos hacer, no, tal vez sólo hacemos la P, y digamos, margen superior, y luego margen inferior puede ser de 40 píxeles o 35 píxeles. Echemos un vistazo a eso. Refrescar. Genial, eso se ve muy bien. Entonces únete a nuestro club de fans a la cima ahí, ¿50 píxeles? No estoy seguro de si ese es el caso, así que vamos a comprobar dos veces esto. Está bien. Más info, no tanto no creo. Nav está aquí, y luego se reduce a más info. Entonces, lo que podemos hacer aquí es, este tipo, probablemente podamos decir, margen y podemos decir, 50 píxeles, cero. Está bien, eso se ve bien. Entonces, vamos por más info p, cambiemos eso a más info h2 margen top 50 pixels y luego el resto puede ser cero. Está bien. Echemos un vistazo. Está bien. Entonces, lo más destacado solo necesita ser bastante audaz y lo podemos hacer aquí y podemos decir, fuente pesa 800. Refrescar, hecho. De acuerdo, ahora podemos comprometernos de nuevo. Entonces, vamos a ir y decir: “Aprieta la sección de leer más”. Comprometerlo y luego empujarlo a origen de nuevo. Hecho. De verdad, esta vez. 22. Proyecto: la sección de la historia: Entonces a continuación, en nuestra lista de cosas por hacer, está la sección de historias. Entonces entrémonos en ello. Lo que voy a hacer primero es esta sección de lista. Tiene 470 píxeles de ancho lo cual es genial, y cada uno de estos tiene 70 píxeles de alto y tienen 20 píxeles entre cada uno. El tipo de letra, negrita y 40 píxeles, 20 píxeles a la izquierda y a la derecha, me imagino. De acuerdo, así que solo dos veces verificando esos 70 píxeles de alto y luego he copiado los 470 píxeles de ancho. Está bien. Entonces, solo voy a pegar eso ahí y voy a ir a buscar el separador en todas estas cosas, lo voy a pegar por aquí. Fantástico. Podemos hacer primero el separador, supongo. dejaremos ahí por ahora. Entonces diremos nuestra nb-list, vale, eso tiene un ancho de 470 píxeles. De acuerdo, entonces el nb-list li. ¿Qué es esto? Por lo tanto, tiene una altura de 70 píxeles. Enfriar. Creo que tiene un radio de frontera de 10 o 4. Radio de borde de 10 píxeles. A ver. Sí, 10 píxeles y recuerda, tiene un tamaño de fuente de 40. Entonces, tamaño de fuente de 40 píxeles. La mayoría de las veces, es de color blanco. Entonces, color blanco. Y entonces para lo que podemos hacer aquí es establecer nuestros pesos de fuente de negrita. Está bien. También podemos establecer su tipo de visualización, por lo que display block. Fantástico. Y luego para cada color, habrá diferentes colores de fondo. Entonces creo que hay rojo así, bgc. Busco mi color rojo y luego hay azul, gris, amarillo, rosa y salmón. De acuerdo, entonces vamos por el azul, vamos por el gris, vamos por el amarillo y el rosa y el salmón. De acuerdo, así que rojo, vamos por este, copia el color. Fantástico, vamos a ir azul, copiar el color. De acuerdo, el gris, es un poco raro. Entonces, tiene una opacidad del 10%. Entonces, lo que podemos hacer aquí es ir rgba. Estoy tratando de usar 0,0,0 y ponerlo en 0.1. Eso debería estar bien. Entonces el amarillo, ¿de qué color es este? Simplemente pega eso, rosa. De acuerdo. Y luego uso salmón. Está bien. Ahora, cualquiera de estos se puso negro, sólo amarillo. Está bien. Por lo que tiene un color de fondo de amarillo, entonces también tiene un color de texto de unos. Está bien. Fantástico. Echemos un vistazo rápido a cómo se ve esto, refresquemos. Oye, eso se ve bastante bien, debo decir. También tenemos un relleno aquí de 20 píxeles. Entonces, vamos a poner un relleno aquí de 20 píxeles y vamos a ajustar el tamaño de caja a cuadro de borde. Muchas gracias. Está bien. Y refrescarse, nada cambió mucho porque no tenemos un color de fondo en eso. Copiemos este color de fondo, bgc. Fantástico. Refrescar, eso se ve bien. Y entonces lo que podemos hacer es que podemos establecer aquí nuestro margen inferior, margen inferior a 20 píxeles. Fantástico y entonces tal vez en la lista, el relleno puede ser de 20 píxeles alrededor excepto por el fondo y confiaremos en el último azulejo para dar esa ilusión del relleno agregado en la parte inferior. Sí, eso se ve bien. Y entonces lo que podemos hacer aquí es que solo podemos poner un poco de relleno, así que relleno de 20 píxeles a la izquierda. mejor podemos hacer como cinco píxeles en la parte superior e inferior. A ver cómo se ve eso. Ha cambiado a caja-dimensionamiento, caja-dimensionamiento, border-box. Está bien. Inspeccionemos esto y veamos qué está pasando. Está bien. Entonces, vamos a cambiar esto. Entonces, esto en realidad estaba destinado a ser de cinco píxeles y tal vez esto sea de 20 píxeles. Sí, eso se ve bien. Seis píxeles y 20 píxeles. Fantástico, sí. Dentro del html ahora, también podemos hacer un poco más de envoltura. Entonces, pongamos esto en un envoltorio de puntos y esto centrará todo. Está bien. ¡Boom!. Y entonces lo que queremos hacer con nuestra nb-list es que queremos flotarla. Entonces, flotar a la izquierda, guardar eso, refrescar. Se ve bastante bien, ¿verdad?. Y entonces queremos darle un margen, digamos, cero en la parte superior, 20 píxeles en los derechos y 20 píxeles abajo, nada a la izquierda, refrescar. Eso se ve genial. Ahora, ¿qué pasa con esto a la izquierda y abajo? ¿ Qué es esto a la izquierda y a continuación? Es un h3. ¿ Cuál es nuestro estilo predeterminado para un h3? Por encima en la parte superior, 30 píxeles. Bueno, ¿son 30 pixeles? , 40 pixeles. ¿ Y el otro h3? Creo que éste no era h3, ¿verdad? , Está bien. Entonces, lo que podemos hacer aquí es simplemente sobrescribir algunos estilos, vamos a establecer el tamaño de fuente en 40 píxeles solo para nuestra nb-list. Bueno, sólo por nuestra historia de todos modos. Entonces, dentro de la historia de punto, ponemos un h3 y queremos decir que el tamaño de la fuente es de 30 píxeles, no, el tamaño de la fuente es de 40 píxeles. Sí, ahí vamos. Eso se ve bastante bien. Vamos a cerrar esto. Eso se ve fantástico. Fantástico. Ahora, todo lo que podemos hacer es que podamos hacer los separadores. Entonces, veamos cuáles son estos, 10 de altura, 470 de ancho. Parece alrededor de 60 o 70 margin-top, margin-bottom. Entonces, 470 de ancho y una altura de 10 píxeles, color de fondo, vamos por unos. De acuerdo, y luego poner un margen de, qué fue, 60 píxeles o 70 píxeles y luego autos que podemos enviar a Lynette. Está bien. Mira eso. Y el otro de abajo debería haber funcionado también. Fantástico. Está bien. Ahora, tenemos esta imagen, entonces, vamos a darle una cláusula, digamos, imagen de pandillas, img. Eso es genial. Guarda eso. Está bien. Imagen de banda, podemos decir mostrar como bloque y vamos a establecer el margen a cero y auto. Guarda eso, refresca, eso ahora está en medio. De acuerdo, esto va bien. Y entonces tal vez vamos a decir, pie de página. ¿ Qué vamos a hacer con el pie de página? Decimos, texto alinear centro. De acuerdo, quizá en el pie de página también podamos agregar un envoltorio. Entonces, envoltorios de puntos y esto solo significa que va a estar alineado en el centro. ¿ Qué está pasando ahí? Echemos un vistazo a eso. Entonces, el envoltorio no está alineado en el centro. Eso está bien. Entonces, si solo guardamos esto, text-align center. A ver si eso cambia algo. Sí, sí lo hace. Dentro de nuestro pie de página, ¿cuál es el tamaño de fuente aquí? El tamaño de fuente es de 20 píxeles, todos en negrita, pero parece que hay una opacidad del 40 por ciento. Entonces, vamos a decir color, rgba. Vamos por negro, y tenemos por 0.4, por 40 por ciento. Entonces tamaño de fuente, vamos por 20 píxeles, y luego, bastante espacio. Entonces, tal vez 80 píxeles hacia arriba, 45 hacia abajo. Entonces, vamos a decir margen, 85 píxeles, 0, y 45 píxeles al fondo. Guarda eso. Vamos a refrescarnos. Sí, sin embargo no es audaz, así que font-weight vamos por un audaz. Sí, eso se ve genial. Entonces, quizá también podamos decir, pie de página a, y hagámoslo del mismo color. Bastante dulce. Esa es casi nuestra página hecha. Ahora necesitamos trabajar con esta risa. Entonces, ¿cómo vamos a hacer esto? Bueno, creo que podría funcionar como una posición absoluta uno. También podría funcionar como una transformación. Si bien transformados y relativos, no salen del flujo de documentos. Entonces, voy a cambiar mi nb-list a posición relativa. Entonces lo que podemos hacer es, ¿cómo se llama éste? Arrgar. Entonces, tenemos un especial.nb-list li.dragging, y podemos establecer esto en posición absoluta, y decimos top, podemos decir 30 píxeles por ahora. Digamos, vayamos a la izquierda de 30 píxeles también. Veamos qué pasa aquí. Ahí vamos, y tal vez podamos sólo, por ahora, sólo diré cero, cero, y le daré un ancho de un 100 por ciento. Casi. Entonces, digamos 20 píxeles, 20 píxeles, y luego a la derecha 20 píxeles también. Sí, veamos qué hace eso. Casi correcto. Entonces nuestra anchura, sólo podemos sacar eso me parece. Fantástico. Ahora, con nuestra transformación, podemos rotarla un poco. Entonces, rotar, ¿cuánto se rota esto? Esa es una buena pregunta. Vamos a comprobarlo, y está girado seis grados. Entonces, seis grados, y tiene una sombra de gota, así que sombra de caja, ¿y qué tenemos aquí? Bueno, tenemos 2 y 14, y está al 50 por ciento de opacidad. Entonces, 0, 2, 14 píxeles, y RGBA, 0, 0, 0.3. A ver cómo se ve eso. Se ve bastante bien. Entonces, ahora desde arriba, podemos decir, no sé, ¿70 píxeles? Sí, eso se ve bastante bien. Ahora, solo podemos usar el navegador para hacer el resto aquí. Entonces, de la izquierda uno, dos, tres, cuatro, cinco, de la derecha, menos uno, dos, tres, cuatro, cinco. Sí, eso se ve bien. Entonces, izquierda de 70, derecha de menos 30. Entonces, tenemos eso en marcha. Ahora, sólo tenemos que meter esa mano ahí. ¿ Cómo vamos a hacer esto? Bueno, podríamos poner un elemento extra ahí o podríamos intentar usar el off a pseudo-clase. Probemos eso. Entonces, pongamos esto así, y vayamos tras. Pondremos el contenido en nada, y luego diremos, mostrar; bloquear, y luego diremos posición; absoluta, y luego quizá le demos un ancho, y le damos una altura, y vamos a bosquejar a averiguar cuáles son esos; 54 por 50. Probemos eso. Cincuenta y cuatro píxeles, 60 píxeles. Fantástico, y luego fondo, vamos por url, dentro de imagen y mano. ¿Dónde está la mano? Ahí vamos, luego podemos ir por 'no-repeat 0 0' y luego por el tamaño de fondo, nuevo, va a ser 100 por ciento. Guardemos eso, y démosle un valor máximo de cero, solo por ahora. Bueno, tal vez podamos simplemente establecer el valor inferior. De acuerdo, y entonces podemos decir izquierda, vamos por 60 por ciento, y bastante cerca, bastante cerca. Entonces, echemos un vistazo a este tipo después de pseudo-clase. Aquí está. Cambiemos el fondo a menos 30 píxeles. Sí, eso se ve bastante bien. Sí. Parte inferior de menos 30 píxeles. Okey-dokey. Entonces, tenemos cosas que nos parecen importantes a la izquierda y por debajo de nuestra historia. ¿Eso se ve bien? Es extra Bold. Entonces, vamos a nb-list, historia. Aquí vamos. Entonces, font-weight 800. Guarda eso. Entonces, la risa es obviamente más importante que cualquier otra cosa para estos chicos especialmente. Tenemos un poco de flotación y envoltura de texto pasando, pero whoa, ¿qué está pasando aquí? Nuestro nav está destinado a estar arriba. Entonces, volvamos a nuestro nav. Vamos a darle un índice z de 1. Vamos a refrescarla, y eso lo solucionó. Fantástico. La otra cosa que noté fue cuando hice clic en el botón de registro, tiene este extraño borde azul en él. Eso es raro, no quiero eso. Creo que tiene algo que ver con la accesibilidad, pero ahora mismo, no me gusta, y además no hay cursor en este botón. Entonces, cambiemos eso. Entonces, en los cta's, sólo podemos ir, frontera; ninguno, y diremos cursor, y cambiamos esto a puntero. Entonces refresca esto. Ahora hay, todavía una frontera. A lo mejor no es una frontera, lo mejor es un contorno. ¿ Qué tal un esquema; ninguno? Refrescar. Sí. Ahí vamos, pero yo también quiero decir una frontera de ninguno. Parece que ahí también hay una pequeña frontera. Refrescar. Ahí vamos. Fantástico. También puedo ponerle una clase de flotación o una clase activa. Entonces, hagámoslo. Activo. Simplemente cambiaremos la opacidad, es realmente fácil, a algo como 0.7. Sí, eso se ve bien. Fantástico. Este es nuestro sitio que se ve realmente bien en este momento. Literalmente acabamos de tener que hacer el popup. Entonces, lo que voy a hacer ahora es, solo voy a ocultar el popup por ahora. Entonces, ¿cómo se llama nuestra popup? Aquí está, y podemos simplemente decir algo así como, ese popup, y decir display; ninguno. Fantástico. Guarda esto. Refrescar. Aquí vamos. Este es nuestro sitio que es visible. En el siguiente video, iré a dar clic en inscribirme, y me mostrará mi popup, o hago clic en inscribirme aquí, y me mostrará mi popup. Antes de hacer eso, cometamos nuestro código. Entonces, lo que hemos hecho aquí, hemos hecho el estilo de pie de página de la sección de la historia. También agregó algo de HTML, y cambió algunos otros bits de CSS. Entonces, nos comprometemos a dominar, y empujamos al origen, lo enviamos a github.com. Fantástico. Ahí vamos. Te veré en el siguiente video. 23. Proyecto: la ventana emergente: Entonces, lo único que nos queda por hacer es nuestro popup. Bastante emocionante, ¿verdad? Entonces, vamos a meternos en ello. Dentro de Sublime Text, lo primero que quiero hacer es solo comentar esto, porque no quiero mostrar ninguno en este momento, pero sí quiero mostrar ninguno en un rato. Entonces, ¿qué es esto y cómo vamos a hacer esto? Entonces, lo primero que me gustaría hacer es poner una manta y esta manta, veamos, tiene una opacidad del 70 por ciento y es negra. Entonces, vamos a ir.popup.manta. Ortografiarlo bien siempre ayuda y estableceremos un color de fondo de rgba (0,0,0, .7). Eso es genial. Estableceremos sus posiciones en absolutas y diremos cero superior, cero inferior, cero derecho, y cero izquierdo. Eso debería hacer el truco. Popup en sí se puede arreglar, así que vamos a ir posf y sí, más o menos lo mismo aquí. Fantástico. Tenemos el contenido, así que si solo copiamos esto, y está pegado por aquí. Ahí tenemos los contenidos, so.popup.content. De acuerdo, ¿qué vamos a hacer con este tipo? Bueno, vamos a revisarlo. Entonces, tiene 961 pixeles de ancho. Probablemente se supone que sea 960. Entonces, vamos por ancho de 960 píxeles. Voy a establecer un caja-dimensionamiento de border-box, fantástico. Entonces, parece que tiene unos 40 píxeles y 30 píxeles en la parte superior que ver con el relleno, así que vamos a ir por el relleno de 30 píxeles y 40 píxeles. Ya veremos cómo funciona eso. Tenemos entonces a este tipo que también es un H3, creo, un H2. H2, igual que Únete a Nuestro Fanclub. Entonces, tenemos esto. Queremos establecer nuestro color de fondo en blanco. Voy a decir texto alinear centro. Veamos cómo se ve esto. Por lo que refresca. Está bien, se ve bastante bien. El índice z está por debajo de la barra de navegación. Yo quiero que esté arriba. Entonces, cambiemos el índice z del popup a dos. Bastante fácil, refresca, ahí vamos. Todavía un poco raro, ¿verdad? Entonces, el contenido, no tiene una posición de absoluto. Entonces, cambiemos esa posición de absoluto. Sabemos que su ancho es de 960. ¿ Cuál es la mitad de 960? No tengo ni idea, 480. Entonces, vamos por un módulo a la izquierda de 480 píxeles o 480 píxeles negativos. Entonces vamos a establecer este valor de izquierda en 50 por ciento. Guardémoslo y comprobémoslo. Sí, fantástico. Entonces, ¿qué tan alto debe ser? Bueno, supongo que realmente podemos arreglarlo aquí. Podemos ver que todo este asunto es de unos 540 píxeles. Entonces, cambiémoslo a altura de 540 píxeles. Nuevamente, lo pondremos en valor máximo en 50 por ciento, y 540 dividir por dos es 270. Entonces, vamos margen superior negativo 270 píxeles. Echemos un vistazo a eso, fantástico. Se ve bastante bien por ahora. Ajustemos nuestro botón de cierre. Eso es emocionante. Popular.Cerrar. ¿ Tiene una cláusula de cierre en ella? Creo que sí. Sí, está bien. Entonces, vamos a echar un vistazo y bosquejemos lo grande que es esto, 80 por 80. Entonces, vamos a establecer un ancho de 80 píxeles, una altura de 80 píxeles. Yo quiero tener un color de fondo de, ahí vamos. Entonces queremos un fondo o queremos que esto sea una URL e imagen y cerrar. En realidad podemos poner este color por aquí. Podemos decir, no hay repeticiones. Puedo decir centro, fantástico. Entonces probablemente podamos establecer su tamaño de fondo en algo así como 100 por ciento, pero podría ser 80 por ciento o 70 por ciento, no del todo seguro en este momento. Lo comprobaremos y luego arriba, nos fijaremos en menos 40 píxeles y a la derecha, nos fijaremos en menos 40 píxeles. Guardemos eso. Ahí está, dice Close. Queremos un radio fronterizo. Oh, hombre. Nunca me sale bien este. Radio fronterizo de, digamos sólo 50 por ciento. Sí, eso se ve bastante bien. Digamos, frontera de ninguno y esbozar ninguno. Sí, eso se ve genial. Quizás nuestro tamaño de fondo pueda ser del 50 por ciento. A ver qué pasa entonces. Sí, 50 por ciento se ve genial. Podemos establecer un desbordamiento de capacidad de oculto. Entonces, vamos a decir sangría de texto menos 999 píxeles, y eso sangrará nuestro texto cercano a ninguna parte. Ahí vamos. No hemos establecido una posición de absolutos, y por eso el valor máximo no está funcionando. Entonces, vamos a la posición absoluta, refrescar, increíble. A ahora, nuestro cursor, vamos por puntero cursor, y ahí vamos. Ahora, lo que necesitamos hacer es trabajar aquí en estos elementos. Entonces, acabamos de conseguir estos artículos, para que podamos un tener popup el ítem y dentro del ítem, tal vez podamos flotarlos. Entonces, podemos simplemente flotarlos a la izquierda. Sí, intentemos eso, así que flote a la izquierda. De acuerdo, ¿cuál va a ser el ancho? Buena pregunta. El ancho va a ser, digamos 415 píxeles. Sí, intentemos eso, entonces en el margen izquierdo, bueno vamos a ver, cuál es el margen que queda, 40 píxeles. De acuerdo, veamos cómo va esto. ¿ Qué pasa? Wow, ¿qué está pasando aquí? No realmente lo que quiero. Entonces, elemento emergente quizás, bueno, eso es en realidad un div, la etiqueta, y la entrada tal vez no. Entonces, vamos a cambiar este artículo.Etiqueta y entrada con un tipo de texto. Voy a decir bloque de exhibición en ambos. A ver si esto cambia algo en absoluto. No, no cambia nada en absoluto. Entonces, veamos qué está pasando aquí. Está bien así que no están flotando a bien, el botón tampoco está realmente disfrutando esto, parece que está en elementos de línea. Por lo que tenemos que decir display block. Hey sigue escalofriante. Supongo que todos estos estarán flotando a la izquierda. Problemático. Entonces, ¿qué podemos hacer aquí? A ver si cambiar, qué, allá vamos, eso ayuda mucho. Entonces, con los 400 píxeles, funciona realmente bien, por ahora. Quizás podamos ajustar el color de fondo a amarillo para averiguar qué está pasando. De acuerdo, así parece que aquí solo hay mucho espacio en el lado izquierdo. Entonces lo que podemos hacer es insertar nuestro archivo índice, podemos poner estas dos filas, aquí mismo. Y entonces sólo vamos a sangrarlo aquí. De acuerdo, entonces en realidad podemos flotar los elementos en las filas y luego las filas solo comenzarán una tras otra. De acuerdo, entonces lo que tenemos aquí, tenemos un pop up. pop en fila y esto va a ser un bloque de exhibición y es altura, va a ser 111. Entonces, altura de tal vez vayamos a 110 píxeles. De acuerdo, o tal vez ni siquiera necesitamos una altura. A lo mejor puede ser como una solución clara, así que tal vez lo que podemos hacer aquí es solo ir, subir a una fila y después podemos decir que el contenido no es nada. Entonces podemos decir, mesa de visualización y luego podemos decir camino claro. Ahí vamos. De acuerdo, entonces ahora tenemos estos artículos flotando en las filas. Podemos volver a cambiar esto a 415 píxeles y luego podemos decir que cualquier elemento que también sea un primer hijo no tiene tal cosa como un módulo que queda. Aquí vamos, y vamos a ver esto. Ahí vamos, funciona un poco mejor. Entonces tengo mi etiqueta mostrando como un bloque, pero tengo un pequeño nombre de clase allí en lugar de un nombre de etiqueta real. Entonces vamos a guardar eso, refrescar. Mucho mejor. Y luego dentro de cada ítem puedo decir, toma la línea a la izquierda, o simplemente toma la última línea, toma la línea a la izquierda. Ahí vamos. Refrescar. Increíble. Las cosas se ven mucho mejor. ¿ Y cuál es el tamaño de fuente aquí? 20 píxeles y 30 píxeles. Entonces, vamos por tamaño de fuente, 20 píxeles y ¿fue negrita? Sí audaz y audaz. Dulce. De acuerdo, entonces el tamaño de la fuente es de 20 píxeles y el peso de la fuente es negrita. Y lo mismo para el texto, 30 píxeles y peso de fuente negrita. Sí, eso se ve muy bien. Era un poco de margen ahí así que tal vez algo así como 10 píxeles, margen inferior 10 píxeles. Sí, súper genial. Probablemente podamos sacar este amarillo ahora, así que sí. Gracias. Se ve un poco mejor ahora. De acuerdo, ahora si tenemos que volver a bosquejar, estas cosas son fronteras bastante grandes. Por lo que 111 es el color y grosor de 4. Entonces, vamos por tipo de texto. Vamos por un borde, y es un sólido de 4 píxeles y es 111. De acuerdo, eso se ve bastante bien pero ahora ¿cuál es la altura? La altura es de 70 píxeles. Entonces, vamos por una altura de 70 píxeles, vayamos por una caja dimensionando para una caja y luego actualicemos. Se ve bastante bien. Algo no se ve del todo bien. A lo mejor son las filas, el contenido, hay un relleno de 30 en la parte superior y 40 en la izquierda. Estos se ven un poco cortos. Entonces, tal vez lo que podemos hacer es que podemos establecer estas entradas tu ancho debe ser del 100 por ciento, y luego estás relleno o tu relleno marginador 15 en la parte superior y 20 en la izquierda y la derecha. Entonces, vamos por el relleno. Entonces, 15 y 20 píxeles y veamos cómo se ve esto. Oye, eso se ve mucho mejor. Fantástico. Y realmente no puedo desplazarme a ninguna parte ahora. Es algo de presupuesto, pero si cierro esto. Ahí vamos. Puedo ver lo que está pasando. Entonces, a lo mejor quiero disminuir un poco la altura en este pop up. Entonces, vayamos al contenido pop up aquí, cambiemos esto a 500. Entonces voy a cambiar mi margen máximo a 250, así que solo refresca esto. Sí, eso se ve bastante bien. Y luego mi pop up, voy a cambiar mi H para decir que el margen es 0 0 y tal vez si podemos ir 20 pixeles al fondo, veamos cómo se ve esto. A lo mejor podemos hacer 10 píxeles en la parte superior. Sí, eso se ve bastante bien. Y entonces también quiero mi pop up. CTA. Yo quiero darle a eso algún margen top, vamos por 50 pixeles. Quizás incluso menos, 40 pixeles. ¡ Súper! Rellena tus datos, quiero en Boom! Está bien. Eso cambia un montón de cosas. Entonces, ahora lo que podemos hacer es que realmente podemos empezar a hacer un poco de JavaScript. Ahora, recuerda que esto no es una clase de JavaScript, así que voy a hacer un poco de JavaScript rápido y sucio pero aguanta conmigo. Todo lo que necesito hacer aquí es en nuestro índice, todo lo que abra o cierre el pop up necesita tener algún tipo de función en él. De acuerdo, así que vamos a buscar todo lo que tenga un hash. Ahí vamos, logo, está bien, inscríbase. Ahí vamos. Entonces aquí lo que podemos hacer es quizá podamos decir algo como JavaScript. Logo. Sí, eso está bien. Date de alta. Aquí vamos. Entonces, aquí lo que podemos hacer es, quizá podamos decir algo como JavaScript, y simplemente podemos poner nada. Creo que eso funciona. Oye, tal vez sea solo JavaScript así. ¿ Así? No lo sé. Entonces podemos decir, onclick, y aquí decimos, ShowPopup. Ahí vamos. Sólo volvamos a copiar todo esto. Busquemos inscribirnos. Está bien. Ahí vamos. Onclick, ShowPopup. Está bien. Creo que eso necesita algunas comas invertidas. Está bien. Entonces, solo hay dos Botones de Regístrate. Está bien. Ahora lo que vamos a hacer es crear un nuevo archivo JavaScript. Entonces, New File, vamos a guardarlo como script.js. Está bien. Dentro de nuestro index.html, lo que vamos a hacer es que vamos a añadir el guión en la parte inferior. Entonces, script y fuente es script.js, y decir tipo. Creo que es un texto JavaScript. Ahí vamos. Guión, sólo vamos a decir console.log, hey ahi. Ahora, sólo vamos a hacer esto para que sepamos que el JavaScript está funcionando. Vamos a refrescarnos. Simplemente voy a compartir mi consola. ¡ Eh ahí! Entonces, está funcionando. Fantástico. Ahora lo que podemos hacer es volver al estilo. Vamos a ir a popup, y vamos a comentar esto de nuevo adentro. Entonces vamos a agregar una clase a nuestro popup para decir popup.show, y diremos, display block. Está bien. Entonces, eso es bastante guay. Entonces, cuando nos refrescamos aquí, no hay popup. Entonces, ahora lo que podemos hacer es, dentro de nuestro index.html, nuestro popup, solo dale un ID de popup, y así es como lo vamos a hacer referencia en JavaScript con un ID. Entonces, dentro de nuestros scripts, en realidad podemos escribir algún código, pero primero lo voy a hacer en el navegador. Entonces, voy a decir, document.getElementById, y luego voy a decir, hazlo por popup. Presione Entrar. Ahí no hay nada. Entonces, vamos a refrescarnos. Voy a presionar flecha arriba, hacerlo de nuevo, y tenemos nuestro popup. Entonces, voy a escribir algún código. Voy a decir var. A lo mejor puedo hacer esto un poco más grande para ti. Var popup es igual, y si pudiera simplemente copiar esto, está bien. Entonces, eso es lo que iguala el popup. Entonces voy a decir popup.classlist.add, y luego voy a decir show. Así como así, hey, llegaron nuestros popups. Entonces, lo que puedo decir de nuevo es, puedo decir remove show, y eso eliminará mi popup. Bastante fácil, ¿verdad? Entonces, vamos a copiar esto. Vayamos a nuestro guión. Ahora podemos escribir un guión que diga algo como show popup. Ahí vamos. Entonces, podemos decir función ShowPopup, y podemos escribir esto. Antes de eso, podemos decir var popup igual, y volvamos a Chrome, y vamos a presionar la flecha arriba aquí sólo para ver qué escribimos la primera vez. Ahí vamos. Copiémoslo y peguémoslo. Entonces, vamos a quitar eso. En este caso, lo vamos a agregar. Entonces podemos copiar esto, y se puede decir HidePopup. Está bien. Guardemos esto y luego onclick, en realidad podemos copiar todo eso. Entonces busca nuestro botón Cerrar y haz exactamente lo mismo aquí. Onclick, ShowPopup. Está bien. Entonces, vamos a cerrar esto. Vamos a refrescarnos. Leer Más. ¡Regístrate Me Arriba! Ahí vamos. Nuestro popup está funcionando. Vamos a cerrar esto. Eso no funciona. ¿ Por qué eso no funciona? Buena pregunta. Entonces, volvamos a nuestro guión. Todavía dice agregar. Entonces, digamos quitar. Lo que esto está haciendo es básicamente, es agregar y quitar justo esto como pieza de código y CSS. Se está quitando el show. Entonces, por lo tanto, por defecto no mostrar ninguno. Cuando agrega una clase de show, luego va y dice: “Oye, muestra este elemento a la pantalla de bloque”. Está bien. Refrescar. ¡Regístrate Me Arriba! Cerrar. Todavía nada. Entonces, ¿hay algún error? ¿ Qué está pasando aquí? Bueno, sólo inspeccionemos este elemento. A ver. Eso es en realidad lo correcto. Todavía dice ShowPopup. Entonces, volvamos a aquí, y digamos HidePopup. HidePopup. ShowPopup. Está bien. Refrescar. Cerrar. ¡Regístrate Me Arriba! ¡ Yo Quiero En! Fantástico. Cerrar. ¡Regístrate Me Arriba! Cerrar. ¡eh! Date de alta. Cerrar. Realmente genial, ¿verdad? Ahora tenemos un elemento fijo. Tenemos un elemento pegajoso. Tenemos todo tipo de web cosas ruidosas pasando en esta página web. Nosotros prácticamente hemos completado nuestro ejemplo. Hagamos un compromiso final. Podemos decir: “¡La poseía! Hecho! En su mayoría hecho”. Entonces, todavía hay muchas cosas que entran en hacer que un sitio web sea increíble. Probablemente hay unas cuantas cosas como tú, “¿Por qué no hiciste eso?” Bueno, podríamos estar aquí por días haciendo el sitio web perfecto, pero espero que hayas aprendido mucho en el proceso. Una cosa que sí quiero hacer, es simplemente sacar este registro de consola. Está bien. Comprometerse con monstruo. Empuje a GitHub. ¡ Boom! Hecho. 24. Compártelo con otros: Entonces, ahora que has creado una página web o sitio web usando lo que hemos aprendido en la clase, ¿por qué no compartirlo? O subirlo a tu propio sitio web, usa las páginas Surge o Github. Usar el control de versiones con Github o Bitbucket también es una gran idea. No solo consigues mantener versiones de tu proyecto en diferentes etapas, sino que también es una gran herramienta de respaldo. Entonces, ahora que has creado tu sitio web, es una obra maestra, quieres compartirla. Si no quieres pagar tu propio sitio web y hosting, si solo quieres sacarlo a la naturaleza, al mundo, y has estado usando Github y quizás Github desktop, hay buenas noticias, solo puedes publicarlo gratis en línea con páginas de Github. Entonces, lo que haces es tocar esta rama maestra y dices gh-pages, crear una nueva sucursal, crear esa rama con gh-pages y luego puedes cambiar entre tu rama maestra y tu rama gh-pages y luego vas, boom , publicar sucursal, y va empujando a Origin, fantástico, y vas a Google Chrome y en una nueva pestaña, puedes utilizar tu nombre de usuario, tu nombre de usuario de Github, por lo que mrra.github.io/the-gang y ahí está. Está en línea para que todo el mundo lo vea. Bastante asesino, bastante dulce y, jaja, nuestro pop-up funciona. Yay, yay para páginas de Github. Una de las formas más fáciles de conseguir a tus sitios cualquier cosa en línea, especialmente, si no has usado Github, es usar algo llamado Surge. No te voy a contar todo al respecto. Es bastante asombroso. Entonces, lo que me gustaría hacer es, me gustaría crear un nuevo archivo. Voy a guardarlo como algo así como http y luego voy a decir the-gang.surge.sh. Voy a guardar esto como CNAME y ya verás por qué en tan solo un segundo. Voy a volver al buscador, arrastrar mi carpeta www a la terminal y luego solo voy a ir Buscar y así, presiono, Ok. Si aún no has iniciado sesión, te llevará por un montón de pasos, echa un vistazo a search.sh y luego se va, baam. Se publica proyecto y se ejecuta en the-gang.surge.sh y podemos ir por aquí y boom, está en línea. La-gang.Ciruja.sh, super, super simple. Entonces, sí. Echa un vistazo a surge.sh. 25. El final: Está bien. Me he divertido enseñando esta clase de diseño HTML y CSS. Espero que hayas aprendido mucho y te hayas divertido un poco. Ahora deberías ser mejor capaz de apoderarte del mundo y construir sitios web impresionantes. Podrás ver más de mis clases y unirte al club de fans en taptapkaboom.com. Entonces, adiós por ahora, y te veré pronto con más clases. Si te gustó la clase, dale un pulgar arriba y escribe una buena crítica. Realmente significa mucho para mí.