CSS3: border-radius property

Since announced in 2005 the CSS3 border-radius property has come a long way to be supported in many browsers. It's what every web developer and designer have dreamed of - no more using images or multiple div tags to create rounded corners!

This is probably one of the most-used CSS3 properties and it's so easy to implement. Learning  the border-radius property is a breeze. Let's get started with some example code.

Simple Rounded Corners

The code:

.box {
background: #f9f9e0;
padding: 10px;
border: 1px solid #cfcf99;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

The -moz- prefix is for Firefox. The -webkit- prefix is for Safari and Chrome.

The outcome:

This box should have rounded corners for Firefox.

How The border-radius Property Works

First, let's go over the syntax. I used the shorthand property so all corners have the same value. The original properties are:

border-bottom-left-radius
border-bottom-right-radius
border-top-left-radius
border-top-right-radius

The border-radius properties can each accept either one or two values, expressed as a length (px) or a percentage (%) - percentages refer to the corresponding dimensions of the border box.

The border-radius Syntax:

border-radius: [ px | % ] [ px | % ]

The code:

.box {
-moz-border-radius: 10% 10px 10% 10px;
-webkit-border-radius: 10% 10px 10% 10px;
border-radius: 10% 10px 10% 10px;
}

The outcome:

This box should have rounded corners for Firefox.

The Mozilla implementation also behaves slightly differently from the specification when percentages are supplied. You can read more on the Mozilla Developer Center.

If all four values are supplied, these represent the top-left, top-right, bottom-right and bottom-left radii respectively. If bottom-left is omitted it is the same as top-right, if bottom-right is omitted it is the same as top-left, and if only one value is supplied it is used to set all four radii equally.


For more information on the border-radius property visit W3C on CSS Backgrounds and Borders.

Learning about Inbound Marketing

About two weeks ago, I registered for a webinar from Hubspot.com on Marketing in a Recession. Today I finished watching it. (The holidays are keeping me busy.) Yesterday, they had the follow-up video called, How to Combine SEO, Blogging, and Social Media for Results. I'm looking forward to watching that one. But for right now, I'd like to share what I learned about inbound marketing...

I liked the comparisons they made with the Budget vs. Brains. It was very easy to understand. With a budget, you're mostly thinking about the money; how much will get you so far. When you use your brains, you can become more creative with marketing and get more out of it; leads. So, how can you use your brains to do marketing with no money?! Simple, here's a list to start off with:

• TechCrunch
• RSS
• YouTube
• Technorati
• Facebook
• Twitter
• LinkedIn
• Del.icio.us
• slideshare
• itunes
• ebooks
• digg
• flickr
• viddler
• photobucket
• blip.tv
• upcoming.org
• revver
• yelp
• google groups
• podcast.net
• squidoo
• stumbleupon
• reddit
• mixx

Did I leave anything out? :)

And most importantly, when you publish content to these sites listed above, make sure it's QUALITY CONTENT. Give the people something interesting to read, help them out with a problem, and they're (hopefully) buy your product.

I've been doing SEO research all month on how cheaply I can advertise a new site I'm working on. It looks like now I have a lot of work to do!

Also, here's a parody of a music video for inbound marketing to help with motivation: http://blog.hubspot.com/blog/tabid/6307/bid/4437/You-Oughta-Know-Inbound-Marketing.aspx

Thanks to Hubspot.com for an awesome webinar. I can't wait to get time to watch the latest one.

A Few SEO Resources I Use

Search Engine Optimization is a big topic in the web design industry. There are so many SEO tools out on the web, that sometimes it can be overwhelming.

I've put together a small list of some sites for SEO and a book that I use for reference.

First the book, Building Findable Websites: Web Standards, SEO, and beyond by Aarron Walter. This is a good learner's book and a great reference guide. I think the author mentions just about everything a web designer can do to get the most out of search engines. From creating quality content for humans to read (not just for search engines to get a higher position on the results page) to how to make your awesome splash page (which is a big no-no in the SEO community) indexable for search engines. I recommend this book for web designers who are looking for fast information and need a quick fix for any SEO problem.

Now the SEO tools out there on the web. The first one is at http://www.perfect-optimization.com/web-page-analyzer.php. Here is where you insert of keyword or keyword phrase, the url, and you get results that analyze the Title Tag, Meta Tags, Link Texts, HREF Texts, Head Tags, Bold/Strong Tags, Page Size, IMG Alt Tags and Body Content of your website. The tool lets you know of a percentage you should have of your keyword and how well your site scores on the keyword density. It's free and a simple tool to use for keyword analyzing.

The same site also has a Site Link Analyzer at http://www.perfect-optimization.com/site-link-analyzer.php. This tool is also free. It checks for any broken links and how well your site does with indexing. Links include any kind of links as well.

And last but certainly not least, http://www.seomoz.org/. This is probably one of the best online SEO resources today. My favorite article is on Search Engine Ranking Factors. They go deep into detail about almost every word on a website for analyzation. Check it out here, but I warn you, it's a long read (and well worth it): http://www.seomoz.org/article/search-ranking-factors#f3.
Like I said, this is probably the first SEO site I would go to when having major problems. I highly recommend it.

That's all I have for right now on SEO help, just a book and a few bookmarks that I wanted to share.

2009 Southwest Calendar

I decided to publish a calendar of the pictures I took while on vacation in the Southwest earlier this month. Have a look at http://www.lulu.com/content/4520096.

I took it and so should you

A List Apart has their survey up for people who make websites for 2008.