4

CSS 3 Border Radius

Feb 3, 2009 In tool chest

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.

Read More

3

Tweetbacks Installed

Jan 8, 2009 In tool chest

This is pretty cool stuff and could reshape commenting on sites as we know it.  TweetBacks by Dan Zarrella searchs twitter for tweets about your url.  After collecting this data, it displays them on the page, much like comments.  This idea rocks and I can’t wait to see where it goes.

TweetBacks is still very new and in beta.  I like how quickly it runs and how easy it was to get up and going.  However, it is currently setup to run from Dan’s environment and my quick attempt to get it working in mine gave me incomplete results.  I will continue playing with this later.  I would like more control over look and feel as some styles are already defined inline, making it difficult to override them.

Overall TweetBacks is a great tool and like I said I can’t wait to see where this goes.

UPDATE: Dan just took care of the styling issue with a parameter that can be added to remove them.   I don’t feel the need to run in my environment if I have control. AWESOME!

UPDATE 2: I just painlessly switched to the TweetBacks WordPress Plugin just released.  Working great!

Read More