Live
x
<!-- 立体文字阴影的关键点在于多层 text-shadow 的叠加 --><!-- 这里合理运用了 SASS 函数来自动计算多层 text-shadow 的 CSS 代码 --><!-- 运用了Sass的颜色函数，渐进实现 - fade-out 改变颜色的透明度，让颜色更加透明 - desaturate 改变颜色的饱和度值，让颜色更少的饱和--><div>Long Shadow</div><div class="left"> TxT Long Shadow</div>
Live
xxxxxxxxxx35
body { background: #fff;}@function makelongrightshadow($color) { $val: 0px 0px $color; @for $i from 1 through 50 { $color: fade-out(desaturate($color, 1%), .02); $val: #{$val}, #{$i}px #{$i}px #{$color}; } @return $val;}@function makelongleftshadow($color) { $val: 0px 0px $color; @for $i from 1 through 50 { $color: fade-out(desaturate($color, 1%), .02); $val: #{$val}, -#{$i}px #{$i}px #{$color}; } @return $val;}div { text-align: center; font-size: 20vmin; line-height: 45vh; text-shadow: makelongrightshadow(hsla(14, 100%, 30%, 1)); color: hsl(14, 100%, 60%);}.left { text-shadow: makelongleftshadow(hsla(231, 50%, 30%, 1)); color: hsl(231, 50%, 60%);}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.