脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > css3 >

css3一款3D字体带阴影效果的实现步骤

  发布时间：2013-03-20 14:22:03   作者：佚名   我要评论
3D字体而且还带有阴影，这种效果想必大家只有认为一些高级的作图工具才可以实现的吧，css3的出现让这一切看似不可能的实现成为可能，接下来为大家介绍下3D字体带阴影效果的实现步骤，感兴趣的你可不要错过了哈
效果图如下：

源码如下：

复制代码
代码如下:

<!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> CSSReX | Drop Shadow with CSS3 </title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<div id="wrapper">
<h1>CSSReX</h1>
<p>任何的异常都是Throwable类，并且在它之下包含两个字类Error / Exception，而Error仅在当在Java虚拟机中发生动态连接失败或其它的定位失败的时候，Java虚拟机抛出一个Error对象。典型的简易程序不捕捉或抛出Errors对象，你可能永远不会碰到需要实例化Error的应用，那就让我们关心一下Exception。
Unchecked Exception.：包括 Error与RuntimeException. 这类异常都是RuntimeException的子类。
Checked Exception:除了Error与RuntimeException，其他剩下的异常. 这类异常都是Exception的子类 。在编译时在语法上必须处理的异常，因此必须在语法上以try..catch加以处理；</p>
</div><!-- /wrapper -->
</body>
</html>

style.css：

复制代码
代码如下:

body{
background:#d5d5d5;
}
#wrapper{
width:960px;
min-height:500px;
padding:50px 10px 0 10px;
margin:0 auto;
text-align:center;
}
#wrapper h1{
font:normal 60pt Arial;
color:#FFFFFF;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
#wrapper p{
font:normal 40pt Arial;
color:#FFFFFF;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}

相关文章

  • 详解CSS3中字体平滑处理和抗锯齿渲染

    本篇文章主要介绍了CSS3中字体平滑处理和抗锯齿渲染，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2017-03-29

  • CSS3字体效果的设置方法小结

    这篇文章主要介绍了CSS3字体效果的设置方法小结,包括阴影效果、省略号代替以及嵌入字体,需要的朋友可以参考下
    2016-06-13

  • 轻松掌握CSS3中的字体大小单位rem的使用方法

    rem是css3新定义的设置字体大小属性,rem大小都是以html的字体大小设置为参考值进行一个字体大小缩放,下面就带大家来轻松掌握CSS3中的字体大小单位rem的使用方法:
    2016-05-24

  • 使用CSS3的font-face字体嵌入样式的方法讲解

    CSS3中的font-face可以将我们上传的自定义的字体显示出来,有时比如我们要显示英文音标的字体时便需要用到,本文就整理了一下使用CSS3的font-face字体嵌入样式的方法讲解,需
    2016-05-13

  • CSS3 text shadow字体阴影效果

    最近在整理学习CSS3的一些小知识，现在已经整理了CSS3选择器，CSS3圆角和CSS3元素阴影属性的使用方法了。今天为大家整理一下CSS3中的字体阴影——text-shadow的使用方法。
    2016-01-08

  • 一款纯css3实现的颜色渐变按钮的代码教程

    今天给大家分享一款纯css3实现的颜色渐变按钮，这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变，清新淡雅，效果非常好看，需要的朋友可以参考下
    2014-11-12

  • css3 自定义字体font-face使用介绍

    这篇文章主要介绍了css3 自定义字体font-face使用，需要的朋友可以参考下
    2014-05-14

  • CSS3用@font-face实现自定义英文字体

    传说中的CSS3基本上什么都可以，那么CSS3中可不可以自定义英文字体呢?答案是非常可以。用@font-face即可实现自定义英文字体，下面有个不错的示例，感兴趣的朋友可以了解下
    2013-09-23

  • CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)

    今天就从一个简单的圆形菜单的实现，使用CSS3+font字体文件实现圆形菜单，下面来总结一些最近学习的收获，感兴趣的朋友可以参考下哈
    2013-06-03

  • CSS3教程(7):CSS3嵌入字体

    网页制作Webjx文章简介：想要制作一些很酷的头部效果而且摆脱网站安全字体并且不使用图片文件？那么就使用CSS3嵌入字体吧！ 想要制作一些很酷的头部效果而
    2009-04-02

最新评论

关注微信公众号

扫一扫