Nuevas funciones CSS que están cambiando el diseño web

 

 

 

  • ¡Registro!
  • Patrones de diseño para interfaces de IA, con Vitaly Friedman

  • Índice
    1. Cómo CSS Grid lo cambió todo
      1. Hacer que las cuadrículas respondan
      2. Rejillas de ancho desigual
      3. Cambio de cuadrículas en diferentes puntos de interrupción
      4. Cuadrículas basadas en altura
      5. Colocación de elementos en la cuadrícula
      6. Inspiraciones
    2. Diseñar con formas irregulares
    3. Cambiar el flujo de texto con CSSwriting-mode
    4. El esfuerzo y el ingenio son de gran ayuda
    5. Terminando
      1. Otras lecturas

    Hace algún tiempo, los diseñadores y desarrolladores crearon el mismo tipo de sitios web una y otra vez, hasta el punto de que la gente de nuestra propia industria se burlaba de ellos. Hoy en día, el panorama del diseño ha cambiado por completo. Estamos equipados con herramientas nuevas y poderosas (CSS Grid, propiedades personalizadas de CSS, formas CSS y modo de escritura CSS, por nombrar algunas) que podemos usar para ejercitar nuestra creatividad. En este artículo, Zell Liew explica cómo.

     

    Hubo un tiempo en el que el diseño web se volvía monótono. Los diseñadores y desarrolladores crearon los mismos tipos de sitios web una y otra vez, hasta el punto de que personas de nuestra propia industria se burlaron de nosotros por crear solo dos tipos de sitios web:

    ¿Cuál de los dos posibles sitios web estás diseñando actualmente? pic.twitter.com/ZD0uRGTqqm

    - Jon Gold (@jongold) 2 de febrero de 2016

    ¿Es este el límite de lo que nuestras mentes “creativas” pueden lograr? Este pensamiento envió una punzada de tristeza incontrolable a mi corazón.

    No quiero admitirlo, pero tal vez eso fue lo mejor que pudimos lograr en ese entonces. Quizás no teníamos las herramientas adecuadas para realizar diseños creativos. Las demandas de la web estaban evolucionando rápidamente, pero estábamos atrapados en técnicas antiguas como flotadores y mesas.

     

    Hoy en día, el panorama del diseño ha cambiado por completo. Estamos equipados con herramientas nuevas y poderosas (CSS Grid, propiedades personalizadas de CSS, formas CSS y CSS writing-mode, por nombrar algunas) que podemos usar para ejercitar nuestra creatividad.

    Cómo CSS Grid lo cambió todo

    Las cuadrículas son esenciales para el diseño web; eso ya lo sabías. ¿Pero te has parado a preguntarte cómo diseñaste la grilla que utilizas principalmente?

    La mayoría de nosotros no lo hemos hecho. Utilizamos la cuadrícula de 12 columnas que se ha convertido en un estándar en nuestra industria.

    • Pero ¿por qué utilizamos la misma cuadrícula?
    • ¿Por qué las cuadrículas están formadas por 12 columnas?
    • ¿Por qué nuestras rejillas tienen el mismo tamaño?

    Aquí hay una posible respuesta a por qué usamos la misma cuadrícula: no queremos hacer cálculos .

    En el pasado, con las cuadrículas basadas en flotadores, para crear una cuadrícula de tres columnas, era necesario calcular el ancho de cada columna, el tamaño de cada canal y cómo colocar cada elemento de la cuadrícula. Luego, necesitabas crear clases en HTML para darles el estilo adecuado. Fue bastante complicado .

    Para facilitar las cosas, adoptamos marcos de cuadrícula. Al principio, frameworks como 960gs y 1440px nos permitían elegir entre cuadrículas de 8, 9, 12 e incluso 16 columnas. Más tarde, Bootstrap ganó la guerra de los frameworks. Debido a que Bootstrap permitía solo 12 columnas, y cambiar eso era una molestia, finalmente nos decidimos por 12 columnas como estándar.

    Pero no deberíamos culpar a Bootstrap. Era el mejor enfoque en aquel entonces. ¿Quién no querría una buena solución que funcione con el mínimo esfuerzo? Una vez resuelto el problema de la cuadrícula, centramos nuestra atención en otros aspectos del diseño, como la tipografía, el color y la accesibilidad.

    Ahora, con la llegada de CSS Grid, las cuadrículas se han vuelto mucho más simples . Ya no tenemos que temer a las matemáticas de cuadrícula. ¡Se ha vuelto tan simple que yo diría que crear una cuadrícula es más fácil con CSS que con una herramienta de diseño como Sketch!

    ¿Por qué?

    Digamos que desea crear una cuadrícula de 4 columnas, cada columna con un tamaño de 100 píxeles. Con CSS Grid, puede escribir 100pxcuatro veces en la grid-template-columnsdeclaración y se creará una cuadrícula de 4 columnas.

    .grid { display: grid; grid-template-columns: 100px 100px 100px 100px; grid-column-gap: 20px;}

    Puede crear cuatro columnas de cuadrícula especificando un ancho de columna cuatro veces engrid-template-columns

     

    Si quieres una cuadrícula de 12 columnas, sólo tienes que repetir 100px12 veces.

    .grid { display: grid; grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px; grid-column-gap: 20px;}

    Creando 12 columnas con CSS Grid

    Sí, el código no es hermoso, pero no nos preocupa optimizar la calidad del código (todavía); todavía estamos pensando en el diseño. CSS Grid hace que sea muy fácil para cualquier persona, incluso un diseñador sin conocimientos de codificación, crear una cuadrícula en la web.

    Si desea crear columnas de cuadrícula con diferentes anchos, sólo tiene que especificar el ancho deseado en su grid-template-columnsdeclaración y listo.

    .grid { display: grid; grid-template-columns: 100px 162px 262px; grid-column-gap: 20px;}

    Crear columnas de diferentes anchos es muy fácil.

    Hacer que las cuadrículas respondan

    Ninguna discusión sobre CSS Grid está completa sin hablar del aspecto responsivo. Hay varias formas de hacer que CSS Grid responda. Una forma (probablemente la más popular) es utilizar la frunidad. Otra forma es cambiar la cantidad de columnas con consultas de medios.

    fres una longitud flexible que representa una fracción. Cuando utiliza la frunidad, los navegadores dividen el espacio abierto y asignan las áreas a columnas en función de las frmúltiples. Esto significa que para crear cuatro columnas del mismo tamaño, escribirías 1frcuatro veces.

    .grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 20px;}

    Hagamos algunos cálculos para comprender por qué se crean cuatro columnas del mismo tamaño .

    Primero, supongamos que el espacio total disponible para la cuadrícula es 1260px.

    Antes de asignar ancho a cada columna, CSS Grid necesita saber cuánto espacio hay disponible (o sobrante). Aquí, resta grip-gapdeclaraciones de 1260px. Dado cada hueco 20px, nos quedamos con 1200pxel espacio disponible. (1260 - (20 * 3) = 1200).

    A continuación, suma los frmúltiplos. En este caso, tenemos cuatro 1frmúltiplos, por lo que los navegadores dividen 1200pxentre cuatro. Cada columna es así 300px. Por eso obtenemos cuatro columnas iguales.

    Sin embargo, las cuadrículas creadas con la frunidad no siempre son iguales .

    Cuando usas fr, debes tener en cuenta que cada frunidad es una fracción del espacio disponible (o sobrante).

    Si tiene un elemento que es más ancho que cualquiera de las columnas creadas con la frunidad, el cálculo debe realizarse de manera diferente.

    Por ejemplo, la siguiente cuadrícula tiene una columna grande y tres columnas pequeñas (pero iguales), aunque se creó con grid-template-columns: 1fr 1fr 1fr 1fr.

    Vea la demostración de la unidad 1 de Pen CSS Grid `fr` de Zell Liew ( @zellwk ) en CodePen .

    Después de dividir 1200pxen cuatro y asignar 300pxa cada una de las 1frcolumnas, los navegadores se dan cuenta de que el primer elemento de la cuadrícula contiene una imagen que es 1000px. Dado que 1000pxes mayor que 300px, los navegadores optan por asignarlo 1000pxa la primera columna.

      Guia y trucos de Zoom

    Eso significa que necesitamos recalcular el espacio sobrante.

    El nuevo espacio sobrante es 1260px - 1000px - 20px * 3 = 200px; Luego 200pxse divide por tres según la cantidad de fracciones sobrantes. Entonces cada fracción es 66px. Con suerte, eso explica por qué frlas unidades no siempre crean columnas del mismo ancho.

    Si desea que la frunidad cree columnas del mismo ancho cada vez, debe forzarla con minmax(0, 1fr). Para este ejemplo específico, también querrás establecer la max-widthpropiedad de la imagen en 100%.

    Vea la demostración de la unidad 2 de Pen CSS Grid `fr` de Zell Liew ( @zellwk ) en CodePen .

    Nota : Rachel Andrew ha escrito un artículo sorprendente sobre cómo los diferentes valores de CSS (contenido mínimo, contenido máximo, fr, etc.) afectan los tamaños del contenido. ¡Vale la pena leerlo!

    Rejillas de ancho desigual

    Para crear cuadrículas con anchos desiguales, simplemente varía el múltiplo fr. A continuación se muestra una cuadrícula que sigue la proporción áurea, donde la segunda columna es 1,618 veces la primera columna y la tercera columna es 1,618 veces la segunda columna.

    .grid { display: grid; grid-template-columns: 1fr 1.618fr 2.618fr; grid-column-gap: 1em;}

    Una cuadrícula de tres columnas creada con la proporción áurea.

    Cambio de cuadrículas en diferentes puntos de interrupción

    Si desea cambiar la cuadrícula en diferentes puntos de interrupción, puede declarar una nueva cuadrícula dentro de una consulta de medios.

    .grid { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 1em;}@media (min-width: 30em) { .grid { grid-template-columns: 1fr 1fr 1fr 1fr; }}

    ¿No es fácil crear cuadrículas con CSS Grid? Los diseñadores y desarrolladores anteriores habrían matado por tal posibilidad.

    Cuadrículas basadas en altura

    Anteriormente era imposible crear cuadrículas basadas en la altura de un sitio web porque no había manera de saber qué tan alto era la ventana gráfica. Ahora, con las unidades de ventana gráfica, CSS Calc y CSS Grid, podemos incluso crear cuadrículas basadas en la altura de la ventana gráfica.

    En la demostración siguiente, creé cuadrados de cuadrícula basados ​​en la altura del navegador.

    Vea el ejemplo de cuadrícula basado en Pen Height de Zell Liew ( @zellwk ) en CodePen .

    Jen Simmons tiene un excelente video que habla sobre el diseño del cuarto borde , con CSS Grid. Te recomiendo mucho que lo veas.

    Colocación de elementos en la cuadrícula

    Colocar elementos de la cuadrícula era una gran molestia en el pasado porque había que calcular la margin-leftpropiedad.

    Ahora, con CSS Grid, puedes colocar elementos de la cuadrícula directamente con CSS sin cálculos adicionales.

    .grid-item { grid-column: 2; /* Put on the second column */}

    Colocar un elemento en la segunda columna.

     

    Incluso puedes decirle a un elemento de la cuadrícula cuántas columnas debe ocupar con la spanpalabra clave.

    .grid-item { /* Put in the second column, span 2 columns */ grid-column: 2 / span 2;}

    Puede indicar a los elementos de la cuadrícula el número de columnas (o incluso filas) que deben ocupar con la spanpalabra clave

    Inspiraciones

    CSS Grid le permite diseñar cosas tan fácilmente que puede crear rápidamente muchas variaciones del mismo sitio web. Un buen ejemplo es la página de inicio personal de Lynn Fisher .

    , donde explora cómo crear diferentes tipos de diseños con CSS Grid y otras herramientas.

    Para obtener más información sobre CSS Grid, consulte los siguientes recursos:

    • Master CSS Grid , Rachel Andrew y Jen Simmons Videotutoriales
    • Layout Land , Jen Simmons Una serie de vídeos sobre diseño
    • Taller de diseño CSS , Rachel Andrew Un curso de diseño CSS
    • Aprenda CSS Grid , Jonathan Suh Un curso gratuito sobre CSS Grid.
    • Criaturas de cuadrícula , Dave Geddes Una forma divertida de aprender CSS Grid

    Diseñar con formas irregulares

    Estamos acostumbrados a crear diseños rectangulares en la web porque el modelo de caja CSS es un rectángulo. Además de los rectángulos, también hemos encontrado formas de crear formas simples, como triángulos y círculos.

    Hoy no es necesario que nos detengamos ahí. Con las formas CSS que clip-pathtenemos a nuestra disposición podemos crear formas irregulares sin mucho esfuerzo.

    Por ejemplo, Aysha Anggraini experimentó con un diseño inspirado en una tira cómica con CSS Grid y clip path.

    Vea el diseño estilo cómic de Pen con CSS Grid de Aysha Anggraini ( @rrenula ) en CodePen .

    Hui Jing explica cómo utilizar formas CSS de manera que permita que el texto fluya a lo largo de la curva de Beyoncé.

    ¡El texto puede fluir alrededor de Beyoncé si así lo deseas!

    Si desea profundizar más, Sara Soueidan tiene un artículo que le ayudará a crear diseños no rectangulares .

    Formas CSS y clip-pathle brindan infinitas posibilidades para crear formas personalizadas únicas para sus diseños. Desafortunadamente, en cuanto a la sintaxis, CSS da forma y clip-pathno es tan intuitivo como CSS Grid. Por suerte, contamos con herramientas como Clippy y Shape Path Editor de Firefox para ayudarnos a crear las formas que queramos.

    Clippy te ayuda a crear formas personalizadas fácilmente con clip-path.

    Cambiar el flujo de texto con CSSwriting-mode

    Estamos acostumbrados a ver las palabras fluir de izquierda a derecha en la web porque la web está hecha predominantemente para personas de habla inglesa (al menos así es como empezó).

    Pero algunos idiomas no fluyen en esa dirección. Por ejemplo, las palabras chinas se pueden leer de arriba hacia abajo y de derecha a izquierda.

    CSS writing-modehace que el texto fluya en la dirección nativa de cada idioma. Hui Jing experimentó con un diseño basado en chino que fluye de arriba hacia abajo y de derecha a izquierda en un sitio web llamado Penang Hokkien . Puedes leer más sobre su experimento en su artículo, " The One About Home ".

     

    Además de los artículos, Hui Jing tiene una excelente charla sobre tipografía y writing-mode" Cuando Oriente se encuentra con Occidente: la tipografía web y cómo puede inspirar diseños modernos ". Te animo mucho a que lo veas.

    Penang Hokkien muestra que el texto chino se puede escribir de arriba a abajo y de derecha a izquierda.

    Incluso si no diseña para idiomas como el chino, eso no significa que no pueda aplicar CSS writing-modeal inglés. En 2016, cuando creé Devfest.asia , mostré un pequeño músculo creativo y opté por rotar el texto con writing-mode.

    Las etiquetas se crearon utilizando el modo de escritura y transformaciones.

    El laboratorio de Jen Simmons también contiene muchos experimentos writing-mode. Recomiendo encarecidamente echarle un vistazo también.

    Una imagen del laboratorio de Jen Simmon que muestra a Jan Tschichold

    El esfuerzo y el ingenio son de gran ayuda

    Aunque las nuevas herramientas CSS son útiles, no necesita ninguna de ellas para crear sitios web únicos. Un poco de ingenio y algo de esfuerzo son de gran ayuda.

    Por ejemplo, en Super Silly Hackathon , Cheeaun gira todo el sitio web -15 grados y te hace parecer tonto al leer el sitio web.

    Cheeaun se asegura de que parezcas tonto si quieres participar en Super Silly Hackathon.

    Darin Senneff creó un avatar de inicio de sesión animado con algo de trigonometría y GSAP. Mira lo lindo que es el simio y cómo se cubre los ojos cuando te enfocas en el campo de contraseña. Al igual que el formulario de inicio de sesión interactivo, también hay una calculadora realmente agradable e interactiva que ayuda a estimar la cantidad de ingresos perdidos al utilizar servicios externos como JustEat.

    , agregué elementos que hacen que el estudiante de JavaScript se sienta como en casa.

    Utilicé la functionsintaxis para crear paquetes de cursos en lugar de escribir sobre paquetes de cursos.

    Terminando

    Un diseño web único no se trata sólo de diseño. Se trata de cómo el diseño se integra con el contenido. Con un poco de esfuerzo e ingenio, todos podemos crear diseños únicos que se dirijan a nuestro público. Las herramientas que tenemos hoy a nuestra disposición facilitan nuestro trabajo.

    La pregunta es, ¿te importa lo suficiente como para hacer un diseño único? Espero que lo hagas.

    Otras lecturas

    • Efecto de brillo borroso CSS
    • Ajuste de desplazamiento CSS alineado con el diseño de página global: un estudio de caso de control deslizante de ancho completo
    • El final de mi viaje Gatsby
    • FabUnit: una forma inteligente de controlar y sincronizar errores tipográficos y espacios

    (ra, il, al, mrn)Explora más en

    • CSS
    • javascript
    • Diseño de respuesta





    Tal vez te puede interesar:

    1. Diseño de un cuadro de texto, íntegro
    2. Diseño y construcción de una aplicación web progresiva sin marco (Parte 3)
    3. Escribir un motor de aventuras de texto multijugador en Node.js: diseño del servidor Game Engine (Parte 2)
    4. Componentes de diseño en React

    Nuevas funciones CSS que están cambiando el diseño web

    Nuevas funciones CSS que están cambiando el diseño web

    ¡Registro! Patrones de diseño para interfaces de IA, con Vitaly Friedman Índice Cómo CSS Grid lo cambi

    programar

    es

    https://pseint.es/static/images/programar-nuevas-funciones-css-que-estan-cambiando-el-diseno-web-954-0.jpg

    2024-04-04

     

    Nuevas funciones CSS que están cambiando el diseño web
    Nuevas funciones CSS que están cambiando el diseño web

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20