Web Style Press, Best Practices from all the Web, Build Better Websites » js http://www.webstylepress.com Web VS Style Mon, 26 Dec 2011 10:35:53 +0000 en hourly 1 http://wordpress.org/?v=3.3 Use Any Font in Webpages As Text http://www.webstylepress.com/use-any-font-in-webpages-as-text/ http://www.webstylepress.com/use-any-font-in-webpages-as-text/#comments Fri, 23 Jan 2009 10:06:43 +0000 Hiroshi http://www.webstylepress.com/?p=481 Use Any Font in Webpages As Text is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> 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

Facelift
Novemberborn
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/

Use Any Font in Webpages As Text is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/use-any-font-in-webpages-as-text/feed/ 0 Change Image Opacity Easily Using CSS or JS http://www.webstylepress.com/change-image-opacity-easily-using-css-js/ http://www.webstylepress.com/change-image-opacity-easily-using-css-js/#comments Fri, 23 Jan 2009 09:14:06 +0000 Hiroshi http://www.webstylepress.com/?p=484 Change Image Opacity Easily Using CSS or JS is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> 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)">

Change Image Opacity Easily Using CSS or JS is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/change-image-opacity-easily-using-css-js/feed/ 2