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 🙂

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.

 

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 🙂

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.

 

Introducción a las propiedades personalizadas de CSS

 

Al escribir CSS válido y usar propiedades personalizadas, puede proteger su código en el futuro; Aquí tienes una introducción a las propiedades de CSS.

Una de las mejores características de los procesadores CSS son las variables. Tener la capacidad de declarar una vez y reutilizar la variable en su proyecto no debe ser opcional en ningún sistema.

5 características de CSS y cómo usarlas

Usar un preprocesador como Sass (obtener más información en nuestro artículo sobre ¿qué es Sass? ) Le brinda al menos un paso de compilación adicional, que puede ser una molestia si solo quiere construir algo rápido. CSS ha recorrido un largo camino desde los días oscuros de los trucos de tablas, así que echemos un vistazo a uno de los aspectos más útiles: las propiedades personalizadas.

Comenzaremos con un ejemplo simple.

:root {
–color-red: #fc4752;
}

.site-navigation {
background-color: var(–color-red);
}

.site-footer {
color: var(–color-red);
}

El pseudo-selector root

El pseudo-selector root se dirige al elemento padre de nivel más alto en el DOM, dando acceso a todos los elementos a –color-red . Sí, la definición de las variables CSS debería comenzar con – , y puede acceder a ellas desde cualquier lugar con var () . Bueno, en cualquier lugar que esté en cascada bajo nuestro : selector de raíz .

Con var () también puede definir un valor de reserva, que se utilizará si la variable dada es inalcanzable o no existe

.site-navigation {
background-color: var(–color-red, red);
}
Los valores se heredan del DOM, lo que significa que puede hacerlos más específicos.

:root {
–color: red;
}

.site-navigation {
–color: green;

background-color: var(–color);
}

.site-footer {
color: var(–color);
}

Cada var (- color) es rojo, excepto cada var (- color) en la navegación del sitio . En términos generales, no es una práctica ideal sobrescribir un valor que ya está definido, pero hay casos en que un valor de alcance sigue siendo la solución más adecuada.

Elementos básicos

Estos son los elementos básicos, pero puedes hacer mucho más. Un ejemplo útil para el diseño web sensible es el cambio de diseño según el tamaño de la ventana gráfica.

:root {
–color-red: #fc4752;
–flex-layout: row;
}

@media (max-width: 640px) {
:root {
–flex-layout: column;
}
}

.site-navigation {
display: flex;
flex-direction: var(–flex-layout, row);

background-color: var(–color-red, red);
}

.site-footer {
color: var(–color-red);
}

Bajo 640px, la consulta de medios se activa, cambiando la dirección de flexión a columna en la clase de navegación del sitio, haciendo que su contenido sea vertical (columna) en lugar de la horizontal predeterminada (fila). En este ejemplo, debido a la variable predeterminada dada a la navegación del sitio, ni siquiera necesita la definición inicial : raíz de –flex-layout; en lugar de eso irá directamente a la fila.

Bajo 640px, la consulta de medios se activa, cambiando la dirección de flexión a la columna y haciendo que el contenido sea vertical en lugar de horizontal

Esto es genial, pero no es todo diversión y juegos todavía. Por ejemplo, dado que la consulta de medios no es un elemento, el valor del punto de interrupción no puede provenir de una propiedad personalizada. Si bien el Grupo de Trabajo CSS tiene un borrador del uso de env () para consultas, la implementación del proveedor y el soporte adecuado probablemente estén a muchos años de donde están las cosas hoy en día.

Casos más avanzados de uso

Esta bien. Nos apegaremos a lo que tenemos ahora. Un caso de uso más avanzado para una propiedad personalizada es el cambio de temas. Puede definir un tema base, construir su sitio web a su alrededor y simplemente cambiarlo, con el navegador haciendo el trabajo pesado. Y ni siquiera es tan pesado.

Esencialmente, piense que está en la línea del Modo Nocturno de Twitter, pero sin que usted realmente cambie el CSS (lo veo).

El valor seleccionado del color de entrada reemplaza el valor de color –color del documento , realizando el cambio sin problemas. Puedes jugar con modos de mezcla, colores de canal alfa o pngs: infinitas posibilidades y diversión.

Puedes construir tu sitio web alrededor de un tema base y simplemente cambiarlo, con el navegador haciendo el trabajo pesado

Ahora con su CSS preparado para el futuro, que no depende de ningún desarrollador externo y utiliza solo propiedades personalizadas, es muy probable que esté cubierto y listo para comenzar la producción.

Modulos CSS

Pero, ¿qué pasa si quieres algo más que variables en tu código, digamos módulos CSS? A partir de hoy, para las características de CSS existentes como módulos o anidamiento, no podría prescindir del paso de compilación adicional por más tiempo, pero puede implementarlo con la dulce promesa de no tener que volver a escribir el código cuando los proveedores alcancen la especificación.

En lugar de refactorizar su CSS cada vez que quiera mejorar su salida, debe escribir su código en una especificación alineada de esa manera en primer lugar. Esta es la principal diferencia entre preprocesadores y postprocesadores. Un preprocesador en realidad escribe el CSS por usted (básicamente, desde un archivo de texto), mientras que un postprocesador alinea su CSS ya válido para obtener más soporte para el navegador, este último le brinda más flexibilidad en el proceso.

El uso del método nativo siempre es mejor que la solución, y tener el conocimiento práctico de las tecnologías futuras es la mejor posición en la que puede estar al aprender CSS.

Háblame ;)
¿Necesitas ayuda?
Hola! Necesitas ayuda? hablemos por WhatsApp :)