Colores en css y cómo usarlos

Colores en css y cómo usarlos

Los colores en CSS juegan un papel vital para hacer que una página web sea útil o no. En CSS, podemos controlar el color de primer plano y de fondo de un elemento con las propiedades de color y de fondo. Cuando aprendí CSS en el pasado, no había una guía directa o una manera de aprender a usar los colores en CSS.

Decidí escribir sobre los colores y cómo usarlos en CSS. En este artículo, explicaré los tipos de colores, palabras clave específicas, y cuándo usar cuáles junto con casos de uso y ejemplos. Aviso: este no es un artículo sobre la teoría del color.

La propiedad del color (colores en CSS)

Según el MDN:

La propiedad color CSS establece el valor de color de primer plano del texto y las decoraciones de texto de un elemento y establece el valor de color actual.

La propiedad establece el valor del color de primer plano de un elemento. Los valores permitidos para ello son: named-color, hex-color, rgb(), hsl, inherit, initial, unset y currentColor. Voy a repasar cada tipo de valor en detalle.

Valor Named Color

.heading {
    color: brown;
    color: green;
    color: black;
}

Comprueba la lista completa de los colores en css si estás interesado. Vale la pena mencionar que algunos nombres de colores no están soportados en todos los navegadores.

En general, no soy un fanático de usar nombres de colores, ya que no es fácil recordar lo que significa cada color. Por ejemplo, a veces veo a gente que usa el blanco o el negro como valor de color. Esto no es un problema. Pero en general, no recomiendo usar colores en css con nombre. El único caso en el que usaría un color con nombre es el siguiente:

*, *:before, *:after {
    outline: solid 1px red;
}

Usé el color rojo para mostrar rápidamente un esquema de todos los elementos de la página. El color rojo es muy popular para ese uso e incluso vi memes y cosas divertidas sobre él.

Valores de color hexadecimales

Un color hexagonal consiste en seis caracteres, #ffffff representa el color blanco, por ejemplo. Hay un consejo que quiero asegurarme que sepas, que es la notación abreviada para los valores hexadecimales.

Funciona de manera que si el par de valores de color son idénticos, entonces el segundo puede ser eliminado. Cada par representa un modal de color y son Rojo, Verde y Azul, respectivamente. Veamos lo siguiente:

body { color: #222222; /* Se convertirá en #222 */
body { color: #000000; /* Se convertirá en #000 */

El #222222 es igual al #222, el valor hexagonal puede ser representado como 22, 22, 22, tomamos el primer valor de cada uno, así que resultó en el #222.

Veamos un visual que explica cómo funciona esto.

color hexadecimales

Colores RGB/RGBA

Rojo Verde Azul (RGB) es un modelo de color que representa los tres canales de color (rojo, verde, azul). Cada valor de los tres puede ser un número entre 0 y 255 o un porcentaje de 0 a 100%.

Si los tres valores son 0, entonces el color resultante será negro. Sin embargo, si todos los valores son 255, entonces el color será blanco. Lo mismo puede aplicarse también a los valores porcentuales.

.element {
    /* Blanco */
    color: rgb(255, 255, 255);
    color: rgb(100%, 100%, 100%);

    /* Negro */
    background-color: rgb(0, 0, 0);
    background-color: rgb(0%, 0%, 0%);
}

Lo bueno de rgb es que hay un canal alfa que controla la transparencia del color. Esto puede ser muy útil para tener un matiz de color. Hay más casos de uso útiles que trataré en este artículo.

.elemento {
    /* Un color de fondo negro con un 50% de transparencia */
    background-color: rgba(0, 0, 0, 0.5);
}

Si el valor de alfa es cero, entonces el color o el fondo será transparente y no visible.

Colores HSL

Rara vez noto el uso de este modelo de colores en css, pero recientemente comenzó a ganar más atención de los diseñadores y desarrolladores. HSL significa: tono, saturación, luminosidad.

En la rueda de colores en css, cada color tiene un cierto grado, que es el tono. Entonces, todavía tenemos que establecer la saturación y la luminosidad.

Déjame guiarte a través del proceso de cálculo de un valor de color HSL. Supongamos que elegimos el siguiente color.

rueda de colores en css

Para la saturación y la luminosidad, aquí hay una bonita forma visual de imaginarlas que aprendí gracias a este artículo. Una vez elegido el grado de matiz, podemos imaginar la saturación y la luminosidad como la siguiente imagen.

saturación y la luminosidad colores en css

La saturación comienza en el gris y termina con el color del tono. Mientras que la luminosidad comienza desde el negro hasta el color de la tonalidad, y finalmente hasta el color blanco.

Esa flexibilidad es muy útil, puedes elegir un color de tono, y luego ajustar la saturación y la luminosidad según tus necesidades. Esto puede ayudarte a crear una paleta de colores que sea dinámica y fácil de usar.

CurrentColor

CurrentColor tiene el valor de la propiedad de color de un elemento. Se puede usar en elementos que no heredan el color por defecto. Aquí hay algunas propiedades que están predeterminadas en currentColor:

border-color
texto-decoración-color
contorno-color
box-shadow

Parece que currentColor es similar a usar una variable CSS, pero estaba ahí antes de que las variables CSS fueran soportadas. Mira lo siguiente:

.elemento {
    color: #222;
    border: 2px solid;
}

¿Puedes adivinar el color del borde? Es lo mismo que la propiedad del color. Eso es porque el color del borde tiene a CurrentColor como la variable por defecto. Puedes imaginarlo así:

.elemento {
    color: #222;
    border: 2px solid currentColor;
}

Una cosa interesante que hay que saber sobre el CurrentColor es que puede ser usado en el nivel del elemento padre, o para los elementos hijos.

<h1>
    Soy un titulo
    <span>Yo soy un elemento hijo</span>
</h1>

En el En el ejemplo anterior, podemos usar CurrentColor para el elemento h1 o el elemento span. Ver más abajo:

h1 {
    color: #222;
    background-color: currentColor;
}

Usar DevTools para cambiar el modo de color

Un pequeño truco que es útil cuando se experimenta con colores en CSS, es usar el conmutador en Chrome DevTools. Elige cualquier elemento con un valor de color hexadecimal, e inspecciónalo. Luego, haz clic en el pequeño cuadrado que muestra el color usado actualmente.

Lo anterior funciona sólo con el color hexadecimal, y las propiedades que utilizan directamente una variable CSS como la siguiente.

.btn {
    background-color: var(--brand-primary);
}

Sin embargo, el inconveniente de usar colores HSL combinados con variables CSS es que el comportamiento entre los navegadores todavía no es consistente. Por ejemplo, el ejemplo anterior no mostrará un cuadrado de color en Firefox. Mira la figura de abajo para una comparación:

devtools colores en css

El pequeño cuadrado azul de Safari muestra el valor calculado de la propiedad CSS utilizada. Mejor que nada.

Te preguntarás por qué es necesario tener un cuadrado que represente el color calculado junto a la propiedad. Sin el cuadrado, no podemos abrir la paleta de colores de DevTools, que nos ayuda a comprobar si el color es accesible.

Esto no siempre es así. Por ejemplo, un elemento de un botón tiene un color: #fff y un color de fondo establecido con hsl. Todavía podemos abrir la paleta de colores de DevTools desde la propiedad color y ver la relación de contraste. Sin embargo, para los elementos que utilizan un valor hsla con variables CSS, esto no es posible.

Observaciones de color funcional separadas por espacios

La forma común de usar rgb y hsl es separando sus valores con comas. Una nueva forma ya tiene un gran apoyo en los navegadores que no usan comas.

/* Antes */
.element {
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 1);
}

/* Despues */
div {
  background-color: rgb(0 0 0);
  background-color: rgb(0 0 0 / 0.5);
  background-color: rgb(0 0 0 / 50%);
}

Recuerda que la opacidad separada por barras es opcional, y sólo debes usarla si quieres ajustar la transparencia alfa o de color.

La nueva forma es mejor y recomendada ya que las nuevas funciones de color CSS como lab(), lch() y color() sólo funcionarán con la técnica de separación de espacios. Es bueno acostumbrarse a ellas y se puede hacer fácilmente una copia de seguridad para los navegadores no compatibles.

Aviso: aunque he recomendado el uso de la sintaxis de separación de espacios, no la he usado en el artículo porque es nueva, y no quiero introducir ninguna confusión o malentendido no deseado.

Valores Globales (inherit, initial, unset)

Podemos usar los valores globales para dejar que un elemento herede el color de su progenitor, o para restablecer el color de un elemento con palabras clave iniciales o no iniciales. Veamos el siguiente ejemplo para entender esas palabras clave.

Tenemos una sección hero con un título, una descripción y un enlace.

<section class="hero">
    <h2>Titulo de pagina</h2>
    <p>Esta es la descripción</p>
    <a href="#">Ver todo</a>
</section>

Con color: #222 añadido al elemento padre, ¿qué esperas del color de los elementos hijos? El h2 y la p heredarán el color, mientras que la a no lo heredará por defecto. Interesante, ¿no?

El color de enlace por defecto es:

:link { color: #0000ee; }

Si lo necesitas, puedes reforzar el vínculo para heredar añadiendo el color: inherit a él.

La palabra clave unset

Según el MDN:

La palabra clave CSS unset restablece una propiedad a su valor heredado si la propiedad se hereda naturalmente de su padre, y a su valor inicial si no.

Para el mismo ejemplo explicado anteriormente, podemos dejar que el enlace herede el color usando lo siguiente:

.hero a { color: unset; }

Reajustará el color al valor heredado por defecto del elemento .hero, que es lo que queremos.

Ver demo en Codepen

Conclusiones finales sobre colores en CSS

Espero que este artículo te haya gustado, he intentado explicarlo de la forma más sencilla que he podido, si tienes alguna duda deja un comentarios y estaré encantado de ayudarte. De mientras te recomiendo leer el siguiente artículo, Comentario en CSS.

Comentario en CSS: Ejemplo de comentario CSS

Comentario en CSS: Ejemplo de comentario CSS

Un comentario en CSS se utilizan para explicar un bloque de código o para hacer cambios temporales durante el desarrollo. El código comentado no se ejecuta.

Tanto los comentarios de una sola línea como los de varias líneas en CSS empiezan con /* y terminan con */, y puedes añadir tantos comentarios a tu hoja de estilos como quieras. Por ejemplo:

/* Este es un comentario de una sola línea */
.group:after {
  content: "";
  display: table;
  clear: both;
}

/*
  Esto es
  un comentario
  con multiples lineas
*/

También puede hacer más legibles sus comentarios estilizándolos:

/*
***
* SECCIÓN PARA EL ESTILO H2 
***
* Un párrafo con información
* que sería útil para alguien
* que no escribió el código.
* Los asteriscos alrededor del párrafo 
* ayudan a hacerlo más legible.
***
*/

Organizar el CSS con comentarios

En proyectos más grandes, los archivos CSS pueden crecer rápidamente en tamaño y ser difíciles de mantener. Puede ser útil organizar tu CSS en distintas secciones con una tabla de contenidos para facilitar la búsqueda de ciertas reglas en el futuro:

/* 
*  ÍNDICE DEL CCS
*   
*  1.0 - Reset
*  2.0 - Fonts
*  3.0 - Globals
*  4.0 - Color Palette
*  5.0 - Header
*  6.0 - Body
*    6.1 - Sliders
*    6.2 - Imagery
*  7.0 - Footer
*/

/*** 1.0 - Reset ***/

/*** 2.0 - Fonts ***/

/*** 3.0 - Globals ***/

/*** 4.0 - Color Palette ***/

/*** 5.0 - Header ***/

/*** 6.0 - Body ***/
h2 {
  font-size: 1.2em;
  font-family: "Ubuntu", serif;
  text-transform: uppercase;
}

/*** 5.1 - Sliders ***/

/*** 5.2 - Imagery ***/

/*** 7.0 - Footer ***/

Un poco más sobre el CSS: Sintaxis y selectores CSS

Cuando hablamos de la sintaxis del CSS, estamos hablando de cómo se disponen las cosas. Hay reglas sobre dónde va cada cosa, tanto para que puedas escribir CSS de forma consistente como para que un programa (como un navegador) pueda interpretarlo y aplicarlo a la página correctamente.

Hay dos formas principales de escribir CSS.

CSS en línea (Comentario en CSS)

Especificaciones sobre la especificidad del CSS:

El CSS en línea aplica el estilo a un solo elemento y a sus hijos, hasta que se encuentra otro estilo que anula el primero.

Para aplicar CSS en línea, agrega el atributo «style» a un elemento HTML que quieras modificar. Dentro de las comillas, incluye una lista delimitada por punto y coma de pares clave/valor (cada uno a su vez separado por dos puntos) que indica los estilos a establecer.

Aquí tienes un ejemplo de CSS en línea. Las palabras «Uno» y «Dos» tendrán un color de fondo amarillo y un color de texto rojo. La palabra «Tres» tiene un nuevo estilo que anula el primero, y tendrá un color de fondo verde y un color de texto cian. En el ejemplo, estamos aplicando estilos a las etiquetas , pero puedes aplicar un estilo a cualquier elemento HTML.

<div style="color:red; background:yellow">
  Uno
  <div>
    Dos
  </div>
  <div style="color:cyan; background:green">
    Tres
  </div>
</div>

CSS interno (Comentario en CSS)

Mientras que escribir un estilo en línea es una forma rápida de cambiar un solo elemento, hay una forma más eficiente de aplicar el mismo estilo a muchos elementos de la página a la vez.

El CSS interno tiene sus estilos especificados en la etiqueta <style>, y está incrustado en la etiqueta <head>.

Aquí hay un ejemplo que tiene un efecto similar al del ejemplo «inline» anterior, excepto que el CSS ha sido extraído a su propia área. Las palabras «Uno» y «Dos» coincidirán con el divisor y serán un texto rojo sobre un fondo amarillo. Las palabras «Tres» y «Cuatro» también coincidirán con el div selector, pero también coinciden con el selector .nested_div que se aplica a cualquier elemento HTML que haga referencia a esa clase. Este selector más específico anula el primero, y terminan apareciendo como texto cian sobre un fondo verde.

<style type="text/css">
  div { color: red; background: yellow; }
  .nested_div { color: cyan; background: green; }
</style>

<div>
  Uno
  <div>
    Dos
  </div>
  <div class="nested_div">
    Tres
  </div>
  <div class="nested_div">
    Cuatro
  </div>
</div>

Los selectores mostrados arriba son extremadamente simples, pero pueden llegar a ser bastante complejos. Por ejemplo, es posible aplicar estilos sólo a elementos anidados; es decir, un elemento que es hijo de otro elemento.

Este es un ejemplo en el que especificamos un estilo que sólo debe aplicarse a los elementos del div que son hijos directos de otros elementos del div. El resultado es que «Dos» y «Tres» aparecerán como texto rojo sobre un fondo amarillo, pero «Uno» y «Cuatro» no se verán afectados.

<style type="text/css">
  div > div { color: red; background: yellow; }
</style>

<div>
  Uno
  <div>
    Dos
  </div>
  <div>
    Tres
  </div>
</div>
<div>
  Cuatro
</div>

CSS externo

Todos los estilos tienen su propio documento que está enlazado en la etiqueta <head> . La extensión del archivo enlazado es .css.

Si te ha gustado este artículo sobre como poner un comentario en CSS, te recomiendo leer sobre Como crear un texto con degradado de color en CSS.

10 Ejemplos de animaciones SVG para diseñadores web

10 Ejemplos de animaciones SVG para diseñadores web

 

Las mejores animaciones SVG para diseñadores web

Animaciones SVG para diseñadores web. SVG (Scalable Vector Graphics) tiene una serie de ventajas en comparación con otros formatos de imagen utilizados en la web. En primer lugar, los SVG son escalables, por lo que pueden adaptarse a cualquier tamaño de pantalla sin pérdida de calidad. Luego, los navegadores pueden cargarlos más rápido, usando menos recursos. Y, pueden ser editados con CSS como si fueran simples elementos de HTML. Además de ser utilizado para imágenes estáticas, también puede crear animaciones impresionantes con SVG. En este artículo, he recopilado 10 ejemplos de animaciones SVG para inspirarte a usarlas también en tus propios proyectos web.

1. Become a Traveler Today (Animaciones SVG)

See the Pen SVG Animation by jjperezaguinaga (@jjperezaguinaga) on CodePen.default

Esta impresionante demo de ‘Become a Traveler Today’ de José Aguinaga es actualmente la animación SVG más popular en CodePen, y esto no es una coincidencia, ya que se ha invertido mucho trabajo en este proyecto artístico. El autor creó los gráficos con Adobe Illustrator y los exportó con el plugin SVG Export. También utilizó el preprocesador Sass para crear la animación de fotogramas clave que mueve cuidadosamente el globo alrededor de la pantalla.

Descarga este SVG desde este enlace.

2. SVG Loader Animations

See the Pen SVG Loader Animation by Nikhil Krishnan (@nikhil8krishnan) on CodePen.default

Estos cargadores puros de SVG de Nikhil Krishnan son un bonito ejemplo de cómo crear animaciones SVG adecuadas para proyectos web en el mundo real. Al igual que la demostración ‘Become a Traveler Today’, estos cargadores también utilizan el preprocesador Sass. Sin embargo, aquí, la animación es un efecto SVG nativo añadido directamente al elemento animateTransform SVG dentro de la página HTML.

Descarga este SVG desde este enlace.

3. Project Deadline Is Coming

See the Pen #2 – Project Deadline – SVG animation with CSS3 by Jonathan Silva (@jonathansilva) on CodePen.default

Este genial proyecto de animación de Jonathan Silva es escalofriante y divertido a la vez. Demuestra muy bien que realmente se pueden utilizar las animaciones SVG para cualquier tipo de proyecto creativo. Con este pequeño pero inteligente recordatorio de plazos, puedes motivar a tu equipo a cumplir con los plazos, sin ser un fastidio. Aquí, el autor creó el efecto animado usando la regla @keyframes de CSS y un poco de jQuery para establecer el tiempo.

Descarga este SVG desde este enlace.

4. SVG Text Animation Using Stroke Offset Method

See the Pen SVG Text Animation Using Stroke Offset Method by Mack Ayache (@Ayachem) on CodePen.default

Además de las imágenes animadas, también puede utilizar animaciones SVG para crear efectos impresionantes de texto. Por ejemplo, echa un vistazo a esta bonita animación de texto de Mack Ayache. Él hace uso de simples formas SVG para crear las letras. A continuación, añade el movimiento por separado a cada letra utilizando los atributos SVG stroke-dashoffset y stroke-dasharray. Sin embargo, añade estos atributos al CSS en lugar de al elemento <svg> dentro del HTML. Él puede hacer eso porque los atributos de presentación de SVG pueden ser utilizados como propiedades CSS también.

Descarga este SVG desde este enlace.

5. Sketch Photo Animation

See the Pen Sketch Photo by Kristen Zirkler (@kristenzirkler) on CodePen.default

Esta animación de fotos exclusivas de Kristen Zirkler puede ser una gran incorporación a cualquier interfaz de usuario que muestre fotos de perfil. La autora creó el gráfico en Adobe Illustrator colocando dos capas una encima de la otra, una para su foto y otra para el camino que va alrededor de su cara. Luego, usó Sass para agregar la animación de fotogramas clave que modifica las reglas de desplazamiento-desplazamiento y opacidad.

Descarga este SVG desde este enlace.

6. Beating Heart Animation (Animaciones SVG)

See the Pen Beating Heart – CSS and SVG animation – low poly by morkett (@morkett) on CodePen.default

Si quieres ver un ejemplo de una animación SVG realmente sofisticada, echa un vistazo a la animación del corazón palpitante cuidadosamente elaborada por David Corkett. A pesar de que es un efecto complicado, no utiliza ningún tipo de JavaScript, sino que se basa únicamente en SVG y CSS. El corazón está hecho de múltiples polígonos a los que el autor añadió efectos de entrada y salida usando la regla @keyframes de CSS.

Descarga este SVG desde este enlace.

7. Pointless Rider (Animaciones SVG)

See the Pen Pointless Rider by Elliott Munoz (@elliottmunoz) on CodePen.default

Si alguna vez has querido crear un logo animado, aquí tienes un excelente ejemplo. La demo de Pointless Rider de Elliott Muñoz muestra que también puedes usar animaciones SVG para temas de marca. Por defecto, es un elegante logotipo en blanco y negro. El autor añadió el sutil efecto de animación con los elementos SVG animateTranform y animateMotion. Aquí, el CSS sólo alinea los elementos y establece los colores, pero es el SVG el que se encarga de todo el movimiento en la pantalla.

Descarga este SVG desde este enlace.

8. Sovog 404 Page (Animaciones SVG)

See the Pen Sovog 404 page by Marco Barría (@fixcl) on CodePen.default

Las páginas 404 son otra área en la que puedes poner en práctica con éxito una animación SVG. La demostración de la página Sovog 404 de Marco Barría se basa en SVG y Sass para hacer que el robot levante sus extremidades. Aunque las partes del robot son todas trayectorias SVG separadas, se mueven hacia arriba y hacia abajo con la ayuda de la transformación: rotate(); propiedad CSS, utilizada en cada trayectoria individualmente.

Descarga este SVG desde este enlace.

9. List Expand SVG Animation

See the Pen List Expand by Daniel (@daniel_wolf) on CodePen.default

Si quieres un ejemplo de una animación SVG que puedas usar fácilmente en proyectos cotidianos, aquí tienes una interesante demostración. Esta elegante animación de expansión de una lista de Daniel Wolf puede funcionar bien en cualquier aplicación móvil o web en la que se quiera mostrar información ampliada a los usuarios. De acuerdo con la descripción del autor, la clave para este efecto es «el tiempo en que los elementos se mueven en la transición». Las animaciones se basan en CSS así como en un poco de jQuery para la funcionalidad de clic.

Descarga este SVG desde este enlace.

10. SVG Animation with Sliders

See the Pen SVG animation with sliders by Kenneth Aamås (@knekk) on CodePen.default

Esta bella animación SVG de Kenneth Aamås con controles deslizantes de demostración utiliza tanto Sass como JavaScript para lograr un efecto inteligente y controlado por el usuario. Puede cambiar las dimensiones de la imagen con la ayuda de tres sliders en la parte inferior de la página. Cada slider está atado a una parte diferente de la imagen que comienza a moverse cuando el usuario cambia la posición del slider. Para esta animación, el autor utiliza la propiedad CSS de transición en lugar de las animaciones de fotogramas clave, lo que resulta en un efecto más sutil.

Descarga este SVG desde este enlace.

Si te han gustado estos efectos en CSS te invito a que leas el artículo Efecto De Burbujas Con CSS Como 7UP. y recuerda compartir este artículo en tus redes sociales 🙂

Y si quieres aprender más sobre diseño web, mi canal de Youtube

Si te apasiona el mundo del diseño y desarrollo web, tienes que suscribirte a mi canal en Youtube, verás contenidos tan chulos como este jeje 😉




Como crear un diseño web responsive en Grid con CSS

diseño web responsive en Grid con CSS

Esta es una guía paso a paso para crear un diseño web responsive en Grid con CSS.

El diseño web responsive en Grid está creciendo en el soporte del navegador cada día. La rápida adopción del formato Grid ha sido realmente notable.

Antes de que lleguemos a hacer un diseño de portafolio responsive en formato Grid, vamos a aclarar un par de cosas: El formato Grid no es un sustituto de Flexbox. Ni siquiera es un reemplazo. De hecho, puede que te des cuenta de que hemos estado usando Flexbox para hacer cosas que el formato Grid hace mucho mejor. Pero en lugar de pensar en términos de sustitución, podemos pensar en términos de combinación.

Imagina un sándwich de queso y jamón york. El queso y el jamón son muy buenas por sí solas, pero cuando se juntan, nace una nueva cosa y ocurre la magia.

Así son nuestras herramientas de diseño web. Son excelentes en las cosas que hacen individualmente, pero cuando se combinan, la magia sucede y podemos crear nuevos y emocionantes diseños. En este caso, haremos un desarrollo web propio con el formato Grid y Flexbox.

01. Configura tu código HTML

Configura tu código HTML

Nuestro diseño no parece gran cosa, pero ya tenemos en su lugar el esqueleto con estos seis artículos.

En este tutorial, vamos a usar CSS Grid y Flexbox juntos para crear un diseño de portafolio que responda a tus necesidades. Cada una de estas cajas tiene un tamaño diferente, algunas de ellas se extienden a través de filas y cada caja tiene un título que se encuentra en la parte inferior. Usaremos algunas de las grandes herramientas de alineación que vienen con Flexbox para hacer que eso suceda.

Empezaremos por establecer nuestro html.

<ul class=”boxes”>
  <li>
    <div class=”boxes__text-wrapper”>
      <h2>Titulo del portafolio</h2>
      <p>Aquí la descripción del portafolio</p>
    </div>
  </li>
</ul>

Duplicaremos ese elemento y todo lo que hay en él seis veces para que podamos jugar con él. En caso de que te lo estés preguntando, he decidido usar el elemento ul porque es una lista de entradas. Si lo deseas, puedes usar lo que te parezca correcto.

Dentro del ítem de la lista tenemos un div con la clase .boxes__text-wrapper que contendrá el título del portafolio y la descripción que lo acompaña.

02. Escribe los estilos que necesitas

Escribe los estilos que necesitas

He establecido nuestra fuente en algo un poco más agradable y he eliminado el margen por defecto de los encabezados y párrafos.

Ahora vamos a establecer algunos estilos de base con los que trabajar.

body {
  font-family: Avenir, sans-serif;
  margin: 2rem auto;
  width: 95%;
}
h2,
p {
  margin: 0;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.boxes > * {
  padding: .5rem;
  background-color: #333;
  color: white;
}

He cambiado la fuente para que sea Avenir. Eliminaremos el margen de nuestro encabezado y párrafo, y resetearemos la lista desordenada. También le daré a cada elemento de la lista algunos estilos predeterminados para ayudarnos a ver dónde está cada uno.

03. Configura tu diseño web responsive en Grid

Configura tu diseño web responsive en Grid

Con sólo tres líneas, hemos añadido un margen entre nuestros elementos de Grid y los hemos hecho un poco más altos.

Primero queremos construir nuestro diseño para móviles. Configurar nuestra cuadrícula en pantallas pequeñas es tan fácil como esto:

.boxes {
  display: grid;
  grid-auto-rows: minmax(125px, auto);
  grid-gap: .5rem;
}

Grid apilará nuestros artículos uno encima del otro porque por defecto sólo hay una columna. Vamos a crear un espacio entre cada item del portafolio mediante el uso de grid-gap, esto nos permite añadir un margen entre filas y columnas.

Olvídate de añadir un margen a las columnas sólo para necesitar selectores complejos; los márgenes sólo aparecen entre columnas o filas, nunca antes o después de una columna o row.grid-gap es la abreviatura de grid-column-gap y grid-row-gap. Normalmente usamos la abreviatura a mano, pero vamos a sobreescribir ambas a medida que el navegador crece, así que usaremos la abreviatura.

A continuación, utilizaremos las filas automáticas de cuadrícula para indicar a nuestro contenedor de cuadrícula la altura de las filas nuevas. Grid creará nuevas filas para colocar todo nuestro contenido. Podemos controlar el tamaño de estas filas creadas automáticamente con la propiedad grid-auto-rows. Estamos usando una nueva función disponible para nosotros: minmax(). Con minmax() podemos especificar un tamaño mínimo y un tamaño máximo.

Con nuestro código estamos diciendo que queremos que nuestras filas tengan un mínimo de 120px y un máximo de auto. Estamos usando auto aquí porque queremos que nuestras filas crezcan si el contenido lo justifica.

04. Configurar compatibilidad con navegadores de gran tamaño

compatibilidad con navegadores de gran tamaño

Nuestra cuadrícula está tomando forma! Tenemos seis columnas con las que trabajar y menos márgenes entre los elementos de nuestra cuadrícula.

Vamos a configurar nuestra página para que cuando nuestro navegador sea 40em o mayor, nuestro contenedor de cuadrícula tenga seis columnas de una fracción cada una.

@media screen and (min-width: 40em) {
  .boxes {
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 2px;
  }
}

grid-template-columns es la propiedad que usamos para indicar a nuestra cuadrícula cuántas columnas deben existir. Acepta todas las unidades de longitud que conocemos y amamos como rem, em, px, porcentajes, vw, vh y fr.

El fr es una nueva unidad que obtenemos con el formato CSS Grid. Con él, podemos decirle al navegador que haga cálculos en vez de nosotros .

Al decirle al navegador que cree seis columnas de una fracción, el navegador calculará el ancho de nuestro contenedor de cuadrícula y lo dividirá en seis columnas iguales. Además, como Grid es inteligente, sólo dividirá el espacio restante después de calcular el margen que hemos especificado.

05. Estilo de los ítems individualmente

Estilo de los ítems individualmente

El café hace que todo se vea mejor, ¿no? También un sutil degradado hace que nuestro título y descripción destaquen.

Nuestros items del portafolio parecen un poco monótonos como cajas grises. Añadamos una imagen de fondo, consigamos que nuestros títulos se muestren en la parte inferior de estas cajas y añadamos un degradado para que nuestro título destaque.

.boxes li {
  background-image:
    linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.8)),
    url(path/to/image);
  background-size: cover;
  display: flex;
  align-items: flex-end;
}

Esta imagen de fondo era una imagen libre de Unsplash, pero puedes usar cualquier imagen que desees. También estoy trayendo Flexbox a la mezcla para alinear nuestro texto al fondo de nuestras cajas. Aún no lo verás, pero a medida que coloquemos cada caja diferente, lo verás funcionar.

06. Colocar elementos en la cuadrícula

Colocar elementos en la cuadrícula

Grid hace que sea fácil dimensionar nuestros elementos de Grid como queramos. Pero esto es sólo el principio

Desafortunadamente, Grid no tiene una manera de colocar automáticamente los elementos en el diseño de la cuadrícula que vimos al principio. Afortunadamente para nosotros, sin embargo, Grid nos da las herramientas para hacerlo manualmente con bastante facilidad. En este tutorial, usaremos nth-child para colocar cada elemento de la tabla. En un sitio web de producción, aconsejo utilizar una clase que, si se planifica correctamente, permita automatizar diseños como éste en un sitio con mucho contenido.

Empecemos con nuestro primer artículo.

@media screen and (min-width: 40em) {
  .boxes li:nth-child(1) {
    grid-column: 1 / -1;
    grid-row: span 3;
  }
}

Estaremos poniendo todos nuestros estilos de posición dentro de la consulta de contenidos que escribimos anteriormente porque queremos que este diseño ocurra después de que nuestro navegador tenga 40em o más. Con el enésimo child estamos apuntando al primer elemento de la lista. CSS Grid nos permite colocar fácilmente nuestros artículos con columna de cuadrícula y fila de cuadrícula. Hay muchas maneras diferentes de especificar dónde deben estar los artículos, pero aquí estamos diciéndole a nuestro artículo que empiece en la línea uno de la columna y se extienda por todo el contenedor con -1.

Luego, con la fila de cuadrícula, le decimos al ítem que abarque tres filas. ¿Cómo sabemos que tres filas serán del tamaño que queremos? Bueno, hemos especificado el tamaño de estas filas con cuadrículas automáticas hace unos momentos, y si no estamos contentos con ellas podemos cambiar el tamaño mínimo.

Coloquemos el resto de nuestros artículos.

@media screen and (min-width: 40em) {
  .boxes li:nth-child(2) {
    grid-column: span 2;
    grid-row: span 7;
  }

  .boxes li:nth-child(3) {
    grid-column: span 4;
    grid-row: span 3;
  }

  .boxes li:nth-child(4) {
    grid-column: span 2;
    grid-row: span 4;
  }

  .boxes li:nth-child(5),
  .boxes li:nth-child(6) {
    grid-column: span 2;
    grid-row: span 2;
  }
}

¿No es increíble cuánto control nos da el formato Grid? Con sólo unas pocas líneas de código, podemos crear un diseño completamente responsive que no se romperá si se añaden más elementos.

Claro, pueden parecer un poco torpes porque sólo ocuparán una columna y una fila de la cuadrícula por defecto, pero esto no rompe nuestro diseño. Si estuviéramos haciendo esto con los anchos y alturas fijos, estaríamos en un lío si se añadiera más contenido.

Nuestro diseño está terminado! ¿No es increíble? La cuadrícula nos permite colocar nuestros artículos fácilmente en dos dimensiones.

Un pequeño comentario sobre los navegadores antiguos en diseño web responsive en Grid

Bien, es hora de dirigirse al elemento de la celda. ¿Qué hay de los navegadores antiguos? La respuesta a esta pregunta es la misma que para cualquier característica nueva en CSS: Hay que usar las consultas de características y aceptar la secuencia. Las consultas de características están muy bien soportadas, y donde no lo están, podemos colocar nuestra solución de emergencia en primer lugar. Por ejemplo, escribiríamos algo parecido a:

.your-selector {
  display: flex;
}

/* Your Grid code */
@supports (display: grid) {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem 2rem;
}

Escribir nuestro código de esta manera significa que si el navegador entiende el diseño de la cuadrícula, lo usará en lugar de Flexbox. Además, debido a que estamos adoptando la combinación, los navegadores que no entienden las consultas de características las ignoran y ya tienen la información que necesitan. Puede que necesitemos planear cómo escribimos nuestros estilos un poco más de lo habitual, pero al hacerlo podemos crear diseños atractivos con soluciones alternativas adecuadas.

Diseño web responsive en Grid CSS en el futuro

Además, a medida que pase el tiempo, sólo habrá más y más soporte para CSS Grid. Piensa en lo genial que sería borrar más tarde nuestras correcciones y dejar todos los CSS relacionados con Grid. A medida que aprendas más sobre Grid, te darás cuenta de que hace muchas cosas que hacemos ahora mismo con muchas menos líneas de CSS.

Y si quieres aprender más sobre diseño web, mi canal de Youtube

Si te apasiona el mundo del diseño web responsive, tienes que suscribirte a mi canal en Youtube, verás contenidos tan chulos como este jeje 😉




Texto con degradado de color en CSS

Texto con degradado en CSS

Como crear un texto con degradado de color en CSS.

Los desarrolladores web conocen la lucha que todos hemos tenido para mejorar las fuentes en la web. Ya se trate del tiempo de carga, de estrategias extrañas para usar fuentes personalizadas, o simplemente de encontrar la fuente correcta, embellecer el texto en una pagina web nunca ha sido fácil.

Eso me hizo pensar en fuentes y degradados CSS, ya que los degradados también tenían una difícil introducción a la web. Veamos cómo podemos usar fuentes degradadas con sólo CSS!

Para mostrar un degradado para una fuente dada, en lugar de un color sólido, necesitará usar algunas propiedades prefijadas de la vieja escuela -webkit-:

.texto-degradado {
  /* standard gradient background */
  background: linear-gradient(red, blue);

  /* clip informático */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Aquí te dejo como se vería el código anterior:

ejemplo de texto con degradado en CSS

Esta mezcla de CSS específico de -webkit- y fondo de degradado general se descubrió hace diez años, pero sigue siendo la mejor manera de conseguir un fondo de CSS puro, incluso con fuentes personalizadas. Ten en cuenta que a pesar del prefijo -webkit, Firefox sigue renderizando correctamente la fuente de degradado. También ten en cuenta que la eliminación del prefijo rompe el renderizado correcto.

Con todo lo complicado que pueden llegar a ser las fuentes, es increíble que tengamos un hack CSS bastante simple para lograr texto con degradado de color en CSS. Es una pena que evitar el prefijo -webkit rompa la funcionalidad, pero como siempre digo ¡bienvenido al mundo de CSS!

Si te ha servido este artículo no dudes en dejar un comentario para hacérmelo saber, o si tienes cualquier problema o duda de como implementarlo estaré encantado de poder ayudarte.

Y recuerda, permanece atento a mi blog ya que cada semana traigo mas trucos relacionados sobre diseño web, códigos de programación, tutoriales, cursos e ideas para que mejores tus proyectos, hasta el próximo artículo compañeros 🙂

Y si quieres aprender más sobre diseño, mi canal de Youtube

Si te apasiona el mundo del diseño en general como los degradados en texto, tienes que suscribirte a mi canal en Youtube, verás contenidos tan chulos como este jeje 😉




Crea un efecto de burbujas con CSS como 7UP

efecto de burbujas en css

 

La animación del efecto de burbujas con CSS que aparece en 7UP es un bello ejemplo de cómo llevar un imagen de marca hasta el diseño del sitio web. La animación consiste en unos pocos elementos: el SVG ‘dibujo’ de las burbujas y luego dos animaciones aplicadas a cada burbuja.

Puedes ver el efecto aquí.

La primera animación cambia la opacidad de la burbuja y la mueve verticalmente en la caja de visualización; la segunda crea el efecto de bamboleo para añadir realismo. Las compensaciones se manejan apuntando a cada burbuja y aplicando una duración de animación y un retardo diferentes.

Para crear nuestras burbujas usaremos SVG. En nuestro SVG creamos dos capas de burbujas: una para las burbujas más grandes y otra para las más pequeñas. Dentro del SVG colocamos todas nuestras burbujas en la parte inferior de la caja de visualización.

<g class="bubbles-large" stroke-width="7">
  <g transform="translate(10 940)">
  <circle cx="35" cy="35" r="35"/>
  </g>
  ...
</g>
<g class="bubbles-small" stroke-width="4">
  <g transform="translate(147 984)">
  <circle cx="15" cy="15" r="15"/>
  </g>
</g>
  ...
</g>

Para aplicar dos animaciones separadas a nuestros SVGs, ambas utilizando la propiedad de transformación, necesitamos aplicar las animaciones a elementos separados. El elemento <g> en SVG puede ser usado como un div en HTML; necesitamos envolver cada una de nuestras burbujas (que ya están en un grupo) en una etiqueta de grupo.

<g>
  <g transform="translate(10 940)">
  <circle cx="35" cy="35" r="35"/>
  </g>
</g>

CSS tiene un potente motor de animación y un código realmente simple para producir animaciones complejas. Empezaremos moviendo las burbujas hacia arriba de la pantalla y cambiando su opacidad para que se desvanezcan al principio y al final de la animación.

@keyframes up {
  0% {
  opacity: 0;
  }
  10%, 90% {
  opacity: 1;
  }
  100% {
  opacity: 0;
  transform: translateY(-1024px);
  }
}

Para crear un efecto de bamboleo, basta con mover la burbuja hacia la izquierda y hacia la derecha, en la cantidad justa – demasiado hará que la animación se vea demasiado aturdida y desconectada, mientras que muy poco pasará desapercibido en la mayoría de los casos. La experimentación es clave cuando se trabaja con animación.

@keyframes wobble {
  33% {
  transform: translateX(-50px);
  }
  66% {
  transform: translateX(50px);
  } }

Para aplicar la animación a nuestras burbujas, usaremos los grupos que usamos anteriormente y la ayuda de nth-of-type para identificar cada grupo de burbujas individualmente. Comenzamos aplicando un valor de opacidad a las burbujas y a la propiedad de cambio de voluntad para utilizar la aceleración de hardware.

.bubbles-large > g {
  opacity: 0;
will-change: transform, opacity;}
.bubbles-large g:nth-of-type(1) {...}
...
.bubbles-small g:nth-of-type(10) {...}

Queremos mantener todos los tiempos de animación y los retardos dentro de un par de segundos el uno del otro y ajustarlos para que se repitan infinitamente. Por último, aplicamos la función de tiempo de entrada y salida a nuestra animación de bamboleo para que parezca un poco más natural.

.bubbles-large g:nth-of-type(1) {
  animation: up 6.5s infinite; }
.bubbles-large g:nth-of-type(1) circle {
  animation: wobble 3s infinite ease-in-out; }
...
bubbles-small g:nth-of-type(9) circle {
  animation: wobble 3s 275ms infinite ease-in-out; }
.bubbles-small g:nth-of-type(10) {
animation: up 6s 900ms infinite;}

Con esto ya tendrás la animación del efecto de busbujas con CSS como 7UP lista para tu página web. Como siempre, si te ha gustado este artículo, siempre puedes compartirlo o dejar tu comentario 🙂

Cómo crear un efecto parallax con CSS

Cómo crear un efecto parallax con CSS

Crea impacto en tu página de inicio con un efecto parallax con CSS.

El efecto parallax, el concepto de mover capas a diferentes velocidades, se ha utilizado durante años en la animación. El sitio web oficial de Bear Grylls (uno de nuestros sitios favoritos de efecto parallax ), toma el efecto en nuevas e interesantes direcciones. Las montañas de fondo se reducen a su posición, mientras que se desvanecen para que se vuelvan completamente opacas, y en el fondo de la página, el texto ‘aventura’ se eleva en su lugar detrás de las montañas a medida que se desvanece.

Puedes ver  en acción el efecto desde www.beargrylls.com . En este artículo, te voy a explicar cómo recrear el efecto en tu propia pagina web. Comienza por descargar los archivos del tutorial .

01. Crea el efecto de escalado.

La estructura para permitir que todo el contenido animado funcione es relativamente simple. Una envoltura contiene todo, y oculta cualquier contenido de desbordamiento. Luego hay esencialmente tres capas de etiquetas div en la parte superior.

<div class="wrapper">
	<div class="pos text"></div>
	<div class="pos mountain1"></div>
	<div class="pos mountain2"></div>
</div>

02. Inicia el CSS

Para hacer el diseño, la imagen de degradado de fondo se agregará al cuerpo (body) y se configurará para llenar el tamaño de la pantalla. La envoltura contiene todas las capas y el desbordamiento de contenido se oculta para que se puedan aplicar los efectos de escala.

body {
		margin: 0;
		padding: 0;
		height: 100%;
		background: url(img/bg.jpg) 
		center center;
		background-size: cover;
	}
	.wrapper {
		width: 100vw;
		height: 100vh;
		position: relative;
		overflow: hidden;
	}

03. Posiciona cada capa.

El siguiente código asegura que cada capa esté posicionada absolutamente, una sobre la otra, dentro de la envoltura. El tamaño de esto llena el ancho y el alto de la ventana gráfica de modo que las imágenes llenen la pantalla.

.pos {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
	}

04. Añadir el texto.

La clase de texto realmente solo agrega la imagen correcta y establece su posición de inicio antes de animarla en su lugar utilizando los fotogramas clave MoveUp que se agregarán en el paso final.

.text {
		background: url(img/text.png) 
		center center;
		background-size: cover;
		transform: translate3d(0, 30px, 0);
		opacity: 0;
		animation: moveUp 1.8s ease-out;
		animation-fill-mode: forwards;
	}

05. Animar la primera montaña.

La primera montaña es la que está más alejada de la pantalla, y esto tendrá una pequeña escala que será animada. La opacidad de todas las capas también se establece baja para que aparezcan en su lugar.

.mountain1 {
		background: url(img/mountain1.png) 
		center center;
		background-size: cover;
		transform: scale3d(1.1, 1.1, 1.1);
		opacity: 0.2;
		animation: scaler 1s ease-out;
		animation-fill-mode: forwards;
	}

06. Animar la montaña de primer plano.

La montaña para el primer plano es casi idéntica a la otra montaña, simplemente hace mucho más de una escala en su lugar. Ambas montañas comparten los fotogramas clave del escalador para su animación.

.mountain2 {
		background: url(img/mountain2.png) 
		center center;
		background-size: cover;
		transform: scale3d(1.3, 1.3, 1.3);
		opacity: 0.1;
		animation: scaler 1.2s ease-out;
		animation-fill-mode: forwards;
	}

07. Añadir animación de fotogramas clave

Ahora se crean los fotogramas clave que especifican eso. en el estado final del movimiento, este estado final se mantendrá en su lugar. El texto se mueve hacia arriba y las montañas se reducen para adaptarse al diseño.

@keyframes moveUp {
		100% {
			transform: translate3d(0, 0, 0);
			opacity: 1;
		}
	}

@keyframes scaler {
		100% {
			transform: scale3d(1, 1, 1);
			opacity: 1;
		}
}

Espero que te haya gustado este pequeño tutorial sobre el efecto parallax con CSS, sigue mi blog y todas las semanas traeré nuevos tutoriales sobre CSS.

Bibliotecas y herramientas de animación CSS

Herramientas online css

 

Crear animaciones CSS de aspecto profesional puede ser difícil y lleva mucho tiempo, pero afortunadamente, existen excelentes herramientas de animación CSS para ayudar a impulsar tu proceso creativo. Esta colección de recursos incluye todas las mejores bibliotecas de animación CSS.

Elige uno que se adapte a tu proyecto y comienza de inmediato, o utilízalo como punto de partida para crear algo personalizado para tu marca. También hay algunas hojas de estilo y atajos útiles para complementar tu aprendizaje.

01. animista

animista biblioteca de animación css

Animista es un parque de animación CSS

Animista es un tipo de área de juegos donde puedes editar y jugar con una colección de animaciones CSS pre-hechas. Luego copia el código de lo que desees, para usar en tus proyectos. Animista comenzó su vida como un proyecto paralelo para la desarrolladora front end Ana Travas, quien aún lo está desarrollando.

02. CSS3 Animation Cheat Sheet

CSS3 Animation Cheat Sheet

Explora esta colección de animaciones CSS3 preestablecidas, plug-and-play

Este útil proyecto ofrece un conjunto de animaciones preestablecidas, plug-and-play para que las uses en tus proyectos web. Hay instrucciones claras para ayudarte a comenzar, pero básicamente, solo tienes que añadir la hoja de estilo a tu sitio web y aplicar las clases de CSS pre-hechas a los elementos que desea animar. Esta hoja de trucos utiliza los fotogramas clave de CSS3, lo que significa que no debes preocuparte por colocar el elemento para dejar espacio para las animaciones.

03. animate.css

biblioteca animate.css

Esta biblioteca incluye 77 animaciones CSS esenciales.

Esta biblioteca reúne nada menos que 77 animaciones, todas creadas en CSS y listas para usar. Simplemente haz referencia al archivo CSS y cuando añadas clases a un elemento, la animación sucederá. Esto funciona mejor al agregar o eliminar clases usando JavaScript.

La biblioteca tiene un tamaño de archivo impresionantemente pequeño cuando está comprimido con gzip, pero si no quieres cargar todo en tu pagina web, el proyecto también es una gran fuente de inspiración. Compilada por Dan Eden, esta biblioteca incluye casi todas las animaciones CSS que puedas necesitar, desde lo básico (rebote, atenuación) hasta algo más emocionante (Jack in the Box, Jello). Usa el menú desplegable en la página de inicio para ver el título de la biblioteca animada en cada uno de los diferentes estilos.

04. Hover.css

biblioteca Hover css

Hover.css se centra en animaciones de interacción de botones

Similar a Animate.css, Hover.css es una colección de efectos CSS que puedes usar en tus proyectos. Esta biblioteca fue creada específicamente para animaciones de interacción de botones. La biblioteca se puede descargar en vainilla CSS, Sass o Less, por lo que encajarán en casi cualquier proyecto. La biblioteca tiene casi todas las animaciones que puedas necesitar para la interacción.

05. CSShake

biblioteca CSShake

CSShake se centra en agitar animaciones.

CSShake es una biblioteca de animaciones CSS dedicada a hacer temblar elementos. La biblioteca tiene una serie de clases que puedes agregar a los elementos para aplicar una de las muchas animaciones diferentes. Las animaciones usan fotogramas clave y utilizan la propiedad de transformación para crear animaciones que a veces parecen locas, pero definitivamente difíciles de ignorar.

06. Obnoxious.css

biblioteca Obnoxious css

¿Quieres saber cómo no hacer animación CSS?

Obnoxious.css fue creado por Tim Holman y es exactamente como su nombre indica. La biblioteca explora lo que es posible con la animación CSS, pero ilustra perfectamente lo que no debes hacer con las animaciones CSS. Si bien se presenta como una biblioteca de animación lista para el producto (y lo es), se pretende que sea irónica. Prepárate.

Espero que te haya gustado este artículo sobre herramientas de animación CSS, si no te es molestia, compártelo y ayuda a que se difunda este mensaje.

 

Botones sociales en CSS3 con efecto hover

Botones sociales en CSS3

Botones sociales con efecto hover

Hoy os traigo un interesante efecto en CSS3 para que podáis incluir en vuestra página web unos botones sociales con efecto hover de una apariencia muy profesional.

A continuación os dejo el código para implementarlo en vuestras páginas web. Como veis tendréis que copiar y pegar los códigos en sus respectivos archivos. Html en el lugar de vuestra web donde queráis que se muestre, el css en vuestra hoja de estilo (ejemplo stule.css) y en javascript para que genere el efecto desarrollado en el ejemplo.

See the Pen
SocialHover buttons
by Mohamed Abo ElGhranek (@midoghranek)
on CodePen.

Este efecto lo ha diseñado Mohamed Abo ElGhranek. Sin duda este diseñador ha conseguido un efecto que seguramente le gustarán a muchos diseñadores que lo incorporarán a su página web.

Si tenéis alguna duda o problema para implementar este código en CSS3, deja un comentario y estaré encantado de ayudarte a solucionarlo.

Cómo usar fuentes variables en la web 2018

 

Las fuentes variables se desarrollaron como un esfuerzo conjunto de las cuatro compañías de tecnología más grandes involucradas en el diseño de tipos: Apple, Google, Microsoft y Adobe. Como sugiere su nombre, las fuentes variables permiten a los diseñadores derivar un número ilimitado de variantes de fuente del mismo archivo de fuente. De esta manera, es posible ajustar el tipo de letra a diferentes dispositivos, vistas, orientaciones y otras restricciones de diseño.

¿Por qué usar fuentes variables?

Las fuentes variables reducen significativamente las limitaciones de los formatos de fuente actuales. Las fuentes web de hoy son inflexibles y no se escalan muy bien; solo nos proporcionan algunos estilos fijos con nombres como «Light», «Bold» o «Extra Bold». Incluso hay tipos de letra que solo tienen una variante de inclinación o peso. Sin embargo, con las fuentes variables, tenemos acceso a una flexibilidad infinita de peso, inclinación, altura x, losas, redondeo y otros atributos tipográficos.

Mejor aún, las fuentes variables mejoran el rendimiento. Las fuentes web como las conocemos necesitan que cada variante de fuente se almacene en un archivo separado. Por ejemplo, así es como se ve la carpeta de la fuente web Roboto :

Fuentes para Mac

Entonces, aquí hay una breve comparación:

Roboto: doce archivos de fuentes, doce variantes.
Fuentes variables: un archivo de fuente, variantes ilimitadas.
Como ya puede imaginar, nuestras opciones tipográficas crecen increíblemente con fuentes variables.

El formato de fuente OpenType

Entonces, ¿qué formato de archivo utilizan las fuentes variables? Según los documentos oficiales :

«Las fuentes OpenType pueden tener la extensión .OTF o .TTF, dependiendo del tipo de contornos en la fuente y el deseo del creador de compatibilidad en sistemas sin soporte nativo de OpenType».

Para ser completamente precisos, las fuentes variables se introdujeron en la versión 1.8 de la especificación del archivo de fuentes OpenType. OpenType es una extensión del formato de fuente TrueType, por lo tanto, las fuentes variables están disponibles como archivos .otfo .ttf.

Ejes de diseño

La nueva especificación del archivo de fuente OpenType viene con una nueva tecnología llamada Variaciones de fuente OpenType que nos permite interpolar la fuente en numerosos ejes de diseño, hasta 64,000, según el blog Adobe Typekit .

La especificación OpenType 1.8 define cinco etiquetas de eje registradas:

  1. peso
  2. anchura
  3. tamaño óptico
  4. inclinación
  5. itálico

Además, los diseñadores de tipos también pueden definir ejes personalizados junto con sus propias etiquetas de cuatro caracteres en la tabla de «nombre» del archivo de fuente.

A continuación, puede ver una gran ilustración de cómo funcionan los ejes de diseño ( del artículo de John Hudson en Medium.com , referido por Typekit como el anuncio no oficial de fuentes variables). Demuestra una fuente variable de tres ejes con peso, ancho y ejes de tamaño óptico:

Typekit

El glifo rojo en el centro representa el conjunto de contornos almacenados en la fuente, los glifos verdes representan los extremos de los tres ejes y los glifos naranjas representan las posiciones de las esquinas.

Todo el cubo representa el espacio de diseño al que tenemos acceso si usamos esta fuente variable de tres ejes. Es un cubo solo porque la fuente tiene tres dimensiones (peso, ancho, tamaño óptico). Con menos ejes, nos moveríamos hacia abajo hacia un rectángulo (2 ejes) o una línea (1 eje) y con más ejes, nos moveríamos hacia arriba en un hiperespacio multidimensional.

Y, por supuesto, una fuente variable de 3 ejes de la vida real no sería necesariamente un cubo, sino más bien un cuboide rectangular, ya que en la mayoría de los casos los diferentes ejes no tienen la misma longitud.

Instancias nombradas

Las fuentes variables aún permiten a los diseñadores de tipos definir instancias con nombre, variantes de fuentes específicas entre el número ilimitado de opciones. Por ejemplo, el Prototipo de fuente variable de Adobe contiene dos ejes (peso y contraste) y ocho instancias con nombre (Luz extra, Luz, Regular, Semibold, Negrita, Negro, Contraste medio negro, Contraste alto negro).

Las instancias con nombre son más importantes si queremos usar una fuente variable con programas de diseño como Adobe Illustrator. En la web, podemos generar fácilmente cualquier instancia (con nombre o sin nombre) con CSS (por ejemplo, en la fuente variable de Adobe, la instancia con nombre Extra Light toma el valor mínimo de los ejes de peso y contraste).

Adición de fuentes variables a una página web

Podemos agregar fuentes variables a un sitio web usando la regla @ font-face en la parte superior del archivo CSS.

Por ejemplo, podemos agregar la fuente de la variable Avenir Next con la siguiente regla de CSS:

@font-face {
font-family: «Avenir Next Variable»;
src: url(«AvenirNext_Variable.ttf») format(«truetype»);
}

Puede encontrar más fuentes variables en el sitio web de Axis Praxis (también tiene un área de juegos para fuentes variables), en las páginas de GitHub de diferentes compañías de diseño de tipos (por ejemplo , MonoType , Type Network ), y Typekit también ha comenzado a publicar las versiones de fuentes variables. De sus familias más populares de Adobe Originals.

Nota: no todas las fuentes OpenType que encontrará en la web son fuentes variables (solo se introdujeron con la versión 1.8).

Configuración de variaciones de fuente con CSS

Para definir las variaciones de fuente, podemos usar la font-variation-settingspropiedad CSS introducida con el Nivel 4 del Módulo de fuente CSS . Esta es una propiedad de bajo nivel que nos permite controlar las fuentes variables al especificar un valor para cada eje.

Ejemplo 1: Avenir Next

La fuente de variable Avenir Next contiene dos ejes de diseño: peso y ancho, ambos son ejes registrados. Avenir Next también tiene ocho instancias con nombre (Regular, Mediana, Negrita, Pesada, Condensada, Mediana Condensada, Negrita Condensada, Pesada Condensada).

El CSS completo (que pertenece a una variación aleatoria de fuentes sin nombre) se ve así:

body {
font-family: «Avenir Next Variable»;
color: rgb(0, 0, 0);
font-size: 148px;
font-variation-settings: ‘wght’ 631.164, ‘wdth’ 88.6799;
}

Podemos usar cualquier valor (incluso números flotantes) para los ejes entre los valores mínimo y máximo. En el caso de Avenir Next, podemos usar el rango [400, 900] para el peso y el rango [75, 100] para el eje de ancho.

¿Dónde encontrar las gamas? Los archivos de fuentes contienen las tablas de variación de fuentes (fvar) que contienen los datos necesarios. Sin embargo, para acceder a esa información, necesitamos ver el contenido del archivo de fuente con una herramienta como FontView . A veces, la documentación de la fuente contiene los rangos, pero desafortunadamente esto no siempre es así. La buena noticia es que el sitio web de Axis Praxis contiene los valores mínimo-máximo para todas las fuentes variables que incluye.

Ejemplo 2: Decovar

Decovar es una de las fuentes variables más versátiles que existen actualmente. Lo puede encontrar en Axis Praxis , en GitHub , y también tiene una página de demostración en el sitio web de TypeNetwork. Decovar contiene uno registrado (peso) y catorce ejes personalizados, y también tiene diecisiete instancias con nombre.

De los documentos de GitHub de Decovar, aquí hay algunas variantes que podemos lograr con esta fuente variable de 15 ejes:

El CSS que necesitamos usar es similar al del ejemplo anterior. Aquí, tenemos que definir los quince ejes (en línea, esquilado, losa redondeada, rayas, terminal de lombriz, esqueleto en línea, abierto en línea, terminal en línea, gusano, peso, ensanchado, redondeado, esqueleto de lombriz, losa, bifurcado).

div {
font-family: Decovar;
color: white;
background-color: rgb(0, 162, 215);
font-size: 157.12px;
text-align: left;
padding-top: 20px;
font-variation-settings: ‘INLN’ 285.094, ‘TSHR’ 346.594,
‘TRSB’ 786.377, ‘SSTR’ 84.268, ‘TWRM’ 200, ‘SINL’ 84.268,
‘TOIL’ 0, ‘TINL’ 91.983, ‘WORM’ 0, ‘wght’ 400, ‘TFLR’ 0,
‘TRND’ 0, ‘SWRM’ 0, ‘TSLB’ 277.155, ‘TBIF’ 0;
}

Nota: tenemos que especificar un valor para todos los ejes de la font-variation-settingspropiedad, incluso aquellos que no queremos usar.

En el caso de Decovar, podemos usar 0como valor para los ejes que no nos interesan; estos serán procesados ​​con el valor predeterminado. Sin embargo, esto no siempre es así, ya que depende de los rangos que usa la fuente para los diferentes ejes. Decovar es fácil, ya que utiliza un rango de 0-1000 para todos los ejes, y 0 es el valor predeterminado para todos.

Puede generar font-variation-settingsdeclaraciones similares con Axis Praxis , no tiene que calcular los valores por su cuenta. El CSS anterior genera la siguiente variante de fuente:

Propiedades CSS de alto nivel

La font-variation-settingspropiedad es una propiedad de bajo nivel y de acuerdo con las recomendaciones del W3C, solo debe usarse si no hay otros métodos disponibles. qué significa esto exactamente?

De acuerdo con las CSS 4 especificaciones , seremos capaces de controlar ejes registrados con propiedades CSS de nivel superior en el futuro, a saber:

font-weight(controlará el wghteje)
font-stretch(controlará el wdtheje)
font-style(controlará los ejes slnty ital)
font-optical-sizing(controlará el opszeje)

Las tres primeras propiedades existen desde CSS2, sin embargo, las especificaciones de CSS4 amplían su uso. Vamos a ser capaces de utilizarlos no solamente con palabras clave predefinidas (por ejemplo, normalo boldpara font-weight) o números redondos (por ejemplo 400, 600, 800, etc.), sino también con todos los números en una escala predefinida (por ejemplo, font-weightoscilarán entre 1 y 1000 y font-stretchse rango entre 50% y 200%).

Sin embargo, estas características todavía están en la fase experimental. Por ahora, lo razonable es seguir usando font-variation-settings, ya que actualmente esta es la propiedad más estable para acceder a los ejes de las fuentes variables.

 

Háblame ;)
¿Necesitas ayuda?
Hola! estás interesado en mis servicios? hablemos por WhatsApp ;)