Efectos en textos e imágenes con CSS
En este artículo veremos como aplicar filtros CSS
en textos e imágenes para lograr determinados efectos.
Sólo debes copiar el código del efecto que quieras utilizar
e insertarlo dentro en tu página web. También puedes cambiar los parámetros
del filtro para obtener un nuevo efecto, o bien, modificarlo a gusto propio.
<span style="color:#FFFFFF;width:100%;filter:dropshadow(color=#000000,offx=1, offy=1, positive=1), glow(color=#000000, strength=0)">Efecto borde: Drop Shadow con Glow</span>
<span style="color:#FFFFFF;height:1; filter:glow(color=#000000)">Efecto Glow</span>
<span style="height:1; Filter: Blur(Direction=200, Strength=4)">Efecto Motion Blur</span>
<span style="height:1; filter:shadow(color=#666666, direction=230, enabled=1)">Efecto Drop Shadow</span>
<span style="height:1; Filter: DropShadow(Color=#666666, OffX=2, OffY=2, Positive=1)">Efecto Drop Shadow 2</span>
<span style=" height=1; Filter: Mask(Color=#000000)">Efecto fondo (Mask)</span>
<span style="height:50; Filter: Wave(Freq=4, Phase=100, Strength=2)">Efecto Wave</span>
<span style="width: 357; height: 50; Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)"><b>Efecto Alpha</b></span>
<span style="width: 300; height: 50; color: red; Filter: FlipV">Efecto Flip</span>
<span style="width: 357; height: 20; Filter: Mask(color=#FF0000) Shadow(Color=red, Direction=225) Chroma(color=#FF0000)">Efecto Chaining Filters</span>
Todos estos efectos también pueden ser utilizados en imágenes:
Imagen original
Imágenes con efectos
Para aplicar los efectos en imágenes, sólamente hay que agregar
el parámetro style (del efecto de texto) dentro del
tag de inserción de la imagen y aplicar el filtro deseado.
<img SRC="obelisco.jpg" BORDER="0" style="Filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)" width="317" height="248">
<img SRC="obelisco.jpg" style="Filter: Wave(Freq=5, Phase=2200, Strength=10)" width="317" height="248">
De esta manera es posible aplicar cualquiera de los efectos
nombrados anteriormente en cualquier imagen además de textos.
| 
