返回顶部

收藏

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

发表评论