14 Aug
Posted by Ray Cheung as 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





Anyone using sFIR(s) should see their site on Firefox with Flashblock installed. Terrible.
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
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
RSS feed for comments on this post · TrackBack URI