<!-- 立体文字阴影的关键点在于多层 text-shadow 的叠加 -->
<!-- 这里合理运用了 SASS 函数来自动计算多层 text-shadow 的 CSS 代码 -->
<!-- 运用了Sass的颜色函数，渐进实现
    - fade-out 改变颜色的透明度，让颜色更加透明 
    - desaturate 改变颜色的饱和度值，让颜色更少的饱和
-->

<div>Long Shadow</div>
<div class="left"> TxT Long Shadow</div>
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%);
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.