Dezinerfolio

Simple Dither Effect using CSS

Your rating: None Average: 4.2 (17 votes)

While working on the upcoming theme for Dezinerfolio, we were working on a section that displays a short description that dithers towards the end. We worked out a very simple but effective solution using simple CSS attributes and images.

The Need:

Fade Text

.

The Solution:

Fade RAW

All we are doing is adding an extra DIV after the end of the Paragraph and applying a transparent background image with a negative position.

Demo

Trackback URL for this post:

http://www.dezinerfolio.com/trackback/119
AttachmentSizeHitsLast download
df Fade Demo2.61 KB28633 hours 30 min ago

Comments

Anonymous's picture

Nice effect.

vats thakur (not verified)
Mon, 01/19/2009 - 06:34
Anonymous's picture

Hmm, this is a really simple and clever solution. Almost too simple.

Dykam (not verified)
Sun, 01/04/2009 - 06:35
Anonymous's picture

how to apply that !!!
it seems interresting ! but whats the CSS code i should add to the text???

Teddy Cheezy (not verified)
Sat, 01/03/2009 - 14:08
Anonymous's picture

Très belle effet !

Je trouve votre site très cool de plus que j'aime le style Web 2.0 ! Je ne me suis pas géné pour télécharger tous les styles, dégradés et images vectorielles pour Photoshop.

Merci beaucoup :-)

Kitsgrafiks (not verified)
Mon, 12/08/2008 - 03:55
Anonymous's picture

For sharing thank you very much good very beautiful work

çiçekçi (not verified)
Sun, 12/07/2008 - 23:40
Anonymous's picture

It seems to be possible to do that with css opcaity and a bit of jQuery javascript : http://leftlogic.com/jquery_spy/spy.html

spirit (not verified)
Tue, 12/09/2008 - 19:28
Anonymous's picture

Great trick, done similar things to this before. Try setting up grass or something at the bottom of a page. Gives you some cool looks.

John (not verified)
Thu, 12/11/2008 - 05:29
Anonymous's picture

looking good, but yes - the same question..how about older versions like IE6?

Dainis Graveris (not verified)
Sun, 11/30/2008 - 07:38
Anonymous's picture

Simple, and elegant. In regards to IE6 - anyone still using it does not deserve to see a nice effect like this on a website, nor should they be using the internet at all in a browser with that many security holes and flaws in it.

John (not verified)
Thu, 11/27/2008 - 02:38
Anonymous's picture

This is the effect that I use on my Twitter widget website (top right of the page)

I love it !

Defaite (not verified)
Tue, 11/25/2008 - 03:28

Post new comment

The content of this field is kept private and will not be shown publicly.
CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Copy the characters (respecting upper/lower case) from the image.