| Social Media by Digital Art Empire | |
 | Contiene 37 íconos de 64x64, 128x128, 256x256 y 512x512, en formato PNG.descargar |
 | |
Text Fade Out con jQuery |
Text Fade Out es una idea de CSS-Tricks que utiliza jQuery para crear un efecto de esfumado en textos, cortándolos a cierta altura y agregando un botón para expandirlos.
Obviamente, se requiere tener agregada la librería jQuery antes de </head>:
Obviamente, se requiere tener agregada la librería jQuery antes de </head>:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript'/>
Y luego, el script con el efecto que es muy corto:
<script type='text/javascript'>
//<![CDATA[
$(function() {
var $el, $ps, $up, totalHeight;
$(".textfadeout-demo .textfadeout-button").click(function() {
totalHeight = 0
$el = $(this);
$p = $el.parent();
$up = $p.parent();
$ps = $up.find("p:not('.textfadeout-more')");
$ps.each(function() { totalHeight += $(this).outerHeight(); });
$up.css({ "height": $up.height(), "max-height": 9999 })
.animate({ "height": totalHeight });
$p.fadeOut();
return false;
});
});
//]]>
</script>Por último, el CSS que hace referencia a las clases definidas que pueden tener diferentes estilos y que con muy pocos agregados, deberían funcionar en cualquier navegador, incluyendo Internet Explorer:
<style>
.textfadeout-demo { /* es el rectángulo contenedor */
background-color: #505961;
color: #EEE;
max-height: 150px; /* esto define la altura */
overflow: hidden; /* y le decimos que "se corte" allí, ocultando el reesto */
padding: 20px;
position: relative;
width: 300px;
}
.textfadeout-demo .textfadeout-more { /* el esfumado inferior */
background-image: -moz-linear-gradient(top, transparent, #101921);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, transparent),color-stop(1, #101921));
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#00101921', EndColorStr='#FF101921')
bottom: 0;
left: 0;
padding: 30px 0;
position: absolute;
text-align: center;
width: 100%;
}
.textfadeout-button { /* el botón para expandir */
border-top: 1px solid #96D1F8;
background: #65A9D7;
background: -moz-linear-gradient(top, #3E779D, #65A9D7);
background: -webkit-gradient(linear, left top, left bottom, from(#3E779D), to(#65A9D7));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FF3E779D'; EndColorStr='#FF65A9D7');
padding: 5px 10px;
text-decoration: none;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0, rgba(0,0,0,90) 0 0 10px, rgba(0,0,0,90) 0 0 20px, rgba(0,0,0,90) 0 0 30px;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
}
.textfadeout-button:hover {
border-top-color: #28597A;
background: #28597A;
color: #CCC;
}
.textfadeout-button:active {
border-top-color: #1B435E;
background: #1B435E;
}
</style>Ya está; ahora podremos utilizar las tres clases definidas para crear el HTML:
<div class="textfadeout-demo"> <p> ....... el texto a mostrar ....... </p> <p class="textfadeout-more"><a href="#" class="textfadeout-button">leer más</a></p> </div>
En primera persona del singular |
Si voy a empezar un blog nuevo se me presentan múltiples alternativas, tantas, que termino por marearme. No se mucho de esto pero me gusta la idea; veo otros, veo chirimbolos, veo cositas que se mueven, veo que muestran cosas de manera divertida; soy un niño al que han dejado solo en una juguetería y nadie vigila. Ufff demasiadas cosas.
Tal vez, tanta libertad me acobarde, me ponga tímido, me haga pensar no, esto no es para mi. Tal vez lo contrario, tal vez me autoconvenza que yo también puedo y que todo es demasiado fácil y bastan dos clicks para hacer bailar al mundo, claro, si fulanito pudo ¿por que no yo?
Bueno. Me decidí. Yo también puedo. Mi psiquiatra me ha dicho que siga adelante y allá voy; entonces, elijo Blogger porque dicen que es fácil y ciertamente lo es si me decido a ser prudente pero claro, no lo soy. Yo quiero eso que vi en aquel lado y ponerle eso otro que vi en ese otro y ya tengo el nombre y me imagino cómo será y creo la cuenta y selecciono la plantilla pero ninguna me convence porque no tienen absolutamente nada que ver con eso que tengo en mente.
Sí, claro, me resigno y elijo una porque después la voy a cambiar y la dejaré a mi gusto. Todos dicen que es fácil así que imagino que click click click y ya está. Nada del otro mundo, esto no es cirugía cerebral, basta que busque alguna explicación y listo.
Obvio, lo primero es que lo que está arriba debería estar abajo y lo que está a la izquierda debería estar a la derecha. No sé por que elegí esta plantilla que es exactamente al revés pero no importa, eso se cambia ¿Cómo se cambia? ¿Así? No, así no ... oooops algo toqué y no me acuerdo qué era. No esto tampoco, uyyy quedó peor, ¿será por eso que dicen que haga una copia antes de hacer nada? Bahhh eso es paranoia pura. Ayyy esto tampoco ¿Y ahora'? Mejor borro todo y empiezo otra vez. Sí, ya sé, haré una copia de seguridad ... si me acuerdo.
Bien ¿en que andaba? Ah sí eso del magazine no lo quiero, ¿para que elegí esta digo yo? Ya me acuerdo, es porque ese bordecito de colores me encantó; bueno, quiero dejar eso y cambiar todo el resto ¿Acaso no se puede? Alguien debe saber pero he mirado montones de sitios y no encuentro respuestas claras; me dicen que cambie A por B y yo veo que acá dice Z ¿qué pasa? ¿No era que esto era fácil? ¡Dónde demonios tengo que hacer click XD!!!
Bueno. Lo logré. El rojo es azul ¡Biennnnnnnnnnnnnnnnnnnnnnnnnn!!! Vamos avanzando.
¿Dónde estará esa rayita? ¿Cómo se quitará? Ooops, así no, así queda más gorda. Bueno, algo es algo y tan mal no queda ¿no? Ya me acostumbraré a ella. No, no creo. Odio esa rayita.
Ya escribí mi primer post ¿a ver cuántas visitas hubo? ¡Qué raro! Los tres sistemas de estadísticas que puse me dicen cosas diferentes, esos dos no deben funcionar bien porque los números son más bajos; me quedo con este otro que me dice que hubo más. No, por las dudas no voy a sacar los otros, siempre es bueno tener un repuesto y además, me sirven para cuando tenga ganas de amargarme un poco.
Busco el nombre en Google y ahí esta jejejejejeje voy a capturar la pantalla y guardarlo de recuerdo.
Tendría que ponerme a aprender cómo funciona esto pero ¿para qué?, si ya está todo inventado. Además es fácil, lástima lo de la rayita. ODIO LA RAYITA. Ya se, mejor me pongo a pensar en hacer otro post ¿Si? ¿Ya? ¿Tan rápido?
No, hace rato que no visito mi blog, voy a verlo.
Ya vuelvo.
Tal vez, tanta libertad me acobarde, me ponga tímido, me haga pensar no, esto no es para mi. Tal vez lo contrario, tal vez me autoconvenza que yo también puedo y que todo es demasiado fácil y bastan dos clicks para hacer bailar al mundo, claro, si fulanito pudo ¿por que no yo?
Bueno. Me decidí. Yo también puedo. Mi psiquiatra me ha dicho que siga adelante y allá voy; entonces, elijo Blogger porque dicen que es fácil y ciertamente lo es si me decido a ser prudente pero claro, no lo soy. Yo quiero eso que vi en aquel lado y ponerle eso otro que vi en ese otro y ya tengo el nombre y me imagino cómo será y creo la cuenta y selecciono la plantilla pero ninguna me convence porque no tienen absolutamente nada que ver con eso que tengo en mente.
Sí, claro, me resigno y elijo una porque después la voy a cambiar y la dejaré a mi gusto. Todos dicen que es fácil así que imagino que click click click y ya está. Nada del otro mundo, esto no es cirugía cerebral, basta que busque alguna explicación y listo.
Obvio, lo primero es que lo que está arriba debería estar abajo y lo que está a la izquierda debería estar a la derecha. No sé por que elegí esta plantilla que es exactamente al revés pero no importa, eso se cambia ¿Cómo se cambia? ¿Así? No, así no ... oooops algo toqué y no me acuerdo qué era. No esto tampoco, uyyy quedó peor, ¿será por eso que dicen que haga una copia antes de hacer nada? Bahhh eso es paranoia pura. Ayyy esto tampoco ¿Y ahora'? Mejor borro todo y empiezo otra vez. Sí, ya sé, haré una copia de seguridad ... si me acuerdo.
Bien ¿en que andaba? Ah sí eso del magazine no lo quiero, ¿para que elegí esta digo yo? Ya me acuerdo, es porque ese bordecito de colores me encantó; bueno, quiero dejar eso y cambiar todo el resto ¿Acaso no se puede? Alguien debe saber pero he mirado montones de sitios y no encuentro respuestas claras; me dicen que cambie A por B y yo veo que acá dice Z ¿qué pasa? ¿No era que esto era fácil? ¡Dónde demonios tengo que hacer click XD!!!
Bueno. Lo logré. El rojo es azul ¡Biennnnnnnnnnnnnnnnnnnnnnnnnn!!! Vamos avanzando.
¿Dónde estará esa rayita? ¿Cómo se quitará? Ooops, así no, así queda más gorda. Bueno, algo es algo y tan mal no queda ¿no? Ya me acostumbraré a ella. No, no creo. Odio esa rayita.
Ya escribí mi primer post ¿a ver cuántas visitas hubo? ¡Qué raro! Los tres sistemas de estadísticas que puse me dicen cosas diferentes, esos dos no deben funcionar bien porque los números son más bajos; me quedo con este otro que me dice que hubo más. No, por las dudas no voy a sacar los otros, siempre es bueno tener un repuesto y además, me sirven para cuando tenga ganas de amargarme un poco.
Busco el nombre en Google y ahí esta jejejejejeje voy a capturar la pantalla y guardarlo de recuerdo.
Tendría que ponerme a aprender cómo funciona esto pero ¿para qué?, si ya está todo inventado. Además es fácil, lástima lo de la rayita. ODIO LA RAYITA. Ya se, mejor me pongo a pensar en hacer otro post ¿Si? ¿Ya? ¿Tan rápido?
No, hace rato que no visito mi blog, voy a verlo.
Ya vuelvo.
Generadores de paletas de color online |
Transiciones con CSS e imágenes |
Hay muchas ideas y demos dando vuelta por la web que muestran lo que puede hacerse con las transiciones; por lo general, la mayoría de ellos siempre hablan de Chrome pero basta agregar los prefijos adecuados para que tambien funcionen en Opera y Firefox 4. Estos son algunos ejemplos que nos permiten generar efectos con imágenes. Pero hay muchos más.
En todos ellos, el HTML es similar y tiene este esquema:
En todos ellos, el HTML es similar y tiene este esquema:
<div class="demoIMG"> <img class="novisible" src="URL_UNA_IMAGEN" /> <img class="visible" src="URL_OTRA_IMAGEN" /> </div>
En un DIV normal, colocamos dos imágenes a las que le agregamos clases y definimos sus reglas generales:
<style>
.demoIMG { /* el rectángulo contenedor */
position:relative; /* indicamos esto para poder posicionar su contenido de maera absoluta */
height:330px; /* le damos una cierta altura */
margin:0 auto; /* lo centramos */
width:500px; /* le damos un cierto ancho */
}
.demoIMG img { /* el contenido */
left: 0; /* posición izquierda */
position:absolute; /* indicamos que su posición es absoluta con respecto al contenedor */
top: 0; /* posición superior */
}
/* y ponemos propiedades en las clases de cada imagen */
/* la primera no será visible por defecto */
.demoIMG img.novisible {opacity:0;filter:alpha(opacity=0);}
/* y se verá cuando pongamos el cursor encima del DIV */
.demoIMG:hover img.novisible {opacity:1;filter:alpha(opacity=100);}
/* la segunda se ocultara siempre que pongamos el cursor encima del DIV o de la imagen */
.demoIMG:hover img.visible {opacity:0;filter:alpha(opacity=0);}
.demoIMG img.visible:hover {opacity:0;filter:alpha(opacity=0);}
</style>Si sólo pusiéramos eso, veríamos una imagen, la que tiene la clase visible; la otra estaría debajo ya que ambas ocupan la misma posición.
Poniendo el cursor encima, cambian:
Poniendo el cursor encima, cambian:
Agregando las propiedades de transición, haremos lo mismo pero animando ese cambio de opacidad así que sólo agregamos la propiedad a todas las imágenes:
#demoIMG img {
.......
/* esto, hará que cualquier cambio en las imágenes, se muestren con una animación */
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}Y jugamos un poco, agregando transformaciones en una o en ambas imágenes.
En este otro ejemplo, al cambio de la opacidad anterior, le sumamos una tranformación de escala así que cuando permuten, lo harán "aumentando" de tamaño:
En este otro ejemplo, al cambio de la opacidad anterior, le sumamos una tranformación de escala así que cuando permuten, lo harán "aumentando" de tamaño:
#demoIMG img.novisible {
-moz-transform:scale(0);
-webkit-transform:scale(0);
-o-transform:scale(0);
-ms-transform:scale(0);
}
#demoIMG:hover img.novisible {
-moz-transform:scale(1);
-webkit-transform:scale(1);
-o-transform:scale(1);
-ms-transform:scale(1);
}
#demoIMG:hover img.visible {
-moz-transform:scale(0);
-webkit-transform:scale(0);
-o-transform:scale(0);
-ms-transform:scale(0);
}En este último ejemplo, se hace lo mismo, variando la escala y ocultando la primera con un efecto de rotación:
#demoIMG img.novisible {
-moz-transform:scale(1,0);
-webkit-transform:scale(1,0);
-o-transform:scale(1,0);
-ms-transform:scale(1,0);
}
#demoIMG:hover img.novisible {
-moz-transform:scale(1);
-webkit-transform:scale(1);
-o-transform:scale(1);
-ms-transform:scale(1);
}
#demoIMG:hover img.visible {
-moz-transform:rotate(360deg) scale(0);
-webkit-transform:rotate(360deg) scale(0);
-o-transform:rotate(360deg) scale(0);
-ms-transform:rotate(360deg) scale(0);
}
Surtido de plantillas (Parte 2) |
 | Colibri Demo online: VER Descargar: blogger-templates |
 | Jeans Demo online: btemplates Descargar: emire |
 | Mr. Techie Demo online: VER Descargar: googlepages.com |
 | WP-Polaroid Demo online: VER Descargar: eblogtemplates.com |
 | Blogging Pro Demo online: VER Descargar: eblogtemplates.com |
 | Pannasmontata Demo online: VER Descargar: nea.ngi.it |
 | Hello Wiki Demo online: VER Descargar: blogcrowds.com |
 | My ScrapBlog Demo online: VER Descargar: ziddu.com |
 | Couple in pink Demo online: VER Descargar: btemplates.com |
 | Ele Demo online: VER Descargar: btemplates.com |
 | Butterfly Demo online: VER Descargar: myblogtalk.com |
 | Black Splat Demo online: VER Descargar: btemplates.com |
 | Creative Art Demo online: VER Descargar: btemplates.com |
 | Angel Demo online: VER Descargar: google sites |
 | Emo Blue Demo online: VER Descargar: filedropper.com |
REFERENCIAS:hongkiat.com
Image Tools para Firefox |
Image Tools es una extensión para Firefox que amplia las posibilidades de manejar las imágenes que vemos en cualquier página web, agregando entrads al menú contextual que nos permiten acceder a un visor con varias opciones.
Una vez instalado, vasta hacer click con el botón derecho sobre la página para que detecte las imágenes que contiene, mostrando dos tipos básicos, aquellas que se ven (standard Images) como alquellas enlazadas (linked images). Cualquiera de ellas nos abrirá una nueva pestaña donde podremos navegarlas en un visor independiente.
Desde allí, una serie de íconos nos permiten rotarlas, hacer zoom, copiarlas, guardarlas o incluso editarla a través de Pixlr.com
REFERENCIAS:ghacks.net
