9 Use CSS styling to alter images in your blog July 29, 2007 /

You can easily create filters for your text and images to alter them automatically using CSS styling, rather than alter each element individually. I've done this on a couple of the Blogger templates I've created: the "Sweet Dreams" template uses a greyscale image filter, while the "Sunset" theme uses transparency to create a halo effect around images. In this tutorial, I'll show you some of the most commonly used CSS styling filters which you may want to use to change the appearance of the images in your blog.

Here are some examples of filters and how they may be implemented:

Alpha Channel	Allows you to set the opacity of the element
For text: <span style="width: 200; height: 50; font-size: 24pt; font-family: Verdana; color: red; Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=400, FinishY=0)">Alpha Channel</span> For images: Filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)
Motion Blur	Blurs the element in a specified direction to the desired strength
For text: <span style="width: 200; height: 50; font-size: 24pt; font-family: Verdana; color: red; Filter: Blur(Add = 1, Direction = 225, Strength = 10)">Motion Blur</span> For images: filter:blur(add=1, direction=225, strength=10)
Chroma	Removes the specified hexadecimal colour of an element
For images: filter:chroma(color=#000000)
Flip Horizontal	Flips the element horizontally
For images and text: filter:fliph
Flip Vertical	Flips the element vertically
For images and text: Filter:flipv
Drop Shadow	Creates a drop shadow around the specified element
For text: <span style="width: 200; height: 50; font-size: 24pt; font-family: Verdana; color: red; Filter: DropShadow(Color=#404040, OffX=2, OffY=2, Positive=1)">Drop Shadow</span> For images: style="Filter: Chroma(Color = #000000) DropShadow(Color=#404040, OffX=4, OffY=4, Positive=1)"
Shadow	Creates a shadow from the element in a specified direction
For text or images: filter:shadow(color=#404040, direction=225")
Glow	Creates a glow in the specified colour around an element
For text: <span style="width: 200; height: 50; font-size: 24pt; font-family: Verdana; color: red; filter:glow(color=#ffcc00, strength=5);">Glow</span> For images: style="filter:Chroma(Color=#ffffff) glow(color=#ffcc00, strength=5)"
Grayscale	Filters the element to be displayed in greyscale only
For images or text: filter:gray
X-Ray	Converts the element to grayscale colours and inverts the brightness
For images or text: filter:xray
Invert	Inverts the colours of an element
For images or text: filter:invert
Wave	Creates a wave effect across the element to the specified variables
For text: <span style="width: 200; height: 50; font-size: 24pt; font-family: Verdana; color: red; filter:Wave(Add=0, Freq=5, LightStrength=20, Phase=110, Strength=5)">Wave</span> For images: style="filter:Wave(Add=0, Freq=5, LightStrength=20, Phase=220, Strength=10)"

To implement a filter across all images or specified textual elements which appear in your blog, you should add appropriate styling to the style section of your template, between the <b:skin> and </b:skin> tags. Here are some examples:

For image filtering:
img {filter:chosenfilter;} To make sidebar titles glow:
.sidebar h2 {filter:glow(color=#ff0000, strength=5);}

To include filters individually in blog posts or in the sidebar, you will need to specify the filters in the image properties (for image filters) or within span tags (for textual filters. Here are some examples:

To make text have a drop shadow: <span style="width: 200; height: 50; font-size: 24pt; font-family: Verdana; color: red; filter:shadow(color=#404040, direction=225")>Shadow</span> To filter an image with X-ray: <img src=yourimage.jpg filter:xray>

For more information about CSS filters, visit W3Schools.com

Technorati Tags: image | filters | css | styling | blog | template | design | elements | text | manipulation