`
jsntghf
  • 浏览: 2559944 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

CSS文本渐变效果

CSSjQueryIEFirefoxJavaScript 
阅读更多

你不想打开PhotoShop制作每一张标题文字图片的渐变效果吧，这次是一个简单的技巧——仅仅使用一张图片来实现所有的标题文本的渐变效果。

 

仅仅使用一个空的<span>，运用背景图片设置position：absolute覆盖在文本上。

 

这个技巧几乎在所有浏览器上都工作得很好：FireFox，Safari，Opera，就连IE6也很好。

 

特点：

1.纯CSS实现，很好的兼容性
2.绝佳的美化标题的技巧，不用PS每张标题图片
3.可运用于任何web字体，并且文本是可以缩放的

 

想知道如何做的么，继续阅读吧。

 

html代码：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>CSS Gradient Text</title>

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $(".jquery h1").prepend("<span></span>");
      });
    </script>

    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <div class="gradient1">
      <h1><span></span>CSS Gradient Text</h1>
      <h1 style="font-family: Georgia, 'Times New Roman', Times, serif;"><span></span>How about Georgia?</h1>
    </div>

    <div class="gradient2">
      <h1><a href="http://www.webdesignerwall.com"><span></span>Black Glossy Link</a></h1>
    </div>

    <div class="gradient3">
      <h1><span></span>Dark on Light Sample</h1>
    </div>

    <div class="gradient4">
      <h1><span></span>Metallic shine</h1>
      <h2>Doesn't this look cooler than Web 2.0?</h2>
    </div>

    <div class="gradient5">
      <h1><span></span>Hello, I'm Shinely</h1>
    </div>

    <div class="gradient6">
      <h1><span></span>Vertical Stripe</h1>
    </div>

    <div class="gradient7">
      <h1><span></span>Horizontal Stripe</h1>
    </div>

    <div class="pattern">
      <h1><span></span>Wow, Zebra</h1>
    </div>

    <div class="gradient-ie">
      <h1><span></span>It works on IE6 too!</h1>
    </div>

    <div class="gradient1 jquery">
      <h1>jQuery prepend version</h1>
    </div>

  </body>
</html>

 

css代码：

 

body {
	font: 75%/160% Arial, Helvetica, sans-serif;
	width: 700px;
	margin: 20px auto;
}

.gradient1 h1 {
	font: bold 330%/100% "Lucida Grande", Arial, sans-serif;
	position: relative;
	margin: 30px 0 50px;
	color: #464646;
}
.gradient1 h1 span {
	background: url(images/gradient-white.png) repeat-x;
	position: absolute;
	display: block;
	width: 100%;
	height: 31px;
}

.gradient2 h1 {
	font: bold 310%/100% "Lucida Grande", Arial, sans-serif;
	position: relative;
	margin: 30px 0 50px;
	color: #464646;
	text-transform: uppercase;
	letter-spacing: -2px;
}
.gradient2 h1 span {
	background: url(images/gradient-glossy.png) repeat-x;
	position: absolute;
	display: block;
	width: 100%;
	height: 18px;
}
.gradient2 a {
	color: #000;
	text-decoration: none;
}
.gradient2 a:visited {
	color: #000;
}
.gradient2 a:hover {
	color: #555;
}

.gradient3 {
	background: #d7e1e3;
	padding: 30px 10px;
	padding: 30px 0 30px 30px;
}
.gradient3 h1 {
	font: bold 280%/100% "Lucida Grande", Arial, sans-serif;
	position: relative;
	margin: 0;
	color: #000;
	letter-spacing: -2px
}
.gradient3 span {
	background: url(images/gradient-grey.png) repeat-x;
	position: absolute;
	display: block;
	width: 100%;
	height: 29px;
}

.gradient4 {
	background: #000 url(images/gradient4-bg.png) repeat-x left bottom;
	padding: 30px 0 60px 30px;
	margin: 30px 0 50px;
}
.gradient4 h1 {
	font: normal 340%/100% "Lucida Grande", Arial, sans-serif;
	position: relative;
	margin: 0;
	color: #fff;
}
.gradient4 h2 {
	font: normal 150%/100% "Lucida Grande", Arial, sans-serif;
	margin: 10px 0 0;
	color: #b7b7b7;
}
.gradient4 span {
	background: url(images/gradient-dark.png) repeat-x;
	position: absolute;
	bottom: -0.1em;
	display: block;
	width: 100%;
	height: 29px;
}

.gradient5 {
	background: #000;
	padding: 30px 0 30px 30px;
	margin: 30px 0 50px;
}
.gradient5 h1 {
	font: normal 330%/100% "Lucida Grande", Arial, sans-serif;
	position: relative;
	margin: 0;
	color: #fff;
	letter-spacing: -1px;
}
.gradient5 h1 span {
	background: url(images/gradient-shine.png) repeat-x;
	position: absolute;
	display: block;
	width: 100%;
	height: 64px;
}

.gradient6 {
	background: #000;
	padding: 30px 0 30px 30px;
	margin: 30px 0 50px;
}
.gradient6 h1 {
	font: bold 310%/100% "Lucida Grande", Arial, sans-serif;
	position: relative;
	margin: 0;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: -2px;
}
.gradient6 h1 span {
	background: url(images/gradient-dark-stripe.png) repeat-x;
	position: absolute;
	bottom: -0.1em;
	display: block;
	width: 100%;
	height: 29px;
}

.gradient7 {
	background: #000;
	padding: 30px 0 30px 30px;
	margin: 30px 0 50px;
}
.gradient7 h1 {
	font: bold 310%/100% "Lucida Grande", Arial, sans-serif;
	position: relative;
	margin: 0;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: -2px;
}
.gradient7 h1 span {
	background: url(images/gradient-dark-stripe-hz.png) repeat-x;
	position: absolute;
	bottom: -0.1em;
	display: block;
	width: 100%;
	height: 29px;
}

.pattern {
	background: #000;
	padding: 30px 0 30px 30px;
	margin: 30px 0 50px;
}
.pattern h1 {
	font: bold 600%/100% "Lucida Grande", Arial, sans-serif;
	position: relative;
	margin: 0;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: -6px;
}
.pattern h1 span {
	background: url(images/pattern-zebra.png);
	position: absolute;
	display: block;
	width: 100%;
	height: 100px;
}

.gradient-ie h1 {
	font: bold 320%/100% "Lucida Grande", Arial, sans-serif;
	position: relative;
	margin: 30px 0 50px;
	color: #464646;
}
.gradient-ie h1 span {
	background: url(images/gradient-white.png) repeat-x;
	position: absolute;
	display: block;
	width: 100%;
	height: 31px;
}

.jquery h1 {
	font: bold 280%/100% "Lucida Grande", Arial, sans-serif;
	position: relative;
	margin: 30px 0 0;
	color: #464646;
}
.jquery h1 span {
	background: url(images/gradient-white.png) repeat-x;
	position: absolute;
	display: block;
	width: 100%;
	height: 31px;
}

 

效果如图所示：

 

分享到：
| if和each的组合
评论
7 楼 jinrey 2010-12-22  
不错，照这个思路可以做点特效
6 楼 蓝之月 2009-12-24  
我这边ie6和firefox都不能正常显示呀
5 楼 jsntghf 2009-12-24  
daxiong921 写道
.gradient1 h1 {
	font: bold 330%/100% "Lucida Grande", Arial, sans-serif;
	position: relative;
	margin: 30px 0 50px;
	color: #464646;
}
.gradient1 h1 span {
	background: url(images/gradient-white.png) repeat-x;
	position: absolute;
	display: block;
	width: 100%;
	height: 31px;
}


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

请教作者，为什么 <span></span>加在CSS Gradient Text前面就可以整行都充满图片呀？
CSS Gradient Text<span></span> 这样就不行呢？ 

font: bold 330%/100% "Lucida Grande", Arial, sans-serif;

这里字体 330%/100% 这样表示字体大小该怎么理解呀？

这里只是简单的使用了1px宽的透明png覆盖在了文本上。
330%/100%等价于font-size: 330%;line-height: 100%;
4 楼 daxiong921 2009-12-23   
.gradient1 h1 {
	font: bold 330%/100% "Lucida Grande", Arial, sans-serif;
	position: relative;
	margin: 30px 0 50px;
	color: #464646;
}
.gradient1 h1 span {
	background: url(images/gradient-white.png) repeat-x;
	position: absolute;
	display: block;
	width: 100%;
	height: 31px;
}


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

请教作者，为什么 <span></span>加在CSS Gradient Text前面就可以整行都充满图片呀？
CSS Gradient Text<span></span> 这样就不行呢？ 

font: bold 330%/100% "Lucida Grande", Arial, sans-serif;

这里字体 330%/100% 这样表示字体大小该怎么理解呀？
3 楼 qinglintan 2009-12-23  
使用JQuery效果确实的不错
2 楼 jsntghf 2009-12-23  
IE6下可以在head中添加
<style> 
h1 span { 
   background: none; 
   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale'); 
} 
</style> 
试试
1 楼 wr123 2009-12-23  
好像在傲游和IE6出现不了这个效果
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css颜色渐变菜单效果

    接下来，我们应用CSS来创建渐变效果。例如，为`&lt;ul&gt;`设置线性渐变背景： ```css .gradient-menu { background-image: linear-gradient(to right, #ff0000, #00ff00, #0000ff); /* 从左到右，由红色渐变为绿色，再...

    css字体渐变效果特效代码.rar

    "css字体渐变效果特效代码.rar"这个压缩包文件提供了一种实现CSS字体渐变效果的方法，适用于想要为网页文本添加动态和美观效果的设计者。 CSS3的`linear-gradient()`函数是创建渐变的关键，它可以应用于背景、边框...

    兼容各浏览器的css渐变

    css渐变代码,代码兼容各个浏览器，适用于ie7以上及各主流浏览器

    css3文字模糊渐变效果zip

    在CSS3中，文本模糊渐变效果是一种富有创意和视觉吸引力的设计技巧，它可以使文本呈现出从清晰到模糊的过渡效果，增加网页的动态感和艺术性。本篇将深入探讨如何利用JavaScript（JS）和CSS3来实现这种效果，并通过...

    css3文字颜色渐变和文字阴影特效

    CSS3的文字阴影效果可以模拟文字的立体感，为文本添加额外的视觉吸引力。通过`text-shadow`属性，我们可以定义阴影的位置、模糊半径以及颜色。例如： ```css 文字阴影: 2px 2px 4px rgba(0, 0, 0, 0.5); ``` 这里...

    CSS 文字渐变器 代码，效果一起搞定！

    本篇文章将详细探讨如何使用CSS来实现文字渐变效果，并结合提供的"ColorText V2210"代码生成器，帮助您轻松实现这一高级视觉效果。 首先，我们了解CSS中的渐变。在CSS3中，有两种主要类型的渐变：线性渐变和径向...

    css3文字特效_css3火焰文字_css3文字渐变代码

    本文将深入探讨“CSS3文字特效”，特别是“CSS3火焰文字”以及“CSS3文字渐变代码”的实现方法。 一、CSS3文字特效基础 CSS3文字特效主要依赖于其新增的属性和功能，如文本阴影(text-shadow)、文本描边(text-...

    Css文字渐变动画特效代码.rar

    【标题】"Css文字渐变动画特效代码"指的是在网页设计中使用CSS技术实现的一种创新效果，它允许文字的颜色从一种或多种颜色平滑过渡到另一种颜色，为网站增添动态和视觉吸引力。这种效果通常用于吸引用户的注意力或者...

    reactnativelineargradient包含css渐变支持

    在JavaScript和React Native中，`react-native-linear-gradient`库提供了这样的功能，使得开发者能够在原生应用中实现与Web开发类似的渐变效果。 首先，安装`react-native-linear-gradient`库是必要的。这可以通过...

    HTML5 css3渐变按钮代码.rar

    这个例子特别之处在于它没有依赖JavaScript或任何图片资源，完全通过CSS3的属性来创建按钮的渐变效果。 首先，让我们深入理解CSS3渐变的概念。CSS3中的渐变分为线性渐变（linear-gradient）和径向渐变（radial-...

    jquery+css3渐变显示“更多”隐藏内容

    接下来是CSS3的渐变效果。CSS3引入了许多新的样式特性，其中过渡（Transitions）就是其中之一。过渡效果允许我们在改变一个CSS属性时，平滑地从一个值过渡到另一个值。在本案例中，我们可能会定义一个过渡效果，如：...

    css3棕色渐变导航菜单 css3棕色渐变导航菜单网页特效.zip

    2. 利用CSS3的`linear-gradient()`创建背景渐变效果。 3. 应用CSS3的过渡效果增强用户体验。 4. 结合JavaScript（如jQuery）实现交互性，如响应式下拉菜单。 这样的导航菜单不仅美观，而且具有良好的可访问性和交互...

    css3文字模糊渐变效果.zip

    在CSS3中，文本模糊和渐变效果是两种强大的视觉设计技术，它们可以极大地提升网页的美学和用户体验。本文将深入探讨如何利用CSS3来实现文字的模糊和渐变效果，以及如何结合JavaScript和jQuery来增强这些效果。同时，...

    css3 文字效果

    2. **文字渐变** (linear-gradient, radial-gradient): CSS3引入了渐变背景，同样可以应用于文字。线性渐变(从左到右，从上到下等)用`linear-gradient`，径向渐变(从中心向外扩散)用`radial-gradient`。 ```css ...

    H5 CSS3 渐变的使用

    本篇文章将深入探讨CSS3中的渐变效果，它为网页设计提供了丰富的视觉表现力，让元素背景平滑过渡，增加了网页的动态美感。 渐变在CSS3中有两种类型：线性渐变（Linear Gradients）和径向渐变（Radial Gradients）。...

    文字3D效果设计，css背景渐变色代码必备.rar

    本资源是一份名为《文字3D效果设计，css背景渐变色代码必备.rar》的压缩包，其中包含了一系列实用的CSS代码和设计技巧，可以帮助用户快速实现文字3D效果和背景渐变色设计。适用人群包括前端开发人员、网页设计师、UI...

    CSS3下的渐变文字效果实现示例

    总结起来，CSS3为我们提供了更多创造性的可能性，如文字渐变效果。尽管浏览器兼容性仍存在挑战，但随着现代浏览器的普及，我们可以逐步引入这些高级特性，为用户带来更丰富的视觉享受。在实际开发中，可以结合使用...

    CSS3实现5款文字旋转、放大渐变效果.rar

    CSS3实现5款文字旋转、放大渐变效果，文字在渐变放大动画的过程中，切换显示，看上去像是Flash做出来的文字动画，实际上是基于HTML5技术，实例包中的演示文件，每一个文件对应一种文字效果，请在Chrome下打开逐一...

    CSS 网页文字渐变效果

    CSS网页文字渐变效果的知识点主要包括如下几个方面： 1. 渐变效果的原理和应用：文章介绍了通过CSS实现网页文字渐变效果的基本原理，即通过一个png图片实现文字的渐变效果。这种方法不需要使用JavaScript或Flash，...

    CSS（无图片）实现页面元素颜色的渐变效果

    本话题聚焦于如何使用纯CSS实现页面元素颜色的渐变效果，无需借助任何图片资源。通过这种方法，我们可以创建出美观且响应式的界面，同时降低网页加载时间，提升用户体验。 渐变效果在CSS中主要有两种类型：线性渐变...

Magicbox
Global site tag (gtag.js) - Google Analytics