返回顶部

收藏

CSS实现3D文字

更多

我们可以使用多个 text-shadowbox-shadow 来做3D效果的文字,请看下图的效果

Css 3d效果文字

By alternating colors back and forth in the "stacking order" of our box or text shadow declaration, we can simulate a more three dimensional / lighted effect.

<html>
<head>

    <meta charset="utf-8">
    <title>2-color 3D Effect with CSS</title>

    <link href='http://fonts.googleapis.com/css?family=Sniglet:800' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="style.css">

<style type="text/css">
body {
  padding-top: 10%;
  background: #6280b7;
}
a {
  color: #ffed9d;
  text-decoration: none;
}
a:hover {
  color: #ffe67c;
  text-decoration: underline;
}
p {
  color: #fff;
  text-align: center;
  font-size: 60px;
}
p.raleway {
  font-family: 'Raleway', arial, serif;
  letter-spacing: 4px;
  text-shadow: 1px 0px #546a92, 0px 1px #384762, 2px 1px #546a92, 1px 2px #384762, 3px 2px #546a92, 2px 3px #384762, 4px 3px #546a92, 3px 4px #384762, 5px 4px #546a92, 4px 5px #384762, 6px 5px #546a92, 5px 6px #384762, 7px 6px #546a92, 6px 7px #384762, 8px 7px #546a92, 7px 8px #384762, 8px 8px #546a92;
}
p.sniglet {
  font-family: 'Sniglet', arial, serif;
  text-shadow: 1px 0px #546a92, 0px 1px #384762, 2px 1px #546a92, 1px 2px #384762, 3px 2px #546a92, 2px 3px #384762, 4px 3px #546a92, 3px 4px #384762, 5px 4px #546a92, 4px 5px #384762, 6px 5px #546a92, 5px 6px #384762, 7px 6px #546a92, 6px 7px #384762, 8px 7px #546a92, 7px 8px #384762, 8px 8px #546a92;
}
p.lobster {
  margin-top: 1.2em;
  font-family: 'Lobster', arial, serif;
}
p.lobster span {
  padding: 20px 40px;
  color: #6280b7;
  background: #fff;
  -webkit-box-shadow: 1px 0px #546a92, 0px 1px #384762, 2px 1px #546a92, 1px 2px #384762, 3px 2px #546a92, 2px 3px #384762, 4px 3px #546a92, 3px 4px #384762, 5px 4px #546a92, 4px 5px #384762, 6px 5px #546a92, 5px 6px #384762, 7px 6px #546a92, 6px 7px #384762, 8px 7px #546a92, 7px 8px #384762, 8px 8px #546a92;
  -moz-box-shadow: 1px 0px #546a92, 0px 1px #384762, 2px 1px #546a92, 1px 2px #384762, 3px 2px #546a92, 2px 3px #384762, 4px 3px #546a92, 3px 4px #384762, 5px 4px #546a92, 4px 5px #384762, 6px 5px #546a92, 5px 6px #384762, 7px 6px #546a92, 6px 7px #384762, 8px 7px #546a92, 7px 8px #384762, 8px 8px #546a92;
  box-shadow: 1px 0px #546a92, 0px 1px #384762, 2px 1px #546a92, 1px 2px #384762, 3px 2px #546a92, 2px 3px #384762, 4px 3px #546a92, 3px 4px #384762, 5px 4px #546a92, 4px 5px #384762, 6px 5px #546a92, 5px 6px #384762, 7px 6px #546a92, 6px 7px #384762, 8px 7px #546a92, 7px 8px #384762, 8px 8px #546a92;
}
p.credit {
  margin-top: 80px;
  font-family: 'Raleway', arial, serif;
  font-size: 30px;
}
</style>
</head>
<body>

    <p class="raleway">A thin font, Raleway</p>
    <p class="sniglet">A thick font, Sniglet</p>
    <p class="lobster"><span>Lobster in a box</span></p>

    <p class="credit">
        Made by <a href="http://twitter.com/jingman/">@jingman</a> at the <a href="http://bigreddesk.com/">Big Red Desk</a>
    </p>

</body>
</html>

演示地址

标签:CSS,3d

收藏

0人收藏

支持

0

反对

0

相关聚客文章
  1. 练习 发表 2012-10-30 01:26:52 CSS 3D动画概述菜鸟级解读之一
  2. 张 鑫旭 发表 2015-03-16 16:20:00 小tip: 纯CSS实现视差滚动效果
  3. Airen 发表 2016-06-16 14:09:26 纯CSS实现滚动3D字幕
  4. J.c 发表 2016-08-29 01:18:00 CSS 3D Panorama – 淘宝造物节技术剖析
  5. Airen 发表 2015-12-02 09:11:20 CSS处理图像效果: 3D Glasses
  6. 颓废小魔 发表 2012-11-15 05:51:01 关于chome下transform的3D效果失效的问题
  7. Airen 发表 2016-10-03 08:20:02 CSS 3D应该注意的事项
  8. sxwgf 发表 2016-10-16 09:25:42 CSS 3D 可嵌套多层立方体图片墙
  9. 博主 发表 2014-03-08 04:26:07 重温CSS 3D
  10. Airen 发表 2015-12-20 15:29:55 [转载]玩轉 CSS 3D: 原理篇
  11. zhifu.wang 发表 2012-04-27 06:35:26 Beercamp: CSS 3D的一次尝试[译]
  12. Slobodan Blazeski 发表 2015-06-23 14:38:07 Crafting a 3D React Carousel

发表评论