Theme Spectrum Launch

I am so glad to finally be launching Theme Spectrum. Here you will find clean premium WordPress themes for artists and designers. These themes have many features and options to give administrators lots of control of their web content.

Read more about it here: http://jefferyrainey.com/theme-spectrum/

Or, checkout the site and buy a theme or two: http://themespectrum.com.

IE Now Behaves Properly: IE7-js

So here is a little gem that I wish I had found before now, called IE7-js.  IE7-js is a JavaScript library has been written to make Microsoft Internet Explorer (IE5, IE6, IE7 and IE8) behave like a standards compliant browser. 😀

It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.

I am just getting my feet wet with this and currently working with it on a new project.  I will post an update on how the experience goes.  Thanks to Craig Quillen for showing this to me.

CSS 3 Border Radius

Border-radius is one of my new favorite additions to CSS 3 and it is already supported in some browsers. Border-radius allows designers to apply radius corners on elements on the page.  There are a few drawbacks to this approach.

  • Users browsing with IE8 and below and a handful of other browsers (Roughly 50% of your audience), will not see the intended effect.  These people will see the content, just without the rounded corners.
  • The pixels on the corners do not render out as clean as I would like them, so it may be a good idea to keep any border colors closer in value to the background color.

So, with that in mind I’ll move on.

Example 1:

This is an example of a div using border-radius.

CSS:
-moz-border-radius: 20px; -webkit-border-radius: 20px; border: 1px solid #ccc; padding: 15px;

Example 2:

Maybe we can give it some color and depth.

CSS:
-moz-border-radius: 20px; -webkit-border-radius: 20px; border: 2px solid #5c6528; border-top: 1px solid #8b983c; border-left: 1px solid #8b983c; background-color: #c7db4f; padding: 15px;

Example 3:

Maybe the corners need to be different sizes. I used shorthand below where the sizes start at the top left and work around clockwise. This could also be done like this:
-moz-border-radius-topleft:20px; -webkit-border-top-left-radius: 20px
-moz-border-radius-topright:20px; -webkit-border-top-right-radius: 20px
etc.

CSS:
-moz-border-radius: 20px 20px 40px 40px; -webkit-border-radius: 20px 20px 40px 40px; border: 2px solid #5c6528; border-top: 1px solid #8b983c; border-left: 1px solid #8b983c; background-color: #c7db4f; padding: 20px 20px 40px 20px;

So anyway, I was curious about this and thought what I found might be useful to others.