1.漂浮感立体
关键处：
text-shadow:2px -2px white, -6px 6px gray;
给字体添加了两层shadow，右上角白色提亮，左下角灰色阴影。
参数解释：例子中2px -2px white，代表右上角白色
- 第一个参数2px：正数表示从左侧向右推移，负数表示从右侧向左推移。所以它是水平向右2px。
- 第二个参数-2px：正数表示从顶部向下推移，负数表示将其从底部向上推。所以它是垂直向上2px。
- 综合就是右上角添加白色阴影。
- -6px 6px gray同理
研究一下text-shadow的偏移方向：
html
<span class="text-content">FOOLISHSUNDAY</span>
css
@import url('https://cdn.staticfile.org/lxgw-wenkai-screen-webfont/1.6.0/lxgwwenkaiscreen.css');
* {
/* Screen version */
font-family: "LXGW WenKai Screen", sans-serif;
}
body{
height:100vh;
background: linear-gradient(45deg, #bfbfbf, gray);
display:flex;
justify-content:center;
align-items:center
}
.text-content{
margin:0;
color:#E6E6E6;
font-size: 6em;
letter-spacing:3px;
text-shadow:2px -2px #fff,-6px 6px gray;
}
2.立体感文字
关键处：
text-shadow:
1px 1px 1px #919191,
1px 2px 1px #919191,
1px 3px 1px #919191,
...
- text-shadow只上两层，文字效果是漂浮感的。
- 如果想更立体，则可以给text-shadow往垂直方向逐渐加多层浅色阴影，使它立起来。
- 最后添加几层深色阴影作为字体影子，由于深色不能太硬，所以用rgba函数，使深色带点透明度。
CSS
@import url('https://cdn.staticfile.org/lxgw-wenkai-screen-webfont/1.6.0/lxgwwenkaiscreen.css');
* {
/* Screen version */
font-family: "LXGW WenKai Screen", sans-serif;
}
body{
height:100vh;
background: linear-gradient(45deg, #bfbfbf, gray);
display:flex;
justify-content:center;
align-items:center
}
.text-content{
margin:0;
color:#E6E6E6;
font-size: 6em;
letter-spacing:3px;
text-shadow:
1px 1px 1px #919191,
1px 2px 1px #919191,
1px 3px 1px #919191,
1px 4px 1px #919191,
1px 5px 1px #919191,
1px 6px 1px #919191,
1px 7px 1px #919191,
1px 8px 1px #919191,
1px 9px 1px #919191,
1px 10px 1px #919191,
1px 18px 6px rgba(10,10,10,0.4),
1px 22px 10px rgba(10,10,10,0.2),
1px 25px 35px rgba(10,10,10,0.2),
1px 30px 60px rgba(10,10,10,0.4);
}
3.竖起来的立体字
假设我们需要一个竖起来的立体字，则需要在字体背后利用伪元素::before构造一个倾斜的影子
html
<div class="text-3d">FOOLISHSUNDAY</div>
CSS
@import url('https://cdn.staticfile.org/lxgw-wenkai-screen-webfont/1.6.0/lxgwwenkaiscreen.css');
* {
font-family: "LXGW WenKai Screen", sans-serif;
}
body{
height:100vh;
background: linear-gradient(45deg, #bfbfbf, gray);
display:flex;
justify-content:center;
align-items:center
}
.text-3d{
margin:0;
color:#E6E6E6;
font-size: 6em;
letter-spacing:3px;
}
.text-3d::before{
content:'FOOLISHSUNDAY';
position:absolute;
color:#000;
transform:translate(-72px,23px) scaleY(0.4) skew(60deg);
z-index:-1;
filter:blur(3px);
-webkit-mask-image: linear-gradient(transparent,#000);
}
4.残影立体感
关键处：依然是text-shadow
- 残影效果就是添加多层text-shadow；掌握好方向就ok了；
html
<span class='fontshadow'>FOOLISHSUNDAY</span>
css
body{
background-color: #e7e5e4;
}
span {
font-family: STXinwei;
font-size: 92px;
padding: 80px 50px;
display: flex;
justify-content: center;
align-items: center;
}
span.fontshadow {
color: #111111;
letter-spacing: 0.2em;
text-shadow:
1px -1px 1px #444,
2px -2px 1px #555,
3px -3px 1px #666,
-1px 2px 1px #737272,
-2px 4px 1px #767474,
-3px 6px 1px #787777,
-4px 8px 1px #7b7a7a,
-5px 10px 1px #7f7d7d,
-6px 12px 1px #828181,
-7px 14px 1px #868585,
-8px 16px 1px #8b8a89,
-9px 18px 1px #8f8e8d,
-10px 20px 1px #949392,
-11px 22px 1px #999897,
-12px 24px 1px #9e9c9c,
-13px 26px 1px #a3a1a1,
-14px 28px 1px #a8a6a6,
-15px 30px 1px #adabab,
-16px 32px 1px #b2b1b0,
-17px 34px 1px #b7b6b5,
-18px 36px 1px #bcbbba,
-19px 38px 1px #c1bfbf,
-20px 40px 1px #c6c4c4,
-21px 42px 1px #cbc9c8,
-22px 44px 1px #cfcdcd,
-23px 46px 1px #d4d2d1,
-24px 48px 1px #d8d6d5,
-25px 50px 1px #dbdad9,
-26px 52px 1px #dfdddc,
-27px 54px 1px #e2e0df,
-28px 56px 1px #e4e3e2;
}
