Sierra Image Works - Web Design & Development Firm serving clients in San Francisco and San Jose

Hello world!

admin — Wed, 09 Mar 2011 06:01:12 +0000

Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!

Any font on the web @font-face

admin — Mon, 18 Jan 2010 23:04:31 +0000

1. Conver fonts of any type to to .eot font format: www.fontsquirrel.com/fontface/generator

2. Insert the following script into css file:

@font-face {

 font-family: 'Eaves';

src: url('/fonts/MrsEavesItalic.eot');

src: local('MrsEaves Italic'), local('MrsEavesItalic'), url('/fonts/MrsEavesItalic.otf') format('opentype');

How to center absolute positioned element

admin — Tue, 01 Dec 2009 18:07:01 +0000

Naturally an element with absolute positioning tends to be align to the left. To make that element float in the center horizontally use the following code: #elem { position: absolute; left: 0; right:0; } Unfortunately this does not work in … Continue reading →

JavaScript – clear value of input field

admin — Fri, 06 Nov 2009 18:22:10 +0000

This useful code sets the value on an input field to nothing.

Applying two background images

admin — Sun, 25 Oct 2009 19:42:47 +0000

To apply two images to HTML page background you can use the following code: html { height: 100%; background:url(bg.gif); } body { margin:0; background:url(bg_content.gif) repeat-y center top; min-height:100% !important; height: 100%; } min-height:100% – allows the background image to stretch … Continue reading →

Special HTML Character for Bullet List

admin — Fri, 09 Oct 2009 00:22:39 +0000

This is a best way to use a special character as a bullet for lists in CSS:


li:before {
    content: "0BB 020";  /*  » for example

When using these characters, like », it is necessary to encode them as their escaped HEX equivalents. Unfortunately this doesn’t work in IE7 and the previous versions. So If you want it to be cross-browser use an image instead.

JavaScript body ID refference

admin — Wed, 26 Aug 2009 18:24:46 +0000

Addressing an individual page based on its ID is possible with the following JavaScript code:

if (document.body.id == "ID") {

 do something;
}

Creating a link with JavaScript

admin — Wed, 26 Aug 2009 18:19:35 +0000

Using this JavaScript snippet makes it possible to create a link out of a non-link element:

But the above code does not convert the cursor to a hand, so it is best practice to do in with CSS in order for the users to be able to see the hot spot.

#fakeLink {

   cursor:pointer;

Creating favicon

admin — Wed, 26 Aug 2009 18:03:40 +0000

The following four steps briefly describe how to create a favorites icon for your website.

1. Create 16px X 16px square image and call it “favicon.png” (the name could be anything)

2. Go to www.convertico.com and convert that image to “favicon.ico”

3. Place the” favicon.ico” in the root of the site

4. Create a link in the of the document:

Creating various includes

admin — Wed, 26 Aug 2009 17:51:32 +0000

This is a PHP include code:

Using absolute path for PHP include code:

.php'; ?>

This is a ASP include code:

This is a Server Side HTML include code (the document containing this code must be saved as .shtml):