Techie Too!

Remote @font-face embedding for Firefox

Firefox 3.5 doesn’t allow @font-face to reference a font that is hosted on a remote server, although Safari does. Firefox simply doesn’t show the font and uses the next font in the font stack. In order to use @font-face on a blog like Tumblr, the .htaccess file on your server that hosts the font file needs to be edited to allow the blog to use the font.

Edit your server .htaccess file. Add the following to limit the use of your font files to only your Tumblr blogs:

<FilesMatch "\.(eot|ttf|otf)$">

<IfModule mod_headers.c>

Header set Access-Control-Allow-Origin: http://yourblog.tumblr.com

Header set Access-Control-Allow-Origin: http://yourblog2.tumblr.com

</IfModule>

</FilesMatch>

This code will allow the two referenced url’s to use the fonts hosted on your server.

(Note: References Mozilla Developer Center and Mozilla Hacks )

Pretty Boxes with CSS3

CSS3 makes such pretty boxes. This one is a transparent red (#f00) on a yellow (#ff0) background to make a nice orange. It uses border-radius, rgba transparency, box-shadow, and text-shadow properties. These look like the image in Firefox 3.x and Safari, and should also work in Chrome. The text-shadow can be viewed in Opera. All versions of IE display a yellow box with a square-cornered black border, and no shadow on the text. IE does do transparency, but the text in the box is also transparent, unless you resort to removing it from the box-parent.

The css:

body {
background-color: #ffff00;
font-family: Verdana; sans-serif;
font-size: 12px;
color: #000;}
#boxabc {
width: 250px;
background: rgba(255, 0, 0, 0.6);
border-top: 1px solid #aaa;
border-right: 2px solid #444;
border-bottom: 2px solid #444;
border-left: 1px solid #aaa;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
-khtml-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
padding: 15px;}
.shadowtext {
font-size: 16px;
text-shadow: 2px 2px 2px #666;
font-weight: bold;
}

The HTML:

<div id="boxabc">
<p class="shadowtext">Praesent Eleifend</p>
<p>Lorem ipsum dolor sit amet,...</p>
</div>

Easy PNG Transparency in IE6 with GIMP

Here’s how to use GIMP make great looking transparent png images for websites that also look great in IE6 with no image fiddling and no behavior htc files needed.

In the GIMP:

1. Create a png image as usual.
2. Change the GIMP background color to be the color of the website background.
3. Save As filetype .png, but be sure to check “Save background color” wne the “Save as PNG” dialog box pops up.

CSS Text Wrap in a Grid

I’ve been working with a grid system for my latest project, and it’s been great.  I don’t usually start with someone else’s code though, and so I missed something.  The text on one page would not wrap around right-floated images.  I finally removed all the styles on both the p tag and the div for the image, and still no text wrap, so …

The grid CSS had this:

p {
...
overflow:hidden;
}

Of course, that’s great if you’re trying to keep text in nice little boxes, but not so great if you’re trying to wrap text.  Once it was removed, the text wrap and the image float behaved normally again.