WebAppers

/ best free open source web resources /

Shopify

Multi-color sIFR Allows Colorful Headings in Any Fonts

Posted · Category: Fonts, LGPL License

Multi-color sIFR (Scalable Inman Flash Replacement) is a technology that allows you to replace text elements on screen with Flash equivalents with colors. sIFR is a DOM replacement method originally conceived by Shaun Inman and turned into a high quality cross-browser, cross-platform typography solution for the masses.

sIFR allows website headings, pull-quotes and other elements to be styled in whatever font the designer chooses without the user having it installed on their machine.

Multi-color sFIR implementation is easy – just add sEmColor:”#FF4400″, sStrongColor:”#FF0000″ and sSpanColor:”#EE6600″ into your named argument call function at the bottom of the .html file and if the script finds a <strong>, <em> or <span> elements, each one will be colored3. And they can be nested, too.

Requirements: Browsers required Flash
Demo: http://webdesign.maratz.com/lab/multi_color_sifr/
License: LGPL License

3 Comments
  • http://mahalie.com/notebook/ mahalie

    Anyone using sFIR(s) should see their site on Firefox with Flashblock installed. Terrible.

  • http://novemberborn.net/ Mark Wubben

    sIFR 3 [1] is in development which supports multi-colors natively (without hacks). If you want multi-colors, definitely use v3.

    Mahalie, FlashBlock removes the sIFR movie to show plain text. At least that’s what it used to do.

    [1]: http://novemberborn.net/sifr3

  • Luiggiggi

    maybe is a stupid question but…

    if i have an “h1″ and a “.class h1″ how can i assign a different color to the second one?

    ex:
    i have a color for ALL the h1 titles, defined by the sifr-config.jf code:

    sIFR.replace(myriad, {
    selector: ‘h1′,
    css: ‘.sIFR-root { font-weight: bold; color: #465a68; }’
    });

    and i wanna change the color of the .class h2 title by the code:

    sIFR.replace(myriad, {
    selector: ‘.class h1′,
    css: ‘.sIFR-root { font-size: 18px; font-weight: bold; color: #b49970; }’
    });

    BUT I CAN’T!

    how can i?

    thanks

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons