I use WordPress for my blog. I wanted to update the bog to use HTML5 and CSS3. It wasn’t like I was using tables for layout or anything but there were three things that I didn’t really like the look of.

The first thing I wanted to fix was the Web font. I was using JavaScript to produce the font, and it was not giving good results in all browsers. I searched for and found the Whiteboard regular font I was using. Unfortunately not all font files are supported in all of the browsers. To support all browsers you need at least 2 files. I downloaded and copied all of the necessary files (ttf, eot, woff, and svg). Then I edited my main stylesheet and added this to the top

/* @font-face kit by Fonts2u (http://www.fonts2u.com) */ 
@font-face
{
	font-family:"Whiteboard";
	src: url("House_Whiteboard_font_by_callsignKateJones.eot");
	src: url("House_Whiteboard_font_by_callsignKateJones.eot?#iefix") format("embedded-opentype"),
	url("House_Whiteboard_font_by_callsignKateJones.woff") format("woff"),
	url("House_Whiteboard_font_by_callsignKateJones.ttf") format("truetype"),
	url("House_Whiteboard_font_by_callsignKateJones.svg#Whiteboard") format("svg");
	font-weight:normal;font-style:normal;
}

I removed the typeface.js scripts and the extraneous styles, and voila, I now had working fonts in all browsers.

The next thing I wanted to focus on was the text on the sticky note. I wanted it to look written on. For this I needed the new CSS3 rotate transform

.sticky
{
	-webkit-transform:rotate(-9deg);
	-moz-transform:rotate(-9deg);
	-o-transform:rotate(-9deg);
	/* filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=-0.1); */
	-ms-transform:rotate(-9deg);
}

The last thing I didn’t like was the whiteboard boarder. It looked alright in Chrome (which was my default browser, but not so good in IE. I tried a couple of things including border gradients and background gradients, but I couldn’t get it to look right. Finally I had to resort to JavaScript which sucks.

No comments yet.

No Comments

Sorry, the comment form is closed at this time.