Archive for February, 2009

Custom Fonts in Silverlight

This is the first of many Silverlight posts.  Just a quick note of how to create a Silverlight style with a custom font.

The FontFamily is set to the font file name, hash and the font family name.  There is a great video about it here.

2009
02/24
CATEGORY
Silverlight
TAGS



Leave a comment

sIFR 3 for Navigation

I couldn’t find any documentation on how to use sIFR for navigation but found plenty of forum posts about people using it (I’m sure I’m missing something).  So I thought I should make a quick note about how to use it.

sIFR replaces <li> tags to create a horizontal or vertical navigation.  I don’t know if <li> tags are the only way to do it?

<ul class="flash_nav">
<li><a id="menu_home" class="degradingLink left_menu" href="index.html">Home</a></li>
<li><a id="menu_diary" class="degradingLink left_menu" href="diary.html">Diary</a></li>
</ul>

And the CSS in the sifr-config.js goes

sIFR.replace(letter_gothic, {
selector: 'ul.flash_nav li',
css:    [
'.sIFR-root {color:#000000; cursor:pointer; text-decoration:none;}',
'a { color: #000000; text-decoration: none; }',
'a:link { color: #000000; text-decoration: none;}',
'a:hover { color: #666666; text-decoration: none;}',
]
});
2009
02/16
CATEGORY
Web Development
TAGS


5 comments

Degrading Link and Image

Here’s some code that I’ve been using all over.  It displays and image with markup for degrading gracefully.  Nothing fancy but very useful.

The CSS

.degradingImg {
display:block;
text-decoration:none;
background-repeat:no-repeat;
}

.degradingImg span{
left:-9999px;
position:relative;
}

The markup

<div id="header_cern" class="degradingImg"><span><h1>CERN - European Organization for Nuclear Research</h1></span></div>

A link works in the same way but makes a block of and ancor tag.

The CSS

.degradingLink {
display:block;
text-decoration:none;
background-repeat:no-repeat;
}

.degradingLink:hover {
text-decoration:none;
opacity: 0.5;
filter: alpha(opacity = 50);
}

.degradingLink span{
left:-9999px;
position:relative;
}

The markup

<a id="thumbs_2" class="degradingLink left_menu" href="particles_matter.html"><span>Particles Matter - What are Particles?</span></a>
2009
02/06
CATEGORY
css
Web Development
TAGS



Leave a comment

Font Replacement

Just been doing some research about font replacement.  The conclusion is that – for the time being – sIFR is the only crossbrowser solution.  But there were some interesting projects I wanted to keep a note of.

Microsoft EOT is still around and has been submitted to W3 for standardisation.  If it becomes a standard it will allow DRMed fonts on the web making everybody happy.

CSS3 @font-face looks great and should be a standard but is currently only working in Firefox 3 (and probably Webkit but I haven’t checked).

Typeface is similar to sIFR but only uses Javascript and Canvas.  It doesn’t let you convert copyrighted fonts.

On a final note there are quite a few websafe fonts out there.

Edit: There is now something called Cufon that does font replacement through the Canvas tag.

2009
02/04
CATEGORY
css
Web Development
TAGS





Leave a comment

Recent entry

Archive

Category