Posts Tagged ‘IE’

CSS PIE: CSS3 styles for IE – easy to use and awesome

Tuesday, August 3rd, 2010
CSS PIE: CSS3 styles for IE – easy to use and awesome

Flash back to…

A little while back I wrote an article about getting border-radius working in IE. Well, if you haven’t been keeping up in the blogging world, I came across CSS PIE. It basically does the same thing, only more. If you use things like box-shadow, linear-gradients, AND border-radius, then this is the version you will want to use. Basically the same call in the css file:

.myClass {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 2px 2px 5px #000000;
-webkit-box-shadow: 2px 2px 5px #000000;
box-shadow: 2px 2px 5px #000000;
behavior: url(/PIE.htc);
}

(more…)

Tags: ,
Posted in CSS | No Comments »

Getting border-radius to work in IE

Tuesday, July 27th, 2010
Getting border-radius to work in IE

Border-radius on IE? That is just crazy!

It’s funny how many things from my job come up as posts. Well, I guess not funny, because I end up working on things that I am not familiar with and have to fix. Which is the case tonight. I’m not sure if you have read any articles, but there are plenty, about getting the CSS3 property border-radius to work in IE. It is actually rather easy, so let’s get to it, and I’ll show you how!
Actually, I’ll tell you how. And then I’ll tell you some of the troubles I ran into.

Wait, that’s it?

So getting your rounded corners is pretty damn easy. There are three things you have to do:

1) Go here and download the htc file.
2) Place the downloaded file in your images folder
3) In your CSS file, on the style that you want the rounded corners you add something like this:

(more…)

Tags: ,
Posted in CSS, Web Development | 2 Comments »

IE PNG problem when used with jQuery animate()

Friday, July 2nd, 2010

Before I go into what I want to talk about tonight, I need to first toot my own horn a little. I received an email from one of the editors over at onextrapixel.com, inviting me to be a guest writer. Now who knows what will happen with that, but I am extremely excited and honored that they would ask me. I put a lot of work into The Web Machine, so I am just a little bit proud that they would ask me. I am nervous, but in a good way. Here, I can write how I want because its my blog. There, I just hope I don’t embarrass myself. Wish me luck, and I’ll keep you informed of what happens. Seriously, thanks to onextrapixel.com for asking. You made this blogger/web developer very happy just by doing so.

Now…FORWARD! Onto the meat of the post! I should warn you though, that it is partly a story too.

If you have been paying attention here, and reading my posts, you will notice I implemented an animation on my logo using jQuery. I’m quite proud that I got this to work with so little code. Or, at least that was what I thought. The main goal was to fade in the cogs one at a time in sequential order while moving them a certain distance to the left. Just for a refresher, here is the code again:

var cogs = $('#cog1, #cog2, #cog3, #cog4, #cog5').css({'opacity' : 0});
	i=0;
	leftAmount = 0;
 
	function cogMovement () {
		$(cogs[i++]).animate({
				'left': 63 * leftAmount++,
				'opacity': 1,
				'filter': ''
			}, 800, arguments.callee);
 
	};
	cogMovement();

(more…)

Tags: ,
Posted in Javascript, Web Development | 10 Comments »