13 sept. 2014

Tutorial: Caja con efecto para créditos [by me]

Hey hey hey Hace unos días pensé en hacer un proyecto para todas, pero como están la mayoría estudiando, en vacaciones, etc, no quise hacerlo en esta entrada sin preguntar.
¿Les gustaría que hiciera el proyecto ahora? Por favor comenten si tienen tiempo y si les gustaría para saber si alguien se uniría :c Y sino pues más adelante, o lo que sea. Tengo una ideita en mente pero tengo que pensarlo mejor.
Bueno como aún no sabía lo del proyecto pensé en traerles un tutorial de cómo poner una cajita para sus créditos, así como la mia. Supongo que ya habréis visto mi gadget de créditos, las que no lo hayan visto bajen y miren mi último gadget para que así puedan ver el efecto ^^

Vamos a Plantilla>>Editar HTML y pegamos el código arriba de  ]]></b:skin> 
.credits {
position: relative;
margin: 10px auto;
}
.infocredits {
position: absolute;
top: 5%;
left: 5%;
zoom: 1;
filter: alpha(opacity=0);
opacity: 0;
padding: 5px;
color: #848484; /*Color del texto*/
background: #FFFFFF; /*Color del fondo de la caja*/
border:2px solid #E3CEF6; /*Color del borde y ancho*/
border-radius:15px;
-moz-transition:all ease .8s;
-webkit-transition:all ease .8s ;
transition:all ease .8s;
}
.credits:hover .infocredits {
filter: alpha(opacity=80);
opacity: .8;
}
Así mismo es como lo tengo yo, si quieren hacerle un ligero cambio prueben a cambiar el número de opacidad, el tamaño, o le añaden lo que quieran si así no les gusta, pero a mi gusto se ve bien así porque ya lo edité yo.~

Y ahora lo ponemos en gadget, que sería lo siguiente:
<center><div class="credits"><img src="url de tu imagen" /><span class="infocredits">
 <p>Aqui lo que vayas a escribir</p>
</span></div></center>
Rojo: Ahí va el url de la imagen que se ve principalmente antes de poner el cursor por encima
Azul: Ahí escribes lo que tu quieras, si quieres poner otro párrafo más pues debajo de esa línea pones lo mismo, así:

<center><div class="credits"><img src="url de tu imagen" /><span class="infocredits">
 <p>Aqui lo que vayas a escribir</p>
 <p>Aqui lo que vayas a escribir</p>
</span></div></center>

Bueno eso sería todo, espero que les haya gustado mi cajita de créditos personalizada, ya saben si tienen alguna dudita dejen su comentario y también sobre lo de la idea del proyecto, besitos

8 comentarios:

  1. creo que el proyecto es buena idea ^u^ aunque yo no se si tendré mucho tiempo, justamente me has pillado en los días que comienzo el instituto >3< pero por ahora no tengo tareas, así que por ahora puedo (^u^)b
    el tuto me encantó *0* seguramente lo use :3
    saluditos! ^^

    ResponderEliminar
  2. ¡Ah! Que lindo tutorial, un efecto muy lindo para los créditos. Seguro que lo uso uno de estos días para la plantilla que estoy haciendo.

    Con lo del proyecto, yo tengo tiempo estos días. Así que, si decides hacerlo, tienes mi apoyo.

    ¡Saludos!

    ResponderEliminar
  3. Me encantó el tutorial, está muy cute!! ^^
    Y tengo mucha curiosidad con lo del proyecto o.o

    ResponderEliminar
  4. Excelente tuto :3
    Pues creo que estaria bien saber sobre que es el proyecto, si se me hace interesante tal vez me anime a unirme XD
    Saludos!!

    ResponderEliminar
  5. sooo kawaiiii your blog *-* like it

    ResponderEliminar

Gracias por dejar tu saludito ·ω· Si tienes algún error o necesitas ayuda con un tutorial, dale a ''haz click aquí'' en la cabecera y mándame un e-mail diciéndome lo que necesitas y si sólo tienes dudas de algo te contestaré en tu blog para que puedas verlo♥♥
––––•(-•RECUERDA: Si quieres afiliar y/o que visite tu blog, pídemelo en ''Afiliados'' en el menú de la cabecera, o en la C-Box (sólo en esos dos sitios, o sino no aceptaré)`•.¸¸.•´´¯`••._.•