Maison > Article > interface Web > CSS implémente l'effet de texte ombré_CSS/HTML

CSS implémente l'effet de texte ombré_CSS/HTML

WBOYoriginal: 2016-05-16 12:10:441803parcourir

<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">Si nous appliquons de manière flexible les caractéristiques de divers filtres CSS et les combinons, nous pouvons obtenir de nombreux effets inattendus. Voici quelques démonstrations d’effets pour votre référence. </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 classe="text">
      <table align="center" border="0" width="200" height="50">
       
        <td style="FILTRE : flou(direction=135,force=8)" align="center"><font face="黑体" color="#8C96B5" size="6"></font></td>
</table>
<i>E Conception de flux</i>
</td>
       <tr>
      <td bgcolor="#E1E4EC">
      
 
      L'effet créé à l'aide du filtre flou, le code est le suivant :
 
      <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>FILTRE : flou(direction=135,force=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 classe="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>Conception de flux E</i></b></font></td>
       </tr>
      </table>
      
 
      L'effet créé avec le filtre dropshadow, le code est le suivant :
 
      FILTRE : 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 classe="text">
      <table align="center" border="0" width="200" height="50">
       
        <td style="FILTRE : glow(color=#B4BBCF,strength=5)" align="center"><font face="黑体" color="#8C96B5" size="6"><i> Conception de flux E</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>
      
 
      L'effet créé avec le filtre lumineux, le code est le suivant :
 
      </b>FILTRE : lueur(color=#B4BBCF,strength=5)</td>
</tr>
    </table>
   
  
 
 
  
   <table width="100%" border="0" cellpacing="8" cellpadding="0" class="unnamed1">
    
     <td classe="text">
      <table align="center" border="0" width="200" height="50">
       
        <td style="FILTRE : alpha(opacity=100,finishiopacity=0,style=1)shadow(color=#8C96B5,direction=135)" align="center">
<font face="黑体" color="# 8C96B5" size="6"><i>Conception de flux E</i></font>
       
      
      
 
      Cet effet utilise deux filtres : ombre et alpha. Le code est le suivant :
 
      FILTRE : alpha(opacité=100,finitionopacité=0,style=1)
 
      ombre(color=#8C96B5,direction=135) 
    
   
  
 
 
  
   <table width="100%" border="0" cellpacing="8" cellpadding="0" class="unnamed1">
    
     <td classe="text">
      <table align="center" border="0" width="200" height="50">
       
        <td style="FILTRE : masque(color=#E1E4EC)shadow(color=#8C96B5,direction=135)chroma(color=#E1E4EC)" align="center">
<font face="黑体" color="# 8C96B5" size="6"><i>Conception de flux E</i></font>
       
      
      
 
      Cet effet utilise également deux filtres, masque et ombre. Le code est le suivant :
 
      FILTRE : masque(color=#E1E4EC)
 
      ombre(couleur=#8C96B5,direction=135)chroma(couleur=#E1E4EC)
 
      
 
      Remarque : La couleur du masque doit être cohérente avec la couleur d'arrière-plan de la page Web et la couleur de la police est déterminée par l'ombre. 
    
   </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 classe="text">
      <table align="center" border="0" width="200" height="50">
       <b>
        </b><td style="FILTRE : masque(color=#E1E4EC)dropshadow(color=#B4BBCF,offx=-3,offy=-3,positive=1)chroma(color=#E1E4EC)" align="center"><i>Conception de flux E</i></td>
</table>
       </td>
      </tr>
      
 
      Si l'effet ci-dessus est du texte Yin, alors cet effet doit être considéré comme du texte Yang. Utilisez deux filtres pour implémenter le masque et l'ombre portée. Notez que la couleur du masque doit être cohérente avec la couleur d'arrière-plan de la page Web, ou utilisez un masque et une ombre portée. chroma par paires. Le même effet peut être obtenu. Le code est le suivant :
 
      <tr>FILTRE : masque(color=#E1E4EC)
 
      ombre portée(couleur=#B4BBCF,offx=-3,offy=-3,positif=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 classe="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>Conception E-flow</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>
      
 
      Vous pouvez utiliser le filtre lumineux pour créer des caractères creux en définissant la couleur de la police sur la couleur d'arrière-plan, puis en définissant la valeur d'intensité du filtre lumineux sur 1 ou 2. Le code de cet effet est le suivant :
 
      <tr>FILTRE : lueur (couleur = # 8C96B5, force = 2)
 
      ombre(color=#B4BBCF,direction=135)<td class="unnamed1"> <font class="text">
    <b>
   </b>
  <b>
 </b>
 <b>
  </b>
   <table width="100%" border="0" cellpacing="8" cellpadding="0">
    
     <td classe="text">
      <hauteur de la table="150" largeur="200" align="centre" background="http://www.e-flowing.com/1/bg_1.jpg" border="0">
       </hauteur>
</td>
        <td style="FILTRE : masque(color=#E1E4EC)shadow(color=#B4BBCF,direction=135)chroma(color=#E1E4EC)" align="center"><font face="黑体" color="#8C96B5" size="6"><i>Conception de flux E</i></font></td>
</table></font>
</td>
</tr>
       <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>Conception E-flow</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="FILTRE : masque(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>Conception de flux E</i>
</td>
</table>
       </b></font>
</td>
      </tr>
     </table>
    
    
     Si l'arrière-plan est une image, afin d'obtenir un effet satisfaisant, vous devez utiliser un masque et une chrominance en combinaison. Cela rendra la police transparente et laissera transparaître l'arrière-plan.
 
      
 
      Le code du premier effet répertorié ci-dessus est :
 
      FILTRE : masque(color=#E1E4EC)
 
ombre(couleur=#B4BBCF,direction=135)
 
chroma(color=#E1E4EC)
 
      Remarque : la couleur de la police est déterminée par l'ombre. Les couleurs du masque et de la chrominance doivent être les mêmes et la couleur est arbitraire.
 
      
 
      Le code au milieu est :
 
      FILTRE : lueur (force = 1)
 
masque(couleur=#B4BBCF)
 
chroma(color=#B4BBCF)
 
      Remarque : La couleur du masque et de la chrominance est la même et cette couleur détermine la couleur de la police.
 
      
 
      Le code de ce dernier est :
 
      FILTRE : masque(color=#E1E4EC)
 
ombre portée(couleur=#B4BBCF,offx=-3,offy=-3,positif=1)
 
chroma(color=#E1E4EC)
 
      Remarque : Les couleurs du masque et de la chrominance sont les mêmes et la couleur est déterminée par l'ombre portée. 
    
   
  
 
 
  
   <table width="100%" border="0" cellpacing="8" cellpadding="0">
    
     <td classe="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>BIENVENUE
         À
 
         <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 pour cet effet :
 
      FILTRE : masque lumineux (force = 4) (couleur = #E1E4EC) 
    
   
  
 
 <br><input onclick="runEx('runcode39707')" type="button" value="运行代码"> <input onclick="doCopy('runcode39707')" type="button" value="复制代码"> <input onclick="doSave(runcode39707)" type="button" value="保存代码">[Ctrl+A pour tout sélectionner Remarque : <a href="/article/23421.htm" title="查看具体详情" target="_blank">Si vous devez introduire des J externes, vous devez l'actualiser pour l'exécuter </a>]</font></td>
</table>
</td>
</table>
</table>
</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>

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：18 compétences pratiques CSS classiques_CSS/HTMLArticle suivant：18 compétences pratiques CSS classiques_CSS/HTML

Articles Liés

Voir plus