9:12:00 PM
Curved boxes are straight forward to do in CSS. Here's a quick tutorial of how to achieve curved boxes in CSS and what's to come in CSS 3.
What we want to achieve
Here's a graphic of the final product - a box with curved edges that will expand if the text is enlarged.
To start with we will make the graphics in Photoshop.
Curved Boxes - Making the Graphics
Open Photoshop and choose the rounded rectangle tool (shortcut of U on the keyboard). Decide on the size and colour of your rectangle and then draw a rectangle. You can make the curve bigger or smaller by changing the size of the radius.
Cut the curve out just below the last pixel of the curve. You can make the bottom curve quickly and easily by going to Image > Rotate Canvas > 180 ยบ CW
The Markup
In order to create a cross-browser friendly box we need to attach the image to HTML elements. This method requires at least two elements inside the div. In this case we use the h2 and p tags and apply a background image to each through the CSS.
<div class="curved-box">
<h2>This is a curved boxh2>
<p>This text will resize and not break the box.p>
div> Applying the CSS
We add the curves through the CSS by accessing the elements and applying a background image. The top one is applied to the h2 and the bottom to the p tag. Make sure the background to the div is the same colour too.
.curved-box
{
width: 298px;
margin: 10px;
background-color: #c3d0d4;
}
.curved-box h2
{
background: #c3d0d4 url(../images/curve_top.png) no-repeat left top;
color: #f4fbfd;
padding: 10px 15px 5px 15px;
}
.curved-box p
{
background: #c3d0d4 url(../images/curve_bottom.png) no-repeat left bottom;
margin: 0px;
padding: 5px 15px 10px 15px;
text-align: left;
} Using this code the text will resize without breaking the box. Have a look at the code in action in the example. Browser support: IE5+, Netscape 6+, Firefox 1+, Safari 1+, Opera 7+, Flock, Camino.
CSS3 will make it even easier
Once CSS3 is finally agreed it will be even easier to curve the edges of boxes. "Border-radius" will curve the corner of the box. For now browser support is not great and indeed browsers have their own proprietary properties:
-webkit-border-radius: 10px; /* Safari prototype */
-moz-border-radius: 10px; /* Gecko browsers */
border-radius: 10px; /* Everything else - limited support at the moment */ Currently supported in Camino 1+, Firefox 1+, NOT IE. The code degrades gracefully so if it is not supported there will be no curves but it will still render. Check out the example to see it in action.
Some of you may be looking for even further guidance or special programs that will help you through every step of the process. I would love to be there standing behind you pointing to everything you need to do, but that is just not feasible….. yet! Below, you can find a couple programs that I highly recommended. I believe even a couple of them may be using Adobe Indesign to supplement their training videos. I know your question already. If I had to pick one to teach me from step A to step Z, which one would I choose? That choice would be “Total Training”. They are the certified partner of Adobe and have solid training for Adobe. If you want to go from a beginner to an Adobe expert this would be the software. However, if you would just like to get a good hold on Adobe Software then the others would do just fine. Have fun learning as I always have!
Dreamweaver CS3 Online Training from Total TrainingTotal Training provides customers with a Video Training Series that is promoted by a Partnership with Adobe Systems (Worldwide). You can't go wrong with the incredible series of DVD software that this company provides. Total Training provides a one of a kind offer to let you try all of their online products for 2 days with a special guest pass. You will be on your way to being an Adobe expert in no time!
If you would like something that is a bit more contemporary, why not settle down and read a good book. This Adobe Dreamweaver CS3 is written by the Adobe Creative Team. It provides great information for learning the ins and outs of the program. If you have the mindset to read attentively, I personally recommend this book.
Post a Comment