Reflection Design

8Apr/090

CSS Naked Day – Showing of my

As previous years Reflection Design strips down in honor of CSS Naked day :p

What happened to the design?

To know more about why styles are disabled on this website visit the

Annual CSS Naked Day
website for more information.

22Dec/080

Rounded Corners Part 2 – No images

For this 'tutorial' i decided to simply link to a nifty page with instruction on creating a box with rounded corners without using images.

But how then ? Simply by using CSS and javascript. I remember i used this method on my simple website back in the dawn of time and it worked wonders. Since then the method from this site has been redone not once, but twice!

So head on over to Nifty Corners Cube by Alessandro Fulciniti and find a new method to produce those lovely rounded corners.

20Dec/080

Rounded Corners – Solution 1

Rounded corners on websites and in webdesign are fairly popular. I think that the move from traditional square and technical design to a more organic design is part of the popular trend now a days. A device (or website) that breaks the expected pattern forces us to make new associations with the device. iPods are a great example i think were curved surfaces and smooth design is important but somehow appeals more to most people.

Regardless of the reason of rounded corners and curves, they are popular but can be a pain to make. Though it has gotten increasingly easier to create and the next CSS3 even provides support for easily creating rounded corners 🙂

Here is method number 1 for making rounded corners, and in the following posts i will be providing several other ways of making this effect.

Making corners in Photoshop

First off we need to make the four corners in a graphics editor such as Photoshop. Which editor you use is of no consequence, but the end result should be 4 images, one for each corner.

First create a new image about 50 x 50 pixels. Size depends on the curve you want. 1
Then make a circle selection on the whole image and fill with your foreground color. 2
Using the 'guides' in photoshop slice the image into 4 seperate corners. 3
Finally save each corner to its own file. ltoprtop
lbottomrbottom

Note that you can create the corners in several ways and this is just a simple way to do it. How you get your corner graphics does not affect the rest of the tutorial.

Now that we have our corner graphics we can create a simple html table that includes the graphics and places them were we need it 🙂

HTML Template with rounded corner graphics

What we need here is a simple 3 x 3 table, with corner graphics in each corner cell, and leaving the middle cell for content. We can also insert a title for the rounded corner box in the first row, second cell (between the corners).

Here is sample html that does exactly this:

<html>
    <head>
        <title>Rounded Corners Solution 1</title>
    </head>
    <body bgcolor="#47444f">
        <table width="200" border="0" cellspacing="0" cellpadding="0" bgcolor="#6a6af2">
            <tr>
                <td width="25"><img src="ltop.jpg" width="25" height="25"></td>
                <td><!-- Insert optional headline here --></td>
                <td width="25"><img src="rtop.jpg" width="25" height="25"></td>
            </tr>
            <tr>
                <td></td>
                <td>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.
                Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.
                Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
                </td>
                <td></td>
            </tr>
            <tr>
                <td width="25"><img src="lbottom.jpg" width="25" height="25"></td>
                <td></td>
                <td width="25"><img src="rbottom.jpg" width="25" height="25"></td>
            </tr>
        </table>
    </body>
</html>

Rendered result looks like this:

final

Example files to download:

[download#11#image]