Premio de francisca...

Hola a todos, como sabreís francisca habia ganado el concurso y me pidió una firma de Juvia Lockser. Aqui se la traigo:

Espero que te guste, si quieres otra dimelo...

Por cierto dayi y kumi, recordad que todavía teneís que pedir vuestros premios. Podeís verlos aqui.

¿Proyecto bloggers? - Mejor explicado -

Ya lo sé, no es un nombre muy bueno pero en fin xD rapidito, este es un proyecto en lo que los bloggers podemos quedar con otros bloggers y ¿Os gusta la idea? Ahora os lo explico mejor, a ver. Este es como un chat en el que podemos hablar y preguntarnos cosas de un blogger a otro. No tienen que preguntarme a mi exactamente, puede ser a quien quieras. Si te quieres unir avisame, puedes acceder haciendo clic... 

- AQUI -

¿Donde saque la idea? Una estupidez de las mias xD

Efecto rotación + Reflexión

Acabaremos la semana con un tutorial muy útil. Seguramente que casi todos tienen un blog en los que suben avatares, imagenes. Para tenerlos mas elegante y ordenados trataremos hacer el efecto que está en esta preview. ¡Comencemos! 

 Primero nos vamos a plantilla y buscamos el famoso ]]></b:skin> y arriba ponemos:

@keyframes traslade {/*Nombre del frame*/
from,8% { transform: rotateY(0deg);}/*Empiesa la animacion*/
16%,24% { transform: rotateY(60deg);}
32%,40% { transform: rotateY(120deg);}
48%,56% { transform: rotateY(180deg);}
64%,72% { transform: rotateY(240deg);}
80%,88% { transform: rotateY(300deg);}
96%,to { transform: rotateY(360deg);}/*Termina la animacion*/
}
@-webkit-keyframes traslade {/*Nombre del frame Chrome y Safari*/
from,8% { -webkit-transform: rotateY(0deg);}/*Empiesa la animacion*/
16%,24% { -webkit-transform: rotateY(60deg);}
32%,40% { -webkit-transform: rotateY(120deg);}
48%,56% { -webkit-transform: rotateY(180deg);}
64%,72% { -webkit-transform: rotateY(240deg);}
80%,88% { -webkit-transform: rotateY(300deg);}
96%,to { -webkit-transform: rotateY(360deg);}/*Termina la animacion*/
}
@-moz-keyframes traslade {/*Nombre del frame Firefox*/
from,8% { -moz-transform: rotateY(0deg);}/*Empiesa la animacion*/
16%,24% { -moz-transform: rotateY(60deg);}
32%,40% { -moz-transform: rotateY(120deg);}
48%,56% { -moz-transform: rotateY(180deg);}
64%,72% { -moz-transform: rotateY(240deg);}
80%,88% { -moz-transform: rotateY(300deg);}
96%,to { -moz-transform: rotateY(360deg);} /*Termina la animacion*/
}
#traslade {
/*Code para Chrome y Safari*/
-webkit-animation-duration: 20s; /*Tiempo que tarda la animacion (20 segundos)*/
-webkit-animation-name: traslade; /*Nombre de nuestro frame*/
-webkit-animation-iteration-count: infinite; /*duracion de la animacion*/
/*Code para Firefox*/
-moz-animation-duration: 20s; /*Tiempo que tarda la animacion (20 segundos)*/
-moz-animation-name: traslade; /*Nombre de nuestro frame*/
-moz-animation-iteration-count: infinite; /*duracion de la animacion*/
/*indicamos el tipo de tranformacion*/
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
margin: 20px auto;
padding: 30px;
width: 200px;
height: 150px;
}
#traslade img {
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
padding: 5px;
position: absolute;
text-align: center;
width: 180px;/*Tamaño de cada imagen*/
}

.conten-efect-cuatro {
-moz-perspective:700px; /*perspectiva del objeto (Firefox)*/
-webkit-perspective: 700px; /*perspectiva del objeto (Chrome)*/
perspective: 700px;
}

/*posicion que mantiene cada foto*/
#photo-uno {
-webkit-transform: rotateY(0deg) translateZ(200px);
-moz-transform: rotateY(0deg) translateZ(200px);
transform: rotateY(0deg) translateZ(200px);
}
#photo-dos {
-webkit-transform: rotateY(-60deg) translateZ(200px);
-moz-transform: rotateY(-60deg) translateZ(200px);
transform: rotateY(-60deg) translateZ(200px);
}
#photo-tres {
-webkit-transform: rotateY(-120deg) translateZ(200px);
-moz-transform: rotateY(-120deg) translateZ(200px);
transform: rotateY(-120deg) translateZ(200px);
}
#photo-cuatro {
-webkit-transform: rotateY(-180deg) translateZ(200px);
-moz-transform: rotateY(-180deg) translateZ(200px);
transform: rotateY(-180deg) translateZ(200px);
}
#photo-cinco {
-webkit-transform: rotateY(-240deg) translateZ(200px);
-moz-transform: rotateY(-240deg) translateZ(200px);
transform: rotateY(-240deg) translateZ(200px);
}
#photo-seis {
-webkit-transform: rotateY(-300deg) translateZ(200px);
-moz-transform: rotateY(-300deg) translateZ(200px);
transform: rotateY(-300deg) translateZ(200px);
}
/*FIN*/

Un codigo interminable  Pero ya está.

Copia y pega el siguiente codigo en donde desees el efecto:

<div class="conten-efect-cuatro">
<div id="traslade">
<img id="photo-uno" src="img/foto-01.jpg">
<img id="photo-dos" src="img/foto-02.jpg">
<img id="photo-tres" src="img/foto-03.jpg">
<img id="photo-cuatro" src="img/foto-04.jpg">
<img id="photo-cinco" src="img/foto-05.jpg">
<img id="photo-seis" src="img/foto-06.jpg" >
<div style="clear:both"></div>
</div>
</div>

Cualquier duda preguntenme -

Hoy no quiero acabar con mi firma, quiero acabar con este video que les hará pensar.

-REFLEXIÓN-

Personalmente, el video me ha parecido increible. Por favor, veanlo... 

Nos enseña a valorar lo que tenemos, y que no importan las opiniones de los demás.

~ Luis ~

Nuevo concurso + Dibujos mios

Creo que me he vuelto adicto a los concursos  Pero esta ves me presento a uno de dibujo que lo organiza Dramas Asiáticos. ¿Te gustaría participar a ti también?  Los premios son buenísimos pero recuerda que esto no se hace por ganar si no por divertirse.. Para saber las bases y más clic en la imagen de arriba Y el dibujo que presentaré es este.

Calidad 0... No tenía scanner

Este lo hice hace mucho asi que seguramente tenga muchos errores, y tal... Dibujaba horrible  Ahora dibujo mejor pero no pude hacer uno por falta de tiempo...  Si no me creen aqui hay otro dibujo mio (este no es para el concurso):

Tengo dibujos gores pero son muy... Mejor que no los vean xD Recuerda... Presentate y por favor votame cuando empieze. Por cierto, si participas tienes que decir que yo te invite :)

Y eso es todo! ¡Bye!

Recuerda comentar, eso nos hace a todos felices

Subir una foto a la red

Hola everybody  aqui os traigo un tutorial... ¿Calentito? (Déjenlo xD) Es un tutorial que trata sobre subir una imagen a internet... Es decir cuando tenemos que subir una foto a internet para obtener su url. Muy bien, comencemos con el tutorial o(>U<)o

Primero nos vamos a esta página. Y pulsamos en seleccionar archivo. Se nos abrirá una ventana y seleccionaremos una foto. La subiremos y saldrá algo asi:

Esto es o que te saldria al subir la imagen 

Para sacar la url ponemos el ratón sobre la imagen y en clic derecho, luego en copiar url de imagen.

Sencillo, ¿no?

Espacio Publicitario

¿Ya has visto los nuevos fondos de dayi?  ¡Clic aqui!

¡Kumi te enseña a hacer un boton spoiler con una imagen! Clic aqui

Fransisca nos enseña lo mejor de japón. Clic aqui

Redes Sociales galaxy

¡Hola hola! Aqui un tutorial muy elegante para las redes sociales  Son muchos efectos pero empezaremos con el básico.... Veamos una vista previa,  clic ¡aqui! Mola mucho (al menos a mi) Comencemos ¿Ok? ·    ·

Solo es dificil porque son muchos códigos

Nos vamos a plantilla y antes de ]]></b:skin>

.social-ax > a {
border: 1px solid #CCCCCC;
display: inline-block;
height: 70px;
line-height: 0;
margin: 0 20px 10px;
padding: 4px;
position: relative;
width: 70px;
}
.social-ax > a > span {
background-color: rgba(0, 0, 0, 0.7);
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiGDy74HVXwCISI4CqzW7YHD9BmP1tUrBbJSEpp3KNNf7odd30QOCerRWWGskdY2a0Ch_gckFBHqnsI_FMtpMGZR_lTAA6MdjttsQ5anFA_VpCFVHic0HHa7d4EpcUOxWyJBgKjM3CLqve/s1600/all-icons.png");
background-repeat: no-repeat;
display: block;
height: 70px;
position: absolute;
top: 4px;
width: 70px;
z-index: 50;
transition: all 300ms ease-in-out 0s;
-moz-transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
-o-transition: all 300ms ease-in-out 0s;
}
.facebook-zk > span {background-position: 7px 2px;}
.twitter-zk > span {background-position: -92px 2px;}
.google-zk > span {background-position: -194px 2px;}
.youtube-zk > span {background-position: -292px 2px;}
.rss-zk > span {background-position: -393px 1px;}
.social-ax.fade > a > span {opacity: 0;}
.social-ax.fade > a > span:hover {opacity: 1;}

Ya está, ahora a hacer el efecto... si lo quieres en tu blog lo pones con este código, en un gadget o lo que quieras:

<div class="social-ax fade">
<a target="_blank" href="enlace" class="facebook-zk">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNWZ-KEhPgjE21qs2Ru_zWAryCige5A_smnmpc1W0Q5Ie7mu5BZjNCzgLSXBITa0lXdz_HRTX34sPl5kflZobfMGgLLTG7ycqM7btpU4S-zpcK1dxPbgb1Cr6hTBsQGiVU1N-8qhD77utp/s1600/01.jpg">
<span></span>
</a>
<a target="_blank" href="enlace" class="twitter-zk">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG6W-BYTWXbOp3Ys7b2GvzkxjmB0wV6e5fM7g3V3X2w8RTzAZvQ4MeL1dxVYmNXeJNr9sYNGA71AhsHxb9pe0aKyqAAAOlqT_SeVDkICUc30AQqQbUhE_z8aR5tfIvHSUTUNjebiMW-J5l/s1600/02.jpg">
<span></span>
</a>
<a target="_blank" href="enlace" class="google-zk">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVXdcsulJkKpi0pseq5LdR_p27fHAxvkwSDNw9sdoIRZEmg2ynn-BNeTKiuLFwOyCtKWP6xeYaaS2tH3dUnKfZwQG75RgOXfEw4uRqjk0PdwuInrGAw_kD80614Zg6ky9kqDX3IUACP_dp/s1600/03.jpg">
<span></span>
</a>
<a target="_blank" href="enlace" class="youtube-zk">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKWQ-ILKzuqiLWhwKH_PD1uix3mTE1XnQXf3WjUA2SK-ILBNRVRICvNoWyS_7Er5zxiOvT8JWGJEXmFqSNaF1ZIZR_FTO1uEwIHUydbk8f2yDbWt6-qmzoihS18OdD1z5DhyAyKbENpnTo/s1600/04.jpg">
<span></span>
</a>
<a target="_blank" href="enlace" class="rss-zk">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0AmC9uchF0c3OWctgbw5j_i3RezhzDwf6mVu0oFwpKbCUPcU4Ukk3lcrC8Wb4hJuXajs6RXJxgjwMnHdDFvRUPAhcFOQw2ZhApXYs4-Uxc4WJTFyysBagpbtwAEIdnxcGdcfIM8_o2Oq4/s1600/05.jpg">
<span></span>
</a>
</div>

En otro tutorial aprenderemos otro efecto del mismo tipo, espero que os gustara  Y eeeeen fin, eso es todo por ahora.

Espacio Publicitario

· Te gustaría unos fondos para tu blog? ¡Clic aqui! ·

¿Otra vez?

-------------- Nuevo tema... ¿De nuevo? -------------- 

Ya, ya lo se ¿Otra vez remo?  Bueno, primero esta remo la hice porque se acerca el verano en España, me ire de vacaciones y no podre publicar mucho... Por eso me gustaria aunque sea el blog "ordenado" y realmente el tema Hot Summer no me gustaba mucho, prefiero este que se llama "Fly in the stars" 

-------------- ¿Alguna novedad? -------------- 

Bueno, si hay algunas novedades... El verano comienza en unas 2 semanas asi que no tendre tiempo para el blog (durmiendo everyday  ) Nah, en realidad me voy de vacaciones, yo quiero quedarme aqui pero mi madre me obliga a ir ... Por eso, puede solo puede que una amiga mia se ponga a escribir en el blog ya que es otaku y tal...

Eso es todo de momento  ¡Saludos!

Recuerda comentar - clic Aqui