.alpha { opacity: 0.7; filter: alpha(strength=70) }

Preview:

You will notice crippled text in IE. To avoid this, simply apply a solid background to the element with opacity:

.alpha { background: white; opacity: 0.7; filter: alpha(strength=70) }

Preview:

This page can be found by searching for:

input:focus { outline: none }

That will make all inputs lose the yellow glow on focus

This page can be found by searching for:

@font-face { <font-description> }

Now, let’s see what the <font-description> is. Basically it’s a font-family descriptor followed by the src descriptor, so the next rule should be valid:

@font-face {
	font-family: 'HelveticaRegular';
	src: url('helvetica.ttf');
}

Additionally, we can specify a font-weight and font-style of this font-family. Like this:

@font-face {
	font-family: 'HelveticaRegular';
	src: url('helvetica.ttf') format('truetype');
	font-style: normal;
	font-weight: normal;
}
 
.myclass {
	font-family: 'HelveticaRegular';
}

Now, all elements with font-family HelveticaRegular will be non-italic and normal weight by default. Now, let’s see what the browsers say…

Internet Explorer

Yes yes, him again. But, it’s no that bad as you might think. It does support the @font-face for 10 years already, but with one small difference: it doesn’t support TrueType fonts (ttf) but it supports Embedded OpenType (eot).

So, what we need is to convert TTF to EOT and put it in css like this:

@font-face {
	font-family: 'HelveticaRegular';
	src: url('helvetica.eot');
	src: url('helvetica.ttf') format('truetype');
}

Gecko and WebKit

These guys support TrueType and OpenType fonts (TTF and OTF, not EOT), and Gecko since 3.6 supports the WOFF format (Web Open Font Format). So basically, all you need is the same TrueType font.

Opera

Since 10.0 Opera supports TrueType and OpenType fonts too. The earlier 9.0+ versions supported SVG format, which is still supported by the newest too.

Mobile?

Luckily, iPhones and iPads support one format too – the SVG.

So we have 4 formats here: TTF, EOT, OTF and WOFF. Let’s find out how to get those.

Getting all that bundle..

First, let’s get the font we liked. I recommend going to fontex.org or dafont.com

Another great service is FontSquirrel’s font-face generator. Simply upload a font and get a ready bundle for all the browsers. You’ll get a pack with ready CSS, all the formats generated and a demo page

<style>
@font-face {
	font-family: 'newfacebookRegular';
	src: url('/projects/fonts/opnew_facebok-webfont.eot');
	src: url('/projects/fonts/new_facebok-webfont.woff') format('woff'), url('/projects/fonts/new_facebok-webfont.ttf') format('truetype'), url('/projects/fonts/new_facebok-webfont.svg#webfontB4W84jfk') format('svg');
	font-weight: normal;
	font-style: normal;
}
.newfacebookRegular {
	font-family: 'newfacebookRegular';
}
</style>
<span class='newfacebookRegular'>Now let's check if you see the custom font here</span>

Now let’s check if you see the custom font here

This page can be found by searching for:

This is how it looks in your browser:
Confucius says: Everything has its beauty but not everyone sees it.

Nothing special, so, let’s add a style for all browsers:

q:before, q:after { content: "" }

Now, all the Q’uotes display the same in all browsers (IE and normal browsers). So, to add quotes, we’ll add them ourselves and stylize the quote as we wish. I’m reminding that there are special html entities for curled quotes: accronym to Left Double Quote – &ldquo; and Right Double Quote – &rdquo;

Confucius says: &ldquo;<q>Everything has its beauty but not everyone sees it.</q>&rdquo;

Next, let’s italize the quote:

q { font-style: italic }

Confucius says: “Everything has its beauty but not everyone sees it.”

Good? Good.

<style type='text/css'>
.box-shadow {
	margin: 10px auto;
	width: 300px;
	padding: 10px;
	font-family: Arial;
	text-align: center;
	border: 1px solid #5bc5c6;
	background: #e8ffff;
	box-shadow: 0 0 8px #006a6b;
	-webkit-box-shadow: 0 0 8px #006a6b;
	-moz-box-shadow: 0 0 8px #006a6b;
	-khtml-box-shadow: 0 0 8px #006a6b;
	-o-box-shadow: 0 0 8px #006a6b;
	-icab-box-shadow: 0 0 8px #006a6b;
}
</style>
<div class='box-shadow'>
<h2>CSS3 box-shadow</h2>
<p>Most modern browsers will display the shadow here nicely. If not, it's time to update your browser</p>
</div>

Looking at the following box, you’ll notice what the arguments of box-shadow mean:

First argument is the left to right offset of the shadow, second argument is the top to bottom offset of the shadow, third one is the shadow width and the last one is the color of the shadow.

Don’t forget to put all the box-shadow variants to be sure all the users can see the shadow.

This page can be found by searching for: