paulgdesigns.com
Custom Web Designs
Upgrades & New Designs
Repairs & Tutorials
Blogs & Bulletin Boards
MySQL Databases
Shopping Carts & E-Commerce
Search Engine Optimization
Whether this is your first web site, or you have an existing site in need of an upgrade or facelift, we can help.
From the "business card" site of just a page or two, to a dynamically controlled site that allows you to store all of your customers on the web for access anywhere in the world, we can help.
With technology and the web evolving at its current rate, it is no longer acceptable just to have a web site. It is at the point that just having a web site thrown up, or one that is out of date, can cause you more harm than good.
MoreWeb sites, like technology and fashion do not stand still. We all know that a 13" black and white television with rabbit ears is old fashioned, and a bee hive hairdoo is not the latest. And we also know that if you were thinking of doing business with someone with a hairdoo and tv as mentioned, you just might to opt out.
Web sites are no different, people can regconize old tired web sites, and when they opt out, you dont see them again.
Getting found on the web is not as easy as it used to be. Taking advantage of technology that does not cost any extra money, thats just smart.
Find out how we can help you to get found, and its all included!!
Some sites are just in need of some repair work. Others we can take your existing content and apply it to a new design. Others just take a little tweaking to get it into productive high gear.
Every web site we create is a billboard for our service! A $300 web site gets the same creative service that one costing many times that would!
Creating Rounded Corners
Gary Paul, 11/19/2010
A common question on the help boards from newer designers is how to get that rounded look on their web site. Its not a click of a button or two, it is a little involved, but almost anyone can conquer this one.
There are two main methods of creating the rounded corner look, and we will look at both of them. They are:
Using a background image.
- Using an image, usually a background image, to show rounded corners.
- Using CSS to round the corners of an element, typically a div tag.
In the example on the right, I used a background image in the header to give the rounded appearance.
To start, open your favorite graphics editing program, be it Photoshop or Fireworks or others, and create a rounded corner rectangle the width of your element. So if your page is going to be 960px wide, then your background image will have to be as well. You will also be setting the height of your header (in the case of a rounded top.)
If your page is going to have a textured background or a color other than white, you might want to create your image as either a .png file or a .gif file, because these image types support transparency. There is another way to achieve this as well, simply take your textured background, and in your graphics editor, place the rounded corner image on top, using the texture as your canvas, that will accomplish the same thing.
With that done, place the image in your css, we will call it the header, and the css looks like this:
#header {
background-image:url('path.headerimage.png');
background-repeat:no-repeat;
height:100px;
}
We have set the height in the header to 100px, but of course you set it to fit your image. Typically it is not a good idea to set heights, however if you do not have any content in the element, in this case the div, it will not appear in the browser.
The method I have described here is for a fixed width page. If you are going to make a flexible page, that is where you set the width to a percentage of viewable area, it gets a little more complicated. But basically you have to slice your rounded image into 3 sections, the left curve, the center, and the right curve. But we will save that for another lesson.
Using CSS
Css has a rounded corner rule that you can employ, but as of this writing, it does not enjoy full browser support, specifcally, Internet Explorer. So using the css method for a major component of your design, such as in the example above, would not be your best choice.
The image above is taken from Firefox, and the rounded corners look fine, however look at the same page in IE, and they are not. It does not look bad, and since it is not a major component of the design, most will not know the difference.
Take a look at the full page in both browsers and see for yourself. Click Here.
The Css for the rounded corners looks like this:
border:1px #ccccc solid;
-moz-border-radius: 14px;
-khtml-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 14px;
Play around with the radius amounts by raising or lowering the number of pixels, but it is pretty easy.
Hopefully you have enjoyed this little tutorial and will be able to apply it to a project in the near future.
