domingo, enero 05, 2014

[ TutosBlogs ] Subtitulos con efectos hover

By: Ghaaby Captor | Fecha: 1/05/2014 |
espero que les gusten

Hola mis loqueros!!  espero que estén muy bien! eh decidido enfocar mas el blog a los tutoriales!  hacer vídeos, algo de anime y entretenimiento  bueno aunque mas en tutoriales y videos ( es que ahora me parecen muy divertidos xD ) jajaja . .. . . siguiente tutorial trata de un efecto hover para el subtitulo de las imágenes, me gusto mucho este efecto que lo voy a compartir! 



EL VIDEO TUTORIAL




Una vez ya en el escritorio del blog >> se van a plantilla >> Edición Html

 1- Busquen el código </head> y arriba de esté pega este código

<script src='https://sites.google.com/site/ghaabycaptor/ghaabycc/modernizr.custom.js'/>


2- Ahora para agregar el CSS buscar ]]></b:skin> y arriba de este pegar estos códigos que son OBLIGATORIOS colocarlos:
.grid {
padding: 20px 20px 100px 20px;
max-width: 1300px;
margin: 0 auto;
list-style: none;
text-align: center;
}
.grid li {
display: inline-block;
width: 300px;
margin: 0;
padding: 20px;
text-align: left;
position: relative;
}
.grid figure {
margin: 0;
position: relative;
}
.grid figure img {
max-width: 100%;
display: block;
position: relative;
}
.grid figcaption {
position: absolute;
top: 0;
left: 0;
padding: 20px;
background: url("http://i28.tinypic.com/kcaqyp.jpg") repeat scroll 0 0 #F5F5F5;
color: #000000;
}
.grid figcaption h3 {
color: #0080FF;
font-family: times new roman;
font-size: 20px;
margin: 0;
padding: 0;
text-shadow: 2px 0 2px #FFFFFF;
}
.grid figcaption span:before {
content: 'by ';
}
.grid figcaption a {
text-align: center;
padding: 5px 10px;
border-radius: 2px;
display: inline-block;
background: url("http://i51.tinypic.com/2cgkhus.jpg") repeat scroll -53px top #4612A6;
color: #fff;
}
.grid figcaption a:hover {
text-align: center;
padding: 5px 10px;
border-radius: 2px;
display: inline-block;
background: url("http://i51.tinypic.com/2cgkhus.jpg") repeat scroll -53px top #000;
color: #fff;
}

3-   Bien ahora solo deben elegir de cuales de los 3 ESTILOS colocar y pegarlos abajo del CSS anterior


  • ESTILO 1

.cs-style-3 figure {
overflow: hidden;
}
.cs-style-3 figure img {
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}
.no-touch .cs-style-3 figure:hover img,
.cs-style-3 figure.cs-hover img {
-webkit-transform: translateY(-50px);
-moz-transform: translateY(-50px);
-ms-transform: translateY(-50px);
transform: translateY(-50px);
}
.cs-style-3 figcaption {
height: 40px;
width: 270px;
top: auto;
bottom: 0;
opacity: 0;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
transition: transform 0.4s, opacity 0.1s 0.3s;
}
.no-touch .cs-style-3 figure:hover figcaption,
.cs-style-3 figure.cs-hover figcaption {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s;
transition: transform 0.4s, opacity 0.1s;


}
.cs-style-3 figcaption a {
position: absolute;
bottom: 20px;
right: 20px;
}


  • ESTILO 2

.cs-style-4 li {
-webkit-perspective: 1700px;
-moz-perspective: 1700px;
perspective: 1700px;
-webkit-perspective-origin: 0 50%;
-moz-perspective-origin: 0 50%;
perspective-origin: 0 50%;
}
.cs-style-4 figure {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.cs-style-4 figure > div {
overflow: hidden;
}
.cs-style-4 figure img {
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}
.no-touch .cs-style-4 figure:hover img,
.cs-style-4 figure.cs-hover img {
-webkit-transform: translateX(25%);
-moz-transform: translateX(25%);
-ms-transform: translateX(25%);
transform: translateX(25%);
}
.cs-style-4 figcaption {
height: 270px;
width: 100px;
opacity: 0;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
transform: rotateY(-90deg);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
transition: transform 0.4s, opacity 0.1s 0.3s;
}
.no-touch .cs-style-4 figure:hover figcaption,
.cs-style-4 figure.cs-hover figcaption {
opacity: 1;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s;
transition: transform 0.4s, opacity 0.1s;
}
.cs-style-4 figcaption a {
position: absolute;
bottom: 20px;
right: 20px;
}


  • ESTILO 3

.cs-style-7 li:first-child { z-index: 6; }
.cs-style-7 li:nth-child(2) { z-index: 5; }
.cs-style-7 li:nth-child(3) { z-index: 4; }
.cs-style-7 li:nth-child(4) { z-index: 3; }
.cs-style-7 li:nth-child(5) { z-index: 2; }
.cs-style-7 li:nth-child(6) { z-index: 1; }
.cs-style-7 figure img {
z-index: 10;
}
.cs-style-7 figcaption {
height: 100%;
width: 272px;
opacity: 0;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: opacity 0.3s, height 0.3s, box-shadow 0.3s;
-moz-transition: opacity 0.3s, height 0.3s, box-shadow 0.3s;
transition: opacity 0.3s, height 0.3s, box-shadow 0.3s;
box-shadow: 0 0 0 0px #2c3f52;
}
.no-touch .cs-style-7 figure:hover figcaption,
.cs-style-7 figure.cs-hover figcaption {
height: 320px;
opacity: 1;
width: 272px;
box-shadow: 0 0 0 5px #eee;
-webkit-box-shadow: 0 0 0 5px #eee;
-moz-box-shadow:0 0 0 5px #eee;
}
.cs-style-7 figcaption h3 {
margin-top: 86%;
}
.cs-style-7 figcaption h3,
.cs-style-7 figcaption span,
.cs-style-7 figcaption a {
opacity: 0;
-webkit-transition: opacity 0s;
-moz-transition: opacity 0s;
transition: opacity 0s;
}
.cs-style-7 figcaption a {
bottom: 5px;
position: absolute;
right: 30px;
}
.no-touch .cs-style-7 figure:hover figcaption h3,
.no-touch .cs-style-7 figure:hover figcaption span,
.no-touch .cs-style-7 figure:hover figcaption a,
.cs-style-7 figure.cs-hover figcaption h3,
.cs-style-7 figure.cs-hover figcaption span,
.cs-style-7 figure.cs-hover figcaption a {
-webkit-transition: opacity 0.3s 0.2s;
-moz-transition: opacity 0.3s 0.2s;
transition: opacity 0.3s 0.2s;
opacity: 1;
}
@media screen and (max-width: 31.5em) {
.grid {
padding: 10px 10px 100px 10px;
}
.grid li {
width: 100%;
min-width: 300px;
}
}

4- Guarden el cambio. Ahora diríjanse a Diseño y agreguen un HTML y deben copiar y pegar el HTML DEL EFECTO QUE ELIGIERON 

HTML DEL ESTILO 1

<ul class="grid cs-style-3">
<li>
     <figure>
      <img src=&quot;URL-DE-TU-IMAGEN" />
      <figcaption>
       <h3>
Tutorial: </h3>
Ghaaby Captor
       <a href="URL-DE-LA-PAGINA">Ver tutorial</a>
      </figcaption>
     </figure>
    </li>
</ul>

HTML DEL ESTILO 2

<ul class="grid cs-style-4">
<li>
     <figure>
      <div>
<img src="URL-DE-TU-IMAGEN" />
</div>
<figcaption>
       <h3>
Tutorial: </h3>
Ghaaby Captor
       <a href="URL-DE-LA-PAGINA">Ver tutorial</a>
      </figcaption>
     </figure>
    </li>
</ul>

HTML DEL ESTILO 3

<ul class="grid cs-style-7">
<li>
     <figure>
      <img src="URL-DE-TU-IMAGEN" />
      <figcaption>
       <h3>
Tutorial: </h3>
Ghaaby Captor
       <a href="URL-DE-LA-PAGINA">Ver tutorial</a>
      </figcaption>
     </figure>
    </li>
</ul>

Denle a guardar y listo! :)

Gracias por tu visita!
avatar
5 de enero de 2014, 7:28

ME EN-CAN-TO gracias !! <3

avatar
Shine.
Admin
5 de enero de 2014, 8:32

Ooh genial *_*
se te da genial esto de los tutos ;)
besitos

avatar
YoSueño
Admin
5 de enero de 2014, 10:09

Hola Ghaaby es muy interesante lo que haces y si disfrutas mejor.Un ABRAZO
FELIZ DÍA DE REYES

avatar
eri-san
Admin
5 de enero de 2014, 12:16

buen tutorial !! jajaja
pues a ver, este manga que he subido hoy aunque sea ecchi seguro que es bueno xD
jaaja
que tal todo amiga? espero que ge ni al ^^
a ver si sigues en blogger como antes :(
saludos!

avatar
Bam
Admin
5 de enero de 2014, 13:46

Está genial de otra manera nunca sabría hacerlo n.n
Besos!

avatar
Neko-chan
Admin
5 de enero de 2014, 15:51

gracias por el tuto!!! *0* esta genial *u* dios me encanta tu voz *0* (nunca me canso de decirlo xD) y también me encanta cuando dices "baum" al principio de los vídeos (si, cero que me volví loca, necesito un médico D":)
saluditos! ^^
PD: tu gatito y perritos son tan kawaiis!!! >w<

avatar
Lee Rae Mi
Admin
5 de enero de 2014, 19:26

uhhh Etto...Lokita gracias por la tutorial!!!
ahh te aviso que tienes un premio:
http://dayfananimes.blogspot.com/2014/01/otherspremios.html

saludos&besos~

avatar
Citu
Admin
5 de enero de 2014, 19:53

Uy está genial, muchas gracias y te mando un beso

avatar
Eli~
Admin
6 de enero de 2014, 7:11

Que bonito tutorial tienes un premio en mi blog http://lacasitadeloskawaii.blogspot.com/2014/01/premios-de-lovelyu.html

avatar
Yurika
Admin
7 de enero de 2014, 2:08

muy buen tutorial, gracias por el ^^

avatar
Lia A.G.
Admin
7 de enero de 2014, 13:34

Excelentes ideas *-*
Me encanto.
Besos<3

avatar
POPOTAN
Admin
8 de enero de 2014, 7:52

>.< Interesante el estilo, antes ya lo había visto... no sé si por aca.. bueno el punto es que,... antes podia entender claramente este tipo de codigo y lenguaje... lo leía hasta en hojas impresar y podia editarlas ahí... sin embargo ahora... no entiendo nada... apenas y recuerdo HEAD... bueno será cuestion de repazar nomás..
Que bueno que t dediques a más tutoriales... me encanta tu voz y tambien como inicias la presentación de cada videooo saluditos Ighaby,

avatar
Anyi
Admin
10 de enero de 2014, 16:34

que monos tus gatos y tu perro... No conocía esto, pero me pareció curioso. SI alguna vez quiero hacerlo, ya sé qué video ver ^^

muchas gracias por el tutorial

un besoo

avatar
Citu
Admin
11 de enero de 2014, 16:45

Uy muchas gracias

avatar
Haruko
Admin
12 de enero de 2014, 19:49

está bueno!!! *u*
el video que lindo :3 me gustó la historia que hay al principio ^^ una buena historias de perros y gatos que se terminan llevando bien(mayormente esas historias no terminan muy bien ^^")
gracias por el tuto! ^v^

avatar
Kai
Admin
26 de agosto de 2014, 6:57

Qué buen tutorial ^-^
Algún día lo usaré ^0^