{"id":362,"date":"2008-12-20T16:35:32","date_gmt":"2008-12-20T15:35:32","guid":{"rendered":"http:\/\/reflection-design.dk\/?p=362"},"modified":"2008-12-20T16:35:32","modified_gmt":"2008-12-20T15:35:32","slug":"rounded-corners-solution-1","status":"publish","type":"post","link":"https:\/\/reflection-design.dk\/?p=362","title":{"rendered":"Rounded Corners – Solution 1"},"content":{"rendered":"

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.<\/p>\n

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<\/a> even provides support for easily creating rounded corners \ud83d\ude42<\/p>\n

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.<\/p>\n

Making corners in Photoshop<\/strong><\/p>\n

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.<\/p>\n\n\n\n\n\n\n
First create a new image about 50 x 50 pixels. Size depends on the curve you want.<\/td>\n\"1\"<\/a><\/td>\n<\/tr>\n
Then make a circle selection on the whole image and fill with your foreground color.<\/td>\n\"2\"<\/a><\/td>\n<\/tr>\n
Using the ‘guides’ in photoshop slice the image into 4 seperate corners.<\/td>\n\"3\"<\/a><\/td>\n<\/tr>\n
Finally save each corner to its own file.<\/td>\n\"ltop\"<\/a>\"rtop\"<\/a>
\n<\/a>\"lbottom\"<\/a>\"rbottom\"<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

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.<\/p>\n

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 \ud83d\ude42<\/p>\n

HTML Template with rounded corner graphics<\/strong><\/p>\n

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).<\/p>\n

Here is sample html that does exactly this:<\/p>\n

\n
\n
<<\/span>html<\/span>><\/span><\/pre>\n
    <<\/span>head<\/span>><\/span><\/pre>\n
        <<\/span>title<\/span>><\/span>Rounded Corners Solution 1<\/<\/span>title<\/span>><\/span><\/pre>\n
    <\/<\/span>head<\/span>><\/span><\/pre>\n
    <<\/span>body<\/span> bgcolor<\/span>=\"#47444f\"<\/span>><\/span><\/pre>\n
        <<\/span>table<\/span> width<\/span>=\"200\"<\/span> border<\/span>=\"0\"<\/span> cellspacing<\/span>=\"0\"<\/span> cellpadding<\/span>=\"0\"<\/span> bgcolor<\/span>=\"#6a6af2\"<\/span>><\/span><\/pre>\n
            <<\/span>tr<\/span>><\/span><\/pre>\n
                <<\/span>td<\/span> width<\/span>=\"25\"<\/span>><<\/span>img<\/span> src<\/span>=\"ltop.jpg\"<\/span> width<\/span>=\"25\"<\/span> height<\/span>=\"25\"<\/span>><\/<\/span>td<\/span>><\/span><\/pre>\n
                <<\/span>td<\/span>><!<\/span>--<\/span> Insert<\/span> optional<\/span> headline<\/span> here<\/span> --<\/span>><\/<\/span>td<\/span>><\/span><\/pre>\n
                <<\/span>td<\/span> width<\/span>=\"25\"<\/span>><<\/span>img<\/span> src<\/span>=\"rtop.jpg\"<\/span> width<\/span>=\"25\"<\/span> height<\/span>=\"25\"<\/span>><\/<\/span>td<\/span>><\/span><\/pre>\n
            <\/<\/span>tr<\/span>><\/span><\/pre>\n
            <<\/span>tr<\/span>><\/span><\/pre>\n
                <<\/span>td<\/span>><\/<\/span>td<\/span>><\/span><\/pre>\n
                <<\/span>td<\/span>><\/span><\/pre>\n
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.<\/pre>\n
                Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.<\/pre>\n
                Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.<\/pre>\n
                <\/<\/span>td<\/span>><\/span><\/pre>\n
                <<\/span>td<\/span>><\/<\/span>td<\/span>><\/span><\/pre>\n
            <\/<\/span>tr<\/span>><\/span><\/pre>\n
            <<\/span>tr<\/span>><\/span><\/pre>\n
                <<\/span>td<\/span> width<\/span>=\"25\"<\/span>><<\/span>img<\/span> src<\/span>=\"lbottom.jpg\"<\/span> width<\/span>=\"25\"<\/span> height<\/span>=\"25\"<\/span>><\/<\/span>td<\/span>><\/span><\/pre>\n
                <<\/span>td<\/span>><\/<\/span>td<\/span>><\/span><\/pre>\n
                <<\/span>td<\/span> width<\/span>=\"25\"<\/span>><<\/span>img<\/span> src<\/span>=\"rbottom.jpg\"<\/span> width<\/span>=\"25\"<\/span> height<\/span>=\"25\"<\/span>><\/<\/span>td<\/span>><\/span><\/pre>\n
            <\/<\/span>tr<\/span>><\/span><\/pre>\n
        <\/<\/span>table<\/span>><\/span><\/pre>\n
    <\/<\/span>body<\/span>><\/span><\/pre>\n
<\/<\/span>html<\/span>><\/span><\/pre>\n<\/div>\n<\/div>\n
Rendered result looks like this:<\/strong><\/p>\n
\"final\"<\/a><\/p>\n
Example files to download:<\/strong><\/p>\n
[download#11#image]<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[20,46,70,79,90,91,99],"class_list":["post-362","post","type-post","status-publish","format-standard","hentry","category-articles","tag-css","tag-html","tag-photoshop","tag-rounded-corners","tag-tutorial","tag-tutorials","tag-webdesign"],"_links":{"self":[{"href":"https:\/\/reflection-design.dk\/index.php?rest_route=\/wp\/v2\/posts\/362","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/reflection-design.dk\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/reflection-design.dk\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/reflection-design.dk\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/reflection-design.dk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=362"}],"version-history":[{"count":0,"href":"https:\/\/reflection-design.dk\/index.php?rest_route=\/wp\/v2\/posts\/362\/revisions"}],"wp:attachment":[{"href":"https:\/\/reflection-design.dk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=362"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/reflection-design.dk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=362"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/reflection-design.dk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=362"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}