Kdn

A new version of fluidgrid are available at the new product site.

You could create 3D text with CSS by adding multple shadows to the text like this:

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

Custom fonts in Internet Explorer have been around for ages with @font-face. As you all know Internet Explorer does bearly follow the last generation web standards. If you have read my previous post about @font-face, you know that the font format Embedded OpenType(.eot) works out of the box in IE.

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.

Continue reading about Microformats…

Text-shadow is used to either get a shadow or an effect on a text element. You can pass multiple shadows to one text element. When you use text-shadow for a effect you may get totaly different resaults depending on the type of font you use. Lets take a look at the markup.

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+

As explained in my portfolio the idea behind this site, was to create a website without using any images for the design. If you are viewing this site with Safari or one of the nightly webkit builds you might notice the gradient in the header. That is what this article is about.
Example page

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);
}