[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}