Heim > Artikel > Web-Frontend > CSS implementiert den Schattentexteffekt_CSS/HTML

CSS implementiert den Schattentexteffekt_CSS/HTML

WBOYOriginal: 2016-05-16 12:10:441803Durchsuche

<style type="text/css"> 
 
</style>
<table width="500" border="0" cellspacing="1" cellpadding="0" bgcolor="#8C96B5" align="center"> 
 <tr>  
  <td bgcolor="#FFFFFF">  
   <table bordercolordark="#ffffff" width="100%" bordercolorlight="#000000" border="0" cellspacing="1" cellpadding="0"> 
    <tr bgcolor="#8C96B5">  
     <td colspan="2" bgcolor="#8C96B5" width="100%" height="16">  
      <div align="center" class="title_1">..:: 巧用CSS制作艺术字 ::..</div> 
     </td> 
    </tr> 
   </table>
  </td>
 </tr>
 <tr>
  <td bgcolor="#E1E4EC">
   <table width="100%" border="0" cellpacing="8" cellpadding="0" class="unnamed1">
    <table width="100%" border="0" cellspacing="8" cellpadding="0" class="unnamed1"> 
    <tr>  
     <td class="text">如果灵活应用CSS各种滤镜的特点并加以组合，我们可以得到许多意想不到的效果。这是一些效果示范，供各位参考。</td> 
    </tr> 
   </table>
     <td class="text">Wenn wir die Eigenschaften verschiedener CSS-Filter flexibel anwenden und kombinieren, können wir viele unerwartete Effekte erzielen. Hier sind einige Effektdemonstrationen als Referenz. </td>
    
   <tr>
  <td bgcolor="#E1E4EC">
 <table width="100%" border="0" cellspacing="8" cellpadding="0" class="unnamed1"> 
    <tr>  
     <td class="text">  
      <table align="center" border="0" width="200" height="50"> 
       <tr>  
        <td style="FILTER: blur(direction=135,strength=8)" align="center"><font face="黑体" color="#8C96B5" size="6"><b><i>E流设计</i></b></font></td> 
       </tr> 
      </table>
 <b>
  </b>
   <table width="100%" border="0" cellpacing="8" cellpadding="0" class="unnamed1">
    
     <td class="text">
      <table align="center" border="0" width="200" height="50">
       
        <td style="FILTER: Unschärfe(Richtung=135,Stärke=8)" align="center"><font face="黑体" color="#8C96B5" size="6"></font></td>
</table>
<i>E Flow-Design</i>
</td>
       <tr>
      <td bgcolor="#E1E4EC">
      
 
      Der mit dem Unschärfefilter erstellte Effekt lautet wie folgt:
 
      <table width="100%" border="0" cellspacing="8" cellpadding="0" class="unnamed1"> 
    <tr>  
     <td class="text">  
      <table align="center" border="0" width="200" height="50"> 
       <tr>  
        <td style="FILTER: dropshadow(color=#B4BBCF,offx=6,offy=6,positive=1)" align="center"><font face="黑体" color="#8C96B5" size="6"><b><i>E流设计</i></b></font></td> 
       </tr> 
      </table>FILTER: Unschärfe (Richtung=135, Stärke=8)<b></b>
    </td>
   </tr>
  </table>
 </td>
 </tr>
  <tr>
   <table width="100%" border="0" cellpacing="8" cellpadding="0" class="unnamed1">
    <td bgcolor="#E1E4EC">
     </td>
<td class="text">
      <table align="center" border="0" width="200" height="50">
       <table width="100%" border="0" cellspacing="8" cellpadding="0" class="unnamed1"> 
    <tr>  
     <td class="text">  
      <table align="center" border="0" width="200" height="50"> 
       <tr>  
        <td style="FILTER: glow(color=#B4BBCF,strength=5)" align="center"><font face="黑体" color="#8C96B5" size="6"><b><i>E流设计</i></b></font></td> 
       </tr> 
      </table>
        </td>
<td style="FILTER: dropshadow(color=#B4BBCF,offx=6,offy=6,positive=1)" align="center"><font face="黑体" color="#8C96B5" size="6 "><b><i>E-Flow-Design</i></b></font></td>
       </tr>
      </table>
      
 
      Der mit dem Dropshadow-Filter erstellte Effekt lautet wie folgt:
 
      FILTER: dropshadow(color=#B4BBCF,offx=6,offy=6,positive=1)<tr>
    <td bgcolor="#E1E4EC">
   <table width="100%" border="0" cellspacing="8" cellpadding="0" class="unnamed1"> 
    <tr>  
     <td class="text">  
      <table align="center" border="0" width="200" height="50"> 
       <tr>  
        <td style="FILTER: alpha(opacity=100,finishiopacity=0,style=1)shadow(color=#8C96B5,direction=135)" align="center"><font face="黑体" color="#8C96B5" size="6"><b><i>E流设计</i></b></font></td> 
       </tr> 
      </table>
  <b>
 </b>
 </td>
  </tr>
   <table width="100%" border="0" cellpacing="8" cellpadding="0" class="unnamed1">
    </table>
     <td class="text">
      <table align="center" border="0" width="200" height="50">
       
        <td style="FILTER: glow(color=#B4BBCF,strength=5)" align="center"><font face="黑体" color="#8C96B5" size="6"><i> E-Flow-Design</i><tr><td bgcolor="#E1E4EC">
       <table width="100%" border="0" cellspacing="8" cellpadding="0" class="unnamed1"> 
    <tr>  
     <td class="text">  
      <table align="center" border="0" width="200" height="50"> 
       <tr>  
        <td style="FILTER: mask(color=#E1E4EC)shadow(color=#8C96B5,direction=135)chroma(color=#E1E4EC)" align="center"><font face="黑体" color="#8C96B5" size="6"><b><i>E流设计</i></b></font></td> 
       </tr> 
      </table>
      <b>
      
 
      Der mit dem Glühfilter erzeugte Effekt lautet wie folgt:
 
      </b>FILTER: Leuchten (Farbe=#B4BBCF,Stärke=5)</td>
</tr>
    </table>
   
  
 
 
  
   <table width="100%" border="0" cellpacing="8" cellpadding="0" class="unnamed1">
    
     <td class="text">
      <table align="center" border="0" width="200" height="50">
       
        <td style="FILTER: alpha(opacity=100,finishiopacity=0,style=1)shadow(color=#8C96B5,direction=135)" align="center">
<font face="黑体" color="# 8C96B5" size="6"><i>E-Flow-Design</i></font>
       
      
      
 
      Dieser Effekt verwendet zwei Filter: Schatten und Alpha. Der Code lautet wie folgt:
 
      FILTER: alpha(opacity=100,finishiopacity=0,style=1)
 
      Schatten(Farbe=#8C96B5,Richtung=135) 
    
   
  
 
 
  
   <table width="100%" border="0" cellpacing="8" cellpadding="0" class="unnamed1">
    
     <td class="text">
      <table align="center" border="0" width="200" height="50">
       
        <td style="FILTER: mask(color=#E1E4EC)shadow(color=#8C96B5,direction=135)chroma(color=#E1E4EC)" align="center">
<font face="黑体" color="# 8C96B5" size="6"><i>E-Flow-Design</i></font>
       
      
      
 
      Dieser Effekt verwendet auch zwei Filter, Maske und Schatten. Der Code lautet wie folgt:
 
      FILTER: Maske (Farbe=#E1E4EC)
 
      Schatten(Farbe=#8C96B5,Richtung=135)Chroma(Farbe=#E1E4EC)
 
      
 
      Hinweis: Die Farbe der Maske sollte mit der Hintergrundfarbe der Webseite übereinstimmen und die Farbe der Schriftart wird durch den Schatten bestimmt. 
    
   </td>
 
 <tr>
  <td bgcolor="#E1E4EC">
   <table width="100%" border="0" cellpacing="8" cellpadding="0" class="unnamed1">
    <table width="100%" border="0" cellspacing="8" cellpadding="0" class="unnamed1"> 
    <tr>  
     <td class="text">  
      <table align="center" border="0" width="200" height="50"> 
       <tr>  
        <td style="FILTER: mask(color=#E1E4EC)dropshadow(color=#B4BBCF,offx=-3,offy=-3,positive=1)chroma(color=#E1E4EC)" align="center"><font face="黑体" color="#8C96B5" size="6"><b><i>E流设计</i></b></font></td> 
       </tr> 
      </table>
     </td>
<td class="text">
      <table align="center" border="0" width="200" height="50">
       <b>
        </b><td style="FILTER: mask(color=#E1E4EC)dropshadow(color=#B4BBCF,offx=-3,offy=-3,positive=1)chroma(color=#E1E4EC)" align="center"><i>E-Flow-Design</i></td>
</table>
       </td>
      </tr>
      
 
      Wenn der obige Effekt Yin-Text ist, sollte dieser Effekt als Yang-Text betrachtet werden. Verwenden Sie zwei Filter, um Maske und Schlagschatten zu implementieren. Beachten Sie, dass die Farbe der Maske mit der Hintergrundfarbe der Webseite übereinstimmen sollte, oder verwenden Sie Maske und Chroma in Paaren kann erreicht werden. Der Code lautet wie folgt:
 
      <tr>FILTER: Maske (Farbe=#E1E4EC)
 
      Schlagschatten (Farbe=#B4BBCF,offx=-3,offy=-3,positiv=1)
 
      chroma(color=#E1E4EC)"<td bgcolor="#E1E4EC"> <table width="100%" border="0" cellspacing="8" cellpadding="0" class="unnamed1"> 
    <tr>  
     <td class="text">  
      <table align="center" border="0" width="200" height="50"> 
       <tr>  
        <td style="FILTER: glow(color=#8C96B5,strength=2)shadow(color=#B4BBCF,direction=135)" align="center"><font face="黑体" color="#E1E4EC" size="6"><b><i>E流设计</i></b></font></td> 
       </tr> 
      </table>
    <b>
   </b>
  </td>
 </tr>
 </table>
  </td>
   <table width="100%" border="0" cellpacing="8" cellpadding="0" class="unnamed1">
    
     <td class="text">
      <table align="center" border="0" width="200" height="50">
       <tr>
        <td style="FILTER: Glow(color=#8C96B5,strength=2)shadow(color=#B4BBCF,direction=135)" align="center"><font face="黑体" color="#E1E4EC" size="6"></font></td>
<td bgcolor="#E1E4EC">
<i>E-Flow-Design</i><table width="100%" border="0" cellspacing="8" cellpadding="0"> 
    <tr>  
     <td class="text">  
      <table height="150" width="200" align="center" background="http://www.e-flowing.com/1/bg_1.jpg" border="0"> 
       <tr>  
        <td style="FILTER: mask(color=#E1E4EC)shadow(color=#B4BBCF,direction=135)chroma(color=#E1E4EC)" align="center"><font face="黑体" color="#8C96B5" size="6"><b><i>E流设计</i></b></font></td> 
       </tr> 
      </table>
<table height="150" width="200" align="center" background="http://www.e-flowing.com/1/bg_2.jpg" border="0"> 
       <tr>  
        <td style="FILTER: glow(strength=1)mask(color=#B4BBCF)chroma(color=#B4BBCF)" align="center" height="54"><font face="黑体" color="#8C96B5" size="6"><b><i>E流设计</i></b></font></td> 
       </tr> 
      </table>
<table height="150" width="200" align="center" background="http://www.e-flowing.com/1/bg_3.jpg" border="0"> 
       <tr>  
        <td style="FILTER: mask(color=#E1E4EC)dropshadow(color=#B4BBCF,offx=-3,offy=-3,positive=1)chroma(color=#E1E4EC)" align="center" height="54"><font face="黑体" color="#8C96B5" size="6"><b><i>E流设计</i></b></font></td> 
       </tr> 
      </table>
       </td>
      </tr>
      
 
      Mit dem Glühfilter können Sie hohle Zeichen erstellen, indem Sie die Schriftfarbe auf die Hintergrundfarbe und dann den Stärkewert des Glühfilters auf 1 oder 2 einstellen. Der Code für diesen Effekt lautet wie folgt:
 
      <tr>FILTER: Leuchten (Farbe=#8C96B5,Stärke=2)
 
      Schatten(Farbe=#B4BBCF,Richtung=135)<td class="unnamed1"> <font class="text">
    <b>
   </b>
  <b>
 </b>
 <b>
  </b>
   <table width="100%" border="0" cellpacing="8" cellpadding="0">
    
     <td class="text">
      <table height="150" width="200" align="center" hintergrund="http://www.e-flowing.com/1/bg_1.jpg" border="0">
       
        <td style="FILTER: mask(color=#E1E4EC)shadow(color=#B4BBCF,direction=135)chroma(color=#E1E4EC)" align="center"><font face="黑体" color="#8C96B5" gr><i>E-Flow-Design</i></font></td>
</table>
</td>
       <tr>
      <td bgcolor="#E1E4EC">
      
 
      
 
      <table height="150" width="200" align="center" background="http://www.e-flowing.com/1/bg_2.jpg" border="0">
       <table width="100%" border="0" cellspacing="8" cellpadding="0"> 
    <tr>  
     <td class="text">  
      <table height="150" cellspacing="0" cellpadding="0" width="480" align="center" background="http://www.e-flowing.com/1/bg_1.jpg" border="0"> 
       <tr>  
        <td style="FILTER: glow(strength=4)mask(color=#E1E4EC)" height="109" align="center" valign="middle"><font face="Verdana" color="#8C96B5" size="6"><i><b>WELCOME  
         TO
 
         <a href="http://WWW.E-FLOWING.COM</b></i></font></td>" target="_blank">WWW.E-FLOWING.COM</a></b></i></font></td> 
       </tr> 
      </table>
        </td>
<td style="FILTER: Glow(strength=1)mask(color=#B4BBCF)chroma(color=#B4BBCF)" align="center" height="54"><font face="Blackbody" color="#8C96B5" size="6"></font></td>
<i>E-Flow-Design</i>
</tr>
<tr>
<td class="unnamed1">
       <font class="text">
      <b>
      
 
      
 
      <table height="150" width="200" align="center" background="http://www.e-flowing.com/1/bg_3.jpg" border="0">
       
        <td style="FILTER: mask(color=#E1E4EC)dropshadow(color=#B4BBCF,offx=-3,offy=-3,positive=1)chroma(color=#E1E4EC)" align="center" height="54">
<font face="黑体" color="#8C96B5" size="6"></font><i>E-Flow-Design</i>
</td>
</table>
       </b></font>
</td>
      </tr>
     </table>
    
    
     Wenn der Hintergrund ein Bild ist, müssen Sie Maske und Chroma in Kombination verwenden, um einen zufriedenstellenden Effekt zu erzielen. Dadurch wirkt die Schriftart transparent und lässt den Hintergrund durchscheinen.
 
      
 
      Der Code für den oben aufgeführten ersten Effekt lautet:
 
      FILTER: Maske (Farbe=#E1E4EC)
 
Schatten(Farbe=#B4BBCF,Richtung=135)
 
Chroma(color=#E1E4EC)
 
      Hinweis: Die Farbe der Schriftart wird durch den Schatten bestimmt. Die Farben der Maske und des Chromas müssen gleich sein und die Farbe ist willkürlich.
 
      
 
      Der Code in der Mitte lautet:
 
      FILTER: Glühen (Stärke=1)
 
Maske (Farbe=#B4BBCF)
 
Chroma(color=#B4BBCF)
 
      Hinweis: Die Farbe von Maske und Chroma ist gleich und diese Farbe bestimmt die Farbe der Schriftart.
 
      
 
      Der Code für Letzteres lautet:
 
      FILTER: Maske (Farbe=#E1E4EC)
 
Schlagschatten (Farbe=#B4BBCF,offx=-3,offy=-3,positiv=1)
 
Chroma(color=#E1E4EC)
 
      Hinweis: Die Farben von Maske und Chroma sind gleich und die Farbe wird durch Schlagschatten bestimmt. 
    
   
  
 
 
  
   <table width="100%" border="0" cellpacing="8" cellpadding="0">
    
     <td class="text">
      <table height="150" cellpacing="0" cellpadding="0" width="480" align="center" background="http://www.e-flowing.com/1/bg_1.jpg" border="0">
       
        <td style="FILTER: Glow(strength=4)mask(color=#E1E4EC)" height="109" align="center" valign="middle"><font face="Verdana" color="#8C96B5" size="6"><i>WILLKOMMEN
         ZU
 
         <a href="http://WWW.E-FLOWING.COM<%F0%9F%8E%9C></i><%F0%9F%8E%9C><%F0%9F%8E%9C>" target="_blank">WWW.E-FLOWING.COM</a></i>
       
      
     
    
    
     Code für diesen Effekt:
 
      FILTER: Leuchtmaske (Stärke = 4) (Farbe = #E1E4EC)
    
   
  
 
 <br><input onclick="runEx('runcode39707')" type="button" value="运行代码"> <input onclick="doCopy('runcode39707')" type="button" value="复制代码"> <input onclick="doSave(runcode39707)" type="button" value="保存代码">[Strg+A, um alle auszuwählen. Hinweis: <a href="/article/23421.htm" title="查看具体详情" target="_blank">Wenn Sie externe Js einführen müssen, müssen Sie es aktualisieren, um es auszuführen </a>]</font></td>
</table>
</td>
</table>
</table>
</td>
</tr>
</table></font>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</table>
</tr>
</table>
</table>
</td>
</tr>
</table>
</td>
</table>
</td>
</table>
</td>
</table>
</td></tr></font></td>
</table>
</td>
</table>
</td>
</tr>
</table>
</td>
</table>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：18 klassische praktische CSS-Fähigkeiten_CSS/HTMLNächster Artikel：18 klassische praktische CSS-Fähigkeiten_CSS/HTML

In Verbindung stehende Artikel

Mehr sehen