Bordes animados en las imagenes



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>




Publica tus feeds con Social Stream Widget

comentar




La web Social Stream Widget nos ofrece un recurso muy interesante para poner en el blog, y ademas gratuitamente.

Este widget nos publicara automaticamente todos los feeds RSS de nuestro blog, asi como los de nuestras redes sociales, como podeis ver aqui debajo mismito.

No requiere de ningun tipo de registro, llegamos, elegimos los que nos interesen, añadimos la url RSS del blog y las de las redes sociales, bien sea el link o la numeracion de la cuenta.

Una vez tengamos esto, pasamos a personalizarlo a nuestro gusto, y despues clicamos en el boton 'Finish & Grab Code', donde nos proporcionaran el codigo listo para copiar y pegar.




visitar Social Stream Widget


leer articulo ➨

Juego de San Fermin 'Bull Run Fever'

comentar



Aprovechando las fechas en las que estamos, os traigo este juego proporcionado por la web Juegos Flasher basado en las popularisimas fiestas de Pamplona.

Disfruta de los encierros de San Fermines de una forma segura corriendo desde tu casa. Atento al chupinazo y empieza la carrera, recoge objetos que te ayudaran a salir de alli sin ninguna cornada, esquivando los obstaculos que encuentres.

Si te gusta y quieres ponerlo en tu blog o web, simplemente copia y pega el codigo de abajo y pegalo alli donde quieras mostrarlo.


CONTROLES:
  • Moverte
  • Saltar

<div align="center"><embed width="600" height="450" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" quality="high" menu="false" src="https://a954da7b-a-62cb3a1a-s-sites.googlegroups.com/site/redeando1/bullrunfever.swf"></div>


leer articulo ➨