Antes de llegar al artículo, solo quiero compartir que estoy creando un producto, y me encantaría recopilar algunos datos sobre cómo servir mejor a los desarrolladores web. Creé un breve cuestionario para revisar antes o después de leer este artículo. Por favor, échale un vistazo – ¡gracias! Y ahora, de vuelta a nuestra programación regular.
El blog vamos a construir. ¿Prefieres el vídeo? Haga clic aquí para abrir en Scrimba
Si es como yo, está interesado en la web y su alcance abrumador, pero también está inundado con el desorden de información que está aprendiendo HTML y CSS. La cosa es que estos lenguajes son diferentes a otros dominios, como Procesadores de Texto y Lenguajes de Programación. La web es otro mundo, y no es la cosa más bonita que hay.
Habiendo aprendido algo de web, estoy aquí para dar un suave empujón de aliento, porque, con un poco de orientación, estos dominios pueden ser mucho más fáciles de lo que imaginas. Sigue leyendo, y construiremos un hermoso blog desde cero. También aprenderemos algo de Cuadrícula CSS, Flexbox y Diseño Responsivo.
El objetivo es hacer por ti lo que he hecho por mí mismo; aprender HTML y CSS desde los primeros principios.
¿Prefieres el vídeo? Haga clic aquí para abrir en Scrimba
También enseñé un curso gratuito de HTML/CSS en Scrimba donde enseño cómo construir un hermoso blog desde cero. Haga clic aquí para inscribirse! ?
Scrimba.com es una plataforma front-end interactiva donde los sitios web se graban como eventos, no como videos, y se pueden editar. ?
Entonces, ¿de dónde viene el HTML?
HTML es un descendiente del primer meta o lenguaje de marcado: GML. Los lectores de la generación del Milenio ahora están descubriendo que GML significa Lenguaje de marcado Generalizado, pero eso no es todo lo que significa. Fueron Charles Goldfarb, Edward Mosher y Raymond Lorie quienes crearon lo que ahora conocemos como meta o lenguaje de marcado en IBM. Y en 1996, Charles Goldfarb escribió:
» Le di a GML su nombre actual para que nuestras iniciales siempre demostraran dónde se había originado. Una de las feas verdades de la transferencia de tecnología es que los desarrolladores tienden a estar agradecidos por el trabajo de investigación cuando se reciben por primera vez, y prácticamente ajenos a él al final de un largo ciclo de desarrollo
— Charles Goldfarb, en 1996
GML más tarde se estandarizó, convirtiéndose así en SGML. Luego, Tim Berners-Lee, que trabajaba en el CERN, tomó prestado el ML de SGML (no, no aprendizaje automático, o como lo llamen los hipsters) para crear HTML, donde HT significa hipertexto.
Whoa, palabra genial. Y según tengo entendido, tiene raíces en un entorno de creación interactivo llamado HyperCard, de Bill Atkinson, que trabajó en Apple. Para una exploración más profunda, presento los siguientes videos:
Haz clic en cualquiera de los dos para obtener más información
Así que recapitulemos. HTML no solo se apoderó del mundo. De hecho, había todo un mundo antes de HTML. WUT? Lo sé, estoy temblando de shock, pero no había nacido, así que no había un mundo.
Y, HTML le debe mucho a sus predecesores. Como todos nosotros con nuestros padres. Sin embargo, así es como creamos el código a partir del texto. Ahora, en cuatro lecciones de un minuto, enseñaré los conceptos básicos de HTML, CSS y Diseño Adaptable.
HTML y CSS en 4 minutos
Primer minuto: Un sitio web puede entenderse mejor como un árbol web
<html> <head></head> <body></body></html>
Todos los sitios web comienzan su vida como tales. Sin embargo, y esto es terrible, no hay contenido. Sin embargo, comenzamos aquí porque primero necesitamos entender qué es un sitio web. Piénsalo como un árbol, un árbol invertido*, un árbol web. El elemento html es la raíz, mientras que head y body son las primeras ramas de nuestro árbol web:
html <- root / \head body <- branches
El elemento head (o etiqueta, lo mismo) es para metadatos o información sobre nuestro sitio web. El elemento body, por otro lado, es para el contenido de nuestro sitio web. Y como CSS es el estilo de nuestro sitio web, va en el elemento head, mientras que el contenido, como párrafos, videos de gatos ( ≧ ∇ ≦ ), etc., va en el elemento body.
Segundo minuto: los elementos o etiquetas tienen múltiples aspectos
El primer elemento es un elemento de cierre automático, donde comunicamos algo al navegador, pero también no tiene un valor. Un ejemplo de esto es el elemento <br>, que inserta un salto de línea.
El segundo elemento es un elemento común, donde comunicamos un valor como perteneciente a algún elemento. Por ejemplo <p>hello, worl d!</p> es el valor «hola, mundo!»como perteneciente al elemento de párrafo.
por Último, tenemos un elemento con un atributo. Y un atributo es lo que suena—¡maldita sea, es un atributo! Le da a un elemento más contexto o significado. Los atributos pueden tener varios valores y los elementos pueden tener varios atributos. Attribute-ception.
Ahora, debo mencionar, no creamos los nombres de nuestros elementos HTML. Los tomamos prestados de una lista de más de 100 elementos predefinidos. Por supuesto, esto hace que algunas cosas sean más fáciles, y algunas cosas mucho, mucho más difíciles, como la memorización.
El !DOCTYPE html especifica que estamos escribiendo HTML5, como se supone que es para todas las otras versiones de HTML que queremos evitar. Y dado el elemento de cierre automático meta con el atributo charset y el valor UTF-8, nuestro texto está codificado en Unicode. UTF-8 significa Formato de transformación Unicode… 8. Ahora podemos escribir ????! Una vez, papá decidió enviar mensajes de texto en emoji.
\_(ツ) _ /
También agregamos un elemento style que es uno de los puntos de entrada disponibles para CSS. Donde selector selecciona un elemento y le aplica un property con un value correspondiente. Exploraremos esto y más en el próximo minuto.
De nuevo, debo mencionar que no creamos los nombres de nuestras propiedades CSS. Las tomamos prestadas de una lista de algunos cientos de propiedades que están predefinidas. Por supuesto, esto hace que algunas cosas sean más fáciles, y algunas cosas mucho, mucho más difícil, como ____________!
¡Ya no es terrible nuestro sitio web! Lo que tenemos es «hola, mundo!»en texto verde, y si el ancho de nuestro sitio web se redimensionara a 8.5 pulgadas o menos, se leería en azul, y en 5 pulgadas o menos, en rojo. Aquí, utilizamos consultas de medios para anular CSS en algunas circunstancias, como el ancho de nuestro sitio web.
¿Qué es un Reset y depurador de CSS?
¿Prefieres el vídeo? Haga clic aquí para abrir en Scrimba
Utilizamos un reinicio para garantizar que nuestro diseño sea coherente y un depurador para exponer inconsistencias.
Necesitamos nuestro reinicio, porque los navegadores son obstinados y establecen algunas propiedades CSS para nosotros que queremos desajustar. Existen reseteos CSS populares, pero haremos los nuestros. Y necesitamos nuestro depurador para mantener el diseño de nuestro sitio web con facilidad.
Podemos crear una carpeta llamada styles para alojar nuestro reinicio y depurador:
styles/ reset.css debug.css
Y para vincular nuestros nuevos archivos CSS a nuestro index.html, agregamos elementos link :
Ignorar la línea 1. por ahora, comencemos con body, body * { … } donde seleccionamos el body y todos los elementos de bodycon un *. El asterisco significa seleccionar todos los hijos. ¿Recuerdas nuestro árbol de la web?
html / \head body <- selected / \ \… … p <- selected
body, body * { … } está seleccionando body y-a , denota y – p porque es uno de los hijos de body. Esto se conoce como la relación padre-hijo, donde body es el padre y p es el niño. Y les decimos a esos elementos unset propiedades comunes. Las propiedades que he elegido son solo una lista corta. Este es un ejemplo de uno de los reseteos CSS más famosos:
¡Caramba! De vuelta a nuestro reinicio. En la parte superior tenemos :root { font: 20px/1.2 sans-serif; }. ¿Qué es :root? ¿Recuerdas nuestro árbol de la web? Es la raíz, en otras palabras, el elemento html. Este pseudo-elemento pertenece a una clase especial de elementos conocidos como psuedo-classes, que se pueden usar para organizar y comprender mejor nuestro CSS.
¡WAAAIT! ¿No necesitamos un * para seleccionar todos los elementos secundarios, de modo que se establezcan sus propiedades font? Bueno, gran pregunta: algunas propiedades, como las propiedades de texto, heredan de sus padres, y font lo hace. Así que en su lugar podemos establecer font una vez en :root, que se propaga a todos sus hijos. Propiedad-ception.
Nuestro depurador CSS
Un depurador enfatiza el contenido y el borde de los elementos:
¡Contemplad! En solo tres líneas, nuestro depurador. Esta técnica inteligente anula tres propiedades comunes: color, background y outline. Nuestros colores se componen de valores hsla(), que es la abreviatura de tono, saturación, luminancia y alfa. Para habilitar nuestro depurador, vinculamos el archivo.
Si queremos desactivar nuestro depurador, podemos escribir mal el nombre del archivo para ocultarlo del sistema de archivos de nuestro ordenador, p.ej.:
<link rel="stylesheet" href="styles/-debug.css">
O simplemente borra la línea. ٩ (^^ ^ )
Nuestro depurador utiliza divertidísimos valores !important para indicar que bajo ninguna condición se pueden anular estas propiedades. ¿Recuerdas las consultas de medios?
p { color: green !important; }
@media (max-width: 8.5in) { p { color: blue; } }@media (max-width: 5.0in) { p { color: red ; } }
Si hubiéramos especificado que nuestro color p es !important, nuestras consultas de medios serían inertes, debido a su menor importancia.
Conoce la cuadrícula CSS y Flexbox
¿Prefieres el vídeo? Haga clic aquí para abrir en Scrimba
Yo diría que antes de CSS Grid y Flexbox, diseñar para la web era el viaje de un héroe.
La cosa es que el diseño web solía ser un malabarismo de hacks en el que engañábamos al navegador para que renderizara nuestros diseños. Esto se está volviendo menos cierto con el tiempo. No soy religioso, pero gracias a Dios.- o, gracias a los ingenieros de navegadores!- por lo tanto, ahora podemos apoyarnos en CSS Grid y Flexbox para iniciar nuestro diseño.
Si no lo sabe, CSS Grid y Flexbox son tecnologías más nuevas incorporadas en los navegadores modernos que sacan al héroe del diseño web. Y CSS Grid y Flexbox son amigos — los usaremos juntos para crear una cuadrícula y elementos flexibles en nuestra cuadrícula.
Nuestra primera cuadrícula: HTML
… <body> <article> <p>ARTICLE</p> </article>
<article> <p>ARTICLE</p> </article> </body> …
Recuerde que nuestro del árbol?
body / \article article / \ p p
Estamos creando un blog, para que cada publicación se pueda considerar como article. Y nuestros article s contienen un p de ARTICLE, que es otro truco inteligente que podemos usar. Usar el nombre del elemento como valor del elemento para ayudarnos a entender dónde y qué son las cosas. Percepción de valor.
Introduzca la cuadrícula CSS. En primer lugar, seleccionamos el artículo y aplicamos tres propiedades: display define el elemento como una cuadrícula, grid-template-columns plantillas de columnas y height simula que cada article tiene una altura de página. Sin embargo, height es un código de pegamento y se eliminará.
Vamos a centrarnos en las dos líneas más importantes:
Primero, si hubiéramos establecido grid-template-columns a 1fr 1fr 1fr, donde fr es la abreviatura de fracción-unidad, nuestras tres columnas se dividirían en tercios. Sin embargo, nuestra columna central tiene un ancho minmax, lo que significa que es sensible. En o menos de 8.5in, nuestra columna central se renderiza a 100% de ancho, y nuestras columnas de la izquierda y la derecha desaparecen, ya que no queda resto.Barra lateral
: tenga en cuenta que el diseño adaptable no se limita a consultas multimedia. Este es un ejemplo de donde nuestro diseño es implícitamente receptivo, en lugar de explícitamente receptivo. Este es el mejor tipo de diseño responsivo, porque no está codificado. Y esta es una de las razones por las que CSS Grid y Flexbox son tan potentes.
En segundo lugar, para comunicar que los hijos de articlepertenecen a la columna central, o comienzan en la segunda columna y terminan en la tercera, configuramos grid-column a 2 / 3. Tenga en cuenta la sutil diferencia entre grid-template-column y grid-column, ya sea para columnas de plantilla o columnas de extensión.
CSS Grid es genial, y lo es, pero ahora nos apoyaremos en Flexbox para centrar nuestro texto ARTICLE. Lo que estamos a punto de hacer es crear una Clase de utilidad, y es otro paradigma para escribir CSS. Aquí, utilizamos el hecho de que los elementos pueden tener atributos de estilo en línea para el elemento p :
<p class="debug-center">ARTICLE</p>
¿CSS en HTML?!
(╯°□°）╯︵ ┻━┻
Esto es lo que está pasando: los elementos tienen un atributo de clase. Y podemos usar este atributo no solo para escribir CSS a elementos, sino a un tipo de elemento o clase de elemento. Esto significa que podemos reutilizar clases en varios elementos, independientemente de su semejanza. Por desgracia, nada ha cambiado, también necesitamos crear una clase .debug-center en algún lugar de nuestro CSS. ¿Qué tal nuestro depurador:
Nota utilizamos un prefijo . para diferenciar las clases de los elementos.
Ahora, donde se atribuya un elemento con nuestra clase debug-center, su texto se centrará. Primero, establecemos display a flex haciendo de cualquier elemento un elemento Flexbox en lugar de un elemento de cuadrícula CSS. Luego configuramos justify-content a center para centrar horizontalmente y align-items a center para centrar verticalmente. Aaagh!
Imagine esto: usamos Grid para diseñar el diseño de nuestro sitio web, y Flexbox para flexionar los elementos de nuestra grid a una posición deseada.
Iterar nuestra cuadrícula
¿Prefieres el vídeo? Haga clic aquí para abrir en Scrimba
Tenemos un problema: sin .debug-centerARTICLE abraza las paredes izquierda y derecha. Lo que necesitamos son canalones verticales y horizontales para que nuestro contenido pueda respirar. Aaah. De lo contrario, la lectura se volvería frustrante y conduciría a una mala experiencia de usuario. ヾ (•д*;)
Para relleno vertical:
article { padding: 0.5in 0; …}
Y para el relleno horizontal, podríamos usar relleno, y cualquiera de los dos funcionaría:
padding: 0.5in 0.5in;padding: 0.5in;
Sin embargo, queremos que nuestros canales sean receptivos, por lo que usaremos CSS Grid:
Aquí, hicimos tres cosas: 1. definimos nuestras canaletas horizontales para que sean 0.5in (¡se volverán receptivas, lo prometo!). 2. nuestra columna de contenido pasó de 8.5in a 7.5in, la suma sigue siendo 8.5in , y 3. identificadores inventados start y end para nombrar el inicio y el final de nuestra columna de contenido.
Cuando agregamos nuevas columnas, también necesitábamos actualizar article *:
article * { grid-column: 3 / 4; }
Pero contar columnas no es lo ideal. En su lugar, usemos nuestros identificadores inventados:
article * { grid-column: start / end; }
Actualizamos nuestra cuadrícula sin interrumpir el flujo de contenido, siempre y cuando continuemos utilizando los identificadores start y end que inventamos.
Por último, según lo prometido, necesitamos que nuestras canaletas sean receptivas. minmax() por una razón u otra no funciona aquí, así que usaremos consultas de medios:
Ahora en o menos de 8.5in, article usará % en lugar de in para dividir nuestras columnas, y las columnas de la izquierda y la derecha desaparecerán porque, de nuevo, no queda resto. A pesar de todo esto, podríamos haber establecido padding a 0.5in 5% para lograr el mismo efecto, entonces, ¿qué da? ¡Sigue leyendo!
Iterar nuestra cuadrícula, de nuevo
¿Prefieres el vídeo? Haga clic aquí para abrir en Scrimba
Para comprender nuestra cuadrícula, usemos imágenes para abarcar columnas, de 100% a 8.5in a 7.5in en el escritorio, y de 100% a 90% en el móvil. Sin embargo, para la última imagen, la de la izquierda en la parte inferior, necesitamos agregar incluso algunas columnas más a nuestra cuadrícula. AF) UBQWF * VBQPWIFB, ¿tengo razón?
No se deje intimidar: la cuadrícula CSS es increíble. Agreguemos dos columnas más:
Dividimos nuestra columna de contenido en tres columnas: 1.25in 5in 1.25in . También agregamos porcentajes proporcionales para nuestra consulta de medios: 15% 60% 15%. El plan es que el texto abarque nuestra columna de contenido 7.5in original y que las imágenes pequeñas abarquen nuestra nueva columna 5in.
Para añadir imágenes, utilizamos el elemento img y su atributo src – source:
Son locales, es decir, están en nuestra computadora. Y fueron ellos remoto, es decir, en un servidor:
<img src="https://website.com/images/cosmos.jpg">
tenga en cuenta que cada img tiene una de cuatro clases: size-*. Y como queremos más que imágenes, como videos, para abarcar la cuadrícula de nuestro sitio web, es preferible que utilicemos clases para poder reutilizar el CSS. Estas clases size-* también son Clases de utilidad, por lo que cambiar el tamaño que queremos es simple.
Hagamos que nuestras clases size-* abarquen diferentes conjuntos de columnas:
Debido a que img s se renderizan a su tamaño real, por ejemplo, una imagen de 400 × 400 a 400 píxeles, necesitábamos anular ese comportamiento con el nuestro: width: 100%. Por lo tanto, cuando una imagen se atribuye con una clase size-*, puede cambiar el tamaño a las columnas que abarca. Nota: no es necesario establecer height.
Añadir elementos de texto
¿Prefieres el vídeo? Haga clic aquí para abrir en Scrimba
Enlaces a sitios web y contenido
Ahora que nos estamos poniendo serios con nuestro article, hagamos las cosas formales:
… <article></article> …
Ahora cada artículo es enlazable. ¿Enlazable? Bueno-los sitios web son enlaces:
https://website.com/index.html
Y el contenido de nuestro sitio web, por ejemplo article s, también se puede vincular:
https://website.com/index.html#article
Aquí article es el valor de un atributo id, análogo a vincular una marca de tiempo en un video de YouTube (por ejemplo, este). Mejor que sugerir «comienza en 4 minutos y 7 segundos» o «lee el segundo artículo», podemos enlazar contenido en nuestro sitio web, como una marca de tiempo en un video.
Para vincular un sitio web o contenido, utilizamos el elemento a y el atributo href :
El texto «El Cosmos» ahora enlaza el inicio del artículo: #the-cosmos.
Esta idea de enlazar (enlazar sitios web y contenido en sitios web) es uno de los puntos del HTML. HyperCard dominaba esto, pero en lugar de vincular sitios web y contenido, estaba interesado en ideas y asociaciones. En ese momento, era 1987 y HTML se propuso por primera vez en 1989. Vea unos segundos del video que publiqué anteriormente—aquí he vinculado una marca de tiempo:
Elementos de texto
Agreguemos encabezados, una fecha de publicación, texto fuerte y enfatizado y enlaces:
<article>
<h1><a href="#the-cosmos">The Cosmos is all there is</a></h1> <h2>Or ever was, or ever will be</h2>
<time datetime="03-09-2014">MAR. 9, 2014</time> <p><em>A generation ago</em>, the astronomer <a href="https://en.wikipedia.org/wiki/carl_sagan">Carl Sagan</a> stood here and launched hundreds of millions of us on a great adventure the exploration of the universe revealed by science. It's time to get going again. We're about to begin a journey that will take us from the infinitesimal to the infinite, from the dawn of time to the distant future. We'll explore galaxies and suns and worlds, surf the gravity waves of space-time, encounter beings that live in fire and ice, explore the planets of stars that never die, discover atoms as massive as suns and universes smaller than atoms. </p>
<img class="size-4" src="images/cosmos.jpg">
<h3>COSMOS IS ALSO A STORY ABOUT US</h3> <p>It's the saga of how wandering bands of hunters and gatherers found their way to the stars, one adventure with many heroes. To make this journey, we'll need imagination. But imagination alone is not enough because the reality of nature is far more wondrous than anything we can imagine. This adventure is made possible by generations of searchers strictly adhering to a simple set of rules test ideas by experiment and observation, build on those ideas that pass the test, reject the ones that fail, follow the evidence wherever it leads and question everything. <strong>Accept these terms, and the cosmos is yours.</strong> </p>
</article>
Estas son las primeras líneas de nuestro astrofísico personal, Neil deGrasse Tyson, Cosmos 2014: Una odisea del Espacio-Tiempo, una reimaginación del Cosmos original de Carl Sagan de 1980: Un viaje personal. Es ciencia ficción sin la ficción. ¡Y se renovará en 2019!
Anteriormente presentamos algunos elementos: h1, h2, h3, time, strong, y em.
h1–h6 los elementos son titulares.
El elemento time marca el tiempo de nuestro artículo. Podemos poner lo que queramos para el valor del elemento, porque las computadoras leen el valor del atributo datetime, que debe ser legible por máquina.
El elemento strong es para texto fuerte y el elemento em es para texto enfatizado. Además, los elementos h* son fuertes.
Tenga en cuenta que los elementos h* y p se rompen de una línea a la siguiente, o se bloquean, mientras que los elementos time, strong y em no lo hacen. Esto se debe a que los navegadores establecen los elementos h* y pdisplay en block, y los elementos time, strong y em elementos display a inline.
Rems y ems
Cuando no es suficiente bloquear elementos de una línea a la siguiente, usamos saltos de línea para que sea más fácil diferenciar los elementos entre sí, no a diferencia del relleno o las canaletas. Podríamos usar elementos br aquí, pero es preferible usar CSS extraño sobre HTML extraño.
Te mostramos cómo insertar contenido en dos saltos de línea, siguiendo los elementos h2 y p :
h2, p { margin-bottom: 2.4rem; }
2.4 ¿rem?
¿Recuerdas nuestro reinicio? Configuramos font a 20px/1.2 sans-serif. No lo expliqué en ese momento, y debería darme vergüenza, pero 2.4 son saltos de dos líneas a 1.2 altura de línea, por ejemplo, texto a espacio simple. El texto más legible podría ser 1.5, y el texto a doble espacio podría ser 2.
* Ejem * ¿Qué son rems?
* Ejem ejem * ¿Y qué son los ems?
rem es root em y ambos son multiplicadores. 1rem es 20px y 1em es font-sizedel padre. Si hubiéramos definido nuestros saltos de línea en ems, no rems, y establecido h2 y p a diferentes font-size, ¡sus saltos de línea serían diferentes! Por lo tanto, los saltos de línea consistentes usan rems y los inconsistentes usan ems.
Y este es un CSS poderoso para escribir ideas de manera que el diseño esté conectado. Dada esta iluminación, siento que es mucho más sabio pensar en CSS no en reglas sino en relaciones. Por lo tanto, si hacemos un cambio en algún lugar, podemos hacer un cambio en todas partes.
make hacer un cambio en algún lugar
make hacer un cambio en cualquier lugar…
Un emoji de Manzana real. Tenía un Comunicado de prensa
Diseño responsivo
¿Qué pasa si escribimos CSS en rem s y em s, y usamos consultas de medios para cambiar font-sizede :root? Entonces todo, y me refiero a todo, se redimensionará proporcionalmente. Podemos ir incluso un paso más allá y tener múltiples consultas de medios para múltiples anchos:
Lo sorprendente de esto es que no solo anulamos una propiedad, sino que anulamos la propiedad para rems y ems. Ahora podemos escribir CSS que no solo responda, sino que responda a nuestro diseño receptivo. Esta es quizás la frase más importante de todo este post:
Podemos escribir CSS que no solo sea responsivo, sino que también responda a nuestro diseño responsivo.
Esto no es solo genial, es cómo debemos escribir CSS. Los sitios web tienden a ser terribles, y creo que se puede reducir a esto: cuando escribimos CSS, debemos escribir en sistemas de diseño y no en código de silo. Cuando usamos rem s y em s en tándem para consultas de medios, es un sistema de diseño y el código no está en silos.
Las propiedades pueden tener abreviaturas como hemos visto antes; padding: 0.5in, equivalente a padding: 0.5in 0.5in. Y aquí, usamos font para combinar font-weight, font-size y line-height. Después de font, tenemos color con valores hsl, como valores hsla en nuestro depurador.
Un problema sin resolver es nuestro elemento a. En nuestro reinicio, desactivamos color y text-decoration haciendo enlaces indiscriminados desde el texto. Eliminamos estas propiedades porque text-decoration: underline es demasiado sutil. Así que así es como podemos darles un fuerte subrayado:
a { box-shadow: inset 0 -0.25em hsl(55, 100%, 75%); }
Invertimos box-shadow para crear un subrayado que está dentro del elemento. Si hubiéramos establecido inset sin un valor negativo, nuestro subrayado sería una línea excesiva. También usamos em para que el subrayado se escale con su font-size. Este es un ejemplo de cuando queremos escalado inconsistente, como se supone que nuestros saltos de línea.
box-shadow Es mucho más que esto: haga clic para obtener más información.
Último paso: gradientes
¿Prefieres el vídeo? Haga clic aquí para abrir en Scrimba
Wohoo! Todo lo que necesitamos es una señal para nuestros lectores sobre dónde comienza y termina un article. Sin eso, los extremos de cada article se sentirán como una continuación sin fin, lo que conduce a una mala experiencia de usuario. Así que tenemos que dar una pista a nuestros lectores… (◔◔)
Lo que propongo es simple: un gradiente que se extiende desde la parte superior de cada article hasta la parte inferior de su elemento h2. Y podemos escribir nuestro gradiente en em s para que a medida que nuestro sitio web cambie de tamaño, también lo haga nuestro gradiente:
article { … background: linear-gradient(hsl(55, 100%, 96%), white 6.83em);}
Aquí hemos definido un degradado de color a blanco, y hemos utilizado 6.83em para que nuestro degradado no extienda todo article, sino que termine en el equivalente de la parte inferior de nuestro elemento h2. Sin embargo, el valor exacto depende.
Puede hacer cálculos para determinar el tamaño, por ejemplo 6.83em, pero otra técnica es establecer un tamaño en el color superior, por ejemplo hsl(55, 100%, 96%) 6.83em. Una vez que sea igual o mayor que el tamaño del color inferior, aparecerá como una línea y no como un degradado, por lo que es intuitivo a qué cambiarlo.
Felicitaciones ?
El blog hemos construido! ¿Prefieres el vídeo? Haga clic aquí para abrir en Scrimba
¡Felicitaciones! ٩(˘.) You Has entrado en un mundo que necesita desesperadamente mejores diseñadores e ingenieros. Y con CSS Grid, Flexbox, Diseño Responsivo y depuradores a nivel de navegador, el desarrollo para la web nunca ha sido más accesible.
No olvides que hay un curso gratuito en Scrimba donde enseño cómo hacer el mismo sitio web desde cero. Haga clic aquí para inscribirse!
