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.