yxgblog
- 浏览: 38409 次
- 性别:
- 来自: 郑州
-
最近访客 更多访客>>
最新评论
-
ngn9999：
天下文章一大抄
让Flash乖乖躲到Div浮动层下去 -
cqujsjcyj：
先说声谢谢啊，
下了你的东西，但是这个QQ客服怎么点了，不出现 ...
qq客服随滚动条滚动 -
fighter-to：
这是csdn上的，请楼主表明出处。
杨澜告诫女孩
<!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>无标题文档</title>
<style>
<!--
.content { width:600px; height:200px; margin:0 auto;}
.ft h1 { font-family:Tahoma, Geneva, sans-serif; font-size:330%/100%; font-weight:bold; margin:30px 0 50px;; color:#464646; position:relative;}
.ft h1 span { background:url(gradient-white.png) repeat-x; display:block; width:100%; position:absolute; height:31px; }
-->
</style>
</head>
<body>
<div class="content"><div class="ft"><h1><span></span>gradrangc</h1></div></div>
</body>
</html>
使用背景图片遮盖，和一个空的span标签，还有position: absolute声明来实现文本的渐变效果。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
<!--
.content { width:600px; height:200px; margin:0 auto;}
.ft h1 { font-family:Tahoma, Geneva, sans-serif; font-size:330%/100%; font-weight:bold; margin:30px 0 50px;; color:#464646; position:relative;}
.ft h1 span { background:url(gradient-white.png) repeat-x; display:block; width:100%; position:absolute; height:31px; }
-->
</style>
</head>
<body>
<div class="content"><div class="ft"><h1><span></span>gradrangc</h1></div></div>
</body>
</html>
使用背景图片遮盖，和一个空的span标签，还有position: absolute声明来实现文本的渐变效果。
分享到：
发表评论
-
图片无缝左右滚动
2010-11-09 12:38 1108<!DOCTYPE html PUBLIC " ... -
更换颜色点击不同的按钮
2010-03-24 16:48 868<link id="cssChange&quo ... -
更换图片
2010-03-24 16:40 1290<div id=oTransContainer ... -
点击按钮弹出层
2010-03-24 16:26 1797<script>function msg(in ... -
滑动导航二级菜单
2010-03-24 16:03 934//css样式 .blogNav{width:950px;m ... -
不同效果的图片更换
2010-03-24 15:44 1260//页面显示 <div id=imgADPlayer& ... -
单行多条信息滚动
2010-03-24 15:36 889//css样式 #shangfan{font-size: 1 ... -
css 之 ime-mode
2009-12-09 08:48 889css 之 ime-mode 语法： ime-mode : a ... -
IE7和Firefox中背景颜色的解决方法
2009-09-21 11:59 1370昨天制作页面的时候，遇到一问题：div外层定义的背景颜色不显示 ... -
网页设计趋势之:”勾引”用户的按钮
2009-09-07 09:03 731文章来自：http://www.68design.net/We ... -
ie6,ie7高度问题
2009-09-05 18:30 1149I hate IE6! 今天下午遇到一问题：ie6，ie7定 ... -
overflow与text-indent:-9999px 字体隐藏及input value偏移
2009-08-31 15:52 1561文章来自：http://hi.baidu.com/happya ... -
多层边框的css制作-火狐
2009-08-31 15:34 1253Mozilla -moz-outline CSS 有些时候 ... -
CSS3中的text-shadow属性：文字阴影
2009-08-25 15:32 1193经常会看到页面中文字阴影的效果，觉得很漂亮，一般做这样的效果都 ... -
七招帮你提高网页设计水平
2009-08-25 15:09 762文章来自：http://news.csdn.net/a/200 ... -
CSS hack:区分IE6，IE7，firefox
2009-07-02 08:42 751文章转自：http://www.div-css.com/htm ... -
实用代码片段
2009-05-26 11:01 6291.设为首页 收藏本站 <a href=# oncl ... -
qq客服随滚动条滚动
2009-05-20 08:41 912近段时间用到qq客服的内容比较多，在这总结一下。 -
随滚动条滚动的两侧的层
2009-05-05 09:16 1121最近工作中遇到了随滚 ... -
CSS---竖着的文字导航菜单制
2009-04-29 17:13 1789来自走走停停看看的博客 网上目前两种方法竖排，一种是用 ...
相关推荐
【CSS3渐变效果源码】是一个非常实用的前端开发工具，它专注于帮助开发者创建和测试CSS3渐变效果。这个工具将一个在线版本转化为本地形式，使得开发者可以在没有网络的情况下也能自由地试验和调整渐变样式，然后直接...
线性渐变( linear-gradient ) background-image: linear-gradient(to 方向, 开始颜色, 中间颜色1, 中间颜色2, ... , 结束颜色 ); 四个方向的组合-八个方向 top, right, bottom, left 角度 90deg 径向渐变( radial-...
本话题主要关注如何使用CSS实现颜色渐变菜单效果，这是一种能提升用户体验并增加网站视觉吸引力的设计技巧。 颜色渐变是CSS3引入的一种新特性，允许我们在背景、边框甚至文本上创建平滑的颜色过渡。渐变分为线性...
纯css+html实现颜色渐变与条纹效果 纯css+html实现颜色渐变与条纹效果
SS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以...此外，渐变效果的元素在放大时看起来效果更好。
CSS3中提供了linear-gradient属性来实现线性渐变效果。通过这个属性，设计师可以自定义渐变的起始位置、起始颜色和结束位置、结束颜色。渐变可以沿垂直方向（totop）、水平方向（toright）、对角线方向（如...
从给定的文件信息来看，标题、描述以及标签均指向了“CSS渐变滤镜”的主题，这显然是在探讨如何利用CSS（层叠样式表）来实现各种视觉上的渐变效果。然而，从部分内码内容来看，所展示的代码实际上是针对IE浏览器的...
"jQuery特效"标签可能暗示了这个压缩包中也可能包含使用jQuery来增强或实现渐变效果的代码。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果。在某些情况下，如果浏览器对CSS渐变支持不佳...
在本文中，我们将深入探讨如何使用纯CSS实现颜色渐变，包括线性渐变、环形渐变以及彩虹效果。 ### 1. CSS渐变色的基本概念 CSS渐变分为两种类型：线性渐变（Linear Gradients）和环形渐变（Radial Gradients）。...
脚本简介：纯js+css3渐变进度条动画特效是一款css3背景属性绘制渐变的进度条加载动画特效，动态加载效果，背景色动态渐变，纯css+js实现，对于简单页面实现进度条效果可以简单利用此方法。 脚本简介：纯js+css3渐变...
CSS3实现颜色渐变菜单,CSS3渐变,渐变效果图,渐变菜单,渐变,CSS3导航菜单,CSS3导航,菜单导航,CSS3实现颜色渐变菜单是一款纯CSS3实现的颜色渐变菜单效果,无需任何js代码,既可以实现按钮的色彩渐变,伴随鼠标的离开菜单...
在CSS3中，渐变颜色色板是一种强大的设计工具，它允许开发者创建平滑过渡的颜色效果，从而为网站和应用程序增添视觉吸引力。本资源提供了15种不同的渐变颜色色板，利用CSS3的`gradient`属性实现。下面将详细阐述CSS3...
然而，仅用CSS3实现动态的渐变效果可能较为有限，因此，我们通常会结合JavaScript来实现更复杂的动画效果。例如，可以使用`setInterval`或`requestAnimationFrame`来改变`text-shadow`的模糊半径，从而达到动态模糊...
在CSS3中，我们可以利用多种技术来实现渐变效果。这里的关键知识点包括： 1. **线性渐变（Linear Gradients）**：CSS3允许我们定义线性渐变作为背景，可以指定方向，如从上到下、从左到右等。例如： ```css ...
在现代网页设计中，CSS3已经成为了不可或缺的一部分，它提供了许多强大的功能，其中之一就是图形颜色渐变效果。本文将深入探讨如何使用CSS3来实现图形的颜色渐变，并结合JavaScript、jQuery以及HTML5来构建出丰富的...
**CSS3渐变进度条加载动画特效详解** 在网页设计中，进度条是常见的交互元素，用于指示某个任务的完成进度。随着技术的发展，CSS3引入了许多新的特性，使得我们可以创建出更加美观且动态的进度条动画效果。本篇文章...
在本章中，我们将深入探讨CSS3中的渐变效果，这是一种强大的视觉设计工具，能够为网页增添丰富的动态感和美学价值。CSS3渐变不仅包括简单的颜色过渡，还能实现复杂的角度、径向和多色渐变，使得网页设计更加灵活且...
这个例子特别之处在于它没有依赖JavaScript或任何图片资源，完全通过CSS3的属性来创建按钮的渐变效果。 首先，让我们深入理解CSS3渐变的概念。CSS3中的渐变分为线性渐变（linear-gradient）和径向渐变（radial-...
效果描述： 在我们的网页里，经常碰到这样的...现在好了，完全可以使用css3的代码来实现渐变，左侧定义一个颜色，右侧也设置一个颜色，并分别设置不同的透明度即可 使用方法： 关键在css样式中：10-13行