Dezinerfolio

Simple Dither Effect using CSS

Your rating: None Average: 4.3 (19 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 KB30181 day 3 hours ago

Comments

Anonymous's picture

For sharing thank you very much good very beautiful work

halkali cicekci (not verified)
Tue, 09/29/2009 - 08:15
Anonymous's picture

I really liked your website. Thank you very much! Its a great website! very interesting and informative.
I am from Marino and too bad know English, give true I wrote the following sentence: "pysqlite2.dbapi2.OperationalError: no such table: dict invalid dictionary: green_mountain (english)"

With respect :), Napea.

Napea (not verified)
Fri, 09/25/2009 - 12:23
Anonymous's picture

You can not select text behind this png. How would you fix this?

Tomek (not verified)
Mon, 06/22/2009 - 11:14
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

Post new comment

The content of this field is kept private and will not be shown publicly.

Visualize