✍ 📁 🙈 🙉 🙊 : CSS text-shadow 文字陰影

2024年3月21日星期四

text-shadow

<h3>CCS text-shadow 文字陰影效果</h3>
<pre> 文字陰影  {text-shadow: 向右移動 向下移動 模糊度 陰影色 }，
<span id="D1">陰影效果 </span >{ text-align: center;
               font-weight : bold;
               text-shadow:5px 5px 10px black ; }

<span id="D2">字型輪廓</span>{ color: white;
               letter-spacing: 3px;
               font-weight:bold ;
               text-shadow: -2px  0   0 black, 
                             0   2px  0 black,
                             2px  0   0 black, 
                             0   -2px 0 black; }

<span id="D3">活動陰影</span>{ animation: mymove 5s 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>

#D2 { font-size: 30px ;
       color: white;
       letter-spacing: 3px;
       font-weight:bold ;
       text-shadow: -2px  0   0 black, 
                      0  2px  0 black,
                     2px  0   0 black, 
                      0  -2px 0 black;}

#D3 {font-size: 30px ;
     animation: mymove 5s 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 {font-size: 18px;}
 h3 { text-align: center;
     font-size: 30px;
     font-weight: bold;
     text-shadow: 10px 6px 10px grey;
     color: blue; }
<style>

<div id="div1">
    
<pre><span id="s0"> 陰影效果</span> { font-size: 30px ;
                 color:orange;
                 font-weight : bold;
                 text-shadow:5px 5px 5px navy; }

<span id="s1"> 加凸文字</span> { font-size: 25px;
               font-weight : bold;
               text-shadow: -2px -2px white, 1px 1px #333; }

<span id="s2"> 加凹文字</span> { font-size: 25px;
                font-weight : bold;
                text-shadow: 2px 2px white, -1px -1px #333; }

<span id="s3">立體文字</span>  { font-size: 50px;
                        color:blue ;
                        font-weight:bold ;
                        text-align: center;
                        text-shadow:2px 2px 2px white,
                                    3px 3px 3px white,
                                    4px 4px 3px white,
                                    5px 5px 3px white,
                                    6px 6px 6px white,
                                    8px 7px 3px black }
</pre>
</div>

#s0 { font-size: 30px ;
      color:orange;
      font-weight : bold;
      text-shadow:5px 5px 5px navy;}

#s1 { font-size: 25px;
      //text-align:center;
      font-weight : bold;
      text-shadow: -2px -2px white, 1px 1px #333;}

#s2 { font-size: 25px;
      font-weight : bold;
      text-shadow: 3px 3px white, -1px -1px #333}

#s3 { font-size: 50px;
      color:blue ;
      font-weight:bold ;
      text-align: center;
      text-shadow:2px 2px 2px white,
                         3px 3px 3px white,
                         4px 4px 3px white,
                         5px 5px 3px white,
                         6px 6px 6px white,
                         8px 7px 3px black}

pre {font-size: 18px;}
</style>

Edit

#ccs #HTML #text-shadow #文字陰影效果 #CCS text-shadow #shadow effect

2024年3月21日 星期四

text-shadow

2024年3月21日星期四