TechTrouts.com » css http://techtrouts.com Doin' the dev dance o/ Thu, 23 Jul 2009 10:42:09 +0000 en hourly 1 http://wordpress.org/?v=3.0 Mootools: smooth font resize onmouseover (mouseenter) “bump” http://techtrouts.com/mootools-smooth-font-resize-onmouseover-mouseenter-bump/ http://techtrouts.com/mootools-smooth-font-resize-onmouseover-mouseenter-bump/#comments Tue, 24 Jun 2008 15:36:04 +0000 Carlos Ouro http://techtrouts.com/mootools-smooth-font-resize-onmouseover-mouseenter-bump/ Hello,

this is the smooth font resize for css class “.bump” effect.
Just put class=”bump” on the items you want and use the following javascript somewhere on your page.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

window.addEvent('domready',function() { 
 
	//scaling values
	var scale_px=6;
	var scale_em=0.3;
 
	var bumps=$$('.bump');
	bumps.each(function(bump, i){
		var init_size=bump.getStyle('font-size');
 
		var units=init_size.match(/em/)!=null ? 'em' : init_size.match(/px/)!=null ? 'px' : false;
		if(units===false) return false;
 
		var size_up=(init_size.toFloat()+(units=='em' ? scale_em : scale_px))+units;
		var fx=new Fx.Morph(bump, {duration:90, wait:false, transition:Fx.Transitions.Back.easeOut});
 
		bump.addEvent("mouseenter", function(event) {
			fx.start({
				'font-size':size_up
			});
		});
		bump.addEvent("mouseleave", function(event) {
			fx.start({
				'font-size':init_size
			});
		});
	});
});

Note: In order for this to work on IE7 you need to have some font-size defined in your css for every “.bump” on your page. Otherwise font-size will return “100%”, and it get’s impossible to know how to resize – i’ve tried it – damn IE :/

You can check it working here, on the links under “We Provide:”.
Tanks :)

]]> http://techtrouts.com/mootools-smooth-font-resize-onmouseover-mouseenter-bump/feed/ 0 Is there a limit to the css z-index property? http://techtrouts.com/is-there-a-limit-to-the-css-z-index-property/ http://techtrouts.com/is-there-a-limit-to-the-css-z-index-property/#comments Wed, 23 Apr 2008 13:45:11 +0000 Carlos Ouro http://techtrouts.com/is-there-a-limit-to-the-css-z-index-property/ Theorically the z-index property should be unlimited, or at least within an int type range, depending on OS and browser.
However, to avoid browser bugs you should limit your z-index values to +/- 32767 .

It should be enough to handle just about anything.

]]> http://techtrouts.com/is-there-a-limit-to-the-css-z-index-property/feed/ 0