Posts

Showing posts from August, 2011

Rounded Corner and Shadow Effect no Images

Image
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-radius: 15px; /* Firefox */     -webkit-border-r
1 comment
Read more

Custom Fonts

Image
 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
Post a Comment
Read more