Rounding Rough Edges

0
194

On the Web, everything is a rectangle by default. Form fields, tables,
and even sections of web pages all have a blocky, sharp-edged look, so
many designers have turned to different techniques over the years to
add rounded corners to these elements to soften up the interface a bit.
CSS3 has support for easily rounding corners, and Firefox and Safari
have supported this for quite a long time. Unfortunately, Internet Explorer
hasn’t jumped on board yet. But we can get around that simply
enough.

Softening Up a Login Form

The wireframes and mock-ups you received for your current project
show form fields with rounded corners. Let’s round those corners using
only CSS3 first. Our goal is to create something that looks like Figure
8.1, on the next page.
For the login form, we’ll use some very simple HTML.

< f o rm a c t i o n = ” / l o g i n ” method=”post”>
< f i e l d s e t i d = ” l o g i n ” >
<legend>Log i n < / l e g e n d>
< o l >
< l i >
< l a b e l for=”emai 1 “>Emai l < / l a b e l >
< i n p u t i d = ” e m a i l ” t y p e = ” e m a i l ” name=”emai1″>
</li>
< l i >
< l a b e l f o r = ” p a s s w o r d ” > P a s s w o r d < / l a b e l>
< i n p u t i d = ” p a s s w o r d ” type=”password”
name=”password” v a l u e = ” ” a u t o c o m p l e t e = ” o f f ” / >
</li>
< l i x i n p u t t y p e = ” s u b m i t ” value=”Log i n ” x / l i >
</ol >
< / f i e l d s e t >
< / f o r m >

We’ll style the form a bit to give It a slightly better look.

f i e l d s e t {
w i d t h : 216px;
b o r d e r : none;
b a c k g r o u n d – c o l o r : #ddd;
}
f i e l d s e t legend{
b a c k g r o u n d – c o l o r : #ddd;
p a d d i n g : 0 64px 0 2px;
}
f i e l d s e t > o l { l i s t – s t y l e : none;
p a d d i n g : 0 ;
m a r g i n : 2px;
}
f i e l d s e t > o l > l i {
m a r g i n : 0 0 9px 0;
p a d d i n g : 0;
}
/ * Make i n p u t s go to t h e i r own l i n e */
f i e l d s e t i n p u t {
d i s p l a y : b l o c k ;
}

i n p u t {
w i d t h : 200px;
b a c k g r o u n d – c o l o r : #fff;
b o r d e r : lpx s o l i d #bbb;
i n p u t [ t y p e = ” s u b m i t ” ] {
w i d t h : 202px;
p a d d i n g : 0;
b a c k g r o u n d – c o l o r : #bbb;
}

These basic styles remove the bullets from the list and ensure that the
input fields are all the same size. With that in place, we can apply the
rounding effects to our elements.

Browser-Specific Selectors

Since the CSS3 specification isn’t final, browser makers have added
some features themselves and have decided to prefix their own implementations.
These prefixes let browser makers introduce features early
before they become part of a final specification, and since they don’t
follow the actual specification, the browser makers can implement the
actual specification while keeping their own implementation as well.
Most of the time, the vendor-prefixed version matches the CSS specification,
but occasionally you’ll encounter differences. Unfortunately for
you, that means you’ll need to declare the border radius once for each
type of browser.
Firefox uses this selector:

– m o z – b o r d e r – r a d i u s : 5px;

WebKit-based browsers, such as Safari and Chrome, use this selector:

– w e b k i t – b o r d e r – r a d i u s : 5px;

To round all the input fields on our form, we need a CSS rule like this:

i n p u t , f i e l d s e t , legend{
b o r d e r – r a d i u s : 5px;
– m o z – b o r d e r – r a d i u s : 5px;
– w e b k i t – b o r d e r – r a d i u s : 5px;

Add that to your style.ess file, and you have rounded corners.

Falling Back

You have everything working in Firefox, Safari, and Google Chrome, but
you know it doesn’t work in Internet Explorer and you know it needs to,
so you’ll need to implement something that gets it as close as possible.
Web developers have been rounding corners for a while now using background
images and other techniques, but we’re going to keep it as simple
as possible. We can detect corner radius with JavaScript and round
the corners using any number of rounding techniques. For this example,
we’ll use j Query, the j Query Corner plug-in, and a modification of
the Corner plug-in that rounds text fields.

Detecting Rounded Corners Support

Our fallback solution looks very much like the one we used in Section 9,
Falling Back, on page 91. We’ll include the jQuery library and the plugin,
we’ll detect whether the browser supports our attribute, and if it
doesn’t, we’ll activate the plug-in. In this case, we need to detect the
presence of the border-radius CSS property, but we also need to check
for browser-specific prefixes such as webkit and moz.
Create corner.js, and add this function:

function h a s B o r d e r R a d i u s O {
var element = document.documentElement;
var s t y l e = e l e m e n t . s t y l e ;
if ( s t y l e ) {
return t y p e o f s t y l e . b o r d e r R a d i u s == “string” ||
t y p e o f s t y l e . M o z B o r d e r R a d i u s == “string” ||
t y p e o f s t y l e . W e b k i t B o r d e r R a d i u s == “string” ||
t y p e o f s t y l e . K h t m l B o r d e r R a d i u s == “string”;
}
return null;

We can now detect whether our browser is missing support for rounded
corners, so let’s write the code to do the actual rounding. Thankfully,
there’s a plug-in that can get us started.

jQuery Corners

jQuery Corners2 is a small plug-in that rounds corners by wrapping
elements with additional div tags and styling them so that the targetelement looks rounded. It doesn’t work for form fields; however, with a
little imagination, we can use this plug-in and a little bit of j Query to
make it work.

First, grab jQuery Corners, and link to it from your HTML page. While
there, also link up your corner.js file.

<script src=”jquery.corner.js” charset=”utf-8″ type=’text/javascript’></script>
<script src=”corner.js” charset=”utf-8″ type=’text/javascript’></script>

 

Now we just have to write the code that actually invokes the rounding.

Our formCorners Plug-in

We’re going to write a jQuery plug-in so that we can easily apply this
rounding to all of the form fields. We already talked about writing
jQuery plug-ins in Section 5, Falling Back, on page 60, so I don’t need
to cover that again. Instead, I’ll just walk you through the code for this
plug-in, which is based in part on a solution by Tony Amoyal.

Add this to your corners.js file:

(function«) {
$ . f n . f o r m C o r n e r = function(){
return this.each(function() {
var i n p u t = $(this);
var input_background = input.css(“background-color”);
var i n p u t _ b o r d e r = input.cssC’border-color”);
i n p u t . e s s ( ” b o r d e r ” , “none”) ;
var wrap_width = p a r s e l n t ( i n p u t . c s s ( ” w i d t h ” ) ) + 4;
var wrapper = i nput .wrap( “<divx/div>”) . p a r e n t O ;
var border = wrapper .wrapC “<divx/div>”) . p a r e n t O ;
wrapper.ess C’background-col or”, i nput_background)
.essC’padding”, “lpx”) ;
b o r d e r . ess C’backg round-col or” , i n p u t _ b o r d e r )
.essC”width”, wrap_width + ” p x ” )
. c s s ( ‘padding’, ‘lpx’);
wrapper.cornerC”round 5px”);
b o r d e r . c o r n e r C”round 5px”) ;
} ) ;
} ;
}) CjQuery) ;

We’re taking a jQuery object that could be an element or a collection of
elements, and we’re wrapping it with two div tags that we then round.
We first make the innermost div the same color as the background of the
original input, and we turn off the border of the actual form field. Then
we wrap that field with another field with its own background color,
which is the color of the original input’s border color, and give it a little
bit of padding. This padding is what makes the border’s outline visible.
Imagine two pieces of construction paper—a green one that’s 4 inches
wide and the other a red one that’s 3 inches wide. When you place the
smaller one atop the larger one, you’ll see a green border around the
red one. That’s how this works.

Invoking the Rounding

With the plug-in and our detection library in place, we can now invoke
the rounding.

Add this to the corners.js file:

$(function O {
i f ( ! h a s B o r d e r R a d i u s ( ) ) {
$(“input”).formCornerO;
SC’fi eldset”) . corner Ç” round 5px”) ;
$(“legend”).corner(“round top 5px c c : # f f f ” );
} ) ;}

We’re rounding the three form fields and the fieldset, and finally, on
line 5, we’re rounding only the top part of the legend and specifying
that the cutout of the corner should use white. The plug-in uses the
background color of the parent for its cutaway color, and that’s not
appropriate here.

If the browser has support for the border-radius property, then it runs
our plug-in. If not, then it’ll use the CSS we added earlier.

A Minor Nudge

IE treats legends a little differently. We can add in a small style fix for
IE that pushes the fieldset’s legend up a bit so that it looks the same
as it does in Firefox and Chrome.

< l i n k r e l = ” s t y l e s h e e t ” h r e f = ” s t y l e . e s s ” t y p e = ” t e x t / c s s ” media=”screen”>
<! — [ i f I E ] >
< s t y l e >
f i e l d s e t 1 e g e n d { m a r g i n – t o p : -lOpx }
< / s t y l e >
< ! [ e n d i f ] – – >

Now things look relatively similar on all of the major browsers; you can
see the Internet Explorer version in Figure 8.2, on the preceding page.
Rounded corners add a bit of softness to your interfaces, and it is extremely
easy to use. That said, it’s important to be consistent with your
use and to not overuse this technique, just like any other aspect of
design.