Javascript – sIFR 3: Background Transparent

cssflashjavascriptsifr

i'm working on using sIRF for the first time as a way to implement specific typography on a website. it's all working nicely but i have one problem, i want the background to be transparent. i've looked thru the sIRF wiki and im not sure if this is something that is possible..

does anyone know of a way to do this?

i have a test page here > http://www.bevelite.com.au/test

sIRF documentation here > http://wiki.novemberborn.net/sifr3/

Best Answer

Lately I use Facelift as I find it a little easier to work with than sIFR... but I believe to make the background transparent you do something like this:

sIFR.replace(yourtypeface, {
      selector: 'h2.cpost-title',
      wmode: 'transparent'
});

Related Solutions

Javascript – sIFR 3: fixfocus: true

Mathew Taylor's answer above is probably more accurate but your question is where to put that snippet in. Also, note in your snippet you had an extra trailing comma in your array 'css: []', you should watch out for those because they will get you in IE

sIFR.replace(univers47cl, {
    selector: 'h1.test',
    wmode: 'transparent',
    fixFocus: true,
    css: [
            '.sIFR-root { font-size: 20px; font-weight: 100; color: #000000; text-transform: uppercase; line-height: 20px; margin: 0 0 15px 0; padding: 0; }',
            'a { text-decoration: none; }',
            'a:link { color: #000000; text-decoration: none; }',
            'a:hover { color: #000000; text-decoration: underline; }'
    ]
    });

sIFR.replace(univers47cl, {
    selector: 'h1',
    wmode: 'transparent',
    fixFocus: true,
    css: [
            '.sIFR-root { font-size: 20px; font-weight: 100; color: #00b9f2; text-transform: uppercase; line-height: 20px; margin: 0 0 15px 0; padding: 0; }',
            'a { text-decoration: none; }',
            'a:link { color: #00b9f2; text-decoration: none; }',
            'a:hover { color: #00b9f2; text-decoration: underline; }'
    ]
    });

Html – How to give text or an image a transparent background using CSS

Either use a semi-transparent PNG or SVG image or use CSS:

background-color: rgba(255, 0, 0, 0.5);

Here's an article from css3.info, Opacity, RGBA and compromise (2007-06-03).

<p style="background-color: rgba(255, 0, 0, 0.5);">
  <span>Hello, World!</span>
</p>

Best Answer

Related Solutions

Javascript – sIFR 3: fixfocus: true

Html – How to give text or an image a transparent background using CSS

Related Topic