Tipografía web para principiantes: decora tu texto con HTML y CSS

1. Introducción: Hola, soy Brent Miller y hoy te voy a enseñar a implementar tipografía creativa y llamativa en páginas web. Durante los últimos años, he escrito código detrás de sitios web. He trabajado en aplicaciones de negocios con el enfoque fue en etiquetas de entrada y consejos de herramientas y un estilo profesional limpio. También he trabajado en muchos sitios web de folletos con encabezados artísticos audaces y contenido de forma larga. Después de haber terminado este curso, podrás tomar un diseño de tipo sofisticado de un diseñador e implementar ese diseño con perfecto detalle en una página web en trabajo real. Si eres del tipo de persona a la que le gusta inventar tus propios diseños, tendrás una comprensión mucho mejor de cómo funciona el texto estilizado para la web. Tendrás a tu disposición un conjunto de técnicas para experimentar con esos detalles. También desarrollarás un conocimiento más fuerte de HTML y CSS en general. Si te interesa el diseño web o el desarrollo web de manera más amplia, tendrás una base de conocimiento más fuerte en esas áreas. Asumo que al menos estás interesado en letras o tipografía o diseño web. No tienes que ser un diseñador profesional para triunfar en este curso. Pero si lo eres, recogerás algunos trucos nuevos. Tampoco necesitas conocer ninguna programación antes de empezar, sin embargo, si tienes un conocimiento muy básico de HTML y CSS, te resultará útil ese conocimiento. Si tienes alguna pregunta a medida que avanzamos por este curso, por favor siéntete libre de publicarlas aquí en el curso. También puedes ponerte en contacto conmigo en Twitter o LinkedIn. También te animo mucho a que publiques tus proyectos aquí en este curso, tanto si los terminaste como si no. Si te quedas atascado en un problema, por favor siéntete libre de publicar tu proyecto como un “trabajo en progreso” y pedir comentarios. No importa cómo te alcances, estoy comprometido a ayudarte a tener éxito y contestar cualquier pregunta que puedas tener. Eso es todo. Estamos listos para empezar. Vamos a sumergirnos y nos vemos en la primera lección. 2. Configuración: Esta lección es todo sobre el proyecto del curso. Cubre lo que vas a hacer a lo largo del curso y cómo empezar. En la pantalla, vemos una página web sencilla. Es la página sobre nosotros para el sitio web ficticio de la Biblioteca Letterville. Aquí no pasa mucho además de la tipografía. Para aquellos de ustedes que quieran mantener las cosas simples, hacer de esta página será su objetivo. Te llevaré a través de todos los pasos necesarios para pasar del texto plano a esto. Si planeas seguir mi ejemplo de proyecto, aquí te presentamos dos enlaces importantes. He publicado estos enlaces en las notas del curso, así que siéntete libre de copiarlos y pegarlos. Te muestran con qué vas a empezar, y con qué vas a terminar. No tienes que seguir mi proyecto de ejemplo. No obstante, algunos de ustedes podrían tener en mente sus propios objetivos y proyectos para la tipografía web. Algunos de ustedes podrían pensar, soy un diseñador horrible y que se puede hacer mucho mejor con esta página de ejemplo. Ambas postes están completamente bien. Siéntete libre de implementar cualquier proyecto que te guste. Para el resto de este curso, sin embargo, usaré esta demo de Letterville Library como mi principal referencia. Ahora hablemos de CodePen. Podrías haberte dado cuenta de todas estas cosas extra en la parte superior de nuestra página web. Eso se debe a que estoy hospedando este proyecto en CodePen. Codepen es un patio de recreo para construir proyectos web y prototipos sencillos, que es exactamente lo que estamos haciendo en este curso. Si planeas seguir mi ejemplo de proyecto, vas a usar CodePen. Ahora muchos de ustedes probablemente están preguntando, “hey Brent, me estás pidiendo que cree otra cuenta en línea?” Bueno, la respuesta es tal vez, estrictamente hablando, no, no tienes que crear una cuenta CodePen para tener éxito en este curso, pero te resultará más fácil compartir tu trabajo o volver a él más tarde si tienes una cuenta. No voy a entrar en los detalles de crear una cuenta CodePen en este curso porque es súper simple. Una vez que estés en CodePen, solo tienes que hacer clic en ese botón de registro en la parte superior de la pantalla para empezar. El último paso para que tu proyecto esté listo para funcionar, es bifurcar mi proyecto de arranque. bifurcación es solo lingo programador de lujo para hacer una copia. Vayamos al proyecto de inicio de la Biblioteca Letterville. Había un enlace en esa diapositiva, y también hay un enlace hacia abajo en las notas del curso. Este es el proyecto de inicio. El contenido del texto está a la derecha, y luego tenemos estas casillas de código a la izquierda. Una vez que hayas iniciado sesión en la cuenta de CodePen, para aquellos de ustedes que vayan a usar su propia cuenta, haga clic en este botón “Tenedor” aquí en la parte superior de la pantalla. Una vez que hagas eso, deberías ver este nombre de usuario por aquí cambiar de mi nombre a tu nombre. O si no tienes cuenta, verás ahí las palabras capitán anónimo. Una vez que veas ese cambio de nombre de usuario, voila, ahora tienes tu propia copia de este proyecto. Puedes cambiarlo, guardarlo, hacer lo que quieras con él, es tu propio proyecto desde este punto en adelante. Ahora, CodePen tiene un tono de características, pero no vamos a cubrir la mayoría de ellas en este curso. Vamos a mantener las cosas simples. Te mostraré aquí las suficientes características para completar tus proyectos. En primer lugar, este panel por aquí a la izquierda con diferentes secciones. Sólo nos interesan dos de las secciones aquí, la que marcó HTML y la que marcó CSS. Si no sabes lo que significa nada de eso, no entres en pánico. Está bien. Vamos a cubrir todo esto, te lo prometo. Las casillas HTML y CSS son donde va tu código. Observe que ya hay algunos ahí dentro. CodePen tomará el código de estas cajas, y lo convertirá en la salida o resultados en esta parte más grande de la pantalla. Esto lo hace en tiempo real, es decir, a medida que haces cambios en tu código, los resultados se actualizan de inmediato. Por ejemplo, si tenía hasta nuestro encabezado Letterville Library, y he puesto mi cursor ahí, y elimino el carácter E, espera un segundo. Observe que la E acaba de desaparecer de nuestra página de resultados. Eso se debe a que CodePen recarga nuestro código en vivo en nuestra página web de muestra. Si vuelvo, y escribo la E de vuelta ahí dentro, espera un segundo, y luego regresa la E. Eso es todo lo que realmente necesitas saber sobre CodePen. 3. Estructura de tu texto con las etiquetas en HTML: Esta lección es todo sobre HTML. Cubrimos qué es HTML , qué hace y cómo usarlo. HTML significa lenguaje de marcado de hipertexto. La definición nos da una pista de lo que hace el HTML, marca el lenguaje con etiquetas que le dan sentido al contenido escrito. En este curso, usaremos HTML para dos cosas una, dar nuestra estructura de texto, y dos, para proporcionar un poco de estilo básico. Mirando por encima de nuestro código HTML existente aquí, observe que no es sólo un blob gigante de texto. Está roto y envuelto en estos conjuntos de palabras coincidentes llamados etiquetas HTML. Echemos un vistazo al título de nuestra página por ejemplo. Entonces aquí tenemos la Biblioteca Letterville, y esta frase está envuelta en un par de etiquetas h1 coincidentes, y se traduce a esta salida de encabezado por aquí, a la derecha. Tenga en cuenta la segunda etiqueta llamada la etiqueta de cierre, tiene esta varilla delantera frente a la parte h1. Todas las etiquetas de este curso tendrán este dúo de etiquetas de apertura y cierre lo que nos lleva a nuestro siguiente bit de vocabulario. Una etiqueta de apertura viene antes del contenido del texto y no tiene la inclinación hacia delante. Una etiqueta de cierre viene después del contenido del texto y tiene la inclinación hacia delante delante del nombre de la etiqueta. Cuando ponemos la etiqueta de apertura, y el contenido del texto, y la etiqueta de cierre juntos, forma un elemento HTML. Nuestro segundo uso para HTML es proporcionar un estilo básico. Algunas etiquetas HTML, pero no todas, proporcionarán a su contenido un poco de presentación predeterminada. Echemos un vistazo a ese título de página otra vez aquí en nuestro código. Observe que es más grande que todo el otro texto de la página además de los otros encabezados por aquí en la salida. El navegador lo ve, hemos envuelto al título en esa etiqueta h1 en nuestro código, y hace que el título sea grande y audaz por aquí como resultado. Aquí tienes una lista de todos los elementos HTML de nuestro proyecto de la Biblioteca Letterville. No entres en pánico, volveremos a cada uno de estos en diferentes puntos del curso, pero por ahora, te explicaré sólo algunos de ellos. En primer lugar, utilizamos la etiqueta p o una etiqueta de párrafo para definir un solo párrafo de texto. Por defecto, los navegadores darán a los párrafos espacio en blanco extra arriba y abajo. Aquí, note el párrafo comenzando con, aspiramos, aquí en nuestro código se envuelve abriendo p y cerrando etiquetas p y luego aquí en nuestra salida, note que está tipo de estilo como un párrafo con un poco de espacio superior y un poco de espacio inferior. En segundo lugar, la etiqueta fuerte nos da elementos de estilo audaz. Por lo que nota aquí tenemos la palabra power envuelta en la etiqueta fuerte inicial, la etiqueta de apertura, y una etiqueta de cierre con la slash por aquí en nuestra salida ha tomado esa palabra power, y la ha hecho audaz. En tercer lugar, el elemento em establece su texto en cursiva. Observe que las dos primeras palabras de cada elemento de la lista aquí abajo están envueltas en etiquetas em y observe cómo son cursiva en los resultados. Nos desplazamos hacia abajo en el código y notamos etiqueta em aquí alrededor fomentamos, em tag aquí alrededor actuamos, etcétera. Por último, vamos a implementar el último elemento de esta lección juntos. Probablemente ya hayas conseguido la idea principal detrás de las etiquetas, así que este es un buen punto para que empieces a trabajar. En la etiqueta de marca se destacan los textos con un color de fondo. Retrocedamos y veamos la primera frase del último párrafo, empezando por, cómo perseguimos. Aquí en el código, está cómo perseguimos envueltos en etiquetas de párrafo de apertura y cierre. Por lo que vamos a resaltar esto con un elemento de marca. Colocamos nuestro cursor justo después de la etiqueta de párrafo de apertura, escribiremos la marca de palabras entre los corchetes angulares, y luego aquí al final de esa oración después del periodo, tendremos marca con una reunión de barras hacia delante en la etiqueta de cierre, y ahí vamos. Hemos establecido esta primera frase como elemento de marca, y nota aquí en nuestra página web, nuestro navegador le ha dado este color de fondo como medio de resaltarlo. Hay muchas más etiquetas en el lenguaje HTML de las que hemos utilizado en este proyecto. Si te interesa aprender más, recomiendo leer la guía de referencia de elementos HTML de Mozilla. 4. Listas: Esta lección explora las listas en las páginas web. Cubriremos cómo hacer listas y cómo ajustar su presentación. Ya tenemos un ejemplo de lista aquí en nuestro proyecto hacia abajo hacia abajo. Hacer lista es bastante sencillo y lo hacemos con solo HTML. Todas las listas tienen una etiqueta externa, que es o bien una etiqueta OL o UL, y una o más etiquetas LI internas. Aquí en nuestro HTML tenemos una etiqueta UL externa la cual contiene las listas completas. Dentro de eso tenemos cinco etiquetas LI cada una de las cuales contiene el contenido para un solo ítem de lista. Por aquí en nuestros resultados, note cómo el navegador le da a nuestra lista un poco de estilo predeterminado. Cada elemento de la lista comienza en una nueva línea y tiene un símbolo de viñeta al frente. Existen dos tipos principales de listas. El primero, que vemos aquí en nuestro proyecto son listas desordenadas. Lista desordenada muestra viñetas, discos u otros símbolos no numéricos frente a sus elementos de lista. Hacemos una lista desordenada mediante el uso de la etiqueta UL. Listas ordenadas por otro lado, muestran un orden secuencial. Cada elemento de la lista comienza con un número o una letra delante de él. Hacemos una lista ordenada mediante el uso de la etiqueta OL. Aquí hay otro ejercicio para que completemos juntos. Cambiemos temporalmente nuestra lista de ser una lista desordenada a ser una lista ordenada. Destacamos la U en nuestra etiqueta UL aquí en nuestro HTML, escribimos una O en lugar de la U. CodePen de avisos acaba de actualizar nuestra etiqueta de cierre para que seamos una etiqueta OL. Ahora por aquí en los resultados, vemos que tenemos números frente a la lista en lugar de los puntos de bala que había antes, porque ahora tenemos listas ordenadas. Pero para nuestro proyecto final, no queremos aquí la lista numerada. Queremos esa lista de botellas. Volveremos a nuestro HTML, sacaremos ese O, pondremos de nuevo la U. CodePen acaba de actualizar nuestra etiqueta de cierre para nosotros, y ahora volvemos de nuevo a esta lista desordenada. Se puede anidar una lista dentro de otra. Probemos esto. Añadamos un elemento de lista al final de nuestro set. Bajamos aquí, vamos a añadir otra etiqueta LI. Entonces dentro de nuestra etiqueta LI, ahora tenemos una etiqueta de cierre. Ahí vamos. Vamos a sumar en otra lista. Esta va a ser una etiqueta OL y que vamos a cerrar esto con nuestro OL. Ahora tenemos una segunda lista dentro de un elemento de lista. Vamos a añadir dos elementos de lista a nuestra lista interior. Yo solo estoy haciendo las etiquetas aquí, nuestro contenido va a ser que me encanta. Entonces vamos a sumar un LI. Esto va a ser letras como nuestro segundo ítem de lista. Déjame hacer el cierre. Ahí vamos. Ahora vemos que tenemos estas listas ordenadas anidadas dentro de nuestras listas externas desordenadas. Siempre podemos cambiar esto. Si cambio la O a la U, como lo hicimos antes, ahí vamos. Se actualizó por un segundo y ahí tenían las balas. Tiene un estilo de bala diferente porque se trata de una lista anidada, pero aún así la vemos como parte de la lista externa. Ahora no queremos este elemento de lista extra en nuestro proyecto final. Entonces vamos a borrarlo y a deshacernos de él. Ahora estamos de vuelta a la forma en que era antes. Con eso concluye nuestra lección sobre listas. Si has decidido que te encantan las listas y quieres aprender más, echa un vistazo a este tutorial. 5. Ajustes de fuente con HTML: En esta lección, aprenderemos algunas técnicas para hacer el texto más grande y más pequeño con solo código HTML. Empezaremos con elementos de cabecera. Observe cómo ya tenemos algunos encabezados de sección en nuestra pantalla. Corresponden a estos elementos H1 que tenemos en nuestro código. En realidad hay seis niveles diferentes de encabezados de sección en HTML. Definimos el nivel de encabezado de sección por el número en nuestras etiquetas HTML. Observe que todos nuestros encabezados de sección son del mismo nivel, H1, este es H1, este es H1, este es H1 y así sucesivamente todo a través de los diferentes encabezados que tenemos. De esta manera en la salida aquí a la derecha, todos tienen el mismo tamaño. Esto no funciona muy bien desde una perspectiva de diseño, no da una jerarquía visual a nuestro contenido. Desde una perspectiva de programación, hace que nuestro código sea más difícil de entender ya que nuestros elementos no están comunicando nuestra jerarquía prevista. Vamos a los elementos de subtítulo de páginas, el elemento About Us y cambiarlo a un elementos H2. Yo sólo voy a reemplazar el número 1 y esta etiqueta de apertura, el número 2 CodePen se actualiza nuestra etiqueta de cierre para nosotros. Ahora nota en los resultados, el subtítulo se acaba de hacer un poco más pequeño. A continuación, cambiemos este encabezado de sección por encima de cada párrafo a un elemento H3. Para nuestra misión, lo cambié a un H3 para nuestra visión, lo cambio a un H3 para nuestros valores, un cambiarlo a y H3. Ahora los hemos actualizado a etiquetas H3 y notamos que el encabezado de sección es ahora comunicar una jerarquía visual y el código que tenemos por aquí comunica nuestra estructura prevista. Otro elemento que cambia el tamaño del texto es el elemento pequeño. El pequeño elemento se utiliza típicamente para representar impresión fina en un documento como un derecho de autor o texto legal. Hace que su contenido de texto una categoría de tamaño más pequeña. Observe que la última frase de la página que describe la licencia de copyright es del mismo tamaño que el resto del texto. Ya que es un aviso de copyright, hagámoslo más pequeño, como una nota al pie sobre enter cuadro HTML nos desplazaremos hacia abajo hasta la parte inferior y notamos que este contenido escrito inicia la frase dentro de esta etiqueta de párrafo. Vamos a escribir la etiqueta de apertura de pequeños aquí en nuestro código. Ahí está la etiqueta de apertura de pequeño. Entonces al final de nuestro contenido, al final de este cierre de una etiqueta, vamos a hacer la pequeña etiqueta de cierre así como así. Ahora nota más en los resultados, las oraciones ahora un tamaño más pequeño y parece una nota al pie. Ahí lo tenemos. Acabamos de ajustar el tamaño de nuestro contenido de texto usando etiquetas HTML. 6. Canción de fuentes con CSS: En esta lección, seguiremos aprendiendo técnicas para hacer el texto cada vez más grande. Esta vez, obtendremos nuestro primer sabor de escribir código CSS en lugar de HTML. CSS es sinónimo de Hojas de Estilo en Cascada. Los desarrolladores web lo utilizan para definir la presentación visual del contenido en las páginas web. Echemos un vistazo a este cuadro CSS que mencioné brevemente antes. Ya tiene algunas cosas en ella. La mayoría de estos son comentarios y no cambian los resultados. En cambio, son sólo para que los desarrolladores lean y ayudan a los desarrolladores a entender el código. Para nuestra primera pieza de código CSS, vamos a establecer el tamaño de fuente de algunos de nuestros elementos. En la parte inferior de nuestro código CSS existente, vamos a escribir nuestro primer conjunto completo de reglas CSS. Escribamos una h 1 y luego escribiremos una llave rizada de apertura así. CodePen se da cuenta de lo que estamos haciendo y nos acaba de dar un corsé rizado de cierre a juego. Presiona la tecla “Return” para darnos nuestro código en una nueva línea. Entonces vamos a escribir la palabra font, dash, el tamaño de la palabra, un colon regular, un espacio, y luego el número cuatro, las letras r-e-m, colon. Ahora, note lo que acaba de pasar con nuestro encabezado, nuestro título aquí arriba arriba. Eso fue porque acabamos de cambiar su tamaño de fuente. Debo mencionar que CSS es sensible a mayúsculas y minúsculas. Cuando estamos escribiendo código CSS en este curso, tiene que ser todo minúscula para que funcione correctamente. Vamos a descomponer lo que acabamos de hacer. Cada conjunto de reglas CSS consta de algunos componentes. El h 1 parte de nuestro conjunto se llama el selector. Los selectores se pueden complicar pero en este curso, lo estamos manteniendo simple. El h 1 significa que las reglas se aplicarán a todos los h 1 elementos en los resultados. Los tirantes rizados de apertura y cierre establecen el apartado a donde irán las declaraciones. Dentro de los tirantes rizados viene una o más declaraciones. Una declaración es algo único que deseas cambiar sobre los elementos seleccionados. El inmueble de cada declaración viene antes del colon y es lo que pasa con el elemento que quieres cambiar. En este caso, queremos cambiar el tamaño de fuente de todos los elementos h 1. El Valor Inmueble viene después del colon. Es la apariencia que desea asignar a la propiedad. En este caso, queremos que la fuente de nuestros elementos h 1 sea cuatro veces el tamaño de nuestra fuente de cuerpo. El REM unidad significa que estamos multiplicando el tamaño de fuente raíz por un número dado en este caso, cuatro. Por último, es una buena práctica terminar siempre una declaración con punto y coma. Técnicamente hablando, no siempre tienes que sino convertirlo en un hábito y estarás cubierto. Ahora, vamos a establecer el tamaño de fuente de nuestros otros encabezados después del conjunto de reglas h 1, agregue un selector h 2. Agregamos h 2, abriendo corsé rizado en una nueva línea. Volveremos a utilizar el tamaño de fuente. Entonces eso es tamaño de guión de fuente, colon, espacio. Esta vez vamos a asignar 2 rem como valor. Eso significa que sea el doble del tamaño de la fuente del cuerpo, y note por aquí nuestro subtítulo acaba de hacerse más grande basado en nuestro código CSS. Por último, hagamos lo mismo por nuestros h 3 elementos. Va a ser el mismo código pero esta vez vamos a cambiar la apariencia de tres elementos a la vez. Después de nuestro selector h 2, añadiremos un selector h 3, tendremos nuestras llaves. Vamos a escribir de nuevo la propiedad font-size para el valor font-size. Hagamos 1.75 rem. Puedes jugar con tallas si quieres, son tus proyectos. Estoy usando 1.75. Entonces note que nuestros encabezados aquí a la derecha son un poco más pequeños que el subtítulo de página. Todos cambiaron de valor porque nuestro conjunto de reglas h 3 seleccionó los tres h 3 elementos en nuestro código HTML. Eso concluye nuestra lección sobre dimensionar fuentes con CSS. Si quieres conseguir mucho más preciso con el tamaño de las fuentes, te recomiendo este tutorial sobre diferentes formas de dimensionar las cosas en CSS. 7. Conceptos básicos de Font web: En esta lección, cubrimos qué son las fuentes web y cómo usarlas en tu proyecto. Una fuente web es una fuente que el navegador descarga de Internet cuando carga una página web que utiliza esa fuente. Esto difiere de las fuentes nativas, que ya están instaladas en el equipo del usuario antes de que el navegador cargue la página. Asumo que ya sabes lo que son una tipografía y una fuente. De lo contrario, echa un vistazo a este artículo de Wikipedia sobre el tema antes de continuar con esta lección. Una de las formas más fáciles de incorporar una fuente web gratuita en tu proyecto web es Google Fonts. Si quieres seguir conmigo, navega a fonts.google.com. Google Fonts cuenta con cientos de fuentes web gratuitas que categorizan decenas de formas diferentes. Te animo a explorar este sitio por tu cuenta. Para este curso, vamos a encontrar y utilizar la familia de fuentes Lobster Two. Entonces en el cuadro de búsqueda, escribe Langosta, y te darás cuenta de que sale con dos resultados. Vamos a utilizar la fuente Lobster Two, y así vamos a añadir este icono Plus junto al nombre de la fuente. Este panel de colapso hacia abajo nos permite saber que hemos seleccionado la fuente. Haga clic en este pequeño panel aquí abajo para expandirlo. El panel nos da los controles para personalizar una importación nuestra fuente seleccionada para nuestro proyecto. En primer lugar, echemos un vistazo a esta pestaña de personalización por aquí. Esto nos da la fuente en diferentes estilos, cuatro de ellos. Regular y negrita se refieren al peso de la fuente, o 400 y 700 respectivamente, y cada peso viene en un estilo cursiva y no cursiva. En este proyecto, solo usaremos la cara de fuente negrita, no cursiva. Por lo que seleccioné esas opciones. Al volver a la pestaña Embed, Google nos está diciendo cómo incrustar nuestras fuentes seleccionadas en nuestro proyecto. Sin embargo, para mantener las cosas simples, vamos a hacer las cosas un poco diferente a lo que sugiere Google. Pasemos a la técnica de importación, luego seleccionemos el código entre las etiquetas de estilo aquí. Ten cuidado de excluir las etiquetas de estilo de lo que estás seleccionando, y luego copiarlas. Ahora volvamos a nuestro proyecto. En la parte superior de este cuadro CSS, justo después de este comentario sobre declaraciones de importación, Pega el código que copiamos de Google. Ahora la cara de fuente Langosta Dos negrita, no cursiva está lista para usar en nuestro proyecto. Nuestro siguiente paso es asignar la fuente Lobster Two a los encabezados con la propiedad de la familia de fuentes. Echemos un vistazo a un conjunto de reglas CSS un poco más complejo. Observe que hay dos selectores, no uno. Están cada uno en su propia línea separados por una coma. Esto significa que las declaraciones aquí se aplicarán a cada uno de los elementos especificados. En este caso, la decoración font-family se aplicará a todos los elementos h1 y a todos los h3. La siguiente diferencia está en el valor de la propiedad. Aquí tenemos dos valores separados por una coma. El primer valor está entre comillas dobles. La propiedad font-family nos permite especificar un valor primario seguido de una serie de copias de seguridad. Si el navegador no encuentra la primera font-family que pedimos, usará la segunda. Aquí, le estamos diciendo al navegador que use la fuente Lobster Two si puede encontrarla. Si el navegador no puede, entonces debería usar las fuentes cursivas predeterminadas del ordenador del usuario, cualquiera que sea esa fuente que pase a ser. Especificar familias de fuentes de copia de seguridad como esta es una mejor práctica, ya que nunca se sabe qué tipo de problemas podrían surgir cuando un usuario carga la fuente web especificada. Por último, ya que la misma Langosta Two tiene un espacio en ella con un nombre, necesitamos envolverlo entre comillas. Las comillas le dicen al navegador que Lobster Two es un solo nombre de fuente, no dos nombres de fuente. Aquí se requieren las cotizaciones. Implementemos ese mismo conjunto de reglas en nuestro código CSS. En nuestro código CSS, vamos a desplazarnos hacia abajo. Justo frente al conjunto de reglas h1 que ya hemos escrito, vamos a escribir una nueva. Escribiremos h1, y luego h3, y luego tendremos nuestros corchetes rizados, y luego vamos a usar la propiedad font-family. Entonces eso es font-family, y luego un colon. Vamos a escribir Langosta Dos dentro de nuestras comillas dobles, y luego vamos a enumerar cursiva como nuestra copia de seguridad, y luego un colon. Ahora, observe que acabamos de aplicar esta bonita fuente a nuestro título de página y a nuestros encabezados de sección. 8. Caras de font personalizado: Esta lección te enseñará cómo implementar una fuente cara personalizada. En la última sesión, descargamos una fuente web de fuentes de Google. A pesar de que no lo vimos en el código, Google nos proporcionó una definición font-face para la langosta dos tipografía negrita, no cursiva cuando nuestro navegador la descargó de los servidores de Google. No siempre tenemos ese lujo. En ocasiones sólo tenemos acceso a los propios archivos de fuentes sin procesar. En estos casos, tenemos que escribir nuestras propias definiciones font-face. No voy a repasar los diferentes formatos de archivo de fuentes ya que muchos entusiastas de la topografía ya están familiarizados con ellos. Si no lo estás, siéntete libre de echar un vistazo a este artículo. Leerlo como opcional para nuestros propósitos en el curso. Señalaré aunque que como estoy grabando este video, el formato de archivo más confiable para usar en la web es el formato WOFF W-O-F-F. Te mostraré cómo usarlo más adelante en esta lección. Para nuestro proyecto, necesitamos definir tres font-faces personalizadas, Roboto regular, Roboto regular Italic, y Roboto bold. reglas de font-face pueden incluir varias propiedades. En este proyecto sólo usaremos cuatro. Ya hemos cubierto la propiedad font-family antes. Una diferencia aquí es que en una regla de font-face, no especificamos retrocesos. Las familias de fuentes de reserva se especifican mejor en los conjuntos de reglas qué elementos de estilo como el conjunto de reglas de encabezado que escribimos anteriormente. En las declaraciones de estilo de fuente se establece si una fuente debe ser peinada con cara normal cursiva u oblicua de su familia de fuentes. En este proyecto, utilizamos caras normales y cursivas. En la declaración de peso de la fuente se especifica el peso o la audacia. Para que nuestro proyecto sea sencillo, solo estamos usando los valores normales y audaces, aunque podríamos llegar a ser mucho más específicos si quisiéramos. Por último, la SRC, o declaración fuente, le dice al navegador dónde encontrar el recurso que contiene los datos de la fuente, como todos los acantilados que conforman la fuente. En muchos casos, como el nuestro, el valor fuente será la ubicación de un archivo de fuente. En este proyecto, utilizaremos el valor de formato de paréntesis URL, que proporciona al navegador una ubicación de archivo específica. Por último, este valor de paréntesis de formato después la ubicación del recurso ayuda a los navegadores a comprender el tipo de recurso que estamos proporcionando. Implementemos algunas caras de fuentes personalizadas en nuestro código CSS. En nuestro cuadro CSS, justo debajo de esta importación por regla, notarás este comentario que he puesto ahí sobre Roboto font-faces. Esto te será útil en tan solo un minuto. Por cierto, llamamos a esto una regla en regla, no una regla establecida por ese símbolo Ampersand delante. Justo debajo de nuestro comentario sobre nuestras font-faces, empecemos a escribir font-face en las reglas. Empecemos con Roboto-Regular. Usaremos font-face. Usaremos nuestras llaves, especificamos familia de fuentes. Estamos asignando la familia de fuentes Roboto. Vamos a usar propiedad de estilo fuente. No estamos usando cursiva para esta cara en particular, por lo que nuestro valor aquí será normal. Escribimos la propiedad de peso de la fuente. Déjame deletrearlo correctamente W-E-I-G-H-T. Ahí vamos. No estamos usando una cara de fuente audaz. En este caso, el peso de la fuente es normal. Por último, vamos a utilizar esa propiedad source para encontrar el recurso de datos. Aquí es donde entran estos tres comentarios. Arriba aquí arriba, te he dado una localizaciones de archivos para nuestras tres caras de fuentes diferentes ya que estamos ahí para encontrar la fuente regular Roboto, voy a copiar y pegar la ubicación del archivo Roboto-Regular. Tenemos que incluir las cotizaciones dentro de la parte que estamos copiando. Utilizamos la URL y luego paréntesis. Vamos a pegar esa ubicación de archivo dentro de la URL. Vamos a añadir el ayudante de formatos con paréntesis ya que se trata de un archivo WOFF, vamos a poner en WOFF como nuestro ayudante y cerrar la declaración como siempre con punto y coma. Ahora que hemos definido nuestro robot o fuente regular, es momento de aplicarlo al contenido de nuestra página. A pesar de que no lo veas en nuestro cuadro HTML aquí arriba, todos nuestros resultados tienen un elemento corporal. Todas las páginas web tienen un elemento de cuerpo. En este caso, Code Pen está ocultando el elemento corporal de nuestra caja HTML para hacer nuestras vidas un poco más sencillas. Pero solo imagina que todo el código HTML y nuestra caja HTML vive dentro de un elemento corporal. Todavía podemos darle estilo a nuestros webpages body element aunque. Aquí en nuestro cuadro CSS, nos desplazamos un poco hacia abajo y verás este comentario que he escrito sobre el elemento del cuerpo. Justo debajo de este comentario, vamos a escribir un nuevo conjunto de reglas. Seleccionaremos el elemento body, llaves, la propiedad font-family. Vamos a usar Roboto como nuestro primer valor y después coma. Entonces nos vamos a dar la alternativa sans- serif por defecto en caso de que el navegador no pueda encontrar a Roboto y entonces eso es todo. Observe en los resultados aquí que la mayoría del texto ahora utilizan la fuente Roboto. Estás viendo el resultado de la herencia en CSS. En este caso, a excepción de los elementos de cabecera que ya tienen la langosta dos fuentes asignadas a ellos. Todos los elementos de texto de la página han heredado su propiedad font-family del elemento body. En términos generales, a menos que las reglas CSS hayan especificado lo contrario, cada elemento HTML será inherente a mayoría de las propiedades de estilo del elemento que las contiene. Esto puede establecer una cadena de propiedades heredadas todo el camino a través de los elementos HTML raíz. Ahora, sé que eso fue mucho para aceptar, pero no necesitas preocuparte demasiado por esos detalles para tener éxito en este curso. Considera que una vista previa de un tema más avanzado. Ahora, aquí tienes un ejercicio que vas a hacer por tu cuenta. Tu tarea es definir las otras dos caras de fuentes Roboto, Roboto-Regular Italic, y Ruboto-negrita. Justo debajo de esta primera font-face en regla, vas a escribir dos font-face más en las reglas, una por cada font-face. Usa los valores de URL que proporciono aquí en el comentario anterior. Si necesitas una pista sobre cómo hacer esto, vuelve atrás y revisa las propiedades de font-weight y font-style desde antes en la lección. También puedes usar mi proyecto terminado tiene una referencia. Nuevamente, publiqué el enlace a ese proyecto terminado en las notas del curso. No verás ningún cambio en los resultados cuando implemente estas nuevas fuentes caras, las aplicaremos más adelante en el curso. Si te interesa, hay mucho más que aprender sobre font-faces en la web. A continuación te presentamos algunos recursos para que empieces. 9. Hacer una columna de texto: Esta lección se centra en la restricción del ancho de TextContent dentro de una columna vertical. Observe cómo nuestros elementos de texto más largos como párrafos y elementos de lista abarcan toda la página web y luego envueltos bajo líneas subsiguientes. Como un truco ordenado, podemos cambiar el tamaño de nuestra sección de resultados aquí solo agarrando el divisor central y arrastrándolo hacia nuestros resultados. A lo mejor así se verá nuestro contenido en un smartphone, y puedes restaurar el tamaño con solo arrastrar ese divisor central hacia fuera hacia el centro. este momento, estas líneas de texto son bastante largas. Para aumentar la legibilidad, la mayoría de los diseñadores recomiendan longitudes de línea en algún lugar entre 40-80 caracteres. Nuestra primera tarea es constreñir el ancho de nuestros elementos de texto para que las líneas no funcionen más de algún ancho especificado, como 60 caracteres. Para crear una columna de TextContent en una página web, primero colocamos ese contenido dentro de un elemento HTML que contiene. Ya he hecho esto por ti. En nuestro cuadro HTML, note este elemento div, que envuelve todo el otro bacalao HTML. Observe que es la etiqueta de apertura aquí ya que la etiqueta de cierre está abajo en la parte inferior, al final de todo nuestro otro contenido. Podemos decir que contiene todos los demás elementos HTML del proyecto. Un div por sí mismo es un elemento HTML bastante genérico. No proporciona ningún estilo por sí solo, pero los desarrolladores a menudo lo usan para enganchar su propio código de estilo a un lugar específico en el HTML, que es exactamente lo que vamos a hacer aquí. Al cambiar a nuestra caja de código CSS, he colocado un juego de comentarios y filas para la columna justo debajo de nuestro conjunto de filas de cuerpo. Como dice mi comentario aquí, ya he proporcionado al elemento div un poco de estilo, que no voy a cubrir en este curso, ya que realmente no tienen que ver con texto de estilo. Ahora, para frenar el ancho de esta columna usaremos la propiedad max width. Como puede ver, existen varios tipos diferentes de valores que podemos asignar a una propiedad de ancho máximo. Afortunadamente, no los vamos a utilizar todos en este curso. Ya que queremos que nuestras líneas no sean más de 60 caracteres, iremos con esta unidad de medida ch. El ch unit representa el ancho del carácter 0 de la fuente asociada al elemento. A modo de nota al margen que tutorial en la pantalla allí te llevará a mucho más detalle sobre cómo usar diferentes unidades en CSS, así que explora ese recurso a tu tiempo libre. Terminemos nuestra declaración estableciendo un valor de 60ch. En nuestro div, agregamos la propiedad max-width y le damos un valor de 60ch; y ahora notamos el ancho como envuelto todo el camino hasta unos 60 caracteres al máximo, ahora está contenido en una bonita columna simple. Quiero cerrar esta lección mencionando dos propiedades CSS más que podrían resultar útiles. Si tus textos contienen una palabra súper larga que es más larga que el ancho máximo para ese elemento, puedes especificar cómo quieres que el navegador trate esa palabra súper larga. Utilice la propiedad break word para decirle al navegador que separe la palabra en pedazos y separe esas piezas sobre múltiples líneas, o que deje que la palabra original desborde el ancho máximo en una sola línea. Cuando ocurre esta ruptura de palabras, puede usar la propiedad guiones para decirle al navegador si debe insertar un símbolo de guión entre esos fragmentos de palabras divididos. No voy a demostrar estas propiedades, pero siéntete libre de sumergirte en este tutorial para aprender más. 10. Alineación horizontal: En esta lección, aprenderemos a alinear horizontalmente nuestro texto. Comenzamos con la propiedad text align. En resumen, la alineación de texto funciona igual que las opciones de alineación en los procesadores de texto, que permite alinear el texto a lo largo del borde izquierdo, a lo largo de un borde derecho, abajo del centro, o justificado a ambos bordes. Apliquemos la propiedad text align a nuestro título y subtítulo de página. Para que nuestro código sea un poco más eficiente, vamos a aplicar la regla de estilo al elemento de cabecera en lugar de a cada uno de los elementos H1 y H2. Podemos ver en el cuadro HTML que nuestro elemento de cabecera envuelve tanto de los elementos H1 como H2. Al colocar la regla en el encabezado, los elementos H1 y H2 heredarán la regla de nuestro elemento de cabecera. Abajo en nuestro cuadro CSS debajo del conjunto de reglas que escribimos para nuestro desarrollo, vamos a agregar otro conjunto de reglas. Seleccionaremos el elemento de cabecera y luego agregaremos llaves así. Vamos a agregar la propiedad de alineación de texto así. Ahora bien, si agregamos el valor correcto a esta propiedad, vamos a ver, mira, nuestro título y subtítulo de página se han alineado hacia el borde derecho de nuestra columna central. Voy a usar centro en mi proyecto. Por lo que vemos que ahora el título y el subtítulo de la página están alineados en el centro de nuestra columna. Bastante simple, ¿verdad? Bueno, se ve así. Una de las adversidades aquí es que el alineamiento de texto solo funciona en elementos de nivel de bloque y celdas de tabla. Un elemento de nivel de bloque aparece automáticamente en una nueva línea. Con un elemento en línea, sin embargo, puede colocar varios elementos en línea uno al lado otro y todos aparecerán en la misma línea. Podemos ver ejemplos de ambos tipos de elementos aquí en nuestro proyecto. Mirando este primer párrafo de texto. Recuerda estas etiquetas fuertes que hacen que su comentario sea audaz, usamos las etiquetas fuertes aquí en nuestro HTML. Estos son elementos en línea. Observe cómo no se rompen, no causan ningún salto de línea en los resultados, eso es lo que los hace en línea. Por el contrario, echemos un vistazo a nuestros artículos de la lista. Observe cómo cada elemento de la lista comienza automáticamente en una nueva línea, estos son elementos de bloque. El elemento clave a recordar es que la propiedad text align solo funciona cuando la usas en elementos de bloque. El objetivo de esta regla es que todos los textos contenidos en un solo bloque, como un párrafo, tengan la misma alineación. Esta técnica funciona para centrar el contenido del texto dentro de un elemento de bloque. Pero ¿y si queremos centrar el elemento de bloque en sí? Tomemos nuestra columna, por ejemplo, ¿no se vería mejor si toda esta columna de texto estuviera centrada en la página? La forma más fácil de centrar un elemento de bloque que es más delgado que su contenedor, es establecer su propiedad de margen en auto. Elementos márgenes ayudaron a determinar la cantidad y tipo de espacio negativo alrededor del elemento. Volvamos a la regla establecida para el div, que forma aquí nuestra columna. Vamos a agregar una nueva declaración con una propiedad de margen, así que hacemos margen y luego vamos a sumar el valor automático, y ahí vamos. Mira, la columna ahora está centrada en la página. Sólo recuerda que esta técnica sólo funciona cuando el elemento de bloque es más delgado que el elemento que lo contiene. Si el elemento central es igual con su elemento contenedor, esta técnica no logrará nada. Para aquellos de ustedes interesados en aprender más sobre establecer el espacio negativo alrededor de los elementos, siéntase libre de echar un vistazo a este tutorial. 11. Espaciado para las letras, las líneas y las palabras: Esta lección es todo sobre espaciado, vamos a cubrir cómo establecer con precisión el espaciado entre letras, entre palabras, entre líneas en un elemento de bloque, luego entre elementos de bloque mismos. Afrontemos primero el espaciado de letras. Esto cambiará la cantidad de espacio entre letras individuales, o lo que los diseñadores suelen llamar el kerning. Echemos otro vistazo a nuestro conjunto de reglas H2 en nuestro cuadro CSS. Añada una segunda declaración con una propiedad de espaciado entre letras. Por lo que el espaciado entre letras es espaciado entre letras. Puede utilizar un valor negativo para disminuir la cantidad predeterminada de espacio de letras. Entonces intentemos negativo 0.2 REM, negativo 0.2 REM, y luego un punto y coma y luego notemos las letras de nuestro subtítulo se acaban de acercar un poco. Personalmente, creo que esto es un poco difícil de leer. Entonces démosle un valor positivo de 0.1 REM, me deshago de lo negativo, cambio los dos a uno, y ahora tenemos un poco más de espacio. La propiedad de espaciado de palabras funciona muy como el espaciado entre letras, pero ajusta el espacio entre palabras en lugar de entre letras en el mismo conjunto de reglas H2, vamos a copiar y pegar la declaración de espaciado entre letras. Lo copio, y luego lo pego y lo alineo. Ahora cambiemos hacia adelante esta carta. Ahora tenemos la propiedad de espaciado de palabras. También sólo para que esto sea realmente obvio, pongamos el valor un REM y ahora notemos cómo tenemos una bonita brecha amplia entre nuestras palabras. personal, no me gusta el espacio extra. Puedes quedártelo si quieres. Yo lo voy a quitar. Así que eliminé la declaración de espaciado de palabras en nuestro CSS y ahora tenemos una alineación de palabras un poco más estrecha allí. Para la última de las tres simples basadas en texto y propiedades, podemos ajustar la altura de línea de los elementos de texto con una propiedad line-height. Esta propiedad especificará la altura de cada línea de texto en la página. En nuestro Proyecto de Biblioteca LetterVille, queremos que todos los párrafos y elementos de lista tengan la misma altura de línea y queremos que esa altura sea un poco más alta que el espaciado predeterminado. Por lo que abajo en la parte inferior de nuestro cuadro CSS, vamos a añadir un nuevo conjunto de filas. Seleccionaremos todos los elementos p y luego también queremos seleccionar todos los elementos LI. Haz nuestros tirantes rizados. Vamos a agregar la propiedad line-height, así que eso es line-height. Vamos a darle un valor de 1.5 y lo que esto hace es que establece todas nuestras líneas de nuestros párrafos y líneas de nuestras alturas de línea en una vez y media su tamaño de fuente. Por lo que nota aquí en nuestros resultados y ahora tenemos espacios más altos entre nuestras líneas de texto envueltas. Para la técnica final para espaciar texto en la web cubriremos márgenes. Echa un vistazo a nuestros artículos de la lista. A pesar de que cada nuevo elemento de la lista comienza con una bala al frente, puede ser difícil decir de un vistazo dónde comienza y termina cada elemento de la lista. Creo que la lista sería más fácil de leer si tuviéramos espacio extra entre los artículos. Desafortunadamente, no podemos usar la propiedad line-height aquí porque eso agregaría espacio extra a todas las líneas de texto. Por lo tanto, usaremos la propiedad margin bottom para agregar espacio en blanco extra a la parte inferior de cada elemento de elemento de la lista. Por lo que en la parte inferior de nuestro cuadro CSS agrega un nuevo conjunto de reglas para ajustar elementos LI. Vamos a usar la propiedad margin-bottom y creo que 0.5 RAM hace el trabajo muy bien. Así lo hacen 0.5 puntos REM y ahora nota que tenemos un poco de espacio extra entre los elementos de nuestra lista que hace que sea un poco más fácil de leer. Eso es todo para nuestra lección sobre espaciado texto para la web. En tus propios proyectos, siéntete libre de experimentar con estas propiedades y las diferentes unidades de medida en CSS. Descubre en qué tipo de diseños creativos puedes llegar. 12. Decoración de personajes y palabras: Esta lección abarcará una gama de propiedades CSS que decoran personajes y palabras con Visual Flair. Empecemos con el color. Asumo que ya conoces las diferentes formas de especificar un color. Si no lo haces, te recomiendo leer este tutorial gratuito de Mozilla antes de proceder. Una vez que entiendas los valores de color, el cambio del color de los elementos de texto es bastante simple. Es aburrido que todo el texto de nuestra página sea negro. Podemos hacer que el encabezado destaque con un poco de color. Entonces en nuestro cuadro CSS, en el conjunto de filas h1 y h3 que ya escribimos, agreguemos otra declaración. El inmueble es simplemente de color. Por este valor, vamos a usar un verde de bosque. Proporcioné algunos valores de color arriba en la parte superior del cuadro CSS aquí en este comentario. Entonces solo cortaré y pegaré este valor verde claro y luego volveré a bajar a nuestra propiedad de color y lo pegaré. Ahora todos nuestros encabezados, los encabezados h1 y h3 ahora tienen este color verde bosque y la paleta de colores tiene un poco más de variedad. Si nos desplazamos hacia abajo hacia abajo, notaremos que nuestros hipervínculos tienen el color azul predeterminado que la mayoría de los navegadores asignan a los enlaces. Ya que vamos con la paleta de colores verde y negro, necesitamos cambiar esos enlaces a verde. Abajo en la parte inferior de nuestro cuadro CSS, agrega un nuevo conjunto rural que selecciona un elemento. Esos son elementos de hipervínculo, llaves, y luego la propiedad de color. Ahora, desafortunadamente, el verde que usamos para nuestros encabezados es demasiado tarde para usarlo en texto corporal. No proporciona suficiente contraste de color y no cumpliría con los estándares de accesibilidad, por lo que usaremos un verde más oscuro. Volveré hacia arriba a nuestro comentario sobre los valores de color y luego voy a copiar este valor para el verde oscuro para los enlaces. Entonces volveré a bajar al estilizador de etiquetas y añadiré el valor de color. Ahora noté que nuestros enlaces han cambiado a ese texto verde oscuro. Otra propiedad de color que podemos cambiar es el color de fondo. Observe esta frase resaltada que comienza con 'cómo nosotros', si miramos aquí en nuestro HTML, notamos que la frase está envuelta en una etiqueta de marca. Esta etiqueta proporciona un color de fondo predeterminado detrás del contenido de texto que contiene. No sé tú, pero este amarillo, es un poco brillante y distrayente. A mí me gustaría bajarlo un poco. Abajo en la parte inferior de nuestro cuadro CSS, voy a añadir otro conjunto de filas. Esta vez utilizamos el selector de marcas para Elementos Mark, llaves. Vamos a usar la propiedad de color de fondo, por lo que el color de fondo y luego un espacio. Ahora vamos a volver aquí arriba a nuestros comentarios de color y voy a copiar el color amarillo pálido para nuestras etiquetas de marca. Vuelvo abajo y pego ese valor. Ahora vamos. Ahora mucho más fácil a los ojos y sigue destacando el texto, pero ahora no es tan distraído. Para la propiedad de estilo final de la lección, transformación de texto cambia la carcasa del texto Contenido. Es bastante sencillo. Cambia los textos para que sean tanto mayúsculas como minúsculas, o mayúsculas, que dice la primera letra de cada palabra a mayúscula y todas las demás letras a minúsculas. Vamos a establecer el subtítulo de página en todas las letras minúsculas. Entonces desplácese de nuevo aquí arriba, tenemos nuestro subtítulo y una etiqueta h2. Entonces eso es lo que vamos a cambiar hacia abajo en nuestro cuadro CSS. Vamos a subir, encontrar el conjunto de filas h2. Vamos a añadir una nueva declaración. Esta vez es la propiedad de transformación de texto. Vamos a usar el valor en minúscula. Ahora note que el subtítulo es ahora todo en minúsculas. 13. Shadows de texto: Nuestra última lección del curso es, para mí, la más divertida. Te puedes volver realmente loco con las sombras de texto y crear efectos de estilo que se parecen a Word Art. El toque final de nuestro proyecto Letterville Library es agregar text-shadow al título de nuestra página, para hacer un llamativo y memorable. La propiedad text-shadow toma tres o cuatro componentes por su valor. el primer componente, el offset-x, Se requiereel primer componente, el offset-x, y especifica la distancia para desplazar la sombra a la izquierda o a la derecha con cero colocando la sombra directamente detrás del texto. Un valor negativo desplaza la sombra a la izquierda del texto. También se requiere el segundo componente, el offset-y y y especifica la distancia para desplazar la sombra hacia arriba o hacia abajo con cero colocando la sombra directamente detrás del texto. Un valor negativo desplaza la sombra por encima del texto. El tercer componente, el blur-radius es opcional y especifica qué tan amplia y ligera es la sombra. Si no se especifica, por defecto es cero. el cuarto componente, el color, requiereel cuarto componente, el color,y establece el color de la sombra. Pongámoslo en práctica. En nuestro cuadro CSS, regrese al conjunto de filas H1. Agregaremos una nueva declaración con una propiedad de sombra de texto. Entonces eso es text-shadow para la propiedad. Usaremos un offset-x de 4px negativo, pie por cuatro píxeles negativos, para tirar de la sombra a la izquierda de su texto. Para el offset-y, utilizaremos cuatro píxeles para desplazar la sombra por debajo de su texto. Nos saltaremos el blur-radio y por el color, vamos a agarrar un tono más claro de ese verde bosque desde la parte superior de nuestro comentario de color. Aquí vemos verde claro para la sombra de texto. Voy a agarrar eso, copiarlo, volver abajo, y luego usar eso para terminar nuestra propiedad de texto. Ahí estamos, se puede ver una sombra más clara del texto original justo a la izquierda y debajo del texto. Algo genial de la sombra de texto es que puedes capas múltiples sombras una encima de la otra para un efecto visual más complejo. Cuando especifique varios valores para una propiedad de sombra de texto, el navegador aplicará las sombras de frente a atrás con la primera sombra en la parte superior. Añadamos otra sombra a nuestro elemento H1. Frente al valor de sombra original agregue una coma, usaremos la coma para separar los dos valores. Agrega un offset-x de dos píxeles negativos para tirar ligeramente de la sombra a la izquierda de sus textos. Vamos a añadir un valor offset-y de dos píxeles para tirar de la sombra ligeramente por debajo de su texto. Volveremos a omitir el blur-radius, y le daremos el valor de color blanco. Ahora podemos ver la segunda sombra blanca, justo encima de la primera sombra verde claro, pero debajo del texto, creando un efecto de contorno. Como mencioné antes, hay muchos más efectos creativos visuales que puedes lograr con sombras de texto para los interesados, echa un vistazo a esta herramienta gratuita para explorar demos y experimentar con diferentes valores de sombras de texto. 14. Conclusión: Enhorabuena por llegar al final del curso, lo hiciste. En este curso cubrimos una tonelada de técnicas para diseñar texto en la web. Todo, desde cambiar el tamaño de la fuente al color, implementar una fuente de Google, definir una cara de fuente personalizada, sombras tecnológicas y mucho más. Si tiene alguna pregunta sobre algo que cubrimos aquí en el curso, por favor considere publicar esas preguntas aquí en el curso. Les responderé lo mejor que pueda. Además, te animo mucho a que publiques proyectos aquí en el curso, ya sea que sigas mi ejemplo de la biblioteca de Letterville o hicieras lo tuyo. Otros alumnos y yo estamos interesados en ver su trabajo. Este es tu momento de brillar. Además, si has luchado con algo en este curso, considera publicar tu trabajo en curso como tus proyectos y pide retroalimentación. Yo lo revisaré. Te daré tus punteros. Siempre puedes quitar tu trabajo en curso, y publicar tu proyecto terminado más adelante. ¿ A dónde vamos desde aquí? Tengo cuatro sugerencias de qué hacer cuando termines todo. En primer lugar, si disfrutaste de este curso, por favor considera dejar una opinión positiva aquí en este curso, otros estudiantes querrán saber que disfrutaste de este curso y te pareció útil. Dos, considera seguirme aquí en Skillshare. Debería haber un botón para eso abajo del video. Planeo impartir más cursos, y HTML y CSS en un futuro próximo. Me gustaría mantenerte publicado cuando publique ese contenido. Tercero, visitar mi sitio web. Publico un resumen semanal de tutoriales y demos para HTML, CSS, y Web Graphics. Cuarto, comparto una tonelada de recursos gratuitos para aprender desarrollo web en Twitter y LinkedIn. Entonces conéctate conmigo ahí. Me encanta enseñar este curso, y espero que lo hayan disfrutado tanto como yo. Muchas gracias por acompañarme aquí, y espero verlos en mi próximo curso.