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: For images: | |
Motion Blur |
Blurs the element in a specified direction to the desired strength |
For text: For images: | |
Chroma |
Removes the specified hexadecimal colour of an element |
For images: |
|
Flip Horizontal |
Flips the element horizontally |
For images and text: | |
Flip Vertical |
Flips the element vertically |
For images and text: |
|
Drop Shadow |
Creates a drop shadow around the specified element |
For text: For images: |
|
Shadow |
Creates a shadow from the element in a specified direction | For text or images: |
Glow |
Creates a glow in the specified colour around an element |
For text: For images: |
|
Grayscale |
Filters the element to be displayed in greyscale only | For images or text: |
X-Ray |
Converts the element to grayscale colours and inverts the brightness | For images or text: |
Invert |
Inverts the colours of an element | For images or text: |
Wave |
Creates a wave effect across the element to the specified variables |
For text: For images: |
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: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:
img {filter:chosenfilter;} To make sidebar titles glow:
.sidebar h2 {filter:glow(color=#ff0000, strength=5);}
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