Playing with Filters in sIFR3 to create text effect

Done with placing sIFR into our blog, now we will try to customize more our sIFR text with some flash Filters effect. According to sIFR wiki page, there some text effect can be customized like shadow, bevel and glow with flash Filters with sIFR3. Visit this link, it's an official example of sIFR and Filters implementation in web page.

Ok, let start.
Assume you have done with this simple steps (You have to read it before go to the next step), now open your sIFR-screen.css and add below code to the bottom of your sIFR-screen.css.

.sIFR-active .sIFR3{
visibility: hidden;
font-family: Verdana;
line-height: 1em;
font-size: 30px; /*Change font size here */
}


You can change ".sIFR3" to any class you want, but try not to use tag as selector, because it will effect globally to all your selected tag, so class or ID is recomended. Now save your work.


Next, edit sifr-config.js and try add some code below to the bottom of sifr-config.js line. Select any or all af this code below related to showed text effect.

Bevel Filter

This Bevel Effect, created by sIFR3 on InfoDotNet

sIFR.activate(myFont);
sIFR.replace(myFont, {
selector: '.bevel'
,wmode: 'transparent'
,filters: {
Bevel: {
knockout:true
,type: 'outer'
,strength: 1
,quality: 1
,colors: '#336700'
,distance: 2
,shadowColor: 1
,highlightColor: 2
}}});

Glow Filter

This Glow Effect, created by sIFR3 on InfoDotNet

sIFR.activate(myFont);
sIFR.replace(myFont, {
selector: '.glow'
,wmode: 'transparent'
,filters: {
Glow: {
knockout:true
,strength: 1
,quality: 1
,colors: '#336700'
,distance: 2
}}});


Shadow Filter

This Shadow Effect, created by sIFR3 on InfoDotNet

sIFR.activate(myFont);
sIFR.replace(myFont, {
selector: '.shadow'
,wmode: 'transparent'
,filters: {
DropShadow: {
hideObject:false
,knockout: true
,quality: 3
,distance: 1
,color: '#330000'
,strength: 3
}}});

For more info and effect read sIFR official wiki page here.

Next create a SPAN or DIV tag which you want to add a text effect on it and add class to those element with "sIFR3 bevel" for bevel effect, "sIFR3 glow" for glow effect and "sIFR3 shadow" for shadow effect.
Example:


Just edit sifr-config.js to change effect option and color. I hope this information useful, happy trying and goodluck.

Link:
http://wiki.novemberborn.net/sifr3/Filters