Posts Tagged msie

CSS Gradient Background – Cross Browser!

You read that right. This works in:

  • Firefox >=3.6
  • MSIE >=5.5 (!)
  • Safari >=4
  • Chrome

Oh Em Gee, I’ve got a CSS-applied Gradient.

How neat is this?

I mean really, this is super cool.

And it degrades gracefully in older browsers and Opera.

My boss Mike passed this little CSS gem to me, and now dear reader I pass it to you. It was orignally developed by FakeDarren, who posted a great little CSS button example. I find it useful for those times when designers get all fancy with gradiented backgrounds.

I’ve condensed Darren’s CSS down to these four lines plus comments, which will give you the lovely Green-to-Black CSS gradient background you can see above.

  .gradientV{
/* thanks to http://blog.fakedarren.com/2010/01/cross-browser-css-gradients/ */
/* and http://www.puremango.co.uk/2010/04/css-gradient/ */
    /* fallback (Opera) */
    background: #008800;
    /* Mozilla: */
    background: -moz-linear-gradient(top, #00FF00, #000000);
    /* Chrome, Safari:*/
    background: -webkit-gradient(linear,
                left top, left bottom, from(#00FF00), to(#000000));
    /* MSIE */
    filter: progid:DXImageTransform.Microsoft.Gradient(
                StartColorStr='#00FF00', EndColorStr='#000000', GradientType=0);
  }

And as you may have guessed by the ‘V’ in the class name, you can also do horizontal gradients – here are some more examples for left-right gradients, and we see what happens when we apply animations to a gradiented DIV.
Read the rest of this entry »

, , , , , , ,

55 Comments

Super Useful Web Dev Tools

OMG, it’s been a whole month since my last update.

I have draft posts about all kinds of Good Stuffâ„¢, but none are quite publishable yet. So today I’m just going to point you at a few great resources I use all the time while doing my web development magic:

Read the rest of this entry »

, , , , , , ,

5 Comments

Firefox/IE Bookmarklets / Favelets

A few javascript bookmarklets I’ve written which will enhance your browser; eg enable right click, edit cookie, hide/show images etc. Neat little browser hacks / tweaks!

They work with both firefox and MSIE. Read the rest of this entry »

, ,

No Comments