✍ 📁 🙈 🙉 🙊 : text-shadow 文本陰影效果

text-shadow 文本陰影效果

<pre style="font-size:22px;">
CCS text-shadow 用來為 文字 字串 每個字母加上陰影。
    文字陰影  {text-shadow: 向右移動 向下移動 模糊度 陰影色 }，
       向右移動 : 5px (陰影向右移動)     -5px (陰影向左移動)， 
       向下移動 : 5px (陰影向下移動)     -5px (陰影向上移動)，

<div style="border: 3px solid black">
例 1 : div { font-size:50px;
            text-align: center;
            text-shadow:10px 10px 20px black ;}
    <div class="TXT"> text-shadow 文本陰影效果</div></div>
<div style="border: 3px solid black">
例 2 : div { color:blue ;
             font-size:50px;
             font-weight:bold ;
             text-align: center;
             text-shadow:2px 2px 2px darkgray,
                         3px 3px 3px darkgray,
                         4px 4px 3px darkgray,
                         5px 5px 3px darkgray,
                         6px 6px 6px darkgray,
                         8px 7px 0px black } 
    <div class="TXT2"> text-shadow aa文本陰影效果</div>
</div></pre>

.TXT2{ color:blue ;
        font-size:50px;
        font-weight:bold ;
       text-align: center;
       text-shadow:2px 2px 2px darkgray,
                   3px 3px 3px darkgray,
                   4px 4px 3px darkgray,
                   5px 5px 3px darkgray,
                   6px 6px 6px darkgray,
                   8px 7px 0px black }
</style>

<div class="text2" style="font-size:60px;text-align: center;">A 文字添加活動陰影</div>

<pre style="font-size:22px;">
.text2 {animation: mymove 12s infinite; }
@keyframes mymove{10% {text-shadow:10px 10px 20px gold;}
                  25% {text-shadow:0px 20px 20px red; } 
                  35% {text-shadow:-10px 10px 20px gold; }  
                  45% {text-shadow:-10px 10px 20px orangered; }
                  55% {text-shadow:-10px 1px 20px orange; } 
                  65% {text-shadow:-10px -10px 20px tomato; }
                  75% {text-shadow:10px -10px 20px darkorange; }
                  85% {text-shadow:0px -10px 20px red; }
                  100% {text-shadow:10px 0px  20px deeppink; } }></pre>

<div class="text" style="font-size:60px;text-align: center;">
B  文字添加底陰影</div>

<pre style="font-size:22px;">.text { color: gold;
text-shadow: 1px    1px   1px  gold   ,
             2px    2px   1px  orange ,
             3px    3px   1px  orange ,
           -30px    0px  50px rgb(255,215, 100), /* 9  點方向 */
           -15px  -10px  50px rgb(255,215, 100), /*10 半點方向*/
             0px  -10px  50px rgb(255,215, 100), /*12   點方向*/
            15px  -10px  50px rgb(255,215, 100), /* 1 半點方向*/
            20px    0px  50px rgb(255,215, 100), /* 3   點方向*/
            20px   10px  50px rgb(255,215, 100), /* 4 半點方向*/
             0px   10px  50px rgb(255,215, 100), /* 6   點方向*/
           -15px   10px  50px rgb(255,215, 100)  /* 7  半點方向/ }</pre>

</div>

.text3b { font-size: 40px;
          text-align: center;
          font-weight:bold ;
          line-height:30px;
          font-family:Fantasy;
          letter-spacing:0.1em;
          text-shadow: 3px 3px white, -2px -2px #333}

.text3c{font-size: 20px;color:blue;line-height:20px;}
</style>
<br>
<div class="text3a">C 添加凸文字</div><br>
<div class="text3b">C 添加凹文字</div>

<pre style="font-size: 20px">
凸文字 font-size: 40px;
       text-align: center;
       font-weight:bold ;line-height:30px;
       font-family:Fantasy;
       letter-spacing:0.1em;
       text-shadow: -3px -3px white, 1px 1px #333}

凹文字 font-size: 40px;
       text-align: center;
       font-weight:bold ;
       line-height:30px;
       font-family:Fantasy;
       letter-spacing:0.1em;
       text-shadow: 3px 3px white, -2px -2px #333</pre>

</div>

<div style="height:95%;width: 95%;border: 8px outset gainsboro;background-color: slategray;">
<style>
.text1{font-size: 80px;
       color:white;
       text-align: center;
       letter-spacing:30px;
       text-shadow:rgb(255, 255, 255) -2px  0   0, 
                   rgb(255, 255, 255) 0  2px  0 ,
                   rgb(255, 255, 255)2px  0   0, 
                   black 0  -2px 0 ,
                   rgb(73, 255, 24) 0px 0px 20px, 
                   rgb(73, 255, 24) 0px 0px 30px,
                   rgb(73, 255, 24) 0px 0px 40px,
                   rgb(73, 255, 24) 0px 0px 55px,
                   rgb(73, 255, 24) 0px 0px 75px,
                   rgba(206, 31, 120, 0) 6px 17px 7px; }

.text2{font-size:20px;color:white;}
</style>
<div class="text1"> F 光體字</div>
<pre class="text2">font-size: 80px;
color:white;
text-align: center;
letter-spacing:30px;
text-shadow:rgb(255, 255, 255) -2px  0   0, 
            rgb(255, 255, 255) 0  2px  0 ,
            rgb(255, 255, 255)2px  0   0, 
            black 0  -2px 0 ,
            rgb(73, 255, 24) 0px 0px 20px, 
            rgb(73, 255, 24) 0px 0px 30px,
            rgb(73, 255, 24) 0px 0px 40px,
            rgb(73, 255, 24) 0px 0px 55px,
            rgb(73, 255, 24) 0px 0px 75px,
            rgba(206, 31, 120, 0) 6px 17px 7px;</pre>

</div>

<div class="text2" >G 文字添加活動陰影</div>

<pre style="font-size:22px;">.text2 {font-size: 60px ;color: rgb(255,215,0);
        text-align: center;
        letter-spacing: 10px;
        font-weight:bold ;
 text-shadow: -2px  0   0 black, 
                0  2px  0 black,
               2px  0   0 black, 
                0  -2px 0 black;
animation: mymove 2s infinite; }
@keyframes mymove { 10%{color: rgb(255 ,215 ,  0);}  
                    20%{color: rgb(245 ,220 ,100);}  
                    30%{color: rgb(230 ,230 ,200);}
                    40%{color: rgb(220 ,240 ,300);}
                    50%{color: rgb(210 ,230 ,400);}
                    60%{color: rgb(220 ,220 ,350);}  
                    70%{color: rgb(230 ,215 ,200);}
                    80%{color: rgb(255 ,215 ,100);}
                   100%{color: rgb(255, 215 ,  0);} }</pre>

<div class="text2" >H 文字添加活動陰影</div>

<pre style="font-size:22px;">.text2 {font-size: 60px ;
        color: rgb(255,215,0);
        text-align: center;
        letter-spacing: 5px;
        font-weight:bold ;
 text-shadow: -2px  0   0 black, 
                0  2px  0 black,
               2px  0   0 black, 
                0  -2px 0 black;
animation: mymove 3s infinite; }
@keyframes mymove { 10%{letter-spacing:7px;}  
                    20%{letter-spacing:9px;}  
                    30%{letter-spacing:11px;}
                    40%{letter-spacing:13px;}
                    50%{letter-spacing:11px;}
                    60%{letter-spacing:9px;}  
                    70%{letter-spacing:7px;}
                    100%{letter-spacing:5px;}  }</pre>

Edit

#html #script #CSS text-shadow #text-shadow 文本陰影效果 #CSS 文字陰影 #CSS 模糊文字陰影

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單