La técnica de Simple Dither Effect es sencilla y muy original. La idea es darle un efecto degradado a un texto cualquiera utilizando sólo CSS.
Aunque los archivos de ejemplo están disponibles en la pagina del autor, en realidad es muy fácil de aplicar y la clave es tener una imagen adecuada.
Primero, vamos a crear la definición CSS que podemos agregar al plantilla antes de </b:skin>:
Aunque los archivos de ejemplo están disponibles en la pagina del autor, en realidad es muy fácil de aplicar y la clave es tener una imagen adecuada.
Primero, vamos a crear la definición CSS que podemos agregar al plantilla antes de </b:skin>:
.fade{
background: url(URL_imagen.png) repeat-x 0 bottom;
display: block;
height: 200px; /* es la altura de la imagen */
margin-top: -200px; /* es el valor inverso de la altura de la imagen */
position: relative;
z-index: 10;
}Ahora, simplemente colocamos el texto y al final de este, agregamos un DIV con esa clase; por ejemplo:
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing ....</p> <div class="fade"></div>
¿Qué ocurrirá?
Ese DIV es un rectángulo sin contenido, sólo tiene una imagen de fondo y al poner un margen superior negativo, lo que pasará es que se superpondrá al texto.
Ese DIV es un rectángulo sin contenido, sólo tiene una imagen de fondo y al poner un margen superior negativo, lo que pasará es que se superpondrá al texto.
REFERENCIAS:
14 comentarios:
J me encanta como queda...ya lo pondré en alguna entrada, lo había probado de otra forma...saludos!!!
Hola, JMiur.
Interesante entrada, como otras muchas que se leen en Vagabundia.
Supongamos que uno quiere afinar al máximo, hasta el punto de buscar la manera de establecer en qué líneas empieza el degradado y cuáles van a quedar ilegibles. ¿Dependerá sólo de jugar con la altura y el margen?
Otra pregunta: ¿no te cansan los ejemplos con "Lorem ipsum". Sé que es una convención, pero...
Gracias por tu atención.
Suerte, Graciela :D
Juan:
Sí es así como dice, debes jugar con el margen y con la altura de la imagen hasta encontrar la posición que quieras.
Es verdad, el lorem etc cambia pero es fácil de poner, más que una convención, es porque ya tengo un texto listo para eso y me ahorra trabajo :D
me encanta!!!!!!! lo probaré en algún post :) gracias porque estas cosas sencillas para ti hacen que nuestras casas se vean graaaaandes!!! :D
besos ronroneados
Buenas, JMiur, acá llegó la preguntona, tutururútutú... sonido de trompetas que me anuncian... mm... :P
1. ¿esto se puede hacer con colores? porque me encantaría poner alguna que rompa en negro de fondo, x ej.
2. otra pregunta que nada que ver es x la fecha de posts del mismo día (estuve leyendo los otrs post pero no puedo hacer que me funcione)
Grazie, maistro.
Un efecto muy bueno el de los textos.
Lo implementaré.
En el Escaparate de Rosa vi algo de que se pueden paginar los comentarios de igual forma que las entradas pero con un límite de 200, no se como manipular esa cantidad reduciendolo a 100 u otra.
Se agrega este códico después de algo como esto:
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>
Y antes de esto:
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
Un cambio del que Blogger no informa.
Anahí:
Sí, puede hacerse con colores, el tema es tener una imagen adecuada, un PNG transparente y ese fue mi problema, no encuentro la manera de crearlos con los programas que tengo pero, es perfectamente posible.
Lo de las fechas es algo que no puede verse online, necesitaríaver tu plantilla. si me la envias la semana que viene, me fijo.
Bonzu Pipinpadaloxicopolis III:
Lo que cuenta Rosa es cierto y tal como ella dice, esto no es algo que pueda controolarse sino que es algo que inserta Blogger de manera utomática cuando hay más de 200 comentarios en un post. En este blog puedes ver un ejemplo en este post.
Es cierto también que las plantillas más viejas no tienen el código insertado y que hay que copiarlo y pegarlo cuando es necesario, si no recuerdo mal, son dos partes que pueden verse en cualquier plantilla mas o menos nueva.
También concuerdo con ella en que 200 es un número demasaido grande, que si quisieran poner un valor, 50 sería razonable auqnue lo mejor sería poder configurarlo uno mismo. También es algo que hay que rediseñar porque el CSS es espantoso y como si fuera poco, en lugar de mostrar primero los últimoscomentarios, muestra los primeros.
Blogger lo anunció hace ya muchos meses pero casi nadie le dio importancia porque es algo que tiene una utilidad muy limitada.
Cierto al no poder manipular la cantidad es casi inutil, no sabía que lo anunció gracias por el dato, al agregarlo una cez a mi plantilla y guardar el código se repitió dos veces al ver de nuevo.
Y una pregunta, cómo crear un listado "elegante"como en tu menú HTML/CSS
JMiur, gracias, ya le mandé la plantilla.
Saludos.
Le dejo un fondo degradado rojo :D hecho con el Paint.NET
http://img510.imageshack.us/img510/1521/fade2grrojojw7.png
Salute.
Perdón, me equivoqué, es este:
http://img201.imageshack.us/img201/1074/fade2grrojoqs7.png
Bonzu:
Lo que ves en ese índice es un post, está hecho a mano :D
Anahí:
Lo recibí. Voy a verla y te aviso. Gracias por la imgene. Tendré que probar Paint.NET otra vez, nunca me acostumbré a usarlo pero si puede majejar PNGs transparentes, tendré que intentarlo otra vez :D
:D Hola Jmiur como siempre aprendiendo de todas tus enseñanzas, solo me quedo una duda. Para que sirve esta linea "z-index: 10;" ?
Saludos :)
z-index es una propiedad que indica la posición en la que está un elemento, por ejemplo, arriba o abajo de otro. Un valor "alto" lo coloca "encima". Fíjate en esta entrada donde hay ejemplos.
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...