Hey guys, I'm new here and I really hope you can help me out! I just went to this site http://www.tadwilliams.com/index.html and I was wondering, how do you think those H3 titles in teal are done? They seem like a combination of upper and lowercase letters, but I think it must be some kind of style class since if you view the source the titles are written in plain text and not in alternating caps. Any ideas?
He is using sIFR. I don't know much about it, but it is a way to use Flash objects to get the text to look however you want it to.
Here's the style sheet code. This doesn't look like anything special to me, but maybe I'm missing something? h3 { margin: 0px 4px 0px 0px; padding-bottom: 2px; border-bottom: 1px solid #DE8681; color:#008896; font-weight: normal; font-family:Georgia, serif; font-size:20px; letter-spacing:1px; } Code (markup):
It is more complicated than the style sheet. As I said earlier, he is using sIFR. Here is the HTML code that the browser sees: <h3 class="dogblog sIFR-replaced"> <a href="http://www.tadwilliams.com/sifr/disturbance.swf" class="abp-objtab-003538263734223035 visible ontop" title="Click here to block this object with Adblock Plus" style="left: 580px ! important; top: 0px ! important;"/> <embed width="580" height="36" src="sifr/disturbance.swf" quality="best" flashvars="txt=Dog Blog&offsetTop=3&textcolor=#008896&w=580&h=36" wmode="transparent" bgcolor="transparent" sifr="true" type="application/x-shockwave-flash" class="sIFR-flash" style="width: 580px; height: 36px;"/> <span class="sIFR-alternate">Dog Blog</span></h3> Code (markup): As you can clearly see, it is flash.
Maybe I'm not seeing the same effect/header. All I'm seeing is some plain teal text "Dog Blogs." Nothing special about on my end. Using FireFox 3.
Its Flash. Trust me. "View Source" doesn't show source code that is written to the browser cache by Javascript. You can tell that this is more than just the style sheet in several ways. 1-Apply the CSS code you posted above to any web page you are working on. It will not look at all like it does on Tad Williams page. The font Family "font-family:Georgia, serif;" doesn't look at all like this text. 2-Disable JavaScript and then look at the page. The text will look different. sIFR uses JavaScript to apply the Flash styles. 3-Browse the web site with a browser that does not have Flash installed. Or you can install the Flash Block extension for FireFox. The headers will not look the same, or they will not show up at all. 4-Install the FireBug extension for FireFox, and browse through the page source using it. You will see the flash source code on the page. 5-Look at the <head> section of the source code. You will see this: <link rel="stylesheet" href="http://www.tadwilliams.com/sifr/sIFR-screen.css" type="text/css" media="screen,projector"> <link rel="stylesheet" href="http://www.tadwilliams.com/sifr/sIFR-print.css" type="text/css" media="print"> <script src="http://www.tadwilliams.com/sifr/sifr.js" type="text/javascript"></script> Code (markup): You can clearly see that it is using sIFR.
Thanks very much! So, does someone have to have Flash as a program in order to use this or is there just some coding they need to use that's based in Flash?
I'm not sure. All of the information you need is here: http://www.mikeindustries.com/sifr Just read up on it, and you will know exactly what you need to do.