Tuesday, June 28, 2011

CSS image sprite

A common problem has been found for web designer is the rounded corner buttons,div etc.Usually we use images but now we can simply create rounded corner with "border-radius:5px;" it create rounded corner with 5px radius.if we are talking about all browsers ,CSS3 property will work on higher versions of IE9 and above. And another issue is when a page is loading you can see images are load one by one.solve these issues by using image sprites.
so create an image shown as below:


Step 1: create style for the button






.Contact_Sendbtn
{
width:97px;
height:27px;
background:#3399FF;
border-radius:5px;
background:url(Sendbtn.png)\9; //specific for IE//
line-height:28px;
color:#fff;
text-align:right;
curser:pointer;
text-shadow:#999;
margin-right:5px;
font-family:Arial;
font-size:13px;
font-weight:bold;
}
.Contact_Sendbtn:hover
{
background:#6DCA44;
border-radius:5px;
background:url(Sendbtn.png)\9;
background-position:0px -29px;
}
.Contact_Sendbtn span{ padding-right:5px; }

Step 2:

Add the class on your HTML

Try and enjoy :)


Monday, June 27, 2011

Custom font CSS for all Browsers

Hello readers, Its very important to see your websites in all browser similar.but some properties cant work common in all.well our design should be attractive to catch the eyes.so we can use uncommon fonts to look well on ur websites.
commonly we use ttf file for this.when you insert HTML module in your Dotnet Nuke web page,it is very important to see in Interner expolrer too.because the views of 7,8 and 9 are quite different.This can be useful for normal html websites too.you can see a good result in Firefox and Chrome.But in 'ie' it wouldn't show the result.so you neet the 'eot' file and svg file for the same font.you can convert the 'ttf' file to the corresponding by online converting tools.
so i tried some hack to display your custom font in your website.
Well its work and i think very good options for your designing.

first of all i downloaded ttf file of "Haettenschweiler" which i am going to use.
then,add in css code.
@font-face {
font-family:'MyText';
src: url('yourpath/font/Haettenschweiler.eot');
src: url('yourpath/font/Haettenschweiler.eot?#iefix') format('embedded-opentype'),
url('yourpath/font/Haettenschweiler.woff') format('woff'),
url('yourpath/font/Haettenschweiler.ttf') format('truetype'),
url('yourpath/font/Haettenschweiler.svg#Haettenschweiler') format('svg');
}
here MYText is the name of the font,where you can write any name.
and the next step is to add your css class

for example,
h4
{
.EXT_BrandHome_HTML .BranHome_HTML_TextL h4,.BranHome_HTML_TextM h4
{
font-family:baloobaText;
font-size: 2
text-align:left;
color:#080808;
font-weight:normal;

}
now you can use the tag in your HTML file.
Heya and Welcome
You can see the output.



.....Try and enjoy... :)