GIFS REDEANDO BLOG - Volumen 1



Siempre me han gustado las imagenes en movimiento y soy un aficionadillo haciendo practicas, de las cuales he publicado bastantes para ilustrar los articulos de este blog.

He recopilado en este pack unas 20 imagenes para el que guste descargarselas llamado: ¡¡¡GIFS REDEANDO BLOG - Volumen 1!!!






Estos GIFS los he realizado extrayendolos bien de videos, haciendo fotomontajes y utilizando programas para capturas y editores varios. Espero que os gusten y espero hacer mas y mejores imagenes en el Volumen two.








descargar GIFS REDEANDO BLOG


Pixels, imaginacion ochentera

comentar




Pixels es un corto creado por Patrick Jean que homenajea la época de los ochenta con esa pasión por el píxel y la imaginación a raudales. Un corto que nos sitúa en nuestro mundo, teniendo que afrontar una invasión de personajillos sacados de los videojuegos de antaño. Una misión que se nos antoja complicada, ya que sus ataques nos convertirán en seres pixelados.



leer articulo ➨

Bordes animados en las imagenes

comentar



Vamos a ver como utilizando un codigo cortito, aprovechando las posibilidades de animacion que nos da el CSS, le daremos un toque mas cool a nuestras imagenes.

Este truquillo nos permitira hacer que los bordes de nuestras instantaneas 'cobren vida', sin utilizar para ello ninguna otra imagen adicional.

Aqui podeis ver 2 ejemplos con el efecto en marcha, una imagen con los bordes redondeados y la otra no.









Para poner una o varias imagenes con los bordes animados en tu blog o web, primero copia y pega el siguiente codigo. Añade la url de la instantanea donde esta señalado en verde. Segun el tamaño en px que tenga la imagen quieras añadir, sera el mismo que tienes que escribir modificando donde esta indicado en color rojo (con informacion en azul). Tambien puedes variar el tamaño de los bordes y el radio de estos.

ver codigo
<div class="borde-animado-imagenes col-1 row-1"><img src="URL DE LA IMAGEN" /></div>
 

<style>
.borde-animado-imagenes.col-1 {
  width: 500px/* Ancho de la imagen */
  height: 334px; /* Alto de la imagen */
  border-width: 15px 15px; /* Ancho de los bordes */
  border-radius: 20px; /* Bordes redondeados */
}
@keyframes borde-animado-imagenes-row-1{
  0% {
    border-color: rgba(0, 0, 0, 0.25);
    border-top-color: black;
  }

  25% {
    border-color: rgba(0, 0, 0, 0.25);
    border-right-color: black;
  }

  50% {
    border-color: rgba(0, 0, 0, 0.25);
    border-bottom-color: black;
  }

  75% {
    border-color: rgba(0, 0, 0, 0.25);
    border-left-color: black;
  }

  100% {
    border-color: rgba(0, 0, 0, 0.25);

    border-top-color: black;
  }
}

.borde-animado-imagenes {
  border: 15px solid black;
 }
.borde-animado-imagenes.row-1 {
animation: borde-animado-imagenes-row-1 750ms linear infinite;
}
</style>




leer articulo ➨