JMiur [E]

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.

Estos son dos modelos [1][2]

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.

Dos ejemplos prácticos:

EJEMPLO 1 - Fondo blanco

Sed commodo aliquet pede. Aenean vel leo vitae erat sagittis elementum. Duis bibendum. Vestibulum euismod pede vitae nisi. Nunc hendrerit sagittis turpis. Nulla facilisi. Integer tincidunt, tellus quis dictum auctor, massa augue volutpat leo, a eleifend erat purus vel nulla. Pellentesque ac mauris sit amet odio scelerisque consequat. Donec justo. Aliquam sapien lectus, luctus sit amet, posuere et, scelerisque vitae, metus. Etiam a mauris. Etiam rhoncus pellentesque massa. Praesent consectetuer eros in sapien sagittis rhoncus. Donec aliquam ligula a risus. Phasellus sagittis mattis lectus.

EJEMPLO 2 - Fondo negro

Sed commodo aliquet pede. Aenean vel leo vitae erat sagittis elementum. Duis bibendum. Vestibulum euismod pede vitae nisi. Nunc hendrerit sagittis turpis. Nulla facilisi. Integer tincidunt, tellus quis dictum auctor, massa augue volutpat leo, a eleifend erat purus vel nulla. Pellentesque ac mauris sit amet odio scelerisque consequat. Donec justo. Aliquam sapien lectus, luctus sit amet, posuere et, scelerisque vitae, metus. Etiam a mauris. Etiam rhoncus pellentesque massa. Praesent consectetuer eros in sapien sagittis rhoncus. Donec aliquam ligula a risus. Phasellus sagittis mattis lectus.


REFERENCIAS:
  • Cosas Sencillas
  • 14 comentarios:

    Graciela de Palomas  

    J me encanta como queda...ya lo pondré en alguna entrada, lo había probado de otra forma...saludos!!!

    Responder
    Juan Carlos López  

    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.

    Responder
    JMiur  

    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

    Responder
    Σ=o) Pau  

    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

    Responder
    Anahí  

    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.

    Responder
    Bonzu Pipinpadaloxicopolis III  

    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.

    Responder
    JMiur  

    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.

    Responder
    Bonzu Pipinpadaloxicopolis III  

    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

    Responder
    Anahí  

    JMiur, gracias, ya le mandé la plantilla.
    Saludos.

    Responder
    Anahí  

    Le dejo un fondo degradado rojo :D hecho con el Paint.NET
    http://img510.imageshack.us/img510/1521/fade2grrojojw7.png
    Salute.

    Responder
    Anahí  

    Perdón, me equivoqué, es este:
    http://img201.imageshack.us/img201/1074/fade2grrojoqs7.png

    Responder
    JMiur  

    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

    Responder
    Tigremen  

    :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 :)

    Responder
    JMiur  

    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.

    Responder

    ¿Quiere dejar un comentario?

    recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

    Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
    De todos modos, también puede accederse a ellos a través de SkyDrive

    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 ...

     
    CERRAR