Nikos D.

I was playing with sIFR 3 for a client's project and I was trying to use the :first-letter CSS selector inside the sIFR replaced flash text. If I get it right this is not supported so I made the following hack:

Suppose that we have the following markup:


Inside the head part of the html page (or in an external js file that is loaded before the sIFR activation) I put this small script:


Now, all we have to do when we call sIFR.replace is to add the following CSS rule:


Let's wrap it up now, shall we?


Obviously, for the above to work you will need the appropriate swf files and a basic knowledge of how to use sIFR. For more info you can take a look at this tutorial.

Disclaimer: I know this is not the cleanest solution possible but it's a quick and dirty way of getting the functionality you want on some specific headings, etc... Please don't copy & paste the previous snippet cause there are high chances that it won't work! Customize it for your own needs and requirements and let me know of any recommendations/suggestions :)

Labels: CSS, Hacks, Javascript, Web Design
Posted by Nikos Dimitrakopoulos at 16:11 |