
For the first of the rounded examples I'll be posting to this blog, I'll go with the easiest. This is recommended for a quick fix, if you have content that is not dynamic and that you are confident will not need to grow. Also, as you'll want it to work in all browsers, you will want to watch the spacing.
I'll do the example with 3 differnet colors to cover all bases you may have:
1) The background of the rest of the page
2) The border color for the rectangle
3) The color of the internal rectangle
All you do is create this image in photoshop, and set it as your background for a div or table.
Here are instructions how to make the above image in photoshop:
1) open a new file in Photoshop
2) fill the background in the light grey color
3) from the tool box, choose the Rounded Rectangle Tool
4) Define the Radius # while the tool is selected, e.g. 8 px
5) Use the white color for drawing the rounded rectangular box
6) Select the rounded rectangular box (Click ctrl while mousing over layer thumbnail in the layer palatte
7) Add a new layer
- You should see the black dashed line around the rectangle
8) go to Edit > Stroke > fill in the darker grey border color.
Thats it
No comments:
Post a Comment