Ir al contenido principal

Closed Caption para imagenes con CSS y Jquery

Las imagenes se han vuelto un icono de la iternet pues le dan mejor presentación a un sitio web dependiendo de como las usen.
El siguiente tutorial es de Fearlessflyer.com, si usas un sitio web en donde su modo de programacion es distinto a Blogger, como Wordpress premium entonces este tutorial es más facil de seguir en ese sitio.
Este tipo de Closed Caption viene con texto de estilos geniales hechos con la tecnologia de Google Web Fonts.

Para usar este truco en la imagenes, todas las imagenes tendrán el mismo alto y ancho y poner esa altura en la parte de color purpura, recuerda que height:++px es el alto, ejemplo: height:300px. Debes poner el mismo numero en las dos partes indicadas y el ancho es parte roja width:++px ejemplo width:200px.

Pretty Hover Effects.
  • Ve a Plantilla, luego a Edicion de HTML.
  • Luego busca la etiqueta ]]></b:skin> y encima de ella pega lo siguiente.
/* Pretty Hover CSS Document - fearlessflyer.com */
div.wrapper{width:209px; height:250px; overflow:hidden; position:relative; }
/*generic style for all div */
.caption0 {font-family:'Reenie Beanie',arial; font-weight:bold; font-size:34px; letter-spacing:-2px; position:relative; text-align:center; padding:55px 15px 15px 15px; background:url(//lh3.googleusercontent.com/-qdYtIotKwzk/UJLxAUb_NxI/AAAAAAAAAHk/5Y82NC7EZqQ/s1600/caption-bg.png) repeat-x; min-height:125px; color:#d20000; text-shadow:0 1px 1px #999; text-transform:capitalize; line-height:16px;}
.ccap {height:250px;}
/*white fade*/
.caption1 {font-family:'Reenie Beanie',arial; font-weight:bold; font-size:34px; letter-spacing:-2px; position:relative; text-align:center; padding:55px 15px 15px 15px; background:url(//lh3.googleusercontent.com/-qdYtIotKwzk/UJLxAUb_NxI/AAAAAAAAAHk/5Y82NC7EZqQ/s1600/caption-bg.png) repeat-x; min-height:125px; color:#d20000; text-shadow:0 1px 1px #999; text-transform:capitalize; line-height:16px;}
/*city*/
.caption2 {font-family: arial; font-weight:bold; font-size:26px; position:relative; text-align:center; padding:45px 15px 15px 15px; background:url(//lh6.googleusercontent.com/-SxMxLsZvOHM/UJLxAyulF2I/AAAAAAAAAH0/fAm9xb-6MTA/s1600/city.png); min-height:125px; color:#fff; text-shadow:1px 2px 1px #999; letter-spacing:-1px; text-transform:capitalize; line-height:16px;}
/*wood*/
.caption3 {font-family: Georgia, arial; font-weight:bold; font-size:24px; font-style:italic; position:relative; text-align:center; padding:35px 15px 15px 15px; background:url(//lh5.googleusercontent.com/-d-7xEr5vNQw/UJLxB2esusI/AAAAAAAAAII/RkJa8ezuxjs/s1600/wood.png); min-height:125px; color:#fff; text-shadow:1px 2px 1px #000; letter-spacing:-1px; text-transform:capitalize; line-height:16px;}
/*grass*/
.caption4 {font-family:'Droid Sans', arial; font-weight:bold; font-size:30px; position:relative; text-align:center; padding:15px; background:url(//lh3.googleusercontent.com/-ZIKc1y7F2zQ/UJLxAbugz4I/AAAAAAAAAHo/RaJR5L6495A/s1600/grass.png) repeat-x; min-height:125px; color:#fff; text-shadow:1px 2px 1px #000; text-transform:capitalize; line-height:30px;}
/*w*/
.caption5 {font-family:'Lobster', arial; font-weight:bold; font-size:30px; position:relative; text-align:center; padding:38px 15px 15px 15px; background:url(//lh6.googleusercontent.com/-Z-zZGdwb-rM/UJLxAzUN_FI/AAAAAAAAAH4/C_O60KHw9Js/s1600/green.png) repeat-x; min-height:125px; color:#fff; text-shadow:1px 2px 1px #ff4e00; text-transform:capitalize; line-height:16px;}
/*grungy*/
.caption6 {font-family:'IM Fell English SC', arial; font-weight:bold; font-size:30px; position:relative; text-align:center; padding:35px 0 0 0px; background:url(//lh6.googleusercontent.com/-Tk7rT3Gc2Cw/UJLxBX2blOI/AAAAAAAAAIA/MasvakdBEg4/s1600/grunge.png); min-height:125px; color:#fff;   line-height:30px; letter-spacing:-2px;}
  • Ahora busca la etiqueta </head> y encima de ella pega lo siguiente.
<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'/><link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold' rel='stylesheet' type='text/css'/><link href='http://fonts.googleapis.com/css?family=IM+Fell+English+SC' rel='stylesheet' type='text/css'/><link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'/><script type="text/javascript" src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/jquery-1.8.2.min.js"/>
<script type="text/javascript">
// IJ tutorials //<![CDATA[
    $(document).ready(function(){                                 
        var thumbs = $(".ccap1");     
     
        for (var i = 0, ii = thumbs.length; i < ii; i++){
            if (thumbs[i].title && thumbs[i].title.length > 0)
            {         
                var imgtitle = thumbs[i].title;     
                $(thumbs[i]).wrap('<div class="wrapper" />').             
                after('<div class=\'caption1\'>' + imgtitle + '</div>').
                removeAttr('title');
                                         
            }                 
        }
                 
    $('.wrapper').hover(
        function(){
            $(this).find('img').animate({opacity: ".6"}, 300);     
            $(this).find('.caption1').animate({top:"-85px"}, 300);         
        },
        function(){
            $(this).find('img').animate({opacity: "1.0"}, 300);                 
            $(this).find('.caption1').animate({top:"85px"}, 100);
        }     
        );
        var thumbs = $(".ccap2");     
     
        for (var i = 0, ii = thumbs.length; i < ii; i++){
            if (thumbs[i].title && thumbs[i].title.length > 0)
            {         
                var imgtitle = thumbs[i].title;     
                $(thumbs[i]).wrap('<div class="wrapper" />').             
                after('<div class=\'caption2\'>' + imgtitle + '</div>').
                removeAttr('title');
                                         
            }                 
        }
                 
    $('.wrapper').hover(
        function(){
            $(this).find('img').animate({opacity: ".6"}, 300);     
            $(this).find('.caption2').animate({top:"-85px"}, 300);         
        },
        function(){
            $(this).find('img').animate({opacity: "1.0"}, 300);                 
            $(this).find('.caption2').animate({top:"85px"}, 100);
        }     
        );
       var thumbs = $(".ccap3");     
     
        for (var i = 0, ii = thumbs.length; i < ii; i++){
            if (thumbs[i].title && thumbs[i].title.length > 0)
            {         
                var imgtitle = thumbs[i].title;     
                $(thumbs[i]).wrap('<div class="wrapper" />').             
                after('<div class=\'caption3\'>' + imgtitle + '</div>').
                removeAttr('title');
                                         
            }                 
        }
                 
    $('.wrapper').hover(
        function(){
            $(this).find('img').animate({opacity: ".6"}, 300);     
            $(this).find('.caption3').animate({top:"-85px"}, 300);         
        },
        function(){
            $(this).find('img').animate({opacity: "1.0"}, 300);                 
            $(this).find('.caption3').animate({top:"85px"}, 100);
        }     
        );
       var thumbs = $(".ccap4");     
     
        for (var i = 0, ii = thumbs.length; i < ii; i++){
            if (thumbs[i].title && thumbs[i].title.length > 0)
            {         
                var imgtitle = thumbs[i].title;     
                $(thumbs[i]).wrap('<div class="wrapper" />').             
                after('<div class=\'caption4\'>' + imgtitle + '</div>').
                removeAttr('title');
                                         
            }                 
        }
                 
    $('.wrapper').hover(
        function(){
            $(this).find('img').animate({opacity: ".6"}, 300);     
            $(this).find('.caption4').animate({top:"-85px"}, 300);         
        },
        function(){
            $(this).find('img').animate({opacity: "1.0"}, 300);                 
            $(this).find('.caption4').animate({top:"85px"}, 100);
        }     
        );
       var thumbs = $(".ccap5");     
     
        for (var i = 0, ii = thumbs.length; i < ii; i++){
            if (thumbs[i].title && thumbs[i].title.length > 0)
            {         
                var imgtitle = thumbs[i].title;     
                $(thumbs[i]).wrap('<div class="wrapper" />').             
                after('<div class=\'caption5\'>' + imgtitle + '</div>').
                removeAttr('title');
                                         
            }                 
        }
                 
    $('.wrapper').hover(
        function(){
            $(this).find('img').animate({opacity: ".6"}, 300);     
            $(this).find('.caption5').animate({top:"-85px"}, 300);         
        },
        function(){
            $(this).find('img').animate({opacity: "1.0"}, 300);                 
            $(this).find('.caption5').animate({top:"85px"}, 100);
        }     
        ); 
       var thumbs = $(".ccap6");     
     
        for (var i = 0, ii = thumbs.length; i < ii; i++){
            if (thumbs[i].title && thumbs[i].title.length > 0)
            {         
                var imgtitle = thumbs[i].title;     
                $(thumbs[i]).wrap('<div class="wrapper" />').             
                after('<div class=\'caption6\'>' + imgtitle + '</div>').
                removeAttr('title');
                                         
            }                 
        }
                 
    $('.wrapper').hover(
        function(){
            $(this).find('img').animate({opacity: ".6"}, 300);     
            $(this).find('.caption6').animate({top:"-85px"}, 300);         
        },
        function(){
            $(this).find('img').animate({opacity: "1.0"}, 300);                 
            $(this).find('.caption6').animate({top:"85px"}, 100);
        }     
        ); 
    });
//]]>
</script>
  • Guardas los cambios.
  • Ahora cuando hagas una entrada o pongas un gadget y quieras poner una imagen con un closed caption, puedes usar cualquiera de los siguientes codigos.
Ejemplo en vivo, edita los detalles que quieras en CSS y mira el resultado en vivo
Ejemplo:
<img class="ccap ccap1" src="URL de la imagen" title="Texto del clased caption" />
Ejemplo2:
<img class="ccap ccap2" src="URL de la imagen" title="Texto del clased caption" />
Ejemplo3:
<img class="ccap ccap3" src="URL de la imagen" title="Texto del clased caption" />
Ejemplo4:
<img class="ccap ccap4" src="URL de la imagen" title="Texto del clased caption" />
Ejemplo5:
<img class="ccap ccap5" src="URL de la imagen" title="Texto del clased caption" />
Ejemplo6:
<img class="ccap ccap6" src="URL de la imagen" title="Texto del clased caption" />

Dificultad: Media
Contenido: IMG-CSS, Jquery.min.1.8.2
Licencia: Free
Modificado: FUTUdownloads
Fuente: fearlessflyer.com



Entradas populares de este blog

Manual:Crear un Servidor dedicado para Halo CE

Halo CE es una variacion de halo combat e, solo que este halo solo puede usarse en multijugador, se pueden agregar mapas y estilos llamado mods.
A pesar de ser un juego que salió hace ya mucho tiempo aun es uno de los juegos más jugados Online con más de 300 servidores y más de 3000 jugadores al día.
Por tal motivo hay muchos que quieren tener un servidor dedicado a este juego para que los jugadores entren a su servidor.

Indice
Descarga de archivos necesarios.Configuracion de red.Creacion de Partidas.Configuracion del archivo init.txt y otros codigos.
Nombre de los mapas en codigo para init.txtIndicaciones de codigo
Descarga de los Archivos Necesarios.
- Archivos: (init.txt, haloceded.exe, haloce.exe, sapp/sapp.txt, Bienvenida.txt).

DescargarDescargas
Configurar RED.
Para configurar la red debes hacer lo siguiente.
Ve a Panel de Control, luego a Firewall de Windows.Ve a la pestaña de Excepciones. y das click en Agregar puerto.Para que sea más reconocible, en nombre escribe "Halo Cliente

Paquetes de Idioma Windows 7 MUI (64bits / x64)

Paquete de idiomas para windows 7 para aquellos que nacesitan tener varios idiomas en su pc.
Es compatible con la mayoria de versiones de Windows 7

Hay que tomar nota de que si se instalan demasiados paquetes de idioma adicionales, el espacio de disco y el rendimiento del sistema puede verse afectados. En particular, el espacio de disco y el rendimiento del sistema se ven afectados durante las operaciones de servicios, tales como las instalaciones de Service Pack (KB972813). Por lo tanto, se recomienda sólo añadir un paquete de idioma, el que necesitares exclusivamente.
Paquete de idiomas Windows 7 RTM MUI 64-bit (x64)
ArabeDescargasBulgaroDescargasChino (Simplifi...)DescargasChino (Tradicio...)DescargasCroataDescargasChecoDescargasDanésDescargasHolandésDescargasInglésDescargasEstonioDescargasFinlandésDescargasFrancésDescargasAlemánDescargasGriegoDescargasHebreoDescargasHúngaroDescargas

Manual:Codigos y plantillas Aegisub

Aegisub es un programa que le permite a las personas añadir subtitulos y karaoke a sus videos, actualmente Aegisub para dar esos estilos y animaciones a los subtitulos y karaokes usa una serie de codigos que activan dichas animaciones en un tiempo y colores determinados, como un script en HTML.
Los que más utilizan este programa son los Fansubs y empresas de karaoke.Los codigos son dificiles de aprender pero no imposibles si mantienes practica.REGLAS DE LOS CÓDIGOS.
Debes saber unas reglas para los codigos y es que cada coigo está entre parentesis {}. El codigo inicia con una diagonal inversa (invert slash) \.El indicador de la accion biene negreado.El codigo numerico saldrá normal.El codigo viene antes del texto.Cada codigo se divide con una diagonal inversa \. BÁSICO.
_________________________________________________________________________
Lo basico son esos codigos que son los más utilizados y faciles, además de que el mismo programa te da las opciones y no necesariamente tienes que…