网络编程
位置:首页>> 网络编程>> 网页设计>> 纯CSS3文字渐变内发光投影效果

纯CSS3文字渐变内发光投影效果

作者:a287019674  发布时间:2011-08-24 20:15:10 

标签:css3,文字,发光,投影

今天群上面同志们在讨论css3内发光效果,自己也就研究一下,写了个效果出来,涉及css3投影,渐变,蒙版,伪类等知识点,现在写下设计思路,仅供参考。发个效果图大家看先:

一般我们都是用css3的box-shadow来实现盒投影,用text-shadow来实现文字投影,box-shadow设置方型盒子投影,用raidus的话可以让盒子产生圆角,看起来就很圆滑舒服,一般的写法是这样的:



-moz-box-shadow:1px 1px 5px #000;


1px(水平方向偏移) 1px(垂直方向偏移) 5px(阴影羽化) #000(颜色);

当偏移量为负数时就向反方向偏移,试试就明白了,这里不贴图。

这个是一般的投影效果,如果是内阴影,那么就加个“inset”属性,写法如下:



-moz-box-shadow:inset 1px 1px 5px #000;


这样就变成了PS里面的内阴影,效果很赞,很实用,如果需要内发光效果,则背景底色深,投影颜色浅,这样就会感觉是发光,而背景颜色深,投影颜色浅,这样看起来就是投影了;

不过群里面讨论的是文字的投影内发光,上面的是顺便提提而已,下面才是正题:

文字是用text-shadow来产生阴影,而且产生的时候能跟随文字的轮廓投影,如下所示:


text-shadow:2px 2px 1px #000;

<IMG height=76 alt="纯CSS3文字 

如果用box-shadow的话效果是这样的:

纯CSS3文字 <wbr>渐变内发光投影效果

 

会根据放文字容器的盒子来投影(我设定了容器的宽度200px,背景未设定颜色透明),不会跟随文字轮廓投影,效果不是我们所要的;

然而text-shadow没有inset属性,这个就比较棘手了,怎么才能实现文字内投影,同时还有文字渐变?

一层一层来,一般ps处理文字效果都是一层层的剥离,先从文字内发光入手:

我写了这么一个页面试内发光,代码如下:


<!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>cidianwang.com</title>
<style type="text/css">
body{ background:#CCCCCC;}
.text{ font-size:100px; font-family:"微软雅黑"; color:rgba(0,0,0,0); font-weight:bold; position:relative;text-shadow: 0px 0px 0px #000000;}
.text:after{ content:"广州-龙"; position:absolute; left:0px; text-shadow:0px 0px 3px #fff;}
</style>
</head>

<body>
<div class="text">广州-龙</div>
</body>
</html>

或者你可以下载这个代码页面看看text.html (0.64 KB)

效果图如下:

<IMG height=133 alt="纯CSS3文字 

0
投稿

猜你喜欢

  • :hover是我们在CSS设计中最常运用的伪类之一,许多绚丽效果的实现离不开伪类:hover,比如我们常见的纯CSS菜单、相册效果等等。或许
  • ancestor:祖先adjacent:相邻algorithm:运算法则anonymous box:无名盒子。例: anonymous in
  • 可及,通俗的说是“可以达到”,加上主语和宾语,在“交互设计”这个大的语境下,含义应该是“用户可以达到自己的操作目标”,这不是和“有效性—用户
  • 就目前互联网上大小网站而言,大部分都是采用ASP+ACCESS/SQL Server或者PHP+MySQL来编写;事实上,ASP和MySQL
  • 其中使用到一个分页类CPaging 代码如下:Class CPaging Public RS 
  • 上次谈到客户端和服务端的编码“陷阱”,其中对url编码只是提及带过,并没有做深入讨论,事实上由于浏览器环境的复杂和不一致性,我们也很容易掉进
  • 那么,现在如果给出一个权限编号,要去检索出用后这个权限的用户集合,就会需要在逗号分隔的多个权限编号中去匹配给出的这个权限编号。如果使用lik
  • 原理 采集程序实际上是通过了XML中的XMLHTTP组件调用其它网站上的网页。比如新闻采集程序,很多都是调用了sina的新闻网页,并且对其中
  • rss的优点 1.您可以有选择地浏览您感兴趣的以及与您的工作相关的新闻。 2.您可以把需要的信息从不需要的信息(兜售信息,垃圾邮件等)中分离
  • QQ登录Banner增加了剧情的概念之后,已经推出了春节和情人节两期。这之后设想能围绕Banner做的更加丰富,对传统文化的体现也能更为深入
  • 淘宝的投诉类型里有这么一条“收款不发货”。帮助中心里是这么解释的:买、卖双方在淘宝上成交后,当卖家在收到买家汇款后没有按时履行发货义务,或买
  • 标量(scalar)数据类型标量(scalar)数据类型没有内部组件,他们大致可分为以下四类:. number. character. da
  • 在Dreamweaver4中,你可以存储你自己设定的图片、链接、flash影片、颜色表、模板等等,组成这个站点的资产,这就是Assets面板
  • 首先你要确定错误的原因: 让IE显示详细的出错信息: 菜单--工具--Internet选项--高级--显示友好的HTTP错误信息,去掉这个选
  • 数据库(DataBase,DB)是一个长期存储在计算机内的、有组织的、有共享的、统一管理的数据集合。通俗地说,数据库就是一个按照数据结构来组
  • 在实际的应用中,Access做应用程序时,经常会做成"数据"和"程序"两个数据库,"数据&
  • A.动态页面第一步:创建转向控制页面,创建网站默认的首页文件(通常为"index.asp"或"default.
  • 仿google的asp分页代码index.asp(文件1)<%@LANGUAGE="VBSCRIPT" CODEP
  • 我们都知道ACCESS是ASP的亲密伙伴。因为两种最简单的东西碰在一起总能迸发出火花。然而,当我们过滤不严格的时候经常出现日文字符,这个时候
  • 前两天特意装了一下IETester,用以方便测试,装好后使用发现IE8有两个地方需要大家注意。IE5MAC的过滤器对IE8 Beta 1版同
手机版 网络编程 asp之家 www.aspxhome.com