How to Control Font Size in Percentage

font-percentagesTo control fonts in percentage is the easiest method which we can choose while playing with the fluid layouts, or perhaps while working with widgets and web 2.0 elements.

It is recommended while working with layouts that we define a standard font size for html and body. In the beginning there were loose style for fonts. Nobody used to care about styling fonts. Then in the design era of computer age, designers developed and adopted techniques to control different design aspects of websites and usually most popular standard was to choose 11px to 12 px font for HTML. Many years this technique prevailed until web 2.0 arrived and some web architects decides that fonts must be clear and bold. So now designers and developers adopt a technique to display large font sizes. Font size, color, face are also a part of the design. Here is how we can control font by percentage as a unit for font size.

Read More..

Standard and Non-Standard Links

Links are the Web’s number one interaction element. Violating common expectations for how links work is a sure way to confuse and delay users, and might prevent them from being able to use your site. Lets see what Markup Gurus say about links, and when links meet the standard or non-standard criteria. The usability guideline for any type of navigational design is to help users understand three major points:

  • Where they’ve been?
  • Where they are?
  • Where they can go (past, present, and future)?

These three are interrelated: If we consider browsing a site, a journey; then knowing your past and present locations makes it easier to decide where to go next.

Read More..

Images Not Displaying in IE, Displaying in Firefox

Ever experienced a problem when regular image HTML code is displaying images in firefox but not displaying in internet explorer? If you are facing the same problem then consider taking care of following points:

  • Do not name images as ‘banner’. This can cause problems with some antivirus software or browser add-on.
  • validate the html document and css file. You can lose a lot of time trying to fix something when there are errors in your code.
    W3C Validator - HTML
    W3C Validator - CSS
  • Check for valid code - make sure all tags are closed.
    You may have neglected to close an element, or perhaps you meant to “self-close” an element, that is, ending it with “/>” instead of “>” in case of XHTML
  • Check that ’show pictures’ option is enabled in IE.
    Go to tools > Internet Options > Multimedia > Show Pictures

Use Any Font in Webpages As Text

use-any-fonts

Now using javascript we can use any font in web page by using techniques such as Typeface and Facelift Image Replacement (or FLIR) or sIFR. sIFR needs flash while others do not. sIFR is for smoothness look of fonts.

Instead of creating images or using flash just to show your site’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS and get original smooth font look whatever you specify, even if the user machine have not those fonts. This technique is limited yet with limited fonts support and also it is recommended to use it for title of headings of web page. All the font at the web page using this technique can heavy things up at server and page might load very slow. Even then it is cool. Type face is easy, flexible and open source.

Using FLIR to display any font in web page is even easy. Here they have got complete instructions for just that.

I have tried type face method and here is its example to download.

Type Face Example Download

Related Resources
Implementing sIFR for smoothness of fonts in webpages
http://typeface.neocracy.org
http://nettuts.com/javascript-ajax/how-to-use-any-font-you-wish-with-flir/

Change Image Opacity Easily Using CSS or JS

We can simply use CSS alone to reproduce opacity effect that have traditionally been done using scripting. The advantage of looking to CSS instead is obvious - much more lightweight and easier to implement.
We can use this method where we need to use a dim or faint version of image, while when some one places mouse over it, then image comes sharp, clear and bright.

Use the following code in head section of web page.

<style type="text/css">
.opacityit img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);
-moz-opacity: 0.4;
}
.opacityit:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}
</style>

Use the following code in body where the image is located.

<a href="#" class="opacityit"><img border="0" src="email.gif" /></a>

By this method image loads kind of blur in background and in light colors, but when some one places mouse over it. It becomes sharp.

Simple Opacity

We are using JavaScript to change the opacity of an image here. The technique works in both IE4+ and NS6+, and can be used to create some interesting “fading” effects. Here is the simple way to just place an image with opacity.

<img src="image.gif" style="filter:alpha(opacity=50); -moz-opacity:0.5">

In -moz-opacity:0.5 accepted range of values are 0 to 1, where 0 would make the image disappear and in alpha(opacity=50) range is between 1 to 100. We have combined the code both for IE and Mozilla for code compatibility.

We can also alter the opacity of image using javascript.

Head section code

<script>
function alteropacity(imageobject, opacity){
 if (navigator.appName.indexOf("Netscape")!=-1
  &&parseInt(navigator.appVersion)>=5)
    imageobject.style.MozOpacity=opacity/100
 else if (navigator.appName.indexOf("Microsoft")!= -1 
  &&parseInt(navigator.appVersion)>=4)
    imageobject.filters.alpha.opacity=opacity
}
</script>

Body Section Code

<img src="image.gif" style="filter:alpha(opacity=50); -moz-opacity:0.5" 
onMouseover="alteropacity(this, 100)" onMouseout="alteropacity(this, 30)">

Chatbox For Websites and Blogs

To listen to customers or your online visitors there have been many solutions but this one is very simple, easy and easy. Shoutbox a.k.a tagboard/chatbox, is an easy to use messaging system that allows you to interact with others instantly while you are at website. A shoutbox can be placed on your blog or website. Your visitors can then easily post comments in it. They can also use the shoutbox to chat with you and other visitors at the same time. The free shoutbox has both IP and URL banning features also! Everything is customizable. One minute setup.

Shout Mix Website
http://www.shoutmix.com/main/