Matt's Web Developer Network

Well it’s almost been a year now since The MMORPG Project was taken offline, but we are EXTREMELY excited to announce that we’ve brought it back!

To tell you the truth, it’s been sitting on a rackmount server that was kindly donated to us by a colleague a little over a year ago now. The server itself was actually refurbished in-house due to some contract and client adjustments the parent company was making.

At any rate, things have been restored back to normal and we’re back with The MMORPG Project!

Note: We have also restored all original links and domain names where our project previously resided. The MMORPG Project now sites on a new server. You may have accessed this site via one of our original links published at one of our sponsor websites. We intend to keep our links the same and continue to offer 100% online social networking and interactive text-based gaming at http://mmorpg.borjawebs.com/. On that note, as it has been a while, you may not remember your password. That’s okay, because we’re fixing to reset and send out everyone’s password for them to come back and pick up where they left off. That’s right, if you receive a “come back” invitation from us, it means you won’t have to start over!

Visit The MMORPG Project

I decided to take a Sunday afternoon off and put together some code for rounded corners in CSS. After looking around for a brief period of time, it appears that there are lots of sites out there featuring everything from CSS to Javascript code that will do exactly what you’ll find done here. I found maybe one tutorial that showed how to create rounded corners with a single image; everyone else had to use four.

However, we’re going to use pure CSS and a single image drawn up in Adobe Photoshop to create the ever popular rounded corner effect. This code is highly portable, browser friendly and is simple enough to modify and bend to suit the needs of any web designer, from beginner to expert.

Semantics: HTML

To begin, let’s take a look at some HTML.

<div class="corners_5x5">
<div class="tl"></div><div class="tr"></div>
<div class="content">
<small>Using 5x5 rounded corners. Good for areas where smaller font sizes are used.</small>

</div>
<div class=”bl”></div><div class=”br”></div>
<div style=”clear: both;”></div>
</div>

Here I’ve created a div container and called it corners_5x5 for the simple fact that I will be using corners that are 5px in radius. You can call it whatever you want, so long as you remember to label it as such everywhere else.

Now, you may be able to figure out looking at the class attributes of the div containers we’ve created inside that we start out by defining the top left and top right containers.

We then create another container to place our content in which we’ll label using class name content.

Lastly, we define our bottom left and bottom right containers and close out the corners_5x5 with the appropriate closing div tag.

Presentation: CSS

You will need two (2) things for the presentation aspect of our rounded corners:

1. A copy of 5x5_corners.png.
2. CSS code shown below that will take the containers we’ve defined in our HTML and create the rounded corner effect.

<style type="text/css">
.corners_5x5 {width: 250px; background: #555; margin: 5px 0;}
.corners_5x5 .content {background: #555; color: #fff; clear: both; padding: 0 5px;}
.corners_5x5 .tl {width: 5px; height: 5px; float: left; background: url(’5x5_corners.png’) top left;}
.corners_5x5 .tr {width: 5px; height: 5px; float: right; background: url(’5x5_corners.png’) top right;}
.corners_5x5 .bl {width: 5px; height: 5px; float: left; background: url(’5x5_corners.png’) bottom left;}
.corners_5x5 .br {width: 5px; height: 5px; float: right; background: url(’5x5_corners.png’) bottom right;}
</style>

The simplest way to understand what is going on here is to treat .corners_5x5 as a selector that will “select” HTML elements using the same class name. In fact, that’s what they’re called – CSS class selectors. There are other types of selectors, but for the scope of this article, we’re only dealing with class selectors (prefixed with a period) for now.

Quickly summarizing this code, it’s main purpose is to set a defined width of the entire rounded corner box itself to 250px wide. You can leave off the width property altogether to allow it to take up 100% of the width of its parent container. Also, we’ve set the background color of the container itself to match the colors of our rounded corner image. We’ve also defined a CSS selector for our .content container as well in similar manner.

The next four lines employ slightly more advanced properties including the float and background properties with multiple values specified inline. We’ll take a moment to explain these.

CSS property: float

In CSS, we use the word float to detach containers from the page itself and float it in a couple directions, either left or right. This causes all sorts of fun things to happen to the surrounding content on the page and your best bet is to simply play with it and find out what happens. I’ve put together an illustration below to help you visualize what takes place when using the CSS float property:

CSS property: background

Next, we set up our background images to use the same image, just position it differently. This part is actually self-explanatory as the image we’re using allows us to take advantage of CSS’ built-in background positioning values (e.g. top left and bottom right as shown).

This should give you a general idea as to how the code works and why it works. The image we’re using is actually one I created in Photoshop that has a 5px radius corner for each corner within a 10×10 image. If you were to divide up the image in equal quarters, it comes out to be precisely what we need in measurement for our rounded corners, not a pixel more, not a pixel less.

Well, I hope this article helped and that you’ll find a use for it somewhere in your next website endeavor. Another great thing about this particular version of CSS rounded corners is that you can easily change up the width and heights (along with the physical image itself) to reflect 10px radius corners rather than just 5px.

For your convenience, here is a copy of 10x10_corners.png used in this example.

July 23, 2010 by Matt Borja - I was looking around just a few minutes to refresh my memory on what the difference was between the double equal sign comparison operator and triple equal sign comparison operator only to end up leaving a couple comments with further clarifications on the topic itself. Here is one of them that I believe sums it up about as beginner and user friendly as it can possibly be:

Always remember (at least in PHP) that the data type of a variable is being set automatically by the type of value you assign it. This could be integer (int), floating point (float), associative array (array), boolean (bool), class object (object) or even a resource, in which case the variable would be of a resource data type (e.g. a simple MySQL query).

Use of the triple equal sign (===) for comparison is most appropriate when data types matter. However, you find yourself rarely using this if you force data types by typecasting input variables (especially user input). For example:

function get_user_profile($user_id) {
$user_id = (int)$user_id;
echo '<p>Retrieving user profile for User ID #', $user_id, '</p>';

// $sql = mysql_query(“SELECT * FROM users WHERE user_id={$user_id} LIMIT 1″) or die(mysql_error());
// and so on…
}

In this particular case, you can see that typecasting is going to force that $user_id to be of integer (int) data type and anything you specify in the accept_input() function will be treated as an integer. Default in most cases it comes out to 0 but there are a lot of fun on-the-fly sanitization tricks you can do like this to cut out the extra if/then statements.