20 trucos de CSS que probablemente no has utilizado

1. Introducción: Hola, me llamo Aga y soy diseñadora de codificación. A mí me gusta el color rosa y los dinosaurios pero lo más importante es que preparé clases especiales de CSS, para ti. 20 trucos CSS que probablemente no hayas usado antes. ¿ Alguna vez has oído hablar de la propiedad Line Clamp o del Recuento de columnas? ¿ Alguna vez has aplicado Gradiente Cónico en CSS? Bueno, si no, este va a ser un viaje muy interesante porque te voy a mostrar 20 trucos CSS, que no son muy populares para ser honesto pero espero que encuentres creativos y que potencie tu trabajo en diseños de laboratorio. Las clases están destinadas a todos los que alguna vez haya escrito una línea de código CSS y esté familiarizado con las clases CSS. Te voy a mostrar 19 propiedades CSS y una etiqueta HTML. Con todos ellos, podrás crear diseños aún más creativos y efectos aún más geniales. Seguro que potenciarán tu flujo de trabajo diario mientras codifican tus diseños. No puedo esperar a verte en la lista de estudiantes. Adiós. 2. Preparativos: lo que necesitas: De lo que necesitarás para las clases. En primer lugar, tu navegador favorito. A mí me gusta usar Chrome y Firefox. Segundo, editor de códigos. En clases, uso editor Atom. Puedes descargarlo fácilmente desde atom.io y el tercer paquete de la sección de proyectos que creé, especialmente para ti. Allí encontrarás el esqueleto de la página web en la que vamos a citar algunos ejemplos y algunos trucos de CSS. El paquete incluye índice resultado de archivo HTML PNG, que es el diseño final al que estamos apuntando. Posteriormente puedes comparar cómo se ve tu sitio web si es similar a éste y tenemos activos img, todos los activos que utilicé en el layout, todos los activos que utilicé en el sitio web, y por supuesto CSS. Estilos en los que vamos a añadir algunas líneas y crear CSS. Si lo abro en atom, puedo ver código HTML y styles.css donde voy a poner todos los elementos nuevos a lo largo del curso. Aquí, puedes ver que también dejé algunos comentarios por lo que inmediatamente sabrás dónde poner el nuevo CSS. 3. Truco #1: fondos múltiples: Truco número 1, fondos múltiples. Si alguna vez te has preguntado si puedes usar varias imágenes para tu fondo, la respuesta es que sí, puedes hacerlo. Podemos utilizar la función de imagen de fondo para agregar más de una imágenes. Simplemente usamos la función URL, y separamos todas las demás imágenes por coma. Podemos apilar fondos, pero luego para información importante es, que el primer fondo que proporcione está en la capa superior, y el último fondo se muestra en la parte posterior. Sólo el fondo menos puede incluir color de fondo. Por supuesto, otros tienen propiedades para el fondo como repetición de fondo, o la posición de fondo también se puede aplicar. Empecemos el ejercicio. Ahora estamos todos configurados para sumar los fondos. Abramos el índice HTML desde nuestro paquete, este es el sitio web que tenemos, y como se mencionó, vamos a agregar dos imágenes a nuestro fondo. Si miro bajo página web que ya está codificado, se verá así. Tenemos dos fondos, y uno está en la esquina superior izquierda, el otro en la parte inferior derecha. También vamos a agregar adjunto de fondo fijo, que se puede ver que estos dos fondos están fijos en un solo lugar. Tenemos este efecto de paralaje. Está bien. Volvamos a nuestro código, estamos en el styles.css, y si abrimos nuestras herramientas de desarrollo, veremos que esta es la sección de encabezado, este es el selector que tenemos. Busco un encabezado, éste, y aquí, dejé un comentario que dice que aquí estamos agregando múltiples fondos. Tenemos color de fondo, que podemos agregar imagen de fondo, función URL, y estas dos imágenes están en la carpeta de imágenes. Vamos a abrir la carpeta img y deberíamos tener hand.jpeg, y colors.jpg. Estos dos archivos, estoy agregando el primero, no importa cuál será el primero porque no se están solapando entre sí. Estoy escribiendo img/hand.jpeg, la otra función URL otra vez en la carpeta img/colors.jpg. Está bien. Estoy ahorrando y vamos a refrescar nuestra página web, como pueden ver, hay un cambio. Podemos ver fondo, la mano, pero aquí tenemos dos imágenes aplicadas. Lo primero que necesitamos cambiar es definitivamente el tamaño de fondo, la mano no se estirará hasta el ancho completo. Podemos hacer, digamos por 430 píxeles, y los otros 470. Desafortunadamente, el fondo se repite por defecto, necesitamos restablecer esto, background-repeat: no repite; gracias a esto, tendremos una sola imagen, y las imágenes están atascadas, todo lo que puedes ver están atascados. El primero en el frente es hand.jpeg porque es el primero en el listado en la función URL, y el segundo es colors.jpg y los colores están debajo. Definamos la posición para ellos. Podemos definir posición de fondo, definiendo para la mano, será izquierda y superior, y encendido para los colores, será la derecha. Estas son las líneas que necesitamos agregar para nuestro código, y atrás también se aplica, background-attachment: fijo; podemos ver esto, efecto de paralaje. Si comenté, se comportará de una manera diferente. Lo que hago, simplemente copio estas líneas y las pego abajo. Por favor recuerda que puedes usar todas las demás sub propiedades para fondos como el tamaño de fondo para ajustarse a la posición y simplemente hacer lo mismo solo separar los valores para el fondo dado usando coma y simplemente guardarlo. Podemos mezclar fondos, puedes mezclar imágenes, y también puedes agregar color de fondo. A ver, tengo estos dos fondos de luz. 4. Truco #2: unidades de ancho y alto (vw y vh) de la ventana gráfica: Truco número dos, ancho de ventana y altura de ventana. El viewport es el área donde el navegador representa el sitio. Esta es la pantalla, la altura de la pantalla menos el espacio que se reserva para el panel del navegador. En ocasiones queremos establecer la altura del elemento o el ancho en función del tamaño de la ventana. Podemos usar unidades de ancho de ventana y altura de ventana, y esto es algo que queremos usar también en nuestro diseño. Contamos con nuestra página web y queremos definir el encabezado para 80 por ciento de la altura de la ventanilla. En lugar de configurar 800 pixeles, podemos escribir 80 altura de ventana. Si lo defino como 50, se puede ver que esta es la mitad de la altura de la pantalla. Si cambio de visualización a pantalla completa, verás que esto es más pequeño, por lo que se vuelve a calcular en función de la altura de la ventana, bystand una altura de ventana. Entonces lo estoy cambiando a 80, y quiero aplicar eso en mi código también. Escribiendo 80 ventana de ahorro de altura, y así es como se ve. Por supuesto, también puedes jugar con el ancho de la ventana y la altura de la ventana. Preferiría no aplicarlo al texto, no es método muy recomendable, pero puedes jugar fácilmente con él en las imágenes o cajas, contenedores. Por ejemplo, podemos agregar aquí altura, 100, altura de ventana, y verás que encaja perfectamente 100 por ciento de la altura de la ventana del navegador. Si lo cambio a más pequeño, verás que en realidad está cambiando su altura. 5. Truco #3: abreviaturas para fuentes: Truco número tres, abreviatura de fuente. En lugar de enumerar todas las propiedades de SAP para la fuente como font-style, font-weight , font-size, line-height, o font-family, podemos escribir todo en una línea usando la abreviatura de fuente. ¿ Cómo hacerlo? A ver. Entonces volvamos a tu sitio web y tenemos el rubro h1 y nos gustaría h2 en realidad, y nos gustaría aplicar a esta taquigrafía de fuente única. Aquí podemos ver que tenemos font-family. Tenemos algunos estilos como font-weight. Tenemos altura de línea. Entonces usemos la propiedad taquigrafía. Entonces vamos a encontrar el h2. Era divisor de clases. Por lo que tenemos aquí nuestros estilos definidos para el rubro. Entonces estoy escribiendo taquigrafía de fuente y pegando aquí mi hoja de trucos. Recordaré qué propiedad SAP va en qué orden? En primer lugar definimos font-style, que es variante de fuente normal, que también es normal. Font-weight, tenemos 900, es de aquí, así que puedo quitar esto. Tamaño de fuente, que es de 100 píxeles, eliminándolo también. Altura de línea, que es 0%. Entonces esto se hace, y luego font-family, así que estoy copiando Darker Grotesque y sans serif. Eliminándolo también. Si no me faltaba nada, necesitamos quitar line-height. Guárdalo. Todavía puedo tener mi comentario. Actualicemos el sitio web. Tenemos nuestra abreviatura de fuentes funcionando correctamente. Si lo comentara, vería que estas propiedades ya no se aplican. Entonces por supuesto, puedes jugar con él. Puedes cambiarlo y hacer que tu código sea más efectivo y más corto, gracias a esta propiedad de taquigrafía. 6. Truco #4: Text stroke: Podemos lograr un efecto de contorno para la fuente acariciando texto y no llenando ese interior de la misma. Desafortunadamente, esta función no es totalmente compatible con navegadores más antiguos, sin embargo, no significa que no podamos experimentar con ella. Para esto, necesitamos aplicar dos propiedades. El primero, -webkit-text-fill -color y tener este prefijo webkit es crucial. El segundo, -webkit-texts-stroke. Si miramos en la página que ya está codificada, verás que ahí tenemos el contorno negro del encabezamiento. Agrandar esto al efecto CD. Si me sumerjo en el código, verás que para el encabezado, tenemos aplicado el color de relleno de texto. El cool es que también podemos hacerlo transparente para crear un efecto realmente cool. También podemos cambiar el color para que sea verde, hazlo lo lo que quieras. Por supuesto, tenemos el contorno que se define por trazo de texto, y podemos definir el ancho del trazo en píxeles. Podemos a las cinco, podemos a una, lo que tú quieras. También somos capaces de cambiar su color. Puedes hacer lo que quieras. Apliquemos esto a las características en nuestro código. Tenemos -webkit-text-fill-color, que en nuestro caso es blanco. Tenemos -webkit-texts-stroke. Aquí agregamos dos píxeles para el contorno y el color. Estoy refrescando mi página web que puedo ver este hermoso efecto del contorno. Si desea crear una bolsa completa para los navegadores que no están soportando esto a las propiedades CSS, puede usar sombra de texto. Simplemente comentémoslo. Estoy pegando propiedad de sombra de texto. Pero primero necesitamos aplicar fuente de color, color blanco. Verás que usando sombra de texto, podemos crear algo así como un efecto de contorno, que logramos usando trazo de texto y color de relleno. Solo quería mostrarte que tienes esta opción para aplicar un respaldo usando t shadow. Pero te recomiendo encarecidamente que juegues con color de relleno y trazo de texto. 7. Truco #5: sombra con gotero: Truco Número 5, sombra de gota. Sombra de sombra es la función CSS que aplica un efecto de sombra a la imagen. ¿ Cuál es la diferencia entre un drop shadow y box-shadow? A ver. Si aplicamos una sombra de caja verás inmediatamente la diferencia. Sombra de caja aplica la sombra detrás del elemento, detrás de la caja del elemento, por lo que tienes el rectangular. Para drop shadow, se aplica al elemento en sí. Si tengo la imagen que tiene algo de transparencia, así como esta imagen de estas hojas, verás que la sombra se crea para cada parte de la imagen. Por eso es bueno saber que tenemos propiedad drop shadow, misma propiedad también se aplica para la mano. Si lo cubro, verás que aparecen sombras. Si tengo box-shadow, la sombra se aplica a todo el rectangular. Añádalo a nuestro abrigo. Para drop shadow tenemos 1,2,3, tres coordenadas, por lo que x, y, en realidad no son coordinadas, pero el desenfoque y el primer valor es el color de la sombra que tenemos. Tenemos sombra de gota, agreguemos esto a plantar. Tenemos sombra de gota filtrada, 10 píxeles para eje x, para un eje y, tenemos 40 píxeles, 30 píxeles para el desenfoque y para el color tenemos negro pero con transparencia de 5 por ciento. Estoy refrescando mi página web, y puedo ver para esta planta tengo drop shadow aplicada. Por supuesto que podemos manipular, podemos cambiar estos valores a 45, por supuesto, agregar esto a nuestra mano, ahorrando, refrescando el sitio web y puedo ver que para mi mano, la sombra también se aplica. 8. Truco #6: filtro de desenfoque: Truco número seis, Filtro Desenfoque. La propiedad Filter y su valor de desenfoque aplican un efecto de desenfoque a la imagen. Cuanto mayor valor tengamos, mayor desenfoque crearemos. El píxel que está dentro del paréntesis es el radio del desenfoque. Ya no necesitamos usar Photoshop para tener efectos borrosos en nuestra imagen en un sitio web. Echemos un vistazo al código. Este es el sitio web en su versión final y se puede ver que tenemos estas hojas borrosas aplicadas aquí. Añadamos este efecto para esta imagen y esta, este es fondo de planta clase y fondo de planta clase. Voy a cambiar a decodificar donde en nuestro CSS así tengo fondo de planta y en aplicar filtro desenfoque en, vamos a agregar cinco píxeles. Nuestro radio tendrá cinco píxeles. Estoy refrescando la página y veo que mis hojas están borrosas. Simplemente, fácil, eficaz. También puedes consultar la parte media de la página donde tenemos hoja también. A esta imagen tenemos clase llamada fondo planta aplicada. Es por ello que el filtro de desenfoque también funciona. 9. Truco #7: unidad de caracter (ch): Truco número 7, unidad de carácter. Podemos aplicar unidad de carácter. Representa el ancho del carácter '0' en la fuente actual, de particular uso en combinación con fuentes monospacadas. Esto es similar en espíritu a x-height. Sólo, ch se basa en el ancho del carácter 0 en lugar de la altura de ese carácter X. En lugar de definir el ancho de nuestros párrafos en píxeles, podemos aplicar unidades de carácter. Si consulta el sitio web que ya está codificado, puedes ver que el texto tiene un ancho limitado. Comparemos con nuestra etapa actual. Permanezcamos en contacto. Este es el encabezamiento que quisiéramos acortar en cuanto al ancho y para este caso, podemos aplicar el ancho máximo que se establece en unidad de caracteres. Tenemos encabezado de contacto H2 y podemos aplicar max-width, vamos a aplicar ocho unidades de caracteres y tendremos nuestro texto limitado. Simplemente copio esta propiedad, vuelvo al código busca el encabezado de conducta y agregando unidad de carácter. Se puede ver aquí en comentario que agregué max-width y unidad de carácter. Puedo escribirlo así. Por supuesto que también podemos jugar con ella para párrafos. Por ejemplo, aquí podemos escribir max-width, digamos 50 caracteres y nuestro párrafo se acortará. En cuanto al ancho. 10. Truco #8: primera letra: Truco número 8, primera letra. primera letra es un pseudo-elemento que selecciona la primera letra en la primera línea de un elemento a nivel de bloque. Por ejemplo, párrafo. Inspirados en los elementos impresos, podemos transferir fácilmente esas ideas a la web también. Aquí, podemos ver el efecto al que estamos apuntando. Esta es la primera letra del párrafo, letra F, y lo aplico aquí, pseudo-elemento con la primera letra. Veamos cómo se ve el CSS. Aplicé pseudo-elemento, primera letra. Existen algunas propiedades de fuente como familia de tamaño de fuente, transformación de texto. Pero también agregué flota-izquierda y algunos márgenes para tener esta letra perfectamente ajustada al texto flotante. Apliquemos esto en nuestro código. Este es mi estado actual de la página web, y espero con interés el párrafo. Es p clase intro, busco clase de intro. Primera letra. Por lo que ya creé un selector para ti, y queremos que flote a la izquierda. Queríamos tener esta carta en mayúsculas. Queríamos tener font-family, Karla, font-size 100 pixels. Posteriormente podemos aplicarle, nuestra taquigrafía para la propiedad de fuente, línea y algunos márgenes. Digamos que por ahora, lo vamos a retocar directamente en las herramientas de adaptación, pero vamos a agregar para empezar 10 píxeles. Estoy refrescando mi página. Veo que funciona ese pseudo-elemento para la clase de intro. Lo siento, yo hice el error. Debe ser la altura de línea por supuesto. Muy bien, refrescante. En la parte inferior tengo este pseudo-elemento, elemento de primera letra enumerado. Desde el lado izquierdo, me gustaría tener cero píxeles, y tal vez desde el lado derecho, 20. Vamos a compararlo con el ejemplo anterior. Creo que también podemos sumar un margen desde arriba. Entonces como 15 digamos tenerlo bien equipado con el texto, que está flotando el párrafo. Estoy afrontando margen, pegando ahorro. También puedo, en lugar de escribir estas tres líneas, puedo escribir fuente normal. Esta es la variante de estilo. A continuación, ¿qué fue lo siguiente? Podemos echar un vistazo al divisor. Era estilo, variante, peso, tamaño, line-height, font-family. Está bien, espera, así que tenemos el tamaño normal, la altura de línea y la familia de fuentes. Vamos a quitarlo. Refresca, todo se ve bien. Es así como podemos aplicar pseudo-elemento de primera letra al párrafo. También puedes agregarla. Por ejemplo, tenemos una lista aquí. Copiemos los estilos que tenemos y creemos pseudo-elemento. Tenemos lista numerada li y pseudo-elemento, primera letra. Tienes que admitir que es un poco loco. Pero teniendo en cuenta que es posible, podemos crear efectos realmente interesantes más adelante. Te recomiendo totalmente que juegues con el pseudo-elemento de primera letra, y por supuesto, puedes hacer la letra más grande, para que el efecto sea aún más impactante. 11. Truco #9: la propiedad "Line clamp": [ MÚSICA] Truco número 9, pinza de línea. El webkit line clamp propiedad nos permite limitar el contenido de un contenedor de bloque, al número específico de las líneas que definimos. Es importante saber que sólo funciona con la combinación con la propiedad display que se establece en webkit box, o webkit inline box. También tenemos que aplicar la propiedad de orientes de caja webkit la cual se establece en vertical. También es esencial agregar desbordamiento, que es hepta oculta, porque, gracias a ello el contenido, se recortaría. No se mostrará después de un número específico de las líneas que aplicamos. abrazaderas de línea están en una parte del módulo de desbordamiento CSS nivel tres, y actualmente es el borrador de los editores. Podemos aplicar pinza de línea, pero solo con un prefijo webkit, que sorprendentemente funciona para todos los demás navegadores principales, no solo en Chrome o Safari. Nos gustaría aplicar pinza de línea a párrafo con una clase acortada. Lo que tenemos que hacer, necesitamos fijar estos cuatro elementos. El primero de los cuales estaba mencionando es display y necesitamos configurarlo en caja webkit. El siguiente es agregar pinza de línea webkit. Esta abrazadera de línea, limitémoslo a tres líneas. Entonces necesitamos aplicar webkit, box orient y set a vertical. Como se puede ver que el párrafo ya está acortado a tres líneas, pero el resto del texto todavía se muestra. Para limitar visualmente su altura, necesitamos aplicar desbordamiento, configurarlo en oculto. Gracias a lo que logramos tres líneas de texto, aunque nuestro párrafo es súper largo y el texto sigue ahí, pero visualmente, lo ha truncado a solo tres líneas y tenemos una elipsis al final. Por lo que le da al usuario información de que en realidad hay un más, más contenido oculto dentro de este párrafo. Por favor recuerda acerca de estas cuatro cosas que necesitan ser aplicadas. Por supuesto, lo estoy agregando a mi editor, acortado. Sí, aquí es donde dejé un comentario para ti, pegándolo. Apenas rápidamente, haciendo limpieza, ahorro, refrescante, y tengo el párrafo acortado. 12. Truco #10: lista numerada: Truco número 10, lista numerada. Podemos crear fácilmente una lista numerada mediante el uso de ol tack. Lo que obtuvimos como resultado son los números mostrados antes de cada elemento de la lista, es realmente útil y útil. Pero, ¿qué pasa con peinar estos números, alguna vez has probado eso? Para hacerlo, necesitamos jugar con algunas propiedades CSS llamadas contadores CSS. Los contadores CSS te permiten ajustar sus periodos de contenido en función de su ubicación en el documento. Para utilizar un contador CSS, primero debe inicializarse a un valor con la propiedad de reinicio de contador. Entonces cuando terminemos con la inicialización, más tarde ese valor de los contadores se puede aumentar o disminuir y esto se hace por incremento de contador. El valor de un contador se puede mostrar utilizando ya sea una función de contador o contadores y una propiedad de contenido. Veamos el lado práctico de los contadores CSS. Ahora echemos un vistazo a nuestra lista. Esta es la rebanada ordenada a deuda que ya preparé para ti. Lo que hice es que los números que se muestran ante cada elemento aliado, antes de cada elemento de la lista. Este es el césped estilo lista. Si salgo por ahí, verás los números. Pero los estamos escondiendo con el fin de usar pseudo elementos para usar contadores CSS. Eso es volver a decodificar. Tengo mi lista numerada, aliada. Lo primero que necesito hacer es aplicar la propiedad de incremento de contador. No usamos contador reset porque esta ya es lista numerada y ya tenemos nuestros elementos numerados apropiadamente. Lo único que hacemos aquí es poner contrarincremento a aliado. Este es el nombre dado, por lo que también podemos agregar, por ejemplo, elemento de lista, lo que quieras. Entonces necesitamos crear pseudo-clase. Por lo que tenemos lista numerada aliado antes. Aquí necesitamos agregar contador de contenido y abordar el contador que ya creamos. El valor que ya creamos qué elemento de lista. Esto funciona así. Aquí por supuesto, podemos agregar estilos a nuestros números. Pero primero, veamos si funciona. Entonces estoy guardando esto, refrescando la página y puedo ver los números. Puedo ver que los números están apareciendo y estos números son correctos. Entonces tenemos seis elementos. Quién podría seis personajes, tenemos 1,2,3,4,5,6. Entonces a, así que juguemos un poquito con él. Podemos, por ejemplo, añadir un radio de frontera 50 por ciento. Por ahora, podemos sumar el fondo. Digamos azul por ahora, solo para jugar con él. Agregar font-size 20 pixels. Estoy ahorrando, refrescante. Ya veo que vienen los estilos. Pero vamos a aplicar los estilos que son visualmente atrayentes. Entonces esta es mi hoja de trucos. Ya tengo los números aquí, por lo que puedo copiar el valor para el fondo. Puedo ver que el tamaño de fuente es de 30 píxeles y el ancho y la altura del, del círculo es de 45 píxeles. Este es el diámetro. También hay algún posicionamiento que nos ayuda a mantener el número bien posicionado de acuerdo a la línea del texto. Entonces, sencillamente, hagámoslo. Tengo antes aquí, tengo mi fondo, tengo altura, 45 pixels ancho 45 pixels, posición absoluta, izquierda. Añadamos menos 40 píxeles, altura de línea 45, centro de alineación de texto, tamaño de fuente a 20. Ya tenemos tamaño de fuente, por lo que podemos agregar 30 y cambiar la altura de línea a 40 se ve mejor y la familia de fuentes debe ser Karla. En realidad tamaño de fuente 25 y altura de línea 45. Se ve muy bien. Se ve como algo que queríamos lograr. Tomando todos los estilos que están justo aquí, y lo estoy pegando a mi pseudo elemento, refrescar. Puedo ver que el número de estos estilos, puedes usar contadores CSS para diferentes elementos en sección del sitio web. Por lo que más adelante, les daré un ejercicio para tratar de aplicar números a, por ejemplo, encabezamientos o párrafos, elementos distintos, a la lista numerada, que ya es el elemento numerado. Por lo que es un poco más fácil aplicarle contadores CSS para los pseudo elementos. 13. Truco #11: truncar texto: Truco número 11, texto truncado. Ya mencioné truncar texto con pinza de línea. También podemos usar un método diferente. Para truncar texto, necesitamos tres propiedades CSS, espacio en blanco, desbordamiento y desbordamiento de texto. espacio en blanco necesita establecerse en no-wrap, desbordamiento a oculto y desbordamiento de texto a puntos suspensivos. desbordamiento de texto solo ocurre cuando la propiedad de desbordamiento del contenedor, tiene el valor oculto, scroll o auto, y el espacio en blanco no-wrap. Es por ello que necesitamos tres de ellos para lograr este efecto. Echemos un vistazo a nuestra página web, y nos gustaría truncar todo este párrafo a una sola línea. Lo que podemos hacer es que podemos aplicar estas tres propiedades que ya mencioné. Está bien, entonces estamos buscando el párrafo, está aquí. En realidad puedo agregarle una clase. Este es el párrafo bajo la lista numerada. Busco la lista numerada. Aquí tenemos el párrafo, lo voy a titulo truncar. Estoy agregando estas tres propiedades. Para que funcione, es desbordamiento: oculto: desbordamiento de texto: elipsis; y el último es, blanco-espacio: nowrap; Lo estoy guardando. Refrescando mi sitio web, y lo que puedo ver, es que todo mi párrafo se acorta a una sola línea, y esta línea se termina con puntos suspensivos. Si mando fuera, una de las propiedades, verás que no funciona como esperamos. Sin elipsis de desbordamiento de texto no tenemos puntos suspensivos al final. Sin espacio en blanco: nowrap; Desafortunadamente, el texto no está truncado. El desbordamiento funciona, pero ¿y si agregamos espacio en blanco: nowrap; y text-overflow: elipsis? Bueno, en realidad, todo el párrafo está aquí en algún lugar. Pero porque no tenemos desbordamiento: oculto; el resto del texto que no está truncado, todavía se muestra. Gracias al desbordamiento: oculto; sólo tenemos una línea y se termina con puntos suspensivos. Gracias a text-overflow: elipsis. Podemos jugar con él y ajustarlo a tus necesidades. 14. Truco #12: texto con gradientes: Truco número 12, texto de gradientes. Imaginemos que quisiéramos aplicar gradiente a este rubro. Permanezcamos en contacto. La pregunta es, ¿podemos realmente aplicar fondos de gradiente para detectos? Sí, podemos. Podemos hacerlo. Gracias a algunas propiedades CSS que tenemos. Echemos un vistazo al código. Esperamos con interés el rubro de contacto. Sí, exactamente éste. El primero que hay que añadir es el fondo. Antecedentes que se recortará a nuestro texto. Me gustaría aplicar gradiente radial y ya tengo mi hoja de trucos. Dos colores, rosa y amarillo me gustaría usar. Tenemos el color de fondo y luego el color de fondo debe enmascararse con respecto a la forma del texto. El resto necesita ser recortado por lo que tenemos que deshacernos de los elementos innecesarios del contenedor donde está el texto. Podemos lograr esto aplicando propiedad webkit, webkit background clip. Este es el que necesitamos tener y aplicamos textos porque queremos recortar el texto. Lo último que necesitamos aplicar, color de relleno y necesitamos establecer esto en un transparente. Tenemos webkit, texto, color de relleno, y aplicar a transparente. Estoy refrescando la página y pasa la magia. Tengo un hermoso gradiente aplicado a mi texto. Si salgo, por instancia, color de relleno, verás de inmediato que el gradiente no funciona. Estas son las propiedades cruciales que necesitamos agregar, y, por supuesto, podemos agregar webkit-texts-stroke, y ese negro de dos píxeles. Este es el efecto que quisiéramos lograr al final. Estoy copiando esta línea, pegando, y aparece texto de gradiente hermoso. Por supuesto, se puede jugar con el fondo aplicando gradiente lineal. Se puede jugar con los colores. Puedes agregar más de ellas. Siéntete libre de hacer lo que quieras con los gradientes. Espero que se diviertan. 15. Truco #13: selección cruzada de textos: Truco número 13; Selección de texto cruzado. Cuando seleccionamos cualquier porción, cualquier parte del texto en el navegador, muestra el color azul. Es el color predeterminado que se genera en cada navegador. Pero hay trucos de CSS que nos ayudan a cambiar esto, a cambiar de color para un navegador diferente. Estamos en el archivo CSS en nuestro ejercicio y vamos a crear pseudo-clase que se llama selección. Para éste, podemos aplicar el color que nos gusta que se resalte nuestro texto. Entonces pensar que aplico un color de fondo simplemente y elijo el amarillo, lo estoy guardando, refrescando mi sitio web, y puedo ver que la selección es amarilla. Si elimino esta pseudo-clase a la clase de selección, verá el azul predeterminado. Entonces volvamos a nuestro color amarillo, y aplicemos diferente color. Por instancia, para Firefox, estaba usando Chrome, pero cambiemos a Firefox y tengamos diferente color para Firefox. Entonces para Firefox, necesitamos agregar pseudo-elemento pseudo-clase, pero con el prefijo del proveedor. Por lo que estoy agregando moz para Mozilla y selección. Apliquemos fondo color, salmón. Estoy abriendo Firefox, que ya estaba preparado para ti y si selecciono un texto, es de color salmón. Para Chrome, es amarillo. Para que puedas jugar con él, y creo que es un bonito, bonito efecto pequeño que tiene la influencia en la experiencia del usuario. Siéntete libre de usar la selección apilada, siéntete libre de cambiarla, siéntete libre de usar diferentes fondos. 16. Truco #14: gradiente cónico: Truco número 14, gradiente cónico. Me quedé súper sorprendido cuando descubrí que podemos usar CSS puro para crear gráficos circulares. Creo que es súper divertido porque para una visualización simple, no necesitamos crear SVG o no necesitamos aplicar complicadas bibliotecas JavaScript. Es solo CSS y es solo una línea de código guardando para hacer sitio web, que estoy vinculando aquí en este momento. Describe que el ingrediente coning es la función CSS que crea una imagen consistente en un gradiente con transiciones de color, girado alrededor de un punto central en lugar de irradiar desde el centro. Es por ello que podemos lograr este gráfico circular como efecto. Echemos un vistazo a nuestra página web. Lo que puedes ver es el gráfico circular, que se crea con una sola línea de CSS. Echemos un vistazo cómo se construye. Tengo tres colores en un gráfico circular. Es el conjunto de propiedades de fondo. Se establece para valorar ingrediente cónico. Tenemos tres colores. Lo que está pasando aquí es que se dividen en porcentajes. El primer color, ese naranja, toma el 25 por ciento de todo el círculo. puede ver que es exactamente un cuarto cuarto trimestre. Entonces tenemos el azul, que toma 25-56 por ciento, que es 31 por ciento. Éste, y el último se lleva el resto. Del 56-100, que es del 34 por ciento. Es así como podemos construir un gradiente cónico. Por supuesto que puedes jugar con diferentes colores. Volvamos a nuestro código cuando busquemos un gráfico circular. Está aquí. Aplicamos rondas de espalda gradiente cónico. Aquí tenemos, por ejemplo, salmón, azul y amarillo. Perdón por no pegar los colores apropiados, pero espero que los consigas del paquete. Salmón, digamos del cero por ciento al 30, de 30-50, y amarillo del 50 por ciento al 100. Lo estoy guardando, refrescando la página. Lo que veo es casi el resultado que quisiéramos lograr. Pero lo que pasa es que también necesitamos aplicar radio fronterizo grueso el por ciento para lograr el círculo. Estoy aplicando el radio fronterizo 50 por ciento y tengo la gráfica. Lo estoy pegando ahorrando, y mi gráfica está lista. Por supuesto, puedes cambiar los colores de la leyenda. Se pueden cambiar los colores para jugar con él, su símbolo, es divertido y creo que también se puede utilizar con fines decorativos. 17. Truco #15: etiqueta Word break: Truco número 15, etiqueta de salto de palabra. A pesar de que titulé el curso 20 trucos CSS, estaré mencionando una etiqueta HTML que es oportunidad de ruptura de trabajo. No es muy popular, pero decidí compartir mi información porque creo que podría ser muy útil en algunas situaciones. Entonces echemos un vistazo. Etiqueta de oportunidad de ruptura de trabajo especifica dónde en un texto estaría bien agregar un salto de línea. Se puede usar en casos en que una palabra es demasiado larga o tememos que el navegador rompa nuestras líneas en el lugar equivocado. En la segunda parte verás que hay un número telefónico y ¿qué hay de dividir este texto en algunas partes? ¿ Y qué hay de romper este texto en lugares particulares? Por ejemplo, por cada cinco números, cada cinco caracteres. ¿ Cómo se comportará este número telefónico largo si cambiamos el ancho del navegador? A ver. El número se queda en una línea y en realidad ha cambiado su posición, ahora dentro, pero aún se comporta tan completa como la línea. ¿ Y si te gustaría romperlo en varios lugares sin añadir ningún espacio extra, carácter extra. Podemos usar la etiqueta de oportunidad de ruptura de trabajo. Entonces veamos nuestro HTML. Este es mi número telefónico, span disrupt en una etiqueta span. Puedo agregar etiqueta de ruptura de trabajo cada cuatro o cinco o seis caracteres. Entonces aquí podemos dar número par, y todo nuestro número telefónico será roto. Estoy ahorrando, refrescante y veo que ahora mi número telefónico está roto. Se inicia en la primera línea y también aparece en la segunda. Una de la parte de este número. Por lo que se puede ver que ésta es la primera, la segunda parte, la tercera, y la última. Por lo que al hacer el navegador de ventanas más pequeño, más estrecho, verás que algunas partes del número cambiarán su posición respecto a la etiqueta de oportunidad de rotura de trabajo. Este es el número telefónico, podemos quitarlo, y podemos escribir aquí, por ejemplo, una palabra muy larga . Después de cada palabra, podemos agregar etiqueta de salto de palabra. Por lo que romperá todo el texto en líneas que quisiéramos lograr. Tan anudados alrededor de ellos camino. Tenemos un texto muy largo, resaltemos esto. No puedo verlo. Entonces esta es la palabra muy larga. Se puede ver que se mantiene muy largo. Entonces no se divide en medio de la palabra y aquí tenemos otra palabra muy larga. A pesar de que podría parecer etiqueta muy nicho, creo que hay algunos casos que podría ayudar. 18. Truco #16: viñetas personalizadas: Truco número 16; Puntos de bala personalizados. ¿ Qué pasa con la creación de una lista que está desordenada, usando la etiqueta UL, pero teniendo una viñeta personalizada? También podemos aplicar una imagen. ¿ Cómo hacerlo? Bueno, echemos un vistazo al código. Si reviso el código, veré que mi lista de códigos de clase tiene elementos de lista, y lo muy importante es restablecer el estilo de lista, ponerlo en ninguno. Queremos tener esos puntos de bala negros por defecto. El siguiente que se aplica aquí es el pseud-elemento. Es la clase de pseudo-elemento antes. Se aplica al LI, elemento de la lista. Para que funcione, necesitamos establecer contenido. Puede estar vacío, pero es muy importante tener la propiedad de contenido. Después tenemos algún posicionamiento conectado con este círculo amarillo y un fondo. Si cambio el color de fondo, verá directamente el cambio que está sucediendo aquí. Por supuesto que podemos tener las plazas, podemos cambiar la altura y el ancho de la misma. Podemos jugar con algún posicionamiento, todo depende de ti. También hay una cosa mágica que podemos agregar, y es agregar el fondo al contenido. También hay una cosa genial que realmente podemos aplicar una imagen, a la pseudo-clase antes. ¿ Y si quisiera agregar una imagen aquí? Imagen ante cada elemento de la lista desordenada. Podemos hacerlo usando la propiedad de contenido y establecemos el valor en URL. En lugar de tener este contenido vacío, desde luego podemos escribir algo aquí. Déjame escribirlo una vez más. Al igual que uno, dos, tres, en realidad podemos proporcionar la función URL. El función que tiene el camino a nuestra imagen, recuerdo que tengo imagen llamada icono banana, y es una etiqueta IMG. Entonces estoy escribiendo url (.. /img/banana-icon.png), y tengo listo mi icono con plátano. Por supuesto que puedo ordenar el fondo, o tal vez pueda cambiarlo por tenerlo en color rosa. También puedo mezclar el fondo. Puedo mezclar algunas dimensiones con el contenido, que en realidad es una imagen aquí. Tu tarea ahora es crear algo similar. Cambié a la página web en la que estamos trabajando actualmente, y si vas un poco más baja verás que hay una lista. Sería genial si pudiéramos aplicarle los estilos. Lo que hay que recordar es que, primero necesitamos restablecer el estilo de lista. Si me dirijo a él, tenemos lista de clases UL. Para este LI ya tenemos listestilo set a ninguno, lo cual es muy importante. Entonces necesitamos aplicar la pseudo-clase antes para el elemento LI, y lo muy importante es el contenido. Incluso si no queremos aplicar una imagen aquí, el contenido es muy importante para que aparezca realmente la pseudo-clase. Te dejo esta tarea. Si tienes algún problema, puedes volver al primer segundo de la lección y ver cómo se crea la pseudo clase. Si cambio al editor de código verás que ya he creado este selector para ti, así que tenemos antes pseudo-clase para elemento LI en contenedor que tiene clase de lista, y puedes escribir aquí todo lo que quieras obtener el punto de bala personalizado. Por favor recuerde acerca de la propiedad de contenido. 19. Truco #17: propiedad Object fit: Truco número 17, objeto-fit. Object-fit, propiedad CSS, define cómo se debe cambiar el tamaño del contenido de img o video para que se ajuste a su contenedor. Contamos con diversas opciones, como cubrir, llenar y contener. Echemos un vistazo a ejemplos prácticos. En este ejercicio, vamos a limitar la altura del contenedor de imágenes. Este es el resultado final que quisiéramos lograr. Si inspeccionamos la imagen, veremos que en realidad tiene 600 píxeles de ancho y 400 píxeles de alto. En nuestro proyecto actual, vemos que nuestra imagen es súper larga en cuanto a altura. Lo que vamos a hacer es que vamos a introducir algunas limitaciones. Tengo la clase object-fit, ya lo creé para ti. Añadamos altura para un 100 pixeles. Desafortunadamente, toda la imagen se está haciendo más pequeña, pero nos gustaría lograr un resultado diferente, el que ya te he mostrado en el diseño anterior. Para ello, también podemos sumar con 100 por ciento, gracias a lo que se estirará nuestra imagen. Pero no me gusta el hecho de que en realidad cambie su proporción. Gracias a object-fit, podemos definir cómo se comportará la imagen en esta área de limitación, el contenedor que ponemos en la etiqueta img. Podemos elegir “contener”, por lo que toda la imagen estará contenida en este contenedor, 600 por 400 píxeles. Podemos agregar cubierta, por lo que se estira al ancho más completo podemos “llenar” así, cada píxel será llenado por la imagen sin importar lo estirada que deba ser. podemos establecer ninguno, por lo que la imagen mantendrá su tamaño natural. Escogamos “cubierta” para ello. Object-fit una vez más, cover y este es el resultado que quisiéramos lograr. Creo que object-fit es una gran propiedad también en términos de diseño responsive, a veces tenemos proporciones realmente extrañas de las imágenes, y también varía dependiendo de la resolución, ya sea móvil o de escritorio. Te recomiendo encarecidamente que juegues con él. Simplemente quiero copiar todos estos inmuebles que escribí. Estoy volviendo a mi código y buscando clase object-fit, que está listo para ti, pegando esas líneas, así que altura con un object-fit. Refrescar el sitio web y mi imagen se ve realmente bonita. 20. Truco #18: propiedad Column count: Truco número 18, recuento de columnas. Propiedad de recuento de columnas rompe el contenido del elemento dado, por instancia, párrafo en número especificado de columnas. Por lo que el navegador distribuirá uniformemente el contenido en exactamente el número que le dimos. Entonces, y si quisiéramos tener dos columnas en lugar de este bloque de texto, podemos hacerlo fácilmente. Tenemos outro clase, y aquí podemos aplicar propiedades de recuento de columnas y establecerlo en dos. Justo así. Fácil y sencillo. Por supuesto que puedes aumentar el número. Podemos volver a la situación anterior donde sólo tenemos una columna. Por lo que es muy fácil manipular el contenido del contenedor usando el recuento de columnas. Volver a mi código buscando outro, pegando recuento de columnas para ahorrar, refrescante y mi cambio está listo. 21. Truco #19: combinador de hermanos adyacentes: Truco número 19, combinador hermano adyacente. El combinador hermano adyacente coincide con el segundo elemento sólo si inmediatamente sigue al primer elemento. Es más, ambos son hijos del mismo elemento padre. ¿ Y si quisiera darle estilo a este párrafo y agregar un margen superior más grande y tener el ancho limitado? Puedo ver que este párrafo son los hijos de col-md-6, y es la siguiente etiqueta, el siguiente selector tras leyenda del gráfico. Podemos usar combinador de hermanos adyacentes. Ya he preparado un selector para ti. Este selector selecciona párrafo que está inmediatamente después de la clase chart-legend. En otras palabras, párrafo sigue inmediatamente a la leyenda de la carta. Si quisiera aplicar aquí margin-top 20 pixels y max-width, digamos, 300 pixels, lo estoy guardando, refrescando mi página, y veo que se aplican estos estilos y estos estilos sólo se aplican a este párrafo. Los otros párrafos, como por ejemplo este, no se ven afectados por nuestro selector. Aunque añado otro párrafo, podemos cambiar su contenido, y este párrafo serán también los hijos del contenedor col-md-6. Veamos qué azulejos lo afectarían. Veamos cómo se renderizará nuestra página web y cómo se verán estos dos párrafos. Estoy refrescando la página. Si lo comparas, verás que sólo los primeros párrafos justo después de chart-legend tendrán los estilos aplicados. Este tendría solo selector p general que creamos antes. Podemos decir que funciona el combinador hermano adyacente. Esto se puede utilizar para diversos propósitos. A veces es más fácil para nosotros usar tales selectores en lugar de crear clases. Creo que vale la pena jugar con él. 22. Truco #20: combinador de hermanos generales: Truco número 20, general hermano combinador. combinador hermano general separa dos selectores y coincide con el segundo elemento sólo si sigue al primer elemento. No obstante, no es necesario que el segundo elemento sea el seguidor inmediato. Ambos elementos deben ser los hijos del mismo elemento padre. Por lo que la misma situación que para el combinador general de hermanos. ¿ Y si quisiéramos aplicar un estilo, por ejemplo, altura de línea para todos los párrafos que siguen a la leyenda del gráfico, pero no necesariamente inmediatamente después de la leyenda del gráfico. Todas las etiquetas p, por lo que todos los párrafos que siguen los gráficos leyenda para éste y éste tengan aplicados los estilos. Añadamos altura de línea, 200 por ciento y si refresco la página, tanto la primera como la segunda tendrán la altura de línea 200 y los demás párrafos tendrían 150. Siéntase libre de usar el combinador general de hermanos para sus necesidades. 23. Reflexiones finales: Por lo que te estoy dejando con una etapa actual de la página web. Si hiciste todos los ejercicios que te estaba explicando, esta es la etapa que debes tener en este punto. Por lo que hay algunas cosas que aún hay que agregar si lo comparamos con la versión final, que tengo en mi computadora, ya verás que aún necesitamos trabajar en esta sección donde lo aplico múltiples fondos y de curso puedes encontrar todas las imágenes en el paquete. También hay algunos estilos en el texto aquí. Entonces deberíamos aplicar aquí las imágenes, deberíamos cambiar el trazo de texto aquí. Por lo que todavía algunos deberes para ti. Si quieres comparar tu página web de los ejercicios. Puede abrir el archivo PNG. Ahí está en el paquete, por lo que verá todos los detalles a fondo. Por supuesto, estás invitado a experimentar con CSS que preparé para ti. Se pueden cambiar los valores. Puedes usar las técnicas creativas que acabo de mostrarte para diversos propósitos. Por supuesto, eres más que bienvenido para mostrar lo que se te ocurrió. Tengo muchas ganas de seguir tu progreso y de ver en qué te inspiran. Por favor, publique sus obras en sección de comunidad. En general, espero que te hayas divertido y te hayas familiarizado más con las propiedades CSS.