Useful Feature of CSS3 – @font-face property

  In this post I am going to show you how to use custom browser support dynamic font in the website. Here we Use Truetype and OpenType to display the fonts you want to display on your Web pages. We can acheive this by using font-face property of the css3.

 Below is the syntax for the css3 @font-face property:

@font-face {
font-family: fontname;
src: url(“fontname.eot“); /* EOT file for IE */
}
@font-face {
font-family: fontname;
src: url(“fontname.ttf“); /* TTF file for CSS3 browsers */
src: local(“fontname “), url( fontname.ttf ) format(“truetype“); /* non-IE */

}

Use:
body {
font-family: fontname, Verdana, Arial, sans-serif;
}

@font-face will allow the browser to download a font for rendering the page; a link is given to either a remote site or a folder on the local site which the browser will access, download, install and render, so the site can be viewed in the way the designer desired.

Using Microsoft’s free WEFT tool (or this easy Online TTF->EOT Converter), one can create a Microsoft proprietary OpenType font file (having an EOT extension). Upload both the EOT and TTF files to your server. Using a single @font-face selector, load the Embedded OpenType font (EOT) for IE6, IE7 and IE8 first then the TrueType Font (TTF) for FireFox 3.5+, Safari (Win & Mac versions) & Opera v10+. BOOM …

Create rounded corners with CSS!

W3C has offered some new options for borders in CSS3, of which one is border-radius. Both Mozila/Firefox and Safari 3 have implemented this function, which allows you to create round corners on box-items.

For eg.

<div style=” background-color: #09F; -moz-border-radius: 15px; -webkit-border-radius: 5px; border: 1px solid #000; padding: 10px; height:120px; color:#fff; font-size:19px; text-align:center;” ></div>

New features CSS3’s – Box-shadow

The CSS3 has many features. Box-shadow is the new feature of the backgrounds and borders module which works in Firefox 3.1(Alpha)and Safari3+.

The property takes 3 lengths and a color as it’s attributes, the lengths are:

• the horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left

  of the box;

• the vertical offset, a negative one means the box-shadow will be on top of the box, a positive one means the shadow will be below the

  box;

• the blur radius, if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.

HTML Code is as follows:

<p id=”box-shadow”>Welcome to Web Designer Harshal Sawant’ Blog. Enjoy web design with me.</p>

CSS class is as follows:

#box-shadow {
margin: 10px 0;
box-shadow: 10px 10px 0px #333;
-o-box-shadow: 10px 10px 0px #333;
-icab-box-shadow: 10px 10px 0px #333;
-khtml-box-shadow: 10px 10px 0px #333;
-moz-box-shadow: 10px 10px 0px #333;
-webkit-box-shadow: 10px 10px 0px #333;
padding: 5px 5px 5px 15px;
background-color: #eee;
width: 90%;
border-radius: 5px;
-o-border-radius: 5px;
-icab-border-radius: 5px;
-khtml-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

Use -moz- and -webkit- prefix for box-shodow to support cross browsers. For Opera -o- added In the above code, -moz is for Firefox and -webkit- is for Safari and Chrome also -icab- and -khtml- are the render engine prefixes use for cross browsers.