birghtyoursite » css xhtml

nice web font with google font api

admin — Fri, 28 May 2010 11:25:01 +0000

Are you still use flash and images for the art font in your web? if so you should know the magic of Google Font Directory and Google Font API , you can use all the font in the Google Font Directory , also it’s very easy to install.

What’s google font api

Google Font API helps you add Google Font Directory web fonts to any web page.It provide high quality open source fonts,works in most browsers,also as other gooles services it’s very easy to use.

Add google font api to your site

First,you need add the google font css,for instance:

 rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

this import the Tangerine font style,but if you want to use multiple fonts,for example you need add 1 more font Inconsolata,the css link should be

 rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine|Inconsolata">

then you need apply the css style to the element you want

CSS selector {
  font-family: 'Font Name', serif;
}

or use a inline css

 style="font-family: 'Font Name', serif;">Your text>

let’s see a live sample

 rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
/* add this in the header*/
 
  style="font-family: 'Tangerine', serif;font-size:36px">Making the Web font  looks nice!>
/* add this in the body */

result is:

Making the Web font looks nice!

this sentence is ordinary text, so it will not effect the other style (like color,text-shadow….) you add for this sentence .

Complex sample

I think you may love it now,let’s see what’s more the google font api can do?The google font api provide more options for the font style, like italic or bold,here is the rules
"
To request multiple font families, separate the names with a pipe character (|).
the regular version of the requested fonts by default. To request other styles or weights, append a colon (:) to the name of the font, followed by a list of styles or weights separated by commas (,)
"
also for weights, you can alternatively specify a numerical weight; for example

http://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold|Tangerine:700

this means load Cantarell italic font ,Droid+Serif blod font and Tangerine font with font weight 700.
the live sample

 style=" font-size:30px ">Enjoyed it,Happy reading!>
 style="font-family:'Droid Serif';font-size:30px ">Enjoyed it,Happy reading!>

Enjoyed it,Happy reading!

Make IE8 Display in IE7 Compatibility Mode

admin — Tue, 04 May 2010 09:19:43 +0000

Browser compatibility is realy pain for css coders,this is a quickly to fix the the pages have problems IE8 while looks good in IE7,just following line in the tag on the page,

but some one failed while others success,why?

the key of use

The key of use this is add this tag before all the css so the IE8 browser can know h, i need display this page in IE7 Compatibility Mode.

awesome jquery slide menu

admin — Sat, 17 Apr 2010 03:37:09 +0000

Add some lines of javascript codes to your page, you will see it’s magic: It make your normal menu looks more elegant. Have a try , you will see the fascination of animate menu .let’s go…

Online demo

Nothing better than a demo:awesome jquery slide menu

Add to your site

First,download the source file and upload to js ,css , images to your site root folder , and then add following codes between and

    type="text/javascript" src="jquery-latest.pack.js">>
     type="text/javascript" src="slide.js">>  
     href="style.css" rel="stylesheet" type="text/css" />

HTML codes

  id="menu" class="menu">
	 >
	 > href="javascript:;">Home>>
	 > href="javascript:;">HTML/CSS>>
	 > href="javascript:;">JavaScript>>
        > href="javascript:;">Resources>>
	> href="javascript:;">Tutorials>>
	> href="javascript:;">About>>
	 >
 >

You can see it’s no difference with your normal menu.So the only thing you need to do is adjust your css file, add extra style to the slide menu .

/** style need add for slide menu **/	
 
		.menu ul li a span { 
			position: absolute;
			left: 0;
			width: 110px;
		}
 
		.menu ul li a span.out {
			top: 0px;
		}
 
		.menu ul li a span.over,
		.menu ul li a span.bg {  
			top: -45px;
		}
 
		/** image background **/
 
		#menu {
			background:url(bg_menu.gif) scroll 0 -1px repeat-x;
			border:1px solid #CCC;
		}
 
		#menu ul li a {
			color: #000;
		}
 
		#menu ul li a span.over {
			color: #FFF;
		}
 
		#menu ul li span.bg { 
			height: 45px;
			background: url(bg_over.gif) center center no-repeat;
		}
 
		/** color background **/
 
		#menu2 {
			background:#45A8DF;
		}
 
		#menu2 ul li a {
			color:#FFF;
		}
 
		#menu2 ul li a span.over {
			background: #A6DD00;
			color:#333;
		}
		#menu2 ul li.nav1 a span.over {
			background: #fea274;
		}
		#menu2 ul li.nav2 a span.over {
			background: #b0bbba;
		}
		#menu2 ul li.nav3 a span.over {
			background: #a3f091;
		}
		#menu2 ul li.nav4 a span.over {
			background: #86dbf9;
		}
		#menu2 ul li.nav5 a span.over {
			background: #e0caf0;
		}
		#menu2 ul li.nav6 a span.over {
			background: #9dace9;
		}

You can Reference the style.css in the download files to adjust your own css.so if you understand css well, it’s easy to create one of yours.Good luck!!

Download

awesome jquery slide menu & source codes
Enjoy it !!!

Reference :http://www.cnblogs.com/wiky/archive/2010/04/15/animated-menu-0415.html

css hacks for chrome firefox ie6 ie7 ie8

admin — Fri, 15 Jan 2010 07:50:40 +0000

When coding cross-browsers css xhtml layout,sometimes we may meet some pain css problem and cost much time . Fortunately, there are some css hacks for us :

/*---google chrome hack---*/
 
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   /*----css codes for google chrome------
   #sboxes li h2 
    {
      font-size:17px;
     padding-left:7px; 
      }
*/
}

sometimes , only ie6 have layout problems ,so i aways use quick ie6 hack,add a "e;_"e;to the css, for instance:

  #content
  {
      padding:10px;
    _padding:5px;/* --- for ie6 css ----  */
  }

those above 2 hack is most used.There are some other css hacks:

css hack for ie7 :

*+html selector { property: value; }

this hack can pass w3c validation!

css for ie6,ie7,ie8

* html selector { property: value; }

this hack also can pass w3c validation!

css hack for only ie8

property: value\0