July 29, 2007

Use CSS styling to alter images in your blog

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: | | | | | | | | |

Advertise on Blogger Buster

Browse through the Archives

All existing posts are still available to view while I'm working on the site, albeit seen in a much simpler interface. Feel free to browse through the archives to find tutorials, templates and articles to help you build a better blog:

Blog Archive

© Blogger Buster 2010 Home | About | Contact | Hire Me | Privacy Policy