Submit Your Article
Designers are constantly looking for methods to make their design work more slick and smooth. There are various ways of doing this with flash as nothing is smoother than vector graphics. Though, CSS is often overlooked still today as a coding toolset for producing some visually impressive web pages. One popular addition to web pages is the use of round edges for buttons and boxes.
These are great for adding a smooth border to text areas that need to stand out on a page such as testimonials and unique selling points around a product. Here is an example and is the one we shall create in this tutorial; we shall create a poll form (just the client-side, this tutorial does not cover server side code like ASP):
The Submit button is just for display in this example so that you as a designer can see the smooth effects of using rounded edges. The file send_poll_data.asp in the code below would need to be created to collect the form data. Firstly, using your favorite paint program, the images for the round corners need to be created. Though on this occasion, I have included them here for you to download. These are the four corner images which will add the round edges to the box.
Download the rounded edges for this tutorial.
Ensure you don’t change the filenames. If you wish to use a different color, either create these in your paint program or simply copy these images into your painting tool, and change the color. In Photoshop, this is easy by using the magic wand tool and fill option from the edit menu.
Now for the code: We need to create CSS style tags that define the properties of the box. The color code for the images is #F58940. The color of the text in the box is set to blue with the hex code: #1523A6. Feel free to change these attributes as per your web page color styles.
We need 3 styles for this to work, these are: .mainbox, .top, and .bottom. The style .mainbox will set the properties of the rounded box, colors and positioning; adjust as necessary for your web page style:
.mainbox { background: # F58940;width: 250px;font: 12px Verdana, Arial, Helvetica, sans-serif;color: #1523A6; }
Also, we shall keep the box away from the edges of the window with:
margin: 0 3px;
We need to ensure that the images for the .top and .bottom styles are not repeated so we add no-repeat.
.top {
background: url(topright.gif) no-repeat right top;
}
The positioning of the image is also needed to be expressed here or you will just have a square box edge as the background color will suppress the images. Append the text right top to the line so the images are displayed on the corners as above.
Ok, so let’s put it all together, here is the full html page code:
<html>
<head>
<title> Smooth Your Design and Round Those Corners</title>
<style>
.mainbox {
background: #F58940;
width: 250px;
font: 12px Verdana, Arial, Helvetica, sans-serif;
color: #1523A6;
margin: 0 3px;
}
.top {
background: url(topright.gif) no-repeat right top;
}
.bottom {
background: url(bottomright.gif) no-repeat right top;
}
</style>
</head>
<body>
<div class=”mainbox”>
<div class=”top”><img src=”topleft.gif” alt=”" width=”30″ height=”30″
/></div>
<form name=”input” action=”send_poll_data.asp” method=”get” align=”middle”>
<h2 align=”middle”>What is your opinion of the web site?</h2>
Best Resource!:
<input type=”radio” name=”poll” value=”resource” checked=”checked”>
<br>
<br>
Great Info for Learners:
<input type=”radio” name=”poll” value=”learners”>
<br>
<br>
Not that informative:
<input type=”radio” name=”poll” value=”informative”>
<br>
<br>
Did not really help:
<input type=”radio” name=”poll” value=”nohelp”>
<br><br>
<input type =”submit” value =”Submit”>
</form>
<p>
Once you hit submit, your poll data will be sent to us. Thanks for your time!
</p>
<div class=”bottom”><img src=”bottomleft.gif” alt=”" width=”30″ height=”30″
/></div>
</div>
</body>
</html>
Of course, you can change certain parts like the font color, font size, box size, etc. These nice rounded boxes can be used for sales ads, promotions, highlighting a benefit, and so many other uses that can be seen across the web.
Topics: CSS, Design, Web Development
