Do you want to create fancy headings without rendering each heading with Photoshop? Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash). All you need is an empty <span> tag in the heading and apply the background image overlay using the CSS position:absolute property. This trick has been tested on most browsers: Firefox, Safari, Opera, and even Internet Explorer 6. Continue to read this article to find out how.

View Demos

Download Demo ZIP

Benefits

  • This is pure CSS trick, no Javascript or Flash. It works on most browsers including IE6 (PNG hack required).
  • It is perfect for designing headings. You don’t have to render each heading with Photoshop. This will save you time and bandwidth.
  • You can use on any web fonts and the font size remains scalable.

How does this work?

The trick is very simple. Basically we are just adding a 1px gradient PNG (with alpha transparency) over the text.

screenshot

The HTML markups

<h1><span></span>CSS Gradient Text</h1>

The CSS

The key point here is: h1 { position: relative } and h1 span { position: absolute }

h1 {
  font: bold 330%/100% "Lucida Grande";
  position: relative;
  color: #464646;
}
h1 span {
  background: url(gradient.png) repeat-x;
  position: absolute;
  display: block;
  width: 100%;
  height: 31px;
}

That’s it! You are done. Click here to view my demo page.

Make it work on IE6

Since IE6 doesn’t render PNG-24 properly, the following hack is required in order to display the transparent PNG (add anywhere in between the <head> tag):

<!--[if lt IE 7]>

<style>
h1 span {
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
}
</style>

<![endif]-->

This is why we hate IE 6!

jQuery prepend version (for semantic lovers)

If you don’t want to have the empty <span> tag in the heading, you can use Javascript to prepend the <span> tag. Here is a sample using jQuery prepend method:

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){

  //prepend span tag to H1
  $("h1").prepend("<span></span>");
	
});
</script>

More samples

Want to make Web 2.0 glossy text?

screenshot

Literally, you can apply this trick on any solid background color (as long your gradient color is the same as your background color).

screenshot

screenshot

screenshot

screenshot

screenshot

screenshot

Pattern / Texture

You can also apply this trick with a tile background image. Look, here is an example of zebra pattern. So, be creative!

screenshot

Limitations and more…

  • This trick is only suitable for solid background color elements. Your gradient color (PNG image) must be the same color as your background color.
  • IE PNG hack is required if you want it to work on IE 6.
  • If your gradient image is taller than the heading, the text will not be selectable.

484 Comments

Davey
Jan 17, 2008 at 1:09 am

Interesting idea!

Doesn’t scale if you set the browser text sizes up though. I guess there’s not a lot you could do to resize/scale it up because of the lack of a CSS background scale property…

Still, it looks hot and it’s a great way to have dynamic text without relying on image nesting or replacement. Nice one, Nick!

(and damn IE6 to hell as always)

David Lengyel
Jan 17, 2008 at 1:20 am

It looks nice, great idea. Unfortunatelly, I think it can’t be used in CMS. What if you’ll need longer heading? I’ll try this trick for sure!

Felix
Jan 17, 2008 at 1:35 am

Wow nice trick. Thanks a lot for pointing this.
Will surely use it on my next project (if you don’t mind).

mee
Jan 17, 2008 at 1:47 am

I never thought of this, cool trick. ThanX

Stefan
Jan 17, 2008 at 2:13 am

I used this technique with a gif pattern on my site a few months back for a grunge effect.
I had to do some extra hacks as I use Joomla as a CMS and had to get the span tag in each heading (article title) but I’m happy with the result.

Adam Bard
Jan 17, 2008 at 2:20 am

Why must everyone taunt me with nifty .png tricks? It’s rad, I agree, but for pages with audiences not consisting of web designers it’s too soon to write IE6 off.

Tobi
Jan 17, 2008 at 2:25 am

Cool Trick. Thanks! You have small typo within your text: You wrote: position: relateive instead of: position: relative.

Ivan
Jan 17, 2008 at 2:32 am

Genius mate, one of those “Why have I not thought of that” moments.

Renato
Jan 17, 2008 at 2:36 am

Great! It looks very cool, but it dosen’t work on IE 6 (Version 6.0.2900.2180.xpsp_sp2_gdr.070227-2254). The Gradient-Image comes over the Text and it’s not possible to read what’s written… Need some Screenshot?

Shabith
Jan 17, 2008 at 3:19 am

Thanks nick! great post!

OkkE
Jan 17, 2008 at 3:22 am

Great article, like the idea. It’s a nice trick to accomplish this, only small drawback is that you can’t select a word of the heading. No a really big problem, but still something to remember. Not that you can when you use images, so, it’s also better then images in that way. :-)

divya
Jan 17, 2008 at 3:32 am

To be semantic, instead of text cant we use text?

Also, most bloggers would likely have a text instead of inside the heading elements, which can be used instead of the span too.

divya
Jan 17, 2008 at 3:33 am

yikes, I forgot to put the HTML tags in my comment in . Sorry!

Ritchie
Jan 17, 2008 at 4:20 am

wow. nice one.

Andy
Jan 17, 2008 at 4:22 am

Your ‘Make it work in IE6’ has a conditional selecting IE7 instead of IE6. just thought I’d point it out so you could amend it. Argh, we all do this kinda thing, so don’t worry about it… Great post.

Andy
Jan 17, 2008 at 4:24 am

oops im a dim wit.. i glossed over the ‘lt’ in the conditional statement. doh!

ignore my last comment.

:D

kevinn
Jan 17, 2008 at 4:36 am

It’s too bad, it doesn’t look too well w/o font smoothing.

Siegfried
Jan 17, 2008 at 5:42 am

Looks cool! I made some experiments and found that (at least in Firefox) it is not necessary to position the h1 element but only the span element. That makes sense since it is only necessary to take the span element out of the normal text flow to let it flow over the text.

There is only one small problem: This additional span element is 100% presentational markup. It is not much, but it still is presenational markup. I made some experiments with generated content but did not succeed.

@Renato: The screenshot look like it is the old IE6 problem of not supporting semitransparent pngs. Indeed the png should flow over the heading text. Just try it on a simple page with the white gradient png from here and a colored body background (i made it green). That shows how it is working. And it shows the limitations, too.

If anyone has an idea of how to make this without additional html markup…

Bram
Jan 17, 2008 at 5:45 am

now this is surely something very very handy!

Aaron
Jan 17, 2008 at 5:58 am

This is the most smashing trick I’ve come across ever! Thanks a lot for sharing,

Tate
Jan 17, 2008 at 6:33 am

Hah, very clever! I would never have thought of this.

Mauro Mazzei
Jan 17, 2008 at 6:35 am

Great article, this is the first post i’ve read here!
i think that i like your works :)

maz!

David
Jan 17, 2008 at 6:39 am

oh, nice idea! look really fine. i’ll test it later!

Christina
Jan 17, 2008 at 7:06 am

Great tip!!

Only thing is that you’ve spelt ‘relative’ wrong under the CSS heading for the h1 {position:relative;}

Christina
Jan 17, 2008 at 7:06 am

I think you’ve fixed it already!!

Gilbitron
Jan 17, 2008 at 7:27 am

Great tip. Will definetly use this. Thanks again.

cKey
Jan 17, 2008 at 7:29 am

great =)
i love your blog….keep it up!!!

kerberoS
Jan 17, 2008 at 7:49 am

So cool :)

giackop
Jan 17, 2008 at 8:26 am

Great!! Thanks!! I posted an article about that on my site.. Thanks again!!

alvarocker
Jan 17, 2008 at 8:59 am

Thanks dude!

joel
Jan 17, 2008 at 9:21 am

An 8-bit png can be exported from Fireworks and works in IE6 without a hack.

Nice idea by the way, it’s really cool. Only weakness I see is that it makes selecting the text very difficult. You can drag select around the whole line, but not certain words in the middle.

Michael Thompson
Jan 17, 2008 at 9:46 am

You know, while you’re tossing all that extra markup around you might as well extend your JavaScript to duplicate your header and layer it beneath your main one, shifted 1px down and 1px right to create a beveled effect common on most glassy/shiny headings and logos.

You’d be changing the color of course to something that might emulate a shadow or depth effect, and the distance from the original heading could be more than 1px and go right/up, left/down or left/up.

Lim Chee Aun
Jan 17, 2008 at 10:53 am

I guess you need to prevent the text from wrapping? ‘white-space:nowrap’ is the key.

shortshire
Jan 17, 2008 at 11:03 am

That’s a pretty awesome trick. I am going to try that from now on instead of working on each individual header for hours upon hours trying to replicate previous effects.

Felipe
Jan 17, 2008 at 11:08 am

@joel #31 : this great feature is described in Sitepoint blog, but happily Fireworks isn’t the only one we can use: ErieStuff noted that an open source program named pngnq will do as well (“optipng -o7” and Tweakpng are useful too).

With those strange but valid PNG-8, you can have in one image:
– 8 bit transparency (so called “alpha” transparency) for good browsers
– 1 bit transparency for IE6 without need of extra CSS, stylesheet or JS
– light weight png and still realistic colors (pngnq is smart when reducing the number of colors, optipng is bruteforce when reducing the weight of the file)

Thiemo Gillissen
Jan 17, 2008 at 12:58 pm

awesome! very cool effects. can’t really believe that’s all css… great

giulia
Jan 17, 2008 at 1:25 pm

sooo cool! congrats!
very clever trick, thanks!

Sam Rayner
Jan 17, 2008 at 1:30 pm

Thanks for sharing Nick. You can actually achieve the same thing without the need for an empty span or JavaScript if you’re willing to serve up plain old headings to Internet Explorer though:

http://samrayner.com/archives/span_free_gradient_text_effect/

Obviously, IE support is more important on some sites than others but it’s nice to have the option there.

photoshop cs3 tutorials
Jan 17, 2008 at 2:25 pm

realy good article!!
will apply it soon.. ;) thanks..!

Mohammed
Jan 17, 2008 at 3:07 pm

fantastic! thank u

kevadamson
Jan 17, 2008 at 3:18 pm

Clever. I’ll definitely bear this in mind should an appropriate project arise. Keep thinking outside the box! (”,)

John Lascurettes
Jan 17, 2008 at 3:23 pm

Slick and simple. My favorite kind of tip.

Jen Germann
Jan 17, 2008 at 3:33 pm

What a great tip!!! Nice creative thinking. Thanks much!

~ jen

Race
Jan 17, 2008 at 3:36 pm

thats awesome, youre are “The” best designer!!!!!!

Richard Davies
Jan 17, 2008 at 3:46 pm

Nice effect!

But it doesn’t seem to work correctly when viewed through FeedDemon 2.6 (on WinXP SP2 with IE6).

Peter From Hoop Creative
Jan 17, 2008 at 4:51 pm

kick ass my friend, kick ass
Looks real simple to boot!
I will be integrating that into a project next week

Hannah
Jan 17, 2008 at 5:52 pm

Nice trick!

Murat Ayfer
Jan 17, 2008 at 7:14 pm

that’s a brilliant idea. such a small touch, but makes a huge difference.
thanks

David
Jan 17, 2008 at 9:06 pm

oh that is super slick… simple in concept and practice, but such a leap to actually get there. As a wise man once said, “genius is almost always displayed in great simplicity of method.”

Jermayn Parker
Jan 17, 2008 at 9:21 pm

Really like the tip, good to see that you thought of making it usable for links which is important. My only issue is that this will give people an excuse to continue with the over used shiny glossy look which is so arrgghhh old fashioned and rehashed!

Oh for some designers to think of something new rather than rehashing other peoples rehashed designs.

Corey Dutson
Jan 17, 2008 at 10:13 pm

This is fantastic! I can’t wait to find an excuse to use this, thanks a bunch.

Stephen Wilson
Jan 17, 2008 at 10:20 pm

Wow, this is such a great tip/trick. Wish I thought of it!

Min Thu
Jan 17, 2008 at 10:33 pm

This is really a tricky technique. How could you find that out?

dee
Jan 17, 2008 at 11:41 pm

This is just perfect for my upcoming design on my own blog. I was having thoughts on whether I should write a php function for this kind of font style but I’m too lazy for that. haha.

This is really a big help

willem van der pas
Jan 18, 2008 at 5:09 am

That’s really great. I might use it. :) thanks.

Carly
Jan 18, 2008 at 10:26 am

Fantastic, the dark background sample looks the best. Very handy trick, may use this in the future!

Ralph
Jan 18, 2008 at 11:27 am

Respect to your great work and i will use perhaps :)

Ralph

ozrabal
Jan 18, 2008 at 11:46 am

Pure Web 2.0 heading technique ;) thx

Panagiotis Karageorgakis
Jan 18, 2008 at 12:12 pm

This is a nice technique although not too new actually. Essentially it’s the same as the “worn type” CSS technique (published on Nov 2005) but instead of a grunge pattern it uses a simple gradient to make text shiny. In essence, the web designer can transform typical headings using whatever pattern they wish on top of the text.

But what I don’t really like is the extra <span> in the headers, so when I use such techniques I’d go with the jQuery approach &ndash it won’t do good if JavaScript is off, but it’s better than having to insert a (non-semantic) empty <span> tag inside every heading! (And how has JavaScript off anyway?)

In the worn type article, the author also has a page with examples, similar to the ones you’re displaying, check it out.

nanih
Jan 18, 2008 at 12:43 pm

so easy, so great!

Soh
Jan 18, 2008 at 1:02 pm

Great Tutorial!

Cacao
Jan 18, 2008 at 1:24 pm

Thanks lots, this is sooo useful!

Sara
Jan 18, 2008 at 5:09 pm

Neat trick! And this idea opens up sooo many more opportunities!

allysource.com
Jan 18, 2008 at 5:34 pm

you always have the best tips
thank keep it coming

Anthony
Jan 18, 2008 at 5:38 pm

Thanks!! I have been trying to do something like this for a long time. I never thought about using a png. :) thanks!!

Evan
Jan 18, 2008 at 7:09 pm

So simple, and yet, so effective. That gets a big thumbs up, along with a “why didn’t I think of that?”

Thanks and cheers!

Javan
Jan 18, 2008 at 10:15 pm

This is ridiculously simple and clever.

alex
Jan 18, 2008 at 11:50 pm

dammit, why didn’t i think of this as a solution? Nice job!

jackzheng
Jan 19, 2008 at 12:29 am

googld work!

Ozh
Jan 19, 2008 at 2:52 am

Makes text mostly impossible to select/highlight. Don’t like it at all.

Segarceanu Razvan
Jan 19, 2008 at 7:18 am

Very useful and innovative!
Thank, I will use it :)

Ganesh Iyer
Jan 19, 2008 at 9:55 am

Quite neat

Erik Gyepes
Jan 19, 2008 at 10:34 am

Wow, this is really great and easy trick, thanks! :)

Paolo Bonzini
Jan 19, 2008 at 11:35 am

I used a similar trick in writing a HSV color picker. I prepared a gradient from black to transparent to white and placed it into an IMG. Whenever the user chose a color from the HS box, that color was set as the background of the IMG, creating the gradient for the V chooser.

Similarly, a single black->transparent gradient was used for the three RGB color bars (with F00, 0F0 and 00F backgrounds).

marianne mcdougall
Jan 19, 2008 at 2:30 pm

The young guys I work with at G3 Creative design in Scotland told me about this superb website – fab web tips.

Hakan
Jan 19, 2008 at 2:32 pm

Thanks

Adam
Jan 19, 2008 at 2:44 pm

That is absolutely brilliant, lets all hope ie 6 ends up on the rubbish heap soon. Then through the use of png web design will become a lot more fun.

sesebian
Jan 19, 2008 at 3:51 pm

Thanks

PENIX
Jan 19, 2008 at 4:16 pm

Don’t know if I’ll ever use it, but it’s a nice trick none the less.

Ramon Bispo
Jan 19, 2008 at 5:56 pm

Guys… This is really beautiful.

Thanks a lot!

RamonPage.

Matthew Hunt
Jan 19, 2008 at 11:57 pm

hmm… I wonder if this works with swfir http://www.mikeindustries.com/blog/archive/2007/02/introducing-swfir
we will have to see

aliotsy
Jan 20, 2008 at 3:00 am

Looks cool, but as other’s have noted, it makes highlighting text very difficult. After playing with it a bit, it looks like the cursor needs to be placed right where the gradient ends.

Maya
Jan 20, 2008 at 5:57 am

great idea!
i’m wondering whether just giving the h1 itself your background image will suffice?

David
Jan 20, 2008 at 6:30 am

Great CSS work.

Thanks for posting.

Daniela
Jan 20, 2008 at 6:53 am

Great idea! Thanks for sharing! I’ll try it out soon.

Inspiration Up
Jan 20, 2008 at 9:07 am

Nice post. I would surely use it soon..Thanks for sharing!

Pavel
Jan 20, 2008 at 9:17 am

Wow! Cool tricks! То be translated into russian…

Thanks!

Game
Jan 20, 2008 at 9:17 am

Thanks for a great idea! I’ll try it

Madjib2001
Jan 20, 2008 at 9:54 am

Very useful, thanks

oggin
Jan 20, 2008 at 4:03 pm

Thanks for sharing, cool post

Devin
Jan 20, 2008 at 11:39 pm

I also came out with a cool solution to html text effects that is also SEO friendly.
http://tutorialdog.com/create-seo-friendly-text-images-headers/

Paolo
Jan 21, 2008 at 2:54 am

very beautiful.
Thanks! i’ll use surely this in my site!

Hawckins
Jan 21, 2008 at 5:45 am

Very Cool and innovative idea i also going to follow this. This reduces the image loading problem in the web sites

Loughlin
Jan 21, 2008 at 6:55 am

Interesting idea. Haven’t seen something this innovative since FIR ages ago – you should ask ALA to post this for some more community dissection ;)

imaginepaolo
Jan 21, 2008 at 7:46 am

Thanks! i’ll use surely this in my site! Please help Campania…

Daniel Baroody
Jan 21, 2008 at 9:00 am

this is great. I actually did this about 2 months ago to a CMS based website where the user didn’t have the ability to alter a photo that they wanted type on so i came up with the div over the image solution to create a faded image look. sweet i feel ahead of the times!!!

Livingston Samuel
Jan 21, 2008 at 11:01 am

Wonderful effect!

I’ll defentiely put this on good use. Thanks for sharing :)

gabriel
Jan 21, 2008 at 4:53 pm

thanks,
very nice

Me
Jan 21, 2008 at 5:11 pm

Looks like the same tutorial as A List Apart.

Afsin
Jan 21, 2008 at 5:17 pm

Absolutely wonderful, thnx

Darren Northcott
Jan 21, 2008 at 5:59 pm

Excellent Tutorial! definately saves on load times.

IE is definately the bane of internet browsers. I have a PNG hack script for download on my website. Definately worth a look if you use alot of png’s.

Keep up the good work!

Dimitri Giani
Jan 22, 2008 at 8:28 am

Hi!
Interesting idea.
For some friends, I’ve recycled your code for use it with the IEPNGFix and I’ve writted this tutorial:
http://webstandards.dimix.it/2008/01/22/testi-con-gradienti-in-css/

I hope that this post is of interest to you and to others.

Thanks for your posts!

Kela
Jan 22, 2008 at 10:39 am

Great technique! But.. when I copied the sample address to IE.. it wasn’t displaying anything..

june
Jan 22, 2008 at 11:59 am

Thanks for the tutorial! I’ve only tried out the png fix portion. For anyone thats running IE7 and using a stand alone version of IE6 to browser test. I’ve found that the transparent png only displays properly in a real/installed version of IE6.

Char
Jan 22, 2008 at 12:15 pm

this is really good. i didn’t think it was that easy…
and man, i hate IE >.<;;;

Vagelis
Jan 22, 2008 at 1:31 pm

Awesome tip ! Thnk you very much (again)

Hatkirby
Jan 23, 2008 at 2:26 pm

Wow, another great tutorial! Keep up the great work!

Sarbjit Singh Grewal
Jan 24, 2008 at 7:24 am

wow, this is very smart trick.

Xavier Pimienta
Jan 25, 2008 at 6:43 am

I read your posts a time ago and I found it amazing! This post is very, very useful!

Thanks for your valuable information!

Regards,
Xavier

Amos
Jan 25, 2008 at 8:53 am

Thanks for the tutorial!
Keep up the good work!

bob
Jan 25, 2008 at 9:20 am

Your site F’ing rocks! Thanks for all the great tutorials.

Mac
Jan 25, 2008 at 11:02 am

This site is the shiznit!!!!!

AMHP
Jan 25, 2008 at 11:13 am

Does anyone see any reason why this wouldn’t work or would cause problems in html email?

thanks!

Vinifera7
Jan 25, 2008 at 1:04 pm

This is fantastic! Not only is it easy to implement, but it also has all the advantages of image replacement (being real text, not an image).

Franky Aguilar
Jan 26, 2008 at 4:48 pm

This is amazing. Not only do you get the awesome effect… you get to keep your text, which is great for the super spiders. Nice tut…

Dennison Uy - Graphic Designer
Jan 27, 2008 at 1:48 pm

CSS Globe has a similar article: http://www.cssglobe.com/post/1227/css-text-gradient

Boris
Jan 30, 2008 at 10:53 am

very interesting, i like the simple idea of it without editing the images with text and just have html text controlled by css, though one problem is no png support in IE6 and javascript fixes tent to slow web site down or not work when people disable their javascript. Well, when next server pack upgrade comes out then all IE6 will force upgrade into IE7 then this would be more cross browser, but the prob with this would be that it will take quite a while until everyone upgrade.

Foxinni - Wordpress Designer
Jan 30, 2008 at 12:20 pm

Wow that is cool. Will use it right away. Saving it to my delicious right now!

Damjan Mozetic
Jan 30, 2008 at 3:51 pm

Beautiful site, with beautiful content. I liked this article a lot.

marianne mcdougall
Jan 31, 2008 at 8:38 am

The design guru says – this is a well crafted and well put together website
with some really fine tutorials.

Rectifier
Feb 2, 2008 at 4:23 am

This rocks thanks!

schnuck
Feb 3, 2008 at 4:52 pm

new? inventive? tutorial? or simply stolen?
http://www.khmerang.com/index.php?p=95

Erik Curtis
Feb 5, 2008 at 2:18 pm

Nice effect, but not quite the same as the image sample that accompanies the article. The sample image shows a mirror image.

Working at Home Mom
Feb 5, 2008 at 2:44 pm

Thank you so much for this. I love it and am going to try it out now.

jive
Feb 8, 2008 at 2:15 pm

Brilliant idea.

coroijo
Feb 8, 2008 at 8:58 pm

why bother people? more knowledge source for everyone.. that’s what sharing means for..

David Jacques-Louis
Feb 9, 2008 at 11:07 am

Fantastic

Sam Hardacre
Feb 10, 2008 at 10:39 am

Great idea : )

bbx
Feb 10, 2008 at 6:15 pm

I just added this trick on my website with an orange text, and a small letter-spacing, it looks beautiful!

You can see it in the second column (the orange titles) : http://bbxdesign.com/

John
Feb 11, 2008 at 4:41 am

Awesome effect! Will try out.
Thanks for sharing.
Best wishes,
Jonny

mukesh marwah
Feb 12, 2008 at 1:38 am

hi its not working in IE 6.0 (png problem grey box coming over the text check it again) if you rectify this problem of png then also let me know…

all the best
regards
mukesh marwah

Olenka
Feb 12, 2008 at 2:49 am

So clear! nice! thank u!

Marc Fowler
Feb 12, 2008 at 6:48 am

window.addEvent(‘domready’, function() {
var span = new Element(‘span’);
$$(‘h1’).each(function(el) {
span.clone().injectTop(el);
});
});
That’s one way of doing it for Mootools 1.1 as well, if anyone’s interested. Nice trick!!

d4ve
Feb 13, 2008 at 6:57 pm

Wow man this is pretty neat and now I’m watching the live comment preview, awesome

I am always very impressed by people who own GUI related talents/knowledge. Congratulations.

Ali SEVİMLİ
Feb 14, 2008 at 3:59 pm

Great..

cipher
Feb 16, 2008 at 9:42 am

a very good design, I must say that first.
The tips are also very nicely presented, handy and good.
A very well built page, have fallen in love with the layout. Wish I knew all that it takes to create such a page.

Regards,
cipher

DarkWolf
Feb 18, 2008 at 10:39 am

Nice! I love the effect!
I think that I will try it.

Thanks! :)

Francisco (Houston Wedding DJ) Perez
Feb 18, 2008 at 11:06 am

I love this one, I will use it for sure on my new website http://www.houstonpartybooths.com I think that will take care of both the design of a logo it will ad a new dimension to my header.

Thanks for the great tip

Jesse
Feb 18, 2008 at 5:02 pm

Or you could be the text on top, that way the text can still be selected like usual

Francisco (Houston Wedding DJ) Perez
Feb 19, 2008 at 10:18 am

The easiest one for me to do was “BLACK GLOSSY LINK” and I only implemented it on the Header, I wanted to implement another one for all the titles but, that requires more work and time or a different background (white) on my template. I’m satisfied for now with the way it came out.

http://www.houstonpartybooths.com Just the Header is changed.

Thanks

Zhao Weijian
Feb 20, 2008 at 10:15 am

hey this is really a good trick that you introduced! i will try it, but one thing i quite not ensure is that the ie6 trick, since i had tried many ways that mentioned from the internet, but none of it works, yeah, thats why we hate IE6.

btw this is my 1st visit in this site, really nice place here, really.

Tim Davies
Feb 24, 2008 at 10:13 am

Very nice tutorial
Should be helpful

Dragolux
Mar 3, 2008 at 1:12 pm

Wow, sweet tutorial! I LOVE CSS!!

datenkind
Mar 4, 2008 at 8:23 am

Really fancy stuff.

But why should one include this for IE6? The hack is one hack to much. This technique could be another good reason for switching to a better browser. So, don’t bother on making the IE6 “shiny”.

marianne mcdougall
Mar 9, 2008 at 9:11 am

Bonjour,
Quelques effets très bons qui si je m’obtiens à temps de mon programme fou de conception essayeront heureusement. Marianne – G3 Ecosse Créatrice

English – G3 Creative Scotland.

cha cha
Mar 11, 2008 at 10:09 pm

Very very useful, thanks a lot. I will use it at my web project

Photoshop Free Tutorials
Mar 24, 2008 at 3:03 am

Very useful trick, thanks for the info :)

Vandel
Apr 10, 2008 at 2:54 am

ouuughh…that’s so cool css. can work on Mozilla FireFox?

Chicagolady
Apr 10, 2008 at 3:02 pm

You are awesome!

Shefi
Apr 17, 2008 at 5:08 pm

“IE PNG hack is required if you want it to work on IE 6.”

If I am not mistaken you can use a .gif instead of a .png for the transparent image. And you don’t need the hack anymore.

Keep up the good work ;)

Henrik
Apr 21, 2008 at 8:06 am

Shefi: Good though but it won’t work! Because .gif don’t have support for partial transparency, while .png does.

But great little tutorial anyway

Werbeagentur Ansbach
Apr 24, 2008 at 1:52 pm

Super-Creative CSS-Trick.

I love it.

Ron S
Apr 26, 2008 at 7:12 am

I’ve found that this (and nearly every other variation of it) disables ClearType for the manipulated text in IE7 on XPsp2. That means we have jagged and non-antialiased text galore. And that’s the primary reason why I’m not going to use it in any of my designs.

bdiddymc
May 2, 2008 at 9:10 am

I’m using explorer 6 (as a test browser, so don’t shoot me!) and this isn’t working. I am viewing the demos live on this page. Has the hack not been set up in these demos?

Nick La
May 2, 2008 at 11:50 am

@bdiddymc – In the demo, there is only one H1 has applied the PNG hack for IE6 – that is the H1 reading “It works on IE6 too!”

harmu
May 4, 2008 at 5:47 am

nice, the ipod example was a good one, kinda mixes with the theme pretty nicely!

Calvin Tennant
May 4, 2008 at 6:09 pm

Phenomenal. That sums it up. One thing, because the image sits over the text, links don’t work. The best hack for this that I found was to overlay a div (z-index: 2;) with spaces (& nbsp) where the text is. Probably not the best option, but the simplest. Maybe if you set the opacity option in CSS3 to zero and wrote the same text in the overlaying div. I’m not about to muck around in CSS3 until IE8 is popularized.

Let me know what you think, this example is currently displayed on figmentmedia.ca.

Christian
May 9, 2008 at 8:47 am

wow – brilliant!

Blue Buffalo
May 9, 2008 at 1:53 pm

Very cool CSS trick! Thanks for sharing.

Quanlm
May 14, 2008 at 10:05 pm

Great! Thanks you so much

web design
May 16, 2008 at 6:15 am

web 2.0 tutorial. very respectfull :)

Nano
May 16, 2008 at 7:18 am

What if you want to add the span to a li instead of h1 using javascript?

Replacing the h1 with li in your javascript didn’t work. I have jquery.

Nano
May 16, 2008 at 7:18 am

What if you want to add the span to a li instead of h1 using javascript?

Replacing the h1 with li in your javascript didn’t work. I have jquery.

Wayne
May 16, 2008 at 4:20 pm

Brilliant stuff! Thanks!

Cary
May 19, 2008 at 3:24 am

Using 8-bit PNGs with alpha transparency will allow this same effect without any need for IE6 hacks. IE6 will just show the plain old text.

Games
May 20, 2008 at 2:30 am

Thank you so much. I will use these wonderfuls in my site. But only one of them ‘It works IE6 too’ works in IE5.

Ravish
May 20, 2008 at 5:16 am

can some one give the example / demo of the 8bit.. png image..

Thiago Elias
May 30, 2008 at 7:29 am

Parabens!!!.
Brilhante esse tutorial..

Thiago Elias.
BRAZIL.

Web 2.0 Designs
Jun 1, 2008 at 7:30 am

Cool Articles!
Light gradient, large text, bright colors. It’s all about Web 2.0 trend.

Jordy Wouters
Jun 2, 2008 at 6:00 am

Give me more web 2.0 stuff! I love this because i use al kind of shiny gradients for my designs. Also good for some html/css

OnlyYoursPiyu
Jun 3, 2008 at 6:02 am

Excellent as usual…. :)

barry
Jun 3, 2008 at 1:00 pm

The best ideas are the simplest.

Very cool indeed.

Hanush
Jun 5, 2008 at 10:20 am

A collection of cool copy and paste Text Gradients Effects. Create with you own text.

http://designz-web.blogspot.com/2008/06/css-gradient-text-effect.html

All you have to do is

* Type in your text
* Copy the code at top
* Paste them anywhere below head tag.
* Now copy the code found in the text area below the text font you want
* And paste it in you site anywhere below body tag where you want them to appear.

Hanush
Jun 5, 2008 at 10:22 am

I did this to make your css more useful and comfortable for everyone to use. All credit to you.
http://designz-web.blogspot.com/2008/06/css-gradient-text-effect.html

Thanks

CSS 2.0 effects
Jun 6, 2008 at 12:29 pm

I love this article, cool CSS effects for headings… :)

Giuseppe
Jun 7, 2008 at 4:20 am

Very useful css tip, especially for people don’t want to use flash in their websites .. a very good solution and is easy to implement! thank you

Peter
Jun 9, 2008 at 3:41 pm

Thank you for this one. Very neat trick, wonder what goes on behind the scenes.

pab
Jun 11, 2008 at 1:00 pm

well done.

uk website designers
Jun 12, 2008 at 10:24 pm

i love this, things are moving so fast these days, now i can make sites that use only css in the header.

Best Designs
Jun 13, 2008 at 11:54 am

It will help designers to create best designs for web 2.0 layouts.

Lee
Jun 13, 2008 at 7:06 pm

I just love this theme is it available and is it 2.51 compatible??

SEO - Search Engine Optimization Philippines - Perth Australia
Jun 14, 2008 at 8:57 am

Thanks for a great post!

Ilias
Jun 14, 2008 at 9:04 am

Thanks , Nice tutorial

e devlet
Jun 17, 2008 at 1:01 am

css background examples , Properties , Attribute – – css-lessons.ucoz.com/background-css-examples.htm

John
Jun 19, 2008 at 2:44 am

this css doesnt work in IE / Netscape browsers

John
Jun 19, 2008 at 2:55 am

you forgot to mention the div on top of the text that sources the background image

Web 2.0 Expertise
Jun 20, 2008 at 10:55 am

Great Articles on site, it will help to create web 2.0 layouts.

örnekleri dersleri
Jun 23, 2008 at 2:27 am

HI i need your help i really want to create my own website/web page but i dont know how to go about doing it so can you please help me out

soccer picks
Jun 25, 2008 at 5:35 pm

Wonderful effect! I’ll defentiely put this on good use. Thanks for sharing

Web 2 Development
Jun 28, 2008 at 9:34 am

Awesome tricks on this site, this is also part of web 2, sharing your knowledge…:)

Affordable Web Design
Jun 28, 2008 at 6:27 pm

Oh how wonderful this tutorial is, lol! Great stuff, you can bet yourself I’ll put this to good use. Is this compatible across browsers?

Karl Hardisty
Jul 3, 2008 at 5:14 am

The power of CSS coming to the fore, at last. Some very good examples here; even more so when one takes into account that they work in Internet Explorer.

Thank you for the collection – very educational.

Antonio Ciccarone
Jul 6, 2008 at 5:29 pm

Some of the comments people leave are so stupid. I love the code and idea behind it, but have found it to work only when the conditions are right. Thanks for the snippets and awesome site. Especially this comment preview, that’s hot.

cantik
Jul 6, 2008 at 9:19 pm

This is one of the best CSS tutorial I found.
Thanks….

Colin Miller - Freelance web designer
Jul 9, 2008 at 2:22 am

Wow! I like this a lot. I never realised you could do so much with a transparent .png – Worth exploring further! Excellent

Hunka
Jul 14, 2008 at 8:08 am

Excellent tutorial.

Web 2 Development
Jul 15, 2008 at 12:19 am

Great effect! This is common trend for web 2 sites….!

hossein
Jul 16, 2008 at 3:32 pm

very vey very nice
you did it very well
i loved it

real estate postcards dude
Jul 17, 2008 at 1:07 pm

This is so sick!!! Right on!!! I had no idea anything this could be done. And best of all the code is simple and clean.

Keep em coming!!

thanks

People Search Dude
Jul 18, 2008 at 1:15 pm

right on! nice one!

Business Oceans SEO Consulting
Jul 18, 2008 at 1:30 pm

The best part about the CSS coding is the bandwidth savings.
Nice enhancement with just a little extra love added!

Excellent!

Stephanie
Jul 19, 2008 at 1:08 am

Great! I’ve been looking for something like this for awhile, it will save me a lot of time if I choose to use this.

Donna
Jul 20, 2008 at 12:12 am

you are so generous! thanks for sharing these great ideas along with all the details necessary to actually use them

best web design
Jul 20, 2008 at 10:05 am

Good effect…:)
Thanks for giving nice tips on all useful stuff.

Asep Sumardi
Jul 25, 2008 at 10:44 am

thanks man ! this very cool

Hanush
Jul 25, 2008 at 12:18 pm

A collection of cool copy and paste Text Gradients Effects. Create with you own text.

http://designz-web.blogspot.com/2008/06/css-gradient-text-effect.html

All you have to do is

* Type in your text
* Copy the code at top
* Paste them anywhere below head tag.
* Now copy the code found in the text area below the text font you want
* And paste it in you site anywhere below body tag where you want them to appear.

I did this to make your css more useful and comfortable for everyone to use. All credit to you.

Marta - AttitudeWebsites.com
Jul 27, 2008 at 3:05 pm

Hi, I like this idea, but I’m having trouble to make it working in WordPress. Could you share some tips on where actually put this code into? I was trying in page.php for page headers but it wasn’t showing up. I would be grateful for any tips, thanks.

Eat Izmir
Jul 31, 2008 at 1:10 pm

Great tips thank you very much for the information

reliable IT solution
Aug 9, 2008 at 10:24 pm

Thanks for png fix for IE6 in last post, perfect solution for web designers.

hotq uehqm
Aug 10, 2008 at 8:56 am

hpafoy cqnxe aulem fnpz yzguwjbf fmhleixk hbruqxnmk

Sandeep
Aug 16, 2008 at 11:43 am

Great effective
Thanks a lot!

Sandeep

Begginer Web Designer.

Create Sean
Aug 16, 2008 at 9:11 pm

Wow! this is a really great tutorial – will definitely be using this.

creativelotus
Aug 18, 2008 at 1:48 pm

thanks.. i will be trying this out on my redesign.

CSS Model
Aug 23, 2008 at 4:19 am

Really like it. Very clearly explained. Thanks!

vikas
Aug 25, 2008 at 1:55 am

nice article

Shoes
Aug 27, 2008 at 4:12 pm

Thank You! An excellent way to add graphical quality with minimal time overhead.

Alina
Aug 29, 2008 at 4:27 am

Thank you! :) I will try it!

marjurhy
Aug 29, 2008 at 12:39 pm

i wanna learn to costumize my own blog. Something different from any other blogs which really shows my personality. I want a layout that is more catchy a retro style…how can i do it? Can you help me? this is my blog actually, marjurhy.wordpress.com–this is just new, very very new.

thanks a lot

Zeytin
Aug 30, 2008 at 11:32 am

Great effective.Thanks

Robin
Sep 3, 2008 at 9:43 pm

Apparently it’s much more easier than using flash content to replace texts……
nice idea!
Could you allow me to translate this article into Chinese and post it onto my own site? (PageTalks.com)

Fahd Hamad
Sep 12, 2008 at 7:54 pm

I really found the IE6 PNG hack very useful,

Thanks.

David Churchyard
Sep 22, 2008 at 4:54 am

Hi,

Exaples don’t work for me! IE 6.0.2900

Text is hidden by gradient

mario
Sep 24, 2008 at 2:25 pm

Pierwszy koment

J
Sep 25, 2008 at 2:31 pm

David that’s cuz you’re using a shit browser.

tjpeo odcwfalu
Sep 28, 2008 at 1:22 am

ubfprdcye csldbzmxu zwpcehi ntdy foimr lpwc fjzchxso

Sam Parkinson
Sep 28, 2008 at 11:32 am

Shoot that’s good CSS, selecting the text is a bit abnormal though.

Alanya
Oct 11, 2008 at 3:12 pm

Another great post from this page, thank you!

Web Designer
Oct 11, 2008 at 4:18 pm

This is an amazing trick! I would still rather create the image for compatibility, rather than fighting with different browsers

mert
Oct 14, 2008 at 12:42 pm

thanks

fanta
Oct 23, 2008 at 11:18 am

that’s great trick, but how to do the same for navigation for example, with tags ?

fanta
Oct 23, 2008 at 11:21 am

tag didn’t show up, I meant with: li tag

Jesse Donat
Oct 23, 2008 at 6:47 pm

Might be worth noting that the PNG hack isn’t necessary in IE6 if you use an 8 bit alpha blended PNG (which FIreworks can generate, but Photoshop can not…)

yu
Nov 20, 2008 at 2:16 am

Thanks a lot
Very fun

Usman
Nov 21, 2008 at 11:56 pm

Nice ver NICE
this should help me lot

Best Online Classifieds
Nov 24, 2008 at 10:03 am

Best lessons learned here. Thanks a million. We recommend this website to all.

GOOD JOB.

vipin vashisht the website designer
Dec 2, 2008 at 2:37 am

This the great trick to give the gradient color in text with css.

rakuten$amazon
Dec 3, 2008 at 10:54 pm

Thanks!
This is an amazing trick!

Henry
Dec 4, 2008 at 12:43 pm

Great post… excelent…!!!
http://www.crea-t.net

Carlos Hermoso
Dec 11, 2008 at 7:57 am

This is actually really useful. Thanks

estetik
Dec 18, 2008 at 6:15 pm

tag didn’t show up, I meant with: li tags

Ariyo
Dec 31, 2008 at 4:42 pm

Brilliant technique. I will use this in future projects for sure!
Thanks.

CraigCarson.co.uk
Jan 1, 2009 at 9:37 am

Yeah, this is a pretty cool wee effect. Its simple, it works and its another nice wee tool for the arsenal.

Car Wallpapers
Jan 3, 2009 at 2:18 pm

Awesome, Thanks!

Danny
Jan 7, 2009 at 3:39 am

Looks great!
Thanks for sharing, love the demo page, gonna try the demo zip immediately.

sanat
Jan 22, 2009 at 11:17 am

thanks admin

Austin Web Design
Jan 22, 2009 at 10:51 pm

This is a very cool idea. My only problem is the cursor goes a little funny. You can select and copy the text if you put it beneath the gradient image, but it took me a second to figure that out. When I first put my cursor on there, it stayed as the arrow, so I was (mistakenly) thinking “why did they use screenshots for the demo??”

Bill Ortell
Jan 26, 2009 at 2:55 pm

Well put, i introduced using png layers on html to many of my members and very few have taken it seriously, it’s nice to see that you’ve even taken the whole idea to a new level.

Literally, you can customize an enitre HEADER/FOOTER/MINISITE doin this sorta stuff :).

Well, done – and LOVE your site.

Dave
Jan 30, 2009 at 9:32 am

This is great, except the IE hack doesn’t seem to work. I’m looking at your page even in IE6 and the PNG is covering the words. Did I miss something?

Thanks!

Joshua
Feb 14, 2009 at 3:18 am

I am new to css and web design in general. I’ve spent about 3 hours on this so far and keep coming up with the same problem: the png gradient is resting above the text rather than on top of it. It appears to not want to occupy the same space. Any help would be greatly appreciated. Love the idea!

BaltaDesign
Feb 19, 2009 at 12:59 pm

Thank you for this one! Any variation with fonts/text is great

MegaFill
Feb 25, 2009 at 6:11 pm

Thx! I know this hack, but i dont know about IE6 fix… thx!

synlag
Mar 2, 2009 at 8:22 pm

Hey folks,

this is amazing!
Thx for this.
Check out worlds most innovative OpenSource Content Management System concrete5!
Cheers

العاب
Mar 5, 2009 at 7:05 pm

thank you man it’s owseome

Douglas
Mar 6, 2009 at 2:52 pm

If I don’t follow the hack for IE 6, what will the text look like? And for that matter how about other browsers? It’s great for those browsers that support it, but I want to make sure the text is at least readable for those that don’t.

SB
Mar 7, 2009 at 6:46 am

Great tutorial, found it very usefull…

dani
Mar 12, 2009 at 3:16 pm

hi
i think gradient is more effective in flash

estetik
Mar 18, 2009 at 12:09 pm

great post. very useful information for me.

estetik
Mar 20, 2009 at 12:54 pm

Thank you This is great, except the IE hack doesn’t seem to work. I’m looking at your page even in IE6 and the PNG is covering the words. Did I miss something?

Thanks!

rent a car
Mar 20, 2009 at 12:55 pm

I’m looking at your page even in IE6 and the PNG is covering the words. Did I miss something?Thanks!

arac kiralama
Mar 20, 2009 at 12:55 pm

this is amazing!
Thx for this.
Check out worlds most innovative OpenSource Content Management System concrete5!
Cheers …

oto kiralama
Mar 20, 2009 at 12:56 pm

great post. very useful information for me.

Szymon
Mar 20, 2009 at 8:13 pm

Wow, that’s so simple and nice! I can’t wait to use it on my blog.

web designer - dave calvert
Mar 23, 2009 at 7:45 pm

pretty damn cool ………

theGweilo-com
Mar 26, 2009 at 3:25 am

Excellent! I like it

Silver Knight
Mar 26, 2009 at 6:46 am

Very nice! Dead simple to implement, and very classy looking end result. Thanks much for this tip. Only wish I had thought of it. Pure genius! :)

Estetik klinikleri
Mar 30, 2009 at 2:14 am

thanks for this usefull information. have a good work.

sinema bursa
Apr 1, 2009 at 8:49 am

thanks you good article. nice sharing.

theme download
Apr 7, 2009 at 2:01 am

thanks for article.ı searching it.

seo
Apr 7, 2009 at 4:42 am

nice article.thanks.

estetik
Apr 13, 2009 at 4:49 am

Very informative page about CSS Gradient Text Effect. Tanks for sharing the info.

Türkmenler
Apr 22, 2009 at 2:16 pm

very nice thank you

Mark Reilly
Apr 23, 2009 at 5:13 pm

Great tutorial. I have used this on one of my sites and I am very happy.

One suggestion is to use PNG8 rather than PNG32 for your transparencies. You have to use Fireworks rather than Photoshop to get this to work properly. As Fireworks supports alpha transparency in PNG* and PS only supports index transparency (i.e. same as GIF transparency) See this article for more detail:
http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/

More hassle but this has TWO significant advantages: Smaller file sizes, and you don’t need to use the IE6 alpha filter, IE6 treats it like a PNG8 index transparency it just doesn’t show it. The Alpha Filter is not standard and is very intensive and slows down IE6 especially as it is called for each single PNG image. This way your site degrades gracefully, you don’t need to worry about removing the filter when IE6 finally dies. I use PNG8 for all my transparent images.

布里斯班
Apr 25, 2009 at 12:35 am

Such a cool effect!
Thanks for sharing.

merdiven
Apr 27, 2009 at 10:23 am

thank you sharing

merdiven
Apr 27, 2009 at 10:37 am

thank you, very nice text efect

Hosting Companies Review
Apr 28, 2009 at 12:01 pm

Wow! This is something new.

This will be useful for turnkey sites. People can easily create a cool looking logo without even touching an image editor.

Great Job! :)

tdz
Apr 28, 2009 at 9:22 pm

It don’t work on IE6, why is it. HELP ME !!!!. I’m very like it

Nathan Nash
May 4, 2009 at 6:57 pm

great! I’ve been looking for a way to implement something like this into my website. code > images.

Mike Schinkel
May 9, 2009 at 4:23 pm

This was exactly what I was looking for,…except you didn’t explain how to create the “1px gradient PNG (with alpha transparency) (and I alread knew how to do the other part. :-)

Seriously though, I’m probably out of your demographic (I’m a coder not a designer) but if you could add an update on how to quickly create that 1px gradient PNG (with alpha transparency) I would appreciate and so possibly would other coders who find this via Google. :-)

Jeff
May 11, 2009 at 11:49 am

Interesting idea. But it appears to have an unstated limitation: the PNG transparency must be the same color as your background. So you can’t, say, have a medium grey font, a white background, and a black gradient on top. There’s nothing that “masks” the PNG to the text.

I would love to figure out how to do that, though.

gaziantep evden eve taşımacılık
May 13, 2009 at 4:26 am

thanks you

Simple Station Web Design
May 13, 2009 at 10:03 pm

This was a good example of using gradients in web design but I’m not sold on the approach. As Adam mentioned it doesn’t degrade well to IE6 and without using Dean Edwards hack I’m not sure it would even display on a webpage.

Carl - Web Courses Bangkok
May 14, 2009 at 1:01 pm

This is a great method thanks. I`ve always wanted to do something like this and its such as simple method!

C

Flash Buddy
May 20, 2009 at 4:01 pm

So simply clever and cleverly simple. I’m a fan!

çorum
May 21, 2009 at 4:58 pm

thanks.. nice script

Araba Resimleri
May 21, 2009 at 4:59 pm

thanks.

flashfs
May 28, 2009 at 7:18 pm

It’s hard to select text, but maybe a good trick if you just want some (real) text with a gradient

Nikhil Verma
Jun 8, 2009 at 7:37 pm

Very good method to teach with examples and cool designs of web pages..

send me feedback.

henk
Jul 7, 2009 at 7:18 pm

hi, how to fix for backgrounds? i want a the following div with overlay
div#head{ height: 222px; border-bottom: 5px solid #333; background: #C36;}

Edac2
Jul 20, 2009 at 5:03 pm

That’s pretty cool, but it’s not very bulletproof. As soon as you enlarge the type, everything gets misaligned. Too bad you can’t mask the overlay like in Photoshop.

Andrea Hill
Jul 21, 2009 at 11:53 am

My biggest concern with this approach is that the text is not selectable with the mouse.

Fred Campbell
Jul 28, 2009 at 4:13 am

Sweet. I’ve seen a few approaches to this problem, but this is by far neatest piece of code – thanks for sharing.

EBONIQUE
Aug 8, 2009 at 1:32 am

what if we r using corel paint shop x2

keaglez
Aug 9, 2009 at 10:36 am

This was a good one… :) Thanks… I love it, and your website sure is cool…

jack
Aug 13, 2009 at 11:58 pm

If an imge is still required in CSS, why not creating the entire text as an imge???
This CSS is useless EXCEPT you do NOT need to use any image.

ais
Aug 15, 2009 at 1:22 pm

jack the fool just doesn’t get it…
the main idea here is that the image is reusable for any other texts without editing in Photoshop…

suraj
Aug 18, 2009 at 1:31 pm

the only issue is the heading text is not selectable anymore…

Guy who tested
Aug 26, 2009 at 3:12 am

Effect didn’t work with Opera. Gradient didn’t show up on text. Fixed it by setting span’s z-index larger than h1-element’s. For example:
h1 { z-index: 10; } span { z-index: 20; }

Jako
Sep 4, 2009 at 9:23 pm

Haha. cool skill. I love it.

Allain Lalonde
Sep 7, 2009 at 3:27 pm

That’s really smart. I’ll be using this idea soon.

Ujjwol
Sep 10, 2009 at 7:50 am

How do I use this in WordPress site ???

bagsin
Sep 10, 2009 at 7:39 pm

exciting tips.

Abdullah
Sep 11, 2009 at 3:00 am

Very very inspiring css technique i m very inspired.. thnkx friends..
keep posting nice css techniques..

Ezuca
Sep 12, 2009 at 5:30 am

Wow! Very clever. Now I know why I’m seeing texts which have a gradient effect, I thought they were just pure image. Thanks

Ronny
Sep 12, 2009 at 8:38 am

Thanks for sharing, helped.
Might be interesting: http://chifont.justneat.com

Cyrus
Sep 21, 2009 at 9:54 am

Great , CSS Gradient Text Effect
Great article. CSS saved web design
Cyrus
Visit http://www.psdtoxhtmlcoder.com

Michael
Sep 29, 2009 at 2:55 pm

Great tutorial here is how the javascript should be written to avoid any compliance bugs.

<!--
$(document).ready(function(){
//prepend span tag to H1
$("h1").prepend("");
});
// -->

Gene
Oct 9, 2009 at 7:21 am

Your site flashes whenever I use the firefox 3.5.3 scrollbar. Quite annoying.

Gayomatic
Oct 15, 2009 at 4:09 am

It is so gay to use iPhone as a demo.

;-)

petre
Oct 25, 2009 at 1:45 pm

Nice efects ;)

Dezzine
Oct 30, 2009 at 6:16 pm

It doesn’t work in IE6 at all!!!

Mike
Oct 31, 2009 at 4:51 am

Really useful skill

Stephanie
Nov 6, 2009 at 4:05 pm

What a wonderful thing to try out!

I guess it would work much better on black, than most other colors. Took me a minute to figure out how it worked, but I like the blank span just fine.

One_People
Nov 18, 2009 at 11:32 am

It doesn’t work in IE6 at all!!!

Debora
Nov 19, 2009 at 11:50 pm

Create fancy headings in really very interesting work. I found your post useful and now I m using it in my 83-640 website.

Basic Websites
Dec 8, 2009 at 1:03 pm

Excellent stuff, I’ve previously accomplished this using graphics programs, this is a much more elegant way of doing things. Shame about the IE hack…but hey it wouldn’t be IE without hacks would it?

patik modelleri
Dec 17, 2009 at 4:57 pm

buraya birseyler karalamak gerekiyor ama tam olarak ne yazacagimi bilmiyorum.

zoeldt
Dec 22, 2009 at 2:19 am

sweet sweet ;-) thanks for sharing

sara
Dec 25, 2009 at 10:54 am

Very Nice article Keep going on

lilsizzo
Jan 4, 2010 at 9:47 pm

xdas as
a
sdas
dsa
sa
dsa
d
sadas
dsa
asd

asda

vincentdresses
Jan 5, 2010 at 11:35 pm

The designs showed here show what simple and tasteful design is all about. Another one to consider

aljuk
Jan 9, 2010 at 5:45 am

Stunningly simple. Thanks, I’ll be using this with the jQ prepend.

crowdsourcing website
Jan 15, 2010 at 2:17 am

interesting headings yet very simple codes… will be using them for sure.

psd xhtml
Jan 17, 2010 at 3:35 pm

it is funny work for ie6, ie5 and ie5.5

Nissa Askew
Feb 17, 2010 at 11:39 pm

Great tutorial. I will definitely be trying this out.

zabipapa
Feb 19, 2010 at 8:29 am

wow!!!

very cool :d

Trim Qemali
Feb 23, 2010 at 2:37 pm

Wow this is one of the most interesting CSS stuff i have ever seen. Thank you for this tutorial, i will implement some of you examples on my sites.

shoaib hussain
Feb 24, 2010 at 9:22 am

this is just awesome,and is really so simple.thnx a lot

santiago pilgerweg
Mar 2, 2010 at 8:41 am

cool Trick!
gonna use it soon … :-)
thanks for posting!

zeron
Mar 6, 2010 at 7:37 am

its nice!!!

Shubham
Mar 8, 2010 at 1:39 am

its awesome…I didn’t expected that it could be done with CSS.!

kython89
Mar 31, 2010 at 2:26 pm

I just got done saying that it couldn’t be done without rendering everything in Photoshop ahead of time. Then I Googled and found your site.
Thanks so much for this tip and I like the jQuery prepend addition. That was the icing on the cake.

gadarf
Apr 3, 2010 at 9:03 pm

Muito bom, realmente deixa o site mais leve.

Thiago Holanda
Apr 4, 2010 at 3:27 pm

Congratulations for this trick! It’s really cool and easy to use.

Artur
Apr 5, 2010 at 3:46 am

I have found this site recently and I am really surprised by the number of excellent lessons. thank.(clapping)

jamie
Apr 28, 2010 at 11:41 am

could you tell me how i could apply this to a multi-line phrase? for example:
text text text text text text text text text
?

jamie
Apr 28, 2010 at 11:43 am

oops is stripped my code.
multi-line p tag with hard returns using br tags. i’ve been trying for a while and can’t seem to figure it out…. thanks!

Web Design
Apr 28, 2010 at 8:35 pm

so simple !! thanks

Chad
May 8, 2010 at 10:48 pm

Since “h1 span” is given a height of 31px, are we assuming then that all text this will be applied to will be 31px tall? Or would any height larger than the text work?

mauro
May 15, 2010 at 10:40 pm

It’s better if you use a image of the same height of text, and put 100% in the span height, then the gradient would be visible if you enter a new line or if your title is bigger than it’s container

Seth Carstens
May 20, 2010 at 12:48 am

How the irony sets in when you notice that all the samples on this website are IMAGES instead of CSS. way to go genius.

ipad apps
May 21, 2010 at 10:11 pm

CSS can achieve the effect of flash is indeed a cool technology

Abdul Wakeel
May 30, 2010 at 1:49 pm

I want to change the backgroudn color of this page
Any one can help me out
http://www.islamabadid.com/listen_to_fm_radios_islamabad/fm_100_islamabad/

anish
Jun 5, 2010 at 11:10 am

wow….really awesome…
this can also be used as a simple trick to make the text non-selectable.

Phil Doughty
Jun 12, 2010 at 3:53 pm

Nice effect –
If the screen was stretched/enlarged
and the text stretched also with it would the
image do the same?
or would there be BIG TEXT with a small image?

حسافه
Jun 16, 2010 at 1:34 pm

Nice ..!!

thanks Man ..

^^

Progs4u
Jul 6, 2010 at 11:05 pm

Thank you so much ..
You are very cool

TV apps
Jul 11, 2010 at 10:15 am

Thanks for a very useful tips!!

aiva
Jul 23, 2010 at 9:15 am

thanks for posting such an interesting study..

imran
Aug 6, 2010 at 5:20 am

This is very beautiful idea!!!!

Mo7mD.ZaYOnA
Aug 15, 2010 at 12:20 am

not work with me :(

Rusdimori
Aug 18, 2010 at 3:31 am

Woow.. You are cool…
..
Beautiful text.!
Thx for posting..
..

Dorian Muthig
Aug 25, 2010 at 12:51 am

That sure looks nice, but the text will no longer be selectable, because a floating object is covering it. Also, the behavior for the already closed tag is wrong, as it should not extend accross the parent object. As such, it is a bad idea to do that. Using the proprietary filters filter: progid:DXImageTransform.Microsoft.gradient (IE) or attributes -moz-linear-gradient and -webkit-gradient (Gecko/WebKit) is a far better solution as it may also save on HTTP requests.

hamid
Aug 27, 2010 at 9:35 am

http://www.prizebondlucky.com see my site nd enjoy

denizli oto kiralama
Sep 5, 2010 at 10:25 am

good code thanks

Glow
Sep 13, 2010 at 5:35 am

wow, what’s a useful skill.

Thanks to share.

انفجن
Sep 19, 2010 at 6:45 am

fantastic tutorial i want permission from you to translate it and but it in my site and sure ill redirect it to the source

Shahaab
Sep 28, 2010 at 4:17 am

Brilliant tutorial. Thank You ! :)

Badrun Tralala
Oct 1, 2010 at 10:04 pm

Very useful tutorial.. thanks…

hamid
Oct 14, 2010 at 6:15 am

see my webiste i hope u wil see nd enjoy

Manoj Rathore
Oct 15, 2010 at 8:42 pm

This is very helpful and amazing

Brett Widmann
Oct 24, 2010 at 6:48 pm

:D This is lovely! Thanks for the post.

sana 18f
Oct 25, 2010 at 9:20 am

hi,visit my site if u want my cell number thnx.

sana_khan8220@yahoo.com

GKash
Nov 9, 2010 at 6:56 am

very cool – and very easy to follow- thanks!!

photoshop stuff
Nov 17, 2010 at 3:15 am

Great tutorial, makes very stylish headings! Thanks.

Jalak
Nov 17, 2010 at 4:39 am

Great posting, thanks.

hcg wholesale
Nov 18, 2010 at 10:47 pm

Thanks for sharing this info!

Deepindera
Nov 23, 2010 at 7:42 am

Nice tutorial but the css only works good on white or black background (selected backgrounds). I guess there is no way in css to fill the gradient in actual characters instead of bg or is there ;)

C975A23
Dec 1, 2010 at 4:22 pm

very nice trick! thanks for sharing!

Dushyant
Dec 7, 2010 at 5:07 am

excellent post. Thanks for this

hace
Dec 13, 2010 at 12:22 am

不错,非常好~~

Devall Krem
Dec 13, 2010 at 6:36 am

very cool – and very easy to follow- thanks!!

S Smith
Dec 14, 2010 at 4:32 pm

I was a little narked when I found this. I’m a pedant and I’m afraid that “Pure CSS” shouldn’t include an image, at least that’s my opinion. So I set out to see if I could do it “properly” :)

background: -moz-linear-gradient(top, rgba(27,67,98,255) 0%, rgba(27,67,98,0) 100%);

if you replace the background image with the gradient as above, where 27,67,98 is your element background-color, it works just as well. (You’ll have to check out the options if you don’t use firefox)

mikwillson
Dec 21, 2010 at 2:24 am

Your article’s resource box should help to persuade your readers. No matter how amazing your article is if it’s not succeeding in driving traffic to your website cheap uggs

Juno Mindoes
Dec 23, 2010 at 10:42 pm

Though white iphone 4 is at high price, but with all-powerful function, we can see lots of people just crazy for the latest white iphone 4.

Henry Peise
Dec 24, 2010 at 9:12 pm

Today I have done a camera shootout with the white iPhone 4, the iPhone 3Gs and the iPhone 3G.

Uçak Bileti
Jan 11, 2011 at 4:59 pm

css graidentler fark veriyor

Rick
Jan 13, 2011 at 1:46 am

lovely .. thanks for sharing..

Sachin
Jan 18, 2011 at 4:03 am

how can use it working properly for IE6 browser

Robert Steers
Jan 20, 2011 at 4:12 pm

Excellent tutorial. These gradient effects are so useful!

Brandon Wright
Jan 22, 2011 at 10:14 am

I love this! Thanks :-)

Kenny Rogers Plastic Surgery
Jan 25, 2011 at 2:38 am

Wow great CSS effect. I will try on my site. You can check soon :)

Dayana
Jan 26, 2011 at 12:43 pm

nice scripts,please share the new effects with html5

Exasperated
Jan 31, 2011 at 5:15 pm

This isn’t a “pure CSS” solution. You can achieve this effect in modern browsers without the PNG overhead.

formula 21
Feb 1, 2011 at 7:15 am

Excellent tutorial. These gradient effects are so useful!

altın çilek
Feb 2, 2011 at 7:26 am

Thanks !!! Very usefull !!

altın çilek
Feb 2, 2011 at 7:30 am

nice scripts,please share the new effects with html5

hcg damla
Feb 2, 2011 at 1:17 pm

lovely .. thanks for sharing..

hcg damla
Feb 2, 2011 at 1:21 pm

This isn’t a “pure CSS” solution. You can achieve this effect in modern browsers without the PNG overhead

romadur
Feb 3, 2011 at 5:44 am

This isn’t a “pure CSS” solution. You can achieve this effect in modern browsers without the PNG overhead.

moliva
Feb 4, 2011 at 7:16 am

Wow great CSS effect. I will try on my site. You can check soon

sabina lamichhane
Feb 21, 2011 at 3:52 am

well plastic surgery is a very high type of treatment. it is done in the case of burn a deep cut etc. plastic surgery makes the skin look natural and hides any type of wound on your face or other part of your body. and it does not have much more effect aswell.
URL of your blog post
Kenny Rogers Plastic Surgery

hcg damla
Feb 25, 2011 at 12:29 pm

Thanks !!! Very usefull !!

SCC
Feb 25, 2011 at 6:20 pm

Using a transparent PNG overlay is a nice and relatively low-overhead way of creating a gradient or glossy effect. But CSS 3 offers us easier alternatives which are supported in the Safari, Chrome, and Firefox browsers. -moz-linear-gradient and -webkit-gradient will do almost as an effective job without requiring one to tinker with creating a png image. It would have been nice if these CSS3 standards had come to us a few years ago. CSS3 makes web design much easier. I used a PNG to make a kind of a glossy background and did not need to use positioning to do it.

Donna
Feb 26, 2011 at 5:15 pm

Omigosh this has got to be the prettiest webpage I’ve ever seen! I was almost too distracted by it’s beauty to grasp the info lol … but thnx so much for the help!! :D

Katarina
Mar 11, 2011 at 4:54 am

that’s a nice effect. I’ll use it for my website.
Thank you very much for sharing!

çilek
Mar 12, 2011 at 6:04 am

Thanks !!! Very usefull !!

parsley
Mar 12, 2011 at 6:05 am

Wow great CSS effect. I will try on my site. You can check soon

panax
Mar 12, 2011 at 6:06 am

lovely .. thanks for sharing..

How To Put On A Condom | How To Get Taller
Mar 17, 2011 at 5:24 pm

Now I know how to create fancy headings without rendering each heading with Photoshop. Thanks!!!

How To Get Taller | How To Put On A Condom
Mar 17, 2011 at 5:25 pm

CSS trick you showed does work! Amazing!!

Mehboob Talukdar
Apr 8, 2011 at 4:32 am

It’s amazing .. thanks for sharing..

Desarrollo Web
Apr 12, 2011 at 7:33 pm

cool, thanks for the demo.

dexx
Apr 17, 2011 at 1:51 pm

Excessive fear, anger, and work under stress last pregnancy, infants can lead to excessive hassaslığa. Intense emotions, going through the mother’s blood circulatory system and brain functions that affect the baby in some leads to the release of chemical

Yuulélé
Apr 19, 2011 at 2:44 am

you cane use “h1:after” in place of “h1>span” (for semantic maniacs)

wow
Apr 20, 2011 at 3:46 am

crap, the text is not selectable anymore

what
Apr 23, 2011 at 2:46 am

“Excessive fear, anger, and work under stress last pregnancy, infants can lead to excessive hassaslığa. Intense emotions, going through the mother’s blood circulatory system and brain functions that affect the baby in some leads to the release of chemical”

Probably why Marijuana needs legalized – For a healthier baby.

Cancerous Moles Pictures
May 4, 2011 at 3:24 pm

Hi there, I discovered your blog via Google even as searching for a comparable matter, your web site got here up, it appears goodI’ve bookmarked it in my google bookmarks.

Praveen
May 11, 2011 at 8:55 am

Cool! Thank you for the wonderful tutorial…:-)

Austin
May 12, 2011 at 1:41 am

Cool jqery effect .Loved it

小雷
May 13, 2011 at 8:38 pm

谢谢分享

Max
May 17, 2011 at 5:26 am

Hi,
unfortunately this doesn’t work for me. I’m using Firefox 4.0.1 and I tried that jquery version (with jquery 1.6.1 min). I only see a wide gradient rectangle, title text is behind it (invisible). Then I even copied the code from here, but still the same awful result.

designerashish
May 19, 2011 at 3:05 am

hmmmm….. good keep it up dear………

laser teeth whiten
May 27, 2011 at 4:44 pm

Outstanding speech Thank you . brb

iTechWhiz- Technology News, Reviews, Articles, Tips and Tutorials
May 28, 2011 at 10:21 am

These are some wonderful CSS text animation tutorial and tips by you indeed.

John
Jun 9, 2011 at 2:24 pm

This is decent but one large issue…the gradient is depicted by the background color of the h1 parent :(

Kory
Jun 28, 2011 at 1:06 pm

I can’t seem to get it to display correctly in IE7, could you provide an idea as to the CSS rules that need to be looked at please?

The top navigation uses this technique at http://kunitzshoes.ca/wordpress/

Thank you very much,

Kory

SEO
Jul 8, 2011 at 3:35 am

Information is helpful to learn a lot.

karthik
Jul 20, 2011 at 6:55 am

its very useful

طراحی وب سایت
Jul 29, 2011 at 12:33 am

its very useful

complex41
Aug 23, 2011 at 2:01 pm

And then he handed you the thirty-five 45

Aysel
Jul 31, 2011 at 1:59 pm

I wanna download photoshop but i don’t know how? Can some one send me it on skype “aysel_mega”

L
Aug 5, 2011 at 5:40 am

HAHAHAHAAA!

game
Jul 31, 2011 at 9:50 pm

Thx. The information is very interesting. Can be used practically.

Stéfan
Aug 2, 2011 at 12:40 pm

I tried to apply this to my blog’s title but I can’t make it work. I don’t understand what I’m doing wrong.

I uploaded the PNG files to /wp-content/themes/graphene/css-gradient/images

I added the following to my CSS file :

.header_title span {
background: url(css-gradient/images/gradient-white.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}

Does anyone have an idea what I’m missing?

Diel
Aug 7, 2011 at 1:08 am

Try putting quotation marks around the image source.
url(‘css-gradient/images/gradient-white.png’)…….

Abdul Wahhab
Aug 4, 2011 at 3:38 am

Though we do not prefer testing websites on IE6 since Google has stopped supporting!! and on the other hand I wouldn’t prefer using any fixes it leads the browsers to crash sometimes :/… and thanks for the useful tool… :D

Frank
Aug 11, 2011 at 11:18 am

Nice, but how do you make those images? I’ve been trying for an hour, with Photoshop.

xbox 360
Aug 25, 2011 at 10:13 pm

so far so good

santrozen
Aug 26, 2011 at 12:29 am

awesome. easy to do

Cult
Aug 28, 2011 at 8:28 pm

Elegante, bem bacana mesmo!

Mon Aquino
Sep 2, 2011 at 3:09 am

If you don’t have photoshop, try this to create the gradient. :)
http://pixlr.com/editor/

but i think its possible also to create this effect using the -moz-linear-gradient in css by using another .

eTube
Sep 3, 2011 at 6:18 pm

Ha sido muy util.. Merzi.

Jordi.

mydexter
Sep 11, 2011 at 12:15 am

Ha sido muy util.. Merzi.

ชุดชั้นใน
Oct 5, 2011 at 10:44 pm

Great information, it’s useful

parth
Oct 9, 2011 at 11:13 pm

good job….very helpfulllll

696 Clothing
Oct 16, 2011 at 7:16 pm

Very nice tutorial. I’ve been looking for this to make my post title blends with the template concept. Thanks alot.

Charis
Oct 19, 2011 at 4:37 pm

Nice one … bookmark

Krishna Kumar
Oct 20, 2011 at 4:06 am

Amazing Trick…..

เครื่องจักรกลหนัก
Oct 24, 2011 at 4:49 am

Great information, it’s useful

televisionreview
Oct 24, 2011 at 5:41 am

Nice, but how do you make those images? I’ve been trying for an hour, with Photoshop. Thankyou for post

waef
Oct 25, 2011 at 3:11 am

awefawef

ccmag
Nov 13, 2011 at 11:30 pm

Nice! Tutorial.. Thank a lot this tips helpful for me.

birdbird
Nov 15, 2011 at 3:29 am

Nice! Tutorial.. Thank

nmbb
Nov 22, 2011 at 2:50 am

hvbuiuho

Maryland SEO
Nov 22, 2011 at 9:28 pm

I really love all the new CSS features. Make’s websites a lot more dynamic and interesting for a viewer. I plan to use a few of these tricks on my next site.

Bacha
Nov 23, 2011 at 9:58 am

this is realy nice one thanQ

markand
Nov 24, 2011 at 1:16 am

Nice tutorial thnx fr d help ;)

Thomas | Website Design Durban
Dec 1, 2011 at 5:34 am

Been searching high & low for a simple CSS tutorial like this. TX!

Small Dog Breeds
Dec 1, 2011 at 1:33 pm

Thank for Tutoria, I’m studying CSS.

Freelance Artist
Dec 8, 2011 at 12:09 am

Awesome tutorial! I’m using the gradient effect on my H1 tag and it works like a charm. Thank you!

What to buy for christmas
Dec 8, 2011 at 1:03 am

Thank for Tutoria, I’m studying CSS.

Best Television Price
Dec 8, 2011 at 1:04 am

Nice! Tutorial.. Thank

Best BlurayDiscPlayer Price
Dec 8, 2011 at 1:05 am

Awesome tutorial! I’m using the gradient effect on my H1 tag and it works like a charm. Thank you!

bogdan
Dec 9, 2011 at 6:23 am

The drawback is that you MUST use neutral backgrounds.
Which is quite a massive drawback

mian
Dec 11, 2011 at 5:43 pm

Thanks for the great tip! I was looking for CSS font formatting tips but came across this instead. Better than what I wanted. Great find. :)

mian
Dec 11, 2011 at 5:48 pm

mm…it doesn’t work if the h1 text has more than one row

Dhanesh T S
Jan 19, 2012 at 7:03 am

Awesome tricks….!!

spring valley vitamins
Jan 20, 2012 at 4:37 am

definitely, a BIG BIG deals.thx, for article

Jim
Jan 27, 2012 at 4:44 pm

so the text i want to have a gradient effect is sat ontop of another image. can i still do this?
css:
/* ### WELCOME BOX ### */
.welcomeBox{ padding-bottom:37px; width:658px; overflow:hidden;}
.welcomeBox h2{
padding:24px 0px 40px 30px;
text-transform:uppercase;
font-size:24px;
font-family: “Myriad Pro”, Arial, Helvetica, sans-serif;
font-weight:Bold;
color:#FF3;
background:url(../images/welcome_heading.png) left top no-repeat;
}
.welcomeBox h2.about { text-transform: none; }
.welcomeBox p{ padding-bottom:20px; font-size:12px; color:#888888; line-height:20px;}
.welcomeBox img{ padding:0px 33px 0px 0px; float:left;}
.welcomeBox a{ padding:9px 16px 0px 16px; height:23px; font-style:italic; color:#000000;text-decoration:none; float:right;font-size:12px; font-weight:normal; font-style:normal; background:url(../images/more_button.jpg) left top no-repeat;}
.welcomeBox a:hover{ text-decoration: none; color:#d92f7d;}

Dan
Feb 6, 2012 at 6:06 am

http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-pure-css-text-gradients/

do it like this instead much better!

Andrew
Mar 30, 2012 at 5:03 am

That is much better in the sense that it’s pure CSS, but it’s webkit only, so the support is not great, this method covers all browsers even down to IE6. For now, I’d say this method was better overall!

Thank you very much for this blog post! It’s a brilliant trick!

Aniket - Freelance Web Designer
Feb 10, 2012 at 11:07 am

Really Nice Tutorial.
Downloaded the attached zip file. Hope this is helpful in future for me. Already bookmarked this.
Thanks a lot.

Red Rays
Mar 1, 2012 at 12:58 pm

Its a very nice place to capture and implementing jquery and CSS.
I have implemented this

Panagiotis
Mar 18, 2012 at 2:05 am

I got the idea for making Gradient Text from this blog and it works perfectly. I just wanna say that there is an alternative on Photoshop.

Have a look at
http://www.youtube.com/watch?v=VlBtrDm_JCE

d
Mar 20, 2012 at 7:17 am

fgvvhn

ahmad
Mar 30, 2012 at 2:13 am

Location of Training

David Bachman
Apr 19, 2012 at 7:36 am

this is bad it dont woik

model
Apr 30, 2012 at 4:49 am

This does look like a great theme.

yemek tarifleri
May 2, 2012 at 12:07 pm

That is much better in the sense that it’s pure CSS, but it’s webkit only, so the support is not great, this method covers all browsers even down to IE6. For now, I’d say this method was better overall!

Elle
May 26, 2012 at 2:14 am

Elle , Directioner , Belieber , and I have more followers than friends

cyn
May 31, 2012 at 7:18 am

Hi I tried your code it works good but my problem is that my Headline should be inside a 30px height space and now it has too much space up and down.. how can I make the DIV smaller? I tried in css but it is not working :( please help meee

cyn
May 31, 2012 at 8:51 am

just found the solution :)
h1 {
margin: 0;
}
that will do it, thanks anyway!!

Dmitriy
Jun 1, 2012 at 8:28 am

330%/100%
that font-size/leading
but why set the value of 100%, if this value is default?

Dmitriy
Jun 1, 2012 at 12:50 pm

How I can do it on white background?

http://it-spec.com.ua/kremen/error.png

DymoLabels
Jun 1, 2013 at 9:40 am

hi
i really like your collection
thanks for sharing your collection
keep it up

igxxx
Dec 10, 2016 at 10:07 pm

good

Post Comment or Questions

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.