- <html>
- <head>
- <meta charset="utf-8">
- <title>2-color 3D Effect with CSS</title>
- <link >
- <link >
- <link >
- <link rel="stylesheet" >
- <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>
- //该片段来自于http://www.codesnippet.cn/detail/020920135547.html
来源: http://www.codesnippet.cn/detail/020920135547.html