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.

I took it and so should you

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

What I like about Firefox 3

On June 17 of this year, Mozilla released the launch of Firefox 3. I've been using it for about a week now and I'd like to share what I like about it. (And maybe what I don't like about it, but it's kind of hard not to like Firefox.)

What I like about it:
I'll start with the address bar. A lot of browsers today have the feature that when you type in what you're searching into the address bar (fire, for example), hit enter and you get a page of the search results by your chosen search engine. But what if you type "fire" and you could see the matching search result pages being populated as a list as you type? That's the new feature in Firefox 3.


As described from Edward Lee:

"Firefox will remember the text you typed and the page you selected, so next time when you give a similar input, Firefox will give a higher rank to those pages. It even matches partial inputs, so I can even type just "p" from planet, and Firefox knows to put that above other pages that just happen to also match "p"..."

Here's an overview of what you can do with the new address bar in Firefox 3 (from Firefox 3 Revealed):

• Search your history and bookmarks for any combination of words while you're typing
• Restrict your searches to bookmarks, history or tagged pages only by prep ending your search terms with "*", "^" or "+" respectively.
• Match whole phrases by enclosing words within double quotes
• Provides search results ordered by frequency and recency.

Also, it is rumored that the address bar will replace the search bar in later versions of Firefox :)

Next is the Places feature, which you can organize your History and Bookmarks. I don't have a need for this, nor have tried it out, but it looks like it has a boatload of options. Instead I use Bookmarks in the Google Toolbar.

The Download Manager has been improved in Firefox 3. It now lets you pause downloads to resume later, especially large downloads. And they will stay paused when you close Firefox and restart it back up.

Well here is something I don't like about Firefox 3; that you still have to restart Firefox when you install an add-on (extensions, themes, plugins). According to Firefox 3 Revealed from sitepoint.com,

"This feature was planned but didn't make the cut because it involved core changes that were too invasive."

Oh well. Maybe next time.

Okay. Now for my favorite part: CSS Improvements.
Firefox 3 now supports more CSS2.1 and it seems a lot of bugs have been fixed. Such as support for negative z-index values and inline-block. (IE7 still doesn't support inline-block.)

These are just a few things I wanted to point out with the new Firefox 3. Of course, there are tons of other stuff like, HTML 5, APNG (animated portable network graphic) , Microformats, and SVG (scalable vector graphic) support. Be sure to get a copy of Firefox 3 Revealed from sitepoint.com.

Creating an Outlined, Rounded-Corner Box Using CSS

On a Web project I'm currently working on, I created rounded-corner boxes with outlines. At first I couldn't find any tutorials on this to get an idea of how to start. I played with the idea for a couple of hours and came up with what I have pictured to the left.

This is a fixed-width box, so the height is elastic. I started measuring the width I needed. In this sample the width is 250 pixels. From there I created two images in Photoshop for the top and bottom of the box and saving them as pngs to keep the transparency.

After that, I constructed my HTML. I used a table to contain the box. The table has 3 rows and 1 column like this:

<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>

Then I created my styles for the top and bottom of the box and the inside of the box.

.top250x14 { background-image: url(images/250x14Top.png); background-position: top left; background-repeat: no-repeat; width: 250px; height: 14px; }

.bottom250x14 { background-image: url(images/250x14Bottom.png); background-position: top left; background-repeat: no-repeat; width: 250px; height: 14px; }

.boxColors { border-left: 1px solid #cfcf99; border-right: 1px solid #cfcf99; background-color: #fff; }

.sidebarBox { width: 247px; padding: 0; }

The classes top250x14 and bottom250x14 are for the top and bottom images of the box. The class boxColors creates the left and right borders of the box and gives the box a white background color. The sidebarBox class gives the width for the inside of the box with considering the left and right border widths. I'm not sure about the one pixel that is left over from the sidebarBox class. It needed one less pixel in order to align with the top and bottom box images correctly.

Now let's put it all together:

<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="top250x14"></td>
</tr>
<tr>
<td>
<div class="boxColors sidebarBox">
<h3>Sample Box</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam pretium turpis sed nisi. Sed condimentum metus eu nibh. Suspendisse vitae tellus sit amet pede placerat malesuada. Ut non libero nec nibh hendrerit pretium. Integer neque. Duis purus risus, scelerisque vitae, dignissim nec, sodales semper, metus.</p>
</div>
</td>
</tr>
<tr>
<td class="bottom250x14"></td>
</tr>
</table>

Download the files used:
outlinedrounded.zip

Veerle's Blog

I can't say enough how much I love Veerle's blog. I've decided to dedicate my first blog post of the month to her.

Almost everyday I visit her blog to read up on what's new and take a look at the archives. Today I was reading a post about a billing software that she wrote about. As I was looking through it, I noticed she had a screenshot of the application. It was a listing for an invoice and she had her rate listed on it. Now I know how much catching up I have to do on my skills so I could make the same! Anyways, the point I want to make is how honest Veerle is. And even though I don't personally know her, her blogs are like mirrors of how I want my future to be. She's a true inspiration to me and to many others as well as I noticed in the dozens of comments she gets on her posts!

Her blog is really helpful for me. I've learned about so many new applications and techniques to use as a freelancer. And this is perfect for someone new in the freelance world. Her designs are very unique also. I don't see where she finds time to even write a post. I barely have time to even comment!

I think it would be really great to meet Veerle someday maybe and get a chance to talk about design. (Maybe even work for her one day...)

Current Design I'm Working On...

I just designed a new layout for the El Patio Motel website. This project is half for fun and the other half for my first freelance work.

The El Patio Motel is located in Key West, Florida and is decorated in art deco style with a lovely garden and roof sun deck.

Here's why their site looks like now: www.elpatiomotel.com.
Here's my design:


I got inspiration from Komodomedia's website. I'm still working out how I want the Rooms and Rates section box to display and I left off the "s" on Room in the design. Oops. I also still want to add a web badge for the Make a Reservation link and maybe some graphic "hanging" down from the top of the page to display a comment area for people to say what they think after staying at the motel.

The first step I took in this project was of course drawing the design out on copy paper with the golden ratio. (I have a template that I can print out to draw up site designs.) I already had the design in my head for about a week, but couldn't find the time to sit down and draw it out. It only took me two days, the weekend in this case, to draw my design out and then go into Photoshop and make the comp.

I still have the content page and a form page to go, then I'll start developing it using XHTML and CSS. This usually takes 3-4 days, about 2-3 hours per day.

Hopefully when the new site is completed, I can sell it to El Patio, if they like it. I would offer them a good deal, because they would be my first real client as a freelancer. If not, I think it makes a great portfolio piece!

Designing/Developing for the iPhone, the Next Big Thing?

I recently came across the August 28th article by Craig Hockenberry entitled "Put Your Content in My Pocket" from ALA. The main focus of the article is on Mobile Safari and how you can "clean" up your current site to render as expected for iPhone users.

Craig goes on explaining all kinds of things to consider when designing or developing a website for the iPhone. For example, the resolution of the iPhone screen is 320px by 480px, text should be at least 40px large (or use percentages or ems for compliant web standards), and using microformats for links to phone numbers. Also he gives you tips on how to style a separate CSS for the iPhone and using any AJAX or JavaScript.

I've only read part one so far; part two is more on design, which I can't wait to read. I think these articles should be read by every web designer and web developer out there. One reason comes from part one of the articles in that Craig states,

"Many of these ideas can be useful and effective with other mobile devices. The processing power of these devices will continue to increase, bringing an end to a "dumbed down" mobile web. The iPhone may be just the beginning of an exciting new chapter in the storied life of HTML."

I personally think this is extremely important for the age of cell phones with Internet service. I'm not going to jump on the buy-an-iPhone-now wagon, but if Apple plans to sell over 10 million device that use the Internet by 2008, I'm sure I'm going to read and study as much information about designing and developing for the iPhone and other cell phones as I can.

Justified Text

What is it about justified text on a web page? I recently designed a web page with lots of text and one of my supervisors asked if I could justify the text so that the ends of each line line up. The main reason I don't use justified text much is because you get rivers in the paragraphs. Rivers are the spaces needed to justify the text and when you have about the same amount of space in each line it looks sort of like a river going through your paragraph.

Oh well, I justified the text so everyone will be happy.

Finding Myself...Again

With all web designers, graphic designers, and artists is it normal to always be looking for yourself? Your style, your trends, your signature? I remember reading something about this in either How to be a Graphic Designer Without Losing Your Soul or somewhere else about how designers can't find their style. This would be difficult since design trends will always change. Plus, if you're a freelancer, you're always having different designs and feels for each client. As a designer you will always have to adapt to what the client wants.

The only thing that could help you keep your style is your own web site. This provides what trends, colors, fonts, styles, etc. that you like. Because you won't be able to incorporate your nice two color contemporary, abstract design from your web site to a client's web site or print project. Unless they actually want that and lucky you!

Practice Makes Perfect

Now, I know I'm not the coding expert I would like to be, but it's not like I'm clueless on what I'm doing so far. I only have 3 solid years experience with CSS and XHTML, and most of that I taught myself!

My feathers got ruffled today at work. I was told not to code for the time being, which is understandable. One side of me takes this personally, as a web designer. The other side sees this as only business, in that the designs need to be completed by Tuesday. I'm trying not to take it personally. Really, I shouldn't, because most of the work is the coding.

But back to my experience... I know I'm just starting out in the real world. And right now, there's SO much I want to learn and do, and I have all these ideas running through my head for site designs. I just don't have the time right now to do anything of this. I mean, I read any books I buy practically the same day.

I will be a CSS and XHTML expert one day, maybe in 4 years. (I was thinking that having 7 years experience in the field is a good, rounded number.)

Include Files

This wasn't the first time I've created a web site from scratch. It was my time first, however, transferring XHTML files to an ASP.NET developer for publishing the site.

The way I go about creating a web site, - let's say a web page in this instance - is designing the comp or mockup in Photoshop. Then when this is approved, I start developing the page in Dreamweaver using XHTML and CSS. When this is approved and tested, it goes live. I'm really big on web standards, such as using XHTML 1.0 Transitional, ALT attributes for images, semantic markup, etc. So I try to stay on top of these things to let everyone view the web page properly with few or no errors. This reminds me that I should redo my own web site...

Anyways, so I develop the page in XHTML and CSS and zip everything together, images also, and send the .zip file to the .NET developer. There's a problem. The developer wants the XHTML file to be broken up into .inc files. What's an .inc file? I ask my husband, whose also an ASP.NET developer with 3 Microsoft certifications in .NET development, what an .inc file is. His answer was, "I can't believe people are still using these! This is old technology! I used to use .inc files, but that was a long time ago." I was shocked.

So, back at work I create these .inc files of the web page, along with the CSS included.

For those of you who don't know what an .inc file is, include file - it's a file, just like .htm or .xml - and it was used to store content information for web pages. A master page is created to pull these inc.files when the information is requested. This makes sense and this is how a master page works, but the content pages should be .aspx files - not .inc files. With .inc files, private information can be exposed. With .aspx files, this information is safely stored. Read more from W3C.

Back at work again, I take the time and cut up my beautiful HTML pages into .inc files as this .NET developer had requested. I even asked about the .inc files and why they were being used. The reply was that the .NET developer wasn't using the .inc files. Then why am I creating them!?! What a waste of time for both of us!

I stopped creating them since the .NET developer wasn't using them. I just sent .zip files with the XHTML, CSS, and images of the web page.