body{
	background:#373737;
}
h1{
	color: #373737;
	text-shadow: 0 0 5px #111,
	1px 1px 0 #777;
}

Almost every font you buy/get is in either TrueType(.ttf) or OpenType(.otf) format. The first step to get your custom font going in IE is to convert your font into Embedded OpenType(.eot).

Convert your font

• TrueType to Embedded OpenType
• All – OnlineFontConverter
• Microsoft WEFT
• Screencast by Snook – TTF/OTF to EOT

Upload both your EOT file and your OTF/TTF file to your webserver and declare the CSS like this.

The magic

/*
===========================================
Diavlo is a font by Jos Buivenga (exljbris) -> www.exljbris.nl
===========================================
*/
@font-face { font-family: "DiavloLight"; src: url(diavlo_light.eot);  }
@font-face { font-family: "DiavloLight"; src: url(diavlo_light.otf); format("opentype"); }

Remember to declare font-face for IE before you declare it for Firefox/Safari/Opera/All the other browsers that isn’t stuck in the 90s.

This is a new way of thinking about your data. Microformat are small patterns of HTML/XHTML to represent commonly published things like people, events, blog posts, reviews and tags on webpages. Search engins and browsers use the small snippets of code for a few different things. I’m going to go through a couple of the different microformats in this blog post. You can read more about it on the microformat.org website.

The purpose of using microformats is to solve a specific problem. It is basic semantic HTML/XHTML, so you can enhance your excisting website with minimal effort.

Search engine gets help from the microformats to determine what kind of content it is reading. Formats like hCard and hCalendar have nativ support in browsers like Firefox and Opera. Devices like iPhone can take advantage of contact information if you use the appropiate microformats.

Table of contents
1. hCard
2. XFN – Xhtml Friend Network
3. hCalendar
4. VoteLinks
5. License
6. Tag

hCard

hCard is a simple, open, distributed format for representing people, companies, organizations, and places, using a 1:1 representation of vCard (RFC2426) properties and values in semantic HTML or XHTML.

Quote from Microformats.org website.

Here is the html markup for my personal hCard.

<div id="hcard-Kenneth-Dahlstrøm-Nordahl" class="vcard">
<span class="fn n">
	<a class="url" href="http://nordahl.me">
		<span class="given-name">Kenneth</span>
		<span class="additional-name">Dahlstrøm</span>
		<span class="family-name">Nordahl</span>
</a>
</span>
<a class="email" href="mailto:kenneth@nordahl.me">kenneth@nordahl.me</a>
<div class="adr">
	<span class="street-address">Fredriksfrydveien 1</span>
	<span class="postal-code">1792</span>
	<span class="locality">Tistedal</span>
	<span class="country-name">Norway</span>
</div>
<div class="tel">
<dt>Phone (<span class="type">Cell</span>):</dt>
<dd><span class="value">+47 45432614</span></dd>
</div>
<a class="url skype" href="callto://kdnmedia">Call me on skype</a>
<a class="url aim" href="aim:goim?screenname=kenneth@nordahl.me">IM with me</a>
<a class="url msn" href="msnim:chat?contact=kenneth@nordahl.me">Add me to your msn</a>
<a class="url" href="kdn.vcf"><img src="download.png" alt="download" class="download" /></a>
</div><!-- end of hCard div -->

As you can see the only thing you have to do to add this to your site is adding some class and rel attributes. I’m not going to bother explaining each line since they are pretty self explainary.

Just a little bit of css to make it pretty.

/*
 hCard STYLING
*/
body { background:url(body-bg.jpg) no-repeat #000; background-position:50% 50%; }
.vcard { position:relative; width:235px; height:136px; background:url(kdn-hcard-bg.png) no-repeat #000; margin:100px auto; padding:10px; -webkit-box-shadow:2px 2px 8px #000; -moz-box-shadow:2px 2px 8px #000; box-shadow:2px 2px 8px #000; }
.vcard .download { position:absolute; right:8px; bottom:8px; }
.vcard .given-name,.vcard .additional-name,.vcard .family-name { display:block; float:left; margin-right:3px; margin-bottom:10px; }
.vcard .email { display:block; float:left:; margin-top:10px; margin-bottom:10px; }
.vcard .tel { margin-top:10px; }
.vcard .postal-code,.vcard .country-name { margin-left:45px; }

/*
 TYPGROGRAPHY
*/
/*
===========================================
Diavlo is a font by Jos Buivenga (exljbris) -> www.exljbris.nl
===========================================
*/
@font-face { font-family: "DiavloLight"; src: url(diavlo_light.otf); format("opentype"); }
body { color:#aaa; font-family:Helvetica Neue,Helvetica; font-size:10px; text-shadow:1px 1px 2px #000; }
a { color:#fff; text-decoration:none; font-style:italic; }
a:hover { text-decoration:underline; }
.given-name,.additional-name,.family-name { font-family:DiavloLight, Helvetica Neue,Helvetica; font-size:14px; }
.license { font-family:DiavloLight, Helvetica Neue,Helvetica; text-align:center; font-variant:small-caps; font-size:12px; text-shadow:1px 1px 2px #000; }

XFN – Xhtml Friend Network

This is used to define links between peoples websites. You can link to your friends/relatives/acquaintances/people you met with the [code]]czo2OlwicmVsPVwiXCJcIjt7WyYqJl19[[/code] attribute. If all the people in your network use this you get a map of your relations.

<a href="http://jane-blog.example.org/" rel="sweetheart date met">Jane</a>
<a href="http://dave-blog.example.org/" rel="friend met">Dave</a>
<a href="http://darryl-blog.example.org/" rel="friend met">Darryl</a>
<a href="http://adam-blog.example.org/" rel=co-worker friend met">Adam</a>
<a href="http://www.metafilter.com/">MetaFilter</a>
<a href="http://james-blog.example.com/" rel="met">James Expert</a>

Derative of example code from gmpg.org
You can style the links with the attribute selector syntax in CSS2.1+ aware browser.

a[rel~="friend"] {font-weight: bold;}
a[rel~="co-worker"] {text-decoration: underline;}
a[rel~="acquaintance"] {font-style: italic;}
a[rel~="sweetheart"] {font-style: italic;color="red";}

Derative of example code from gmpg.org

hCalendar

hCalendar is a simple, open, distributed calendaring and events format, using a 1:1 representation of standard iCalendar (RFC2445) VEVENT properties and values in semantic HTML or XHTML.

Quote from microformat.org
Here is an event from my iCal
[code]]czozODM6XCINCkJFR0lOOlZDQUxFTkRBUg0KQkVHSU46VkVWRU5UDQpVSUQ6MDU2NDcxQTItQkRCOS00MjJCLUI5REUtMDE0NjlENEN7WyYqJl19NDA1NQ0KRFRTVEFNUDoyMDA5MTAwNFQxOTM1MjhaDQpERVNDUklQVElPTjpQZWxsZW50ZXNxdWUgaGFiaXRhbnQgbW9yYmkgdHJpc3tbJiomXX10aXF1ZSBzZW5lY3R1cyBldCBuZXR1cyBldCBtYWxlc3VhZGEgZmFtZXMgYWMgdHVycGlzIGVnZXN0YXMuDQpTVU1NQVJZOkxhdW5je1smKiZdfWggb2YgcHJvamVjdCBYDQpMT0NBVElPTjpodHRwOi8vcHJvZHVjdHMubm9yZGFobC5tZQ0KRFRFTkQ7VFpJRD1FdXJvcGUvT3Nsbzp7WyYqJl19MjAwOTEwMDZUMTYwMDAwDQpEVFNUQVJUO1RaSUQ9RXVyb3BlL09zbG86MjAwOTEwMDZUMTIwMDAwDQpFTkQ6VkVWRU5UDQpFTkQ6VntbJiomXX1DQUxFTkRBUg0KXCI7e1smKiZdfQ==[[/code]
This could look something like this in the hCalendar format.

<div class="vevent">
<h3 class="summary">Launch of project X</h3>
<p class="description">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>To be held on <abbr class="dtstart" title="2009-10-06T12:00:00+02:00">October 6th, 2009 from 12:00pm CET</abbr>
until <abbr class="dtend" title="2009-10-06T12:16:00+02:00">4:30pm CET</abbr></p>
<p>Location: <span class="location">http://products.nordahl.me</span></p>
<small>Created by: <span class="uid">Kenneth D. Nordahl</span> on
<abbr class="dtstamp" title="20091004T193528Z">October 4th, 2009 9:55pm CET</abbr></small>
</div>

There is no specifications on how you convert from iCalendar to the hCalendar format. You would have to convert the time from the format used in iCalendar to the format used in hCalendar.

VoteLinks

This is used on links to vote the related content either up or down. Another way to use VoteLinks is on polls.

<h1>Do you like this post?</h1>
<a rev="vote-for" href="http://example.com/yes"  title="I like this post!">Yes!</a>
<a rev="vote-against" href="http://example.com/no"  title="Its useless!">No!</a>

rel="license"

This microformat is used to mark the license links on a page. You could specify several licenses on one page.

<p>The content on this site is protected with a
<a href="http://creativecommons.org/licenses/by-nc-sa/3.0/no/deed.en" rel="license">CC by-nc-sa 3.0</a> license if it isn't cited.
</p>

rel="tag"

You can add the [code]]czo5OlwicmVsPVwidGFnXCJcIjt7WyYqJl19[[/code] attribute to a hyperlink. This indicates that the destination of that hyperlink is an author-designed "tag" (or keyword/subject) for the current page. You could add several tag links to one page. If you use wordpress the [code]]czoxNTpcIndwX3RhZ19jbG91ZCgpO1wiO3tbJiomXX0=[[/code] function add the tag attribute automatically.

<a style="font-size: 10.8pt;" rel="tag" title="3 topics" class="tag-link-96" href="http://blog.nordahl.me/tag/css3/">css3</a>

There is are a couple more minor microformats on the microformat.org website. The one mentioned in this post is the most used microformats. Twitter is one of the major sites who have taken advantage of both XFN and hCard.

Regular black shadow

text-shadow:
1px /* X-coordinate of the text shadow - px/em */
1px /* Y-coordinate of the text shadow - px/em */
4px  /* The blur radius of the text shadow - px/em */
black; /* Color of the text shadow - #/rgb/rgba/color name */

Lets create some different effects.

White highlight

This efffect is a little bit trendy at the moment. I use it in the menu on this site.

text-shadow: 0 1px 0 white;

Multiple shadows – 3D effect

text-shadow: 0 -1px 0 white, 0 1px 0 black;

Fiery Effect

text-shadow: 0 0 2px #aaa, 2px 2px 4px #ff3, 4px 12px 6px #fd3, 8px 15px 11px #f80, 8px 18px 18px #f20;

It is pretty simple. If you create something beautiful please leave a link in the comments.

Compatibility

• IE ≤ 8 no
• Firefox 3.1+
• Safari 3.0+
• Chrome 2+
• Opera 9.62+
• Konqueror 3.5.7+

Linear gradient markup

background: -webkit-gradient(
linear, /* Type of gradient */
0 0, /* Left-, top- position */
0% 100%, /* Left-, top- position */
from(rgb(0,0,255)), /* Starting color */
color-stop(0.7, orange), /* specifies the location of a gradient stop and the color it has */
 to(red)); /* end color */

Radial gradient markup

background: -webkit-gradient(
radial, /* Type of gradient */
150 80, /* center location of the center of the circle */
10, /* Size of the center of the circle */
120 80, /* center location of the outside of the circle */
130, /* Size of the center of the circle */
from(rgb(255,255,255)), /* Color to the center of the gradient */
color-stop(0.5, orange), /* specifies the location of a gradient stop and the color it has -> I dont use it in my header. */
to(rgba(255,255,255, 0))); /* the end color */

As you can see in the header I don`t use the specified color-stop.

Some notes

• Location can be specified with a number and %
• Color can be specified with color name, hex, rgb and rgba

So whats the cool things you can do with this?

Button with highlight and a hover effect.

.bevelandemboss{
width: 100px;
background:
-webkit-gradient(linear, 0 0, 0 100%, from(rgba(0,255,0,0.3)), to(rgba(0,255,0,1))),
-webkit-gradient(radial, 70 70, 10, 70 70, 80, from(rgba(255, 255, 255,0)), color-stop(0.8, rgba(255, 255, 255,4)), to(rgba(50, 255, 50, 0.7)));
-webkit-border-radius:10px;
color: #333;
font-size: 1.5em;
text-align: center;
text-shadow: 0 1px 0 white;
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.6);
}
.bevelandemboss:hover{
background:
-webkit-gradient(linear, 0 0, 0 100%, from(rgb(0,255,0)), color-stop(0.5, rgba(0,255,0,0.5)), to(green)),
-webkit-gradient(radial, 70 70, 10, 70 70, 80, from(rgba(255, 255, 255,0)), color-stop(0.8, rgba(255, 255, 255,4)), to(rgba(100, 255, 100, 0)));
cursor: pointer;
-webkit-box-shadow: 0 4px 4px rgba(0,0,0,0.4);
}