CSS gradient text Effects of two methods comparison _ Experience Exchange
Source: Internet
Author: User
Do you want to create a title with a gradient without Photoshop? Here's a simple CSS trick to show you how to use CSS and PNG images only to create this effect. This method is tested for most mainstream browsers. Of course, IE6 needs a hack that supports transparent PNG (thankfully, Microsoft is trying to automatically upgrade the user's IE6 to ie7^.^, extended reading: Warning:an IE7 auto-update is Coming Soon)
Advantage
This is a pure CSS trick that doesn't use any JA script or flash, and it works on most browsers (IE6 need to support transparent PNG hack)
This is the perfect title design and you don't have to use Photoshop, which will save you a lot of bandwidth and time.
You can use this effect on any page font, and the font size is variable.
How does he work?
The trick is simple. We simply used the 1px wide transparent PNG overlay on the text.
If you don't want to have an empty <span> tag in your code, you can use JavaScript to dynamically generate it. Here is a simple jquery production method.
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.