How to

Posts

Showing posts from August, 2011

Rounded Corner and Shadow Effect no Images

August 01, 2011

Before CSS3 to achieve rounded corner effect small images are used. But CSS3 introduce a new effect to achieve this effect without images and also a shadow effect. Below is the code. The below code is working for all browsers except IE. To run this in IE the page should need to be hosted on server or using XAMPP or any other web server on local computer. Also have to include file ie-css3.htc for IE only. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> #roundedcorner { width:300px; height:200px; margin:0 auto; margin-top:20px; border: solid 3px; -moz-border...

Custom Fonts

August 01, 2011

A new feature of CSS3 is custom fonts. You have seen that some of the sites have very stylish fonts in headings. This feature is imperviously achieved by Photoshop by creating an image of it or by using some font files. In case of using font files there is one problem and that is if you are using font files the you have to give an external link to user to first download and install the font to his computer. But now CSS3 introduce a new feature to embed fonts to your site. Below is the simple code showing an example of it. If the font file is not available in the clients computer then it is automatically downloaded to the clients computer. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Custom F...