[TUTORIALES]Efecto autoras o Friend's.+NEW REMO.

*Mira hay viene quien te gusta,actua natural....pose~!!*
Hola~Caramelitos{tengo ganas de dulce ahhhh}como estan?Yo pues muy bien,aunque mi madre se la pasa diciendo que soy una dormilona,por que no entiende que todavia {para mi}es vacaciones....creo que entre dos o tres semanas comienzo.Bueno creo que ya notaron que cambie el diseño del blog y la verdad me a encantado{lo se es hermoso}es mas mi estilo,ya que el azul claro es mi color favorito...lo que no me convence es la cabecera....{maldito photoshop que no quiere abrir}Pues solo puse algunas cositas nuevas & cambie las imagenes...pues a mi me gusta y a ustedes{esta todo convinado}ok,ya....espero saber que no les gusta la plantilla y lo que le gusta...Ademas cambie la cancion del blog,escuchala es instrumental...jejje ademas estoy super feliz,por que volvi a mis seguidores~!!!ya recupere{dayi coje fuerzas tututututu}Bueno mis pollitos,hoy les quiero dejar un tutorial muy mono,creo que el diseño anterior lo tenia...y la verdad queda genial....Pues aqui se los dejo:

| vista previa |
1.Plantilla | Editar HTML | Y buscar ]]></b:skin>
2.Arriba de ]]></b:skin> pegar el siguiente codigo:
.imgholder{
    position:relative;
    width:70px;
height:80px;
border-radius:100px;
float:left;
margin-top:5px;
    margin-left:25px;
    margin-bottom:15px;
}

.imgholder img{
position:absolute;
left:0;
top:0;
width:70px;
height:70px;
z-index:5;
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
opacity:0.3;
filter: alpha(opacity = 30);
box-shadow:0 0 5px #000;
-moz-box-shadow:0 0 5px #000;
-webkit-box-shadow:0 0 5px #000;
transform: scale(0.7,0.7);
-ms-transform: scale(0.7,0.7);
-moz-transform: scale(0.7,0.7);
-webkit-transform: scale(0.7,0.7);
transition:
opacity 1s,
transform 1s ease-in-out 0.3s;
-moz-transition:
opacity 1s,
-moz-transform 1s ease-in-out 0.3s;
-webkit-transition:
opacity 1s,
-webkit-transform 1s ease-in-out 0.3s;
}

.imgholder:hover img{
opacity:1;
filter: alpha(opacity = 100);
transform: scale(1,1);
-ms-transform: scale(1,1);
-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
}

.imgholder figcaption{
position:absolute;
left:-5px;
top:25%;
width:80px;
color:#262626;
font-weight:bold;
text-shadow:-1px -1px 0 #fff;
z-index:4;
    font: normal 15px 'Yanone Kaffeesatz'; text-trasnform: uppercase;
transition:
top 0.5s ease-out;
-moz-transition:
top 0.5s ease-out;
-webkit-transition:
top 0.5s ease-out;
}

.imgholder:hover figcaption{
top:90%;
}

.imgholder .circle{
position:absolute;
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
}

.imgholder .outer1{
top:-8px;
left:-8px;
width:70px;
height:70px;
z-index:2;
border:8px solid;
border-color:#2d2d2d;
background: transparent;
background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e2efff 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#e2efff));
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
background: radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2efff',GradientType=1 );
transform:rotate(90deg);
-ms-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
transition:
transform 1.8s ease-in-out,
box-shadow 1s ease-out,
border-color 1.5s;
-moz-transition:
-moz-transform 1.8s ease-in-out,
-moz-box-shadow 1s ease-out,
border-color 1.5s;
-webkit-transition:
-webkit-transform 1.8s ease-in-out,
-webkit-box-shadow 1s ease-out,
border-color 1.5s;
}

.imgholder:hover .outer1{
border-color:#2d2d2d #dcdcdc #2d2d2d #dcdcdc ;
transform:rotate(-10deg);
-ms-transform:rotate(-10deg);
-moz-transform:rotate(-10deg);
-webkit-transform:rotate(-10deg);
}
3.Diseño | añadir un gadget | HTML/javacrisp | y pegar el siguiente codigo.
4.Guardar y listo~!
<div class="imgholder"><br /><div class="outer1 circle"></div><br /><figure><br /><a href="LINK DE BLOG"><img src="URL DE IMAGEN" /></a><br /></figure><br /></div>

EDITA:
COLOR#1:Edita borde que se ve primero.
COLOR#2:Edita color de bordes al imagen hacer hover.

Bueno espero que les guste,pues para el proximo post,dejare una plantilla....Ya saben que estare haciendo eso...tambien tengo pensado hacer algunas tutoriales de photoscape{ahh mi photoshop}pues eso seria todo.
Recuerda dejar tu comentario.
Les dejo besos de cherryT.O.P
Att:Lee rae mi{dayi}

21 comentarios:

  1. ¡Cómo mola! :D Me lo guardo, y a ver en qué lo puedo usar ^__^

    Un beso! :3
    http://jedentag15.blogspot.com.es/

    ResponderEliminar
  2. Mola muchisimo el efecto! me lo apuntaré por si acaso ^^
    Saludoss!! :D

    ResponderEliminar
  3. esta maravilloso el diseño el azul es un color que me encanta

    ResponderEliminar
  4. muy bueno el efecto
    gracias x compartirlo :)

    ResponderEliminar
  5. Me encanta el nuevo diseño!*O*, es muy lindo, me encanta el azul!Muchas gracias por el tuto, es hermoso!

    ResponderEliminar
  6. está muy lindo :3 gracias por el tuto!

    ResponderEliminar
  7. Excelente tuto y creo que tu cabecera esta bien y además me encanta mucho el diseño ya que también me gusta mucho el azul claro o en realidad en todo los tonos que haya de azul es lo que mas me encanta de este diseño

    ResponderEliminar
  8. me encanto el efecto pero como se pone en una plantilla clasica?? yo aun no me hallo con las plantillas de ahora XD

    ResponderEliminar
  9. Tu blog es el reino de la kawaiiosidad! Este tema está muy bonito y el azul es muy lindo y relajante. Interesante efecto, siempre compartes cosas geniales! Besos***

    ResponderEliminar
  10. Linda remo :3 cuando no tú con tus remos tan random *O* ♥ ...y por cierto buen tuto :3

    ResponderEliminar
  11. woooow tu blog se ve fantastico!!! ya ni se que decir en cada edicion que haces jajaja amo tus tutoriales :D

    ResponderEliminar
  12. Se ve muy lindo tu blog:33 gracias por el tutorial!! ♥

    ResponderEliminar
  13. El nuevo diseño del blog esta ¡genial! ha quedado muy bien.
    Excelente tuto, me gustaría usarlo. Cuando encuentre en que usarlo, lo utilizare.
    Saludos!

    ResponderEliminar
  14. El diseño está genial *-* .. y el efecto también está muy bueno :D .. esperare esa nueva plantillita a ver que tal está :3
    Un abrazo grande!

    ResponderEliminar
  15. *-* Amé tu blog, que asdfasdf
    gracias por seguirme y sin dudarlo te sigo! me encanta :3

    ResponderEliminar
  16. Está genial :D
    Me encanta el diseño que le has puesto *-*

    ResponderEliminar
  17. Oye el efecto se ve muy bueno... gracias

    ResponderEliminar

Puedes dejar cualquier tipo de comentario(*≧m≦*)Pero si el comentario no es de gusto del blog sera borrado..
No insultes.
No spam(;¬_¬)
Si tienes algo que decirme privado:
dayi123466@gmail.com