2 Flash mas para que felicites el 2013

Si el otro dia ya publique 2 flash para felicitar el año nuevo, ahora he diseñado otros 2 mas para la ocasion. Esta vez he optado por poner el numero del año de fondo estatico, con efectos como los muerdagos o la nieve cayendo, estrellitas y otro tipo de animacion para el texto. Para añadirlo a tu pagina, tan solo tienes que elegir el que mas te guste, copiar el codigo y pegarlo en un gadget o elemento HTML. El tamaño lo puedes modificar para que se adapte a tu blog cambiando los numeros en width (ancho) y height (alto).

<center><embed src="http://fc07.deviantart.net/fs70/f/2012/365/b/0/1_by_johnnyuve-d5pssi4.swf" quality="high" type="application/x-shockwave-flash" wmode="transparent" width="480" height="300" pluginspage="http://www.macromedia.com/go/getflashplayer" allowScriptAccess="always"></embed></center>

<center><embed src="http://fc01.deviantart.net/fs70/f/2012/365/a/f/1_by_johnnyuve-d5pssvk.swf" quality="high" type="application/x-shockwave-flash" wmode="transparent" width="480" height="300" pluginspage="http://www.macromedia.com/go/getflashplayer" allowScriptAccess="always"></embed></center>

leer articulo ➨

Peces animados con Javascript y CSS3

3 comentaron

El joven diseñador web Adam Drago es el realizador de esta simpatica animacion. Para ello, ha utilizado 2 imagenes de los peces, Javascript y CSS3 para el fondo, las burbujas y las animaciones.

ver/descargar el codigo

leer articulo ➨

Gifs para enlazar tus redes sociales

8 comentaron

Normalmente utilizamos iconos en el blog que enlazan con nuestras cuentas en redes sociales. Estas imagenes suelen ser estaticas y en formato png, pero tambien las podemos utilizar animadas para darle un toque diferente y llamar la atencion de nuestros usuarios/lectores. Eso mismo es lo que pense yo y me puse a diseñar estas 3 imagenes en formato gif para que enlacen con las cuentas en Twitter, Google+ y Facebook.

Si te gustan, puedes ponerlas en tu blog, copiando los codigos correspondientes que he preparado para la ocasion. Si lo que prefieres es descargartelas para alojarlas tu mism@, puedes hacerlo en el boton de abajo.

Twitter

<a href="URL DE TU CUENTA DE TWITTER" target="_blank"><img style="border:2px solid #00ACEC;" class="gifsocial" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGai8EFXWUW2E7l6wirERFoeyNjnc0I3iwZ7-L_kfUKadKpPth3sSF3l9AqVwbgRKOfBaXjgrUHMffPk6Xcpl-njq22KON9d02ofqPyFAyNYYpBfSRIOWRQGx-ny4ZrGAl6NVYf_5Rc9I/s198/Twitter%2520-%2520REDEANDO.gif" /></a><style>.gifsocial:hover{-webkit-box-shadow: 0px 0px 7px rgba(50, 50, 50, 0.75);-moz-box-shadow:    0px 0px 7px rgba(50, 50, 50, 0.75);box-shadow:         0px 0px 7px rgba(50, 50, 50, 0.75);}</style>

Google+

<a href="URL DE TU CUENTA DE GOOGLE+" target="_blank"><img style="border:2px solid #000000;" class="gifsocial" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8EyoJACJ5ZKzYwLgYncp0eaJX7CIxwMf5HAdf63fdvDz7JP-AXmF6PmUUFOElei-3slxJy_l2GTYbmEXemIjkpuoftZ7H9Pzpfx3Ypr2V8bgsp9QMoFM0uVUlsNi8ASS-aRj8bK3hOuY/s198/GooglePlus%2520-%2520REDEANDO.gif" /></a><style>.gifsocial:hover{-webkit-box-shadow: 0px 0px 7px rgba(50, 50, 50, 0.75);-moz-box-shadow:    0px 0px 7px rgba(50, 50, 50, 0.75);box-shadow:         0px 0px 7px rgba(50, 50, 50, 0.75);}</style>

Facebook

<a href="URL DE TU CUENTA DE FACEBOOK" target="_blank"><img style="border:2px solid #3B5998;" class="gifsocial" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXqXv6luzGAnIaOFfQOdsAbDAo1fc_q3UuKzYOMfdyaBkO5R9LaQKUanCdANUO1h5h7utLic_c1ap0Vayg4o6iCKszVIU-KtpL6_N3TnepwWfEfAGFI5OD5qm6pQcvPQSOUGhS20ZyngQ/s198/Facebook%2520-%2520REDEANDO.gif" /></a><style>.gifsocial:hover{-webkit-box-shadow: 0px 0px 7px rgba(50, 50, 50, 0.75);-moz-box-shadow:    0px 0px 7px rgba(50, 50, 50, 0.75);box-shadow:         0px 0px 7px rgba(50, 50, 50, 0.75);}</style>

descargar las imagenes

leer articulo ➨

Fuego en el texto

comentar

Ya hemos visto distintas maneras de personalizar textos en este mismo blog, esto siempre nos da mucho juego a la hora de realizar titulos y cualquier cosa que queramos anunciar o resaltar en nuestro blog. En este caso vamos a ver como con un pequeño codigo CSS3, utilizando la propiedad text-shadow, conseguimos que nuestro texto parezca que esta ardiendo.

Para conseguir este efecto, tan solo tienes que copiar el siguiente codigo y pegarlo donde tu quieras. Escribe el texto que desees donde esta indicado en color rojo, si quieres cambiar el tamaño de la letra hazlo donde pone font-size:50px.

<span class="fuego">Aqui escribe tu texto</span>

<style>
.fuego {
color:white; letter-spacing:1px; font-size:50px;
text-shadow: 0 2px 5px #FF8800,
             0 0 3px white,
             0 -3px 4px #FFFF33,
             0 -7px 10px #FFDD33,
             0 -15px 12px #FF8800,
             0 -25px 26px #FF2200;
}
</style>

Aqui veis el resultado final, un texto con fondo claro y el otro con fondo oscuro.

Me estoy quemando

Yo estoy que ardo

leer articulo ➨

Geniales imagenes animadas

2 comentaron

De la mano de un aficionado a crear gifs animados que se hace llamar ABVH, os traigo estas imagenes animadas tan originales hechas con mucha creatividad. A mi me han gustado mucho y queria compartirlas con tod@s vosotr@s.

leer articulo ➨

Panel de articulos recientes para Blogger

9 comentaron

Existen varios widgets para mostrar las entradas de Blogger, pero muchos estan anticuados o son bastante sosetes. Pensando un poco en este tema, he diseñado este panel en el que mostraremos los articulos del blog de una forma mas actual y profesional. Esta realizado utilizando jQuery, JSON y CSS3, y nos permite mostrar tantas entradas como queramos. Tambien, como podeis observar, al pasar el cursor sobre cualquiera de las imagenes, nos aparece un tooltip que nos informa del titulo y un pedacito de texto de dicho articulo. Este widget, por su tamaño, esta especialmente indicado para ponerlo en un gadget HTML grande, como por ejemplo debajo de las entradas o en el footer.

Si te gusta y quieres ponerlo en tu blog, copia el siguiente codigo y pegalo en un gadget HTML. Tienes que escribir la url de tu blog donde esta indicado en rojo para que se vean tus entradas. Tambien puedes indicar la cantidad de articulos que quieres mostrar, indicandolo donde esta en color verde, pero siempre deben de ser de 7 en 7, como por ejemplo 28, 35 o 42.

ver/ocultar codigo

<center><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var rpTitle     = "Articulos recientes",
    numposts    = 42,
    numchar     = 100,
    rcFadeSpeed = 600,
    pBlank      = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl_0hX8YA85Vd0G5n2tQHquNW69ABpuD2N7SxxWAjDQJUJpwcmZ961mxS0QyfRXdwIjVfcsliLxjzmZxtEsKz0stcKA_G81_pU6jpd-Stazr6d192Ai6KqwcLEW9isSX9Kk9kAGgNNvyU/s204/images.jpeg",
    blogURL     = "http://urldetublog.blogspot.com";
</script>
<script>
$(function() {
$('div.rp-item img').hide();
$('div.rp-child').removeClass('hidden');

var winWidth = $(window).width(),
winHeight = $(window).height(),
ttWidth      = $('div.rp-child').outerWidth(),
ttHeight = $('div.rp-child').outerHeight(),
thumbWidth   = $('div.rp-item').outerWidth(),
thumbHeight = $('div.rp-item').outerHeight();

$('div.rp-item').css('position', 'static').mouseenter(function() {
$('div.rp-child', this).filter(':not(:animated)').fadeIn(rcFadeSpeed);
}).mousemove(function(e) {
var top = e.pageY+20,
   left = e.pageX+20;

   if (top + ttHeight > winHeight) {
    top = winHeight - ttHeight - 40;
   }
   if (left + ttWidth > winWidth) {
    left = winWidth - ttWidth - 40;
   }

$('div.rp-child', this).css({top:top, left:left});

}).mouseleave(function() {
$('div.rp-child', this).hide();
});
});

function showrecentposts(json) {
var entry = json.feed.entry;
for (var i = 0; i < numposts; i++) {
var posturl;
for (var j=0; j < entry[i].link.length; j++) {
   if (entry[i].link[j].rel == 'alternate') {
    posturl = entry[i].link[j].href;
    break;
   }
}

if ("content" in entry[i]) {
   var postcontent = entry[i].content.$t;
} else if ("summary" in entry[i]) {
   var postcontent = entry[i].summary.$t;
} else {
   var postcontent = "";
}

var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (postcontent.length > numchar) {
   postcontent = postcontent.substring(0,numchar) + '...';
}

var poststitle = entry[i].title.$t;

   if ("media$thumbnail" in entry[i]) {
    postimg = entry[i].media$thumbnail.url
   } else {
    postimg = pBlank
   }

document.write('<div class="rp-item"><a href="' + posturl + '"><img src="' + postimg + '" alt="thumb" /></a>');
document.write('<div class="rp-child hidden"><h4>' + poststitle + '</h4>');
document.write(postcontent + '</div>');
document.write('</div>');
}
}
document.write('<div id="mini-gallery"><h2>' + rpTitle + '</h2><sc' + 'ript src="' + blogURL + '/feeds/posts/default?max-results=' + numposts + '&orderby=published&alt=json-in-script&callback=showrecentposts"></sc' + 'ript><div style="clear:both;"></div></div>');

var i = 0, int=0;
$(window).bind("load", function() {
var int = setInterval("doThis(i)",400);
});

function doThis() {
var imgs = $('div.rp-item img').length;
if (i >= imgs) {clearInterval(int);}
$('div.rp-item img:hidden').eq(0).fadeIn(400);
i++;
}
</script></center>
<style type="text/css">
#mini-gallery {
width:532px;
margin:0px auto;
font:normal 11px Verdana,Arial,Sans-Serif;
color:#494848;
padding:8px;
background-color:#7E7E7E;
-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
box-shadow:0px 1px 3px rgba(0,0,0,0.4);
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}

#mini-gallery h2 {
font:bold 18px century gothic;
color:#cdcdcd;text-align:center;
text-shadow:1px 1px 1px black;
text-transform:uppercase;
margin:2px 2px 2px;letter-spacing:1px;
padding-top:5px;padding-bottom:10px;

}

#mini-gallery .rp-item {
float:left;
display:inline;
position:relative;
margin:2px;
padding:0px 0px;
background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhduGj5cNJMshuT5QuvaQDJ2wXzb6ecinwncwkJrCXGXXBL3ooaA7XenV1PPWT1BoBEb_K1D6BJlmGv1PxHTLZ2cz27_h4P3VmYTA0IhkrM81NGC8_40ODj6UW9NM4Ggu01LlJgy0mQz0E/s48/loading-white.gif') no-repeat 50% 50%;
width:72px;
height:72px;
}

#mini-gallery .rp-item img {
width:72px;
height:72px;
border:none !important;
margin:0px 0px !important;
padding:0px 0px !important;
background:transparent !important;
display:none;
}

#mini-gallery .rp-item img:hover {-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);box-shadow: 0px 0px 10px rgba(0,0,0,.8);}

#mini-gallery .rp-item .rp-child {
position:absolute;
top:0%;
right:0%;
z-index:1000;
width:200px;
background-color:white;
border:4px solid #6FBAFD;
-webkit-box-shadow:0px 0px 3px rgba(0,0,0,0.7);
-moz-box-shadow:0px 0px 3px rgba(0,0,0,0.7);
box-shadow:0px 0px 3px rgba(0,0,0,0.7);
-moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;
padding:10px 15px;
overflow:hidden;
word-wrap:break-word;
display:none;
}

#mini-gallery .rp-item .rp-child h4 {
font-size:16px;
margin:0px 0px 5px;
color:#0874CC;
-webkit-text-shadow: 1px 1px 1px #000000;-moz-text-shadow: 1px 1px 1px #000000;text-shadow: 1px 1px 1px #000000;
}

#mini-gallery .rp-item:hover .hidden {display:block;}
</style>

leer articulo ➨

2 Flash para felicitar el año nuevo

9 comentaron

El 2013 ya esta ahi a la vuelta de la esquina, por eso me he apresurado a diseñar estos 2 flash animados para quien quiera ponerlos en su blog o web y felicitar el nuevo año a sus usuarios.

Para añadirlo a tu pagina, tan solo tienes que elegir el que mas te guste, copiar el codigo y pegarlo en un gadget o elemento HTML. El tamaño de estos es mas pequeño del que ves aqui (230x230), pero si quieres cambiarlo, modifica los numeros donde pone width (ancho) y height (alto).

<center><embed src="http://fc01.deviantart.net/fs71/f/2012/355/0/8/1_by_johnnyuve-d5optun.swf" quality="high" type="application/x-shockwave-flash" wmode="transparent" width="230" height="230" pluginspage="http://www.macromedia.com/go/getflashplayer" allowScriptAccess="always"></embed></center>

<center><embed src="http://fc00.deviantart.net/fs71/f/2012/355/7/e/navidadan_by_johnnyuve-d5opujh.swf" quality="high" type="application/x-shockwave-flash" wmode="transparent" width="230" height="230" pluginspage="http://www.macromedia.com/go/getflashplayer" allowScriptAccess="always"></embed></center>

leer articulo ➨

Iconos sociales CristalBall

comentar

Utilizando una tecnica con javascript, he conseguido diseñar estos iconos con forma de bola de cristal. Este pack consta de 5 imagenes png de 50px × 50px: Facebook, Google+, Twitter, Youtube y Feed. Si te gustan y los quieres poner en tu blog o web, te los puedes descargar gratis.

descargar

leer articulo ➨

Superbarra de busqueda para Blogger

comentar

Todos sabemos lo importante que es el formulario de busqueda para un blog para localizar los articulos. Lo esencial es que este a la vista para que nuestros lectores encuentren lo que estan buscando, y creo que esta la veran seguro. Se trata de un diseño basado en otra que vi hace poco, pero que he retocado y modificado a mi gusto. Como podeis ver, aparte de sus dimensiones, tiene un diseño elegante, actual y queda bien donde la pongas. Su funcion de busqueda en Blogger la realiza perfectamente sin problema alguno y esta realizada completamente con CSS3, o sea que no contiene ninguna imagen en su diseño.

Para poner esta superbarra en tu blog, te diriges a la Plantilla › Edición de HTML, buscas la etiqueta </header> y pegas el siguiente codigo justo arriba. Si no localizaras esta etiqueta, tambien puedes ponerlo en un gadget HTML en la parte de arriba de la cabecera. Para que la situes en el sitio exacto que tu quieras, modifica top:120px;right:20px; esto regula distancia de la barra desde la parte de arriba (top) y desde la parte derecha (right).

ver codigo

<form id="searchbox" action="/search" method="get"><input id="search" name="q" type="text" placeholder="buscar en este blog"><input id="submit" type="submit" value="Buscar"></form>

<style>

#searchbox
{       top:120px;right:20px;
        position:absolute;z-index:99999;
        background: #eaf8fc;
        background-image: -moz-linear-gradient(#fff, #d4e8ec);
        background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d4e8ec),color-stop(1, #fff));
        -moz-border-radius: 35px;
        border-radius: 35px;
        border-width: 1px;
        border-style: solid;
        border-color: #c4d9df #a4c3ca #83afb7;
        width: 500px;
        height: 35px;
        padding: 10px;
        margin: 10px auto 10px;
        overflow: hidden;
}
#search, #submit
{
        float: left;
}
#search
{
        padding: 5px 9px;
        height: 23px;
        width: 380px;
        border: 1px solid #a4c3ca;
        font: normal 13px 'trebuchet MS', arial, helvetica;
        background: #f1f1f1;
        -moz-border-radius: 50px 3px 3px 50px;
         border-radius: 50px 3px 3px 50px;
         -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
         -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
}
#submit
{
font-size: 18px !important;font-family:century gothic !important;color: #ffffff !important;font-weight: bold !important;text-shadow: -1px 0 #0C4EAF, 0 1px #0C4EAF, 1px 0 #000000, 0 -1px #0C4EAF, -1px 1px 2px #0C4EAF !important;
        background-image: linear-gradient(bottom, rgb(8,121,208) 41%, rgb(97,186,242) 71%);
background-image: -o-linear-gradient(bottom, rgb(8,121,208) 41%, rgb(97,186,242) 71%);
background-image: -moz-linear-gradient(bottom, rgb(8,121,208) 41%, rgb(97,186,242) 71%);
background-image: -webkit-linear-gradient(bottom, rgb(8,121,208) 41%, rgb(97,186,242) 71%);
background-image: -ms-linear-gradient(bottom, rgb(8,121,208) 41%, rgb(97,186,242) 71%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.41, rgb(8,121,208)),
    color-stop(0.71, rgb(97,186,242))
);
        -moz-border-radius: 3px 50px 50px 3px;
        border-radius: 3px 50px 50px 3px;
        border-width: 1px;
        border-style: solid;
        border-color: #0C4EAF #0C4EAF #0C4EAF;
         -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
         -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
         box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
        height: 35px;
        margin: 0 0 0 10px;
        padding: 0;
        width: 90px;
        cursor: pointer;
        font: bold 14px Arial, Helvetica;
        color: #23441e;
        text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
#submit:hover
{
        background-image: linear-gradient(bottom, rgb(97,186,242) 41%, rgb(8,121,208) 71%);
background-image: -o-linear-gradient(bottom, rgb(97,186,242) 41%, rgb(8,121,208) 71%);
background-image: -moz-linear-gradient(bottom, rgb(97,186,242) 41%, rgb(8,121,208) 71%);
background-image: -webkit-linear-gradient(bottom, rgb(97,186,242) 41%, rgb(8,121,208) 71%);
background-image: -ms-linear-gradient(bottom, rgb(97,186,242) 41%, rgb(8,121,208) 71%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.41, rgb(97,186,242)),
    color-stop(0.71, rgb(8,121,208))
);
}
#submit:active
{
        background: #087AD0;
        outline: none;
         -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
         -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
         box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
#submit::-moz-focus-inner
{
       border: 0; /* Small centering fix for Firefox */
}
#search::-webkit-input-placeholder {
   color: #9c9c9c;
   font-style: italic;
}
#search:-moz-placeholder {
   color: #9c9c9c;
   font-style: italic;
}
#search:-ms-placeholder {
   color: #9c9c9c;
   font-style: italic;
}
#search.placeholder {
   color: #9c9c9c !important;
   font-style: italic;
}

</style>

leer articulo ➨

Planeta Tierra con rotacion dia-noche

1 comentó

Vamos a ver como transformar una imagen estatica normal y corriente en una bola del mundo con efectos y animacion sin utilizar ningun tipo de javascript. En este caso vamos a utilizar la siguiente imagen del mapa terraqueo:

Ahora, aplicando solamente estilos CSS tales como border-radius, animation y box-shadow entre otras, conseguiremos 'redondear' la imagen y hacer que gire sin parar. Aplicandole las sombras pertinentes, ademas de darle una sensacion de relieve, imitaremos la funcion del sol, viendo como se hace de noche y de dia consecutivamente. ¿El resultado? Aqui mismo lo teneis.

ver codigo utilizado

leer articulo ➨

Navidad al ritmo de 'Gangnam'

comentar

¿Quien a estas alturas no conoce esta cancion del cantante surcoreano PSY? Es un fenomeno musical pegadizo actual comparable al del 'Asereje' de Las Ketchup o 'Macarena' de Los Del Rio. Gracias al poder de internet, su video musical ha recibido mas de 883 millones de visitas en YouTube sin tener en cuenta las visitas del sencillo subido a canales no oficiales. Y que mas actual que ver un video para estas fechas en el que aparece una casa con sus adornos navideños al ritmo galopante de 'Gangnam'.

leer articulo ➨

Menu social vertical

comentar

El menu que os propongo en esta ocasion no es para enlazar las secciones de vuestro blog o web, es para enlazar vuestras cuentas en las redes sociales. Como podeis ver, esta realizado con CSS3 y cuenta con 5 botones con los colores caracteristicos de cada red para conectar con vuestro Twitter, Google+, Facebook, Youtube y Feed RSS. Esta diseñado esencialmente para ponerlo en la sidebar y se ajusta al tamaño de esta automaticamente. Para añadirlo en vuestro blog o web, tan solo teneis que copiar el codigo de abajo y pegarlo donde querais mostrarlo. Recordad que teneis que poner las urls de vuestras cuentas y la de vuestro feed donde esta indicado.

leer articulo ➨

Generador de border radius

3 comentaron

Ahora, para redondear cualquier imagen o lo que sea, ya no tienes que utilizar ningun editor grafico. Con el CSS3 y la propiedad border-radius podemos convertir las esquinas planas de cualquier imagen o elemento en radiales. Para los que no dominen mucho esto de los codigos o simplemente por comodidad, REDEANDO te trae este generador, uno mas que se suma a nuestra lista de herramientas web. Su utilizacion es bien sencilla, escribe en cada esquina el numero de px que quieres redondear (lo veras en tiempo real), cuanto mas alto es el numero, mas circular se hara el borde. Una vez lo tengas, tan solo tienes que copiar el codigo que aparecera en el recuadro central, listo para que lo añadas a tus creaciones.

leer articulo ➨