Devlounge

Design, Develop, and Grow

Fun With Border-Radius

By

Like many other designers, I go through certain “phases” in which I’m particularly enamoured with a certain font, a certain style- even a certain color. Right now, one of the things I’m lovin’ is CSS3’s Border-Radius. Before I started using it, I applied techniques such as Spiffy Corners and Curvy Corners, which- while very good solutions- were a little too bulky for me. Border-Radius, you see, is simplicity itself:

[css]
.box1 {
background-color: #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
padding: 10px;}
[/css]

will give you this:

Now let’s have some fun:

[css]
.box2 {
background-color: #ccff66;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 25px;
-moz-border-radius-bottomleft: 25px;
-moz-border-radius-bottomright: 0px;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 25px;
-webkit-border-bottom-left-radius: 25px;
-webkit-border-bottom-right-radius: 0px;
padding: 10px;}
[/css]

produces:

[css]
.box3 {
background-color: #fff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px dashed #999;
padding: 10px;}
[/css]

produces:

and

[css]
.box4 {
background-color: #ffcc66;
-moz-border-radius-topleft: 25px;
-moz-border-radius-topright: 25px;
-moz-border-radius-bottomleft: 0px;
-moz-border-radius-bottomright: 0px;
-webkit-border-top-left-radius: 25px;
-webkit-border-top-right-radius: 25px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
border: 1px solid #ccc;
padding: 10px;}
[/css]

produces:

From these examples, you can get an idea of the possibilities of border-radius. Throw in some box-shadow effects, maybe even a webkit-transform… the key is to play with it.

Now, it’s important to know that Internet Explorer does not support this. For rounded corners in IE, I recommend these methods: DD_roundies (a javascript library), or Curved Corner, which uses a CSS hack.

Do you use border-radius?

Friday Focus 07/17/09: Old Newspapers

By

This week on Friday Focus, we pay homage to the good old newspaper, whose elegance and practicality ought to transcend the ages. Print isn’t dead; not quite yet.

Designs of the Week

The Astonishing Adventures of Lord Likely

When using newsprint hues, keep things interesting with bold, intricate type. The thing that bothers me here though is the excessive use of uppercase text. Needs more variety and hierarchy in typography—smallcaps, italics, drop caps, etc.

The Art of Nonconformity

This site has its own flavor of old, publication-like, and grungy, but doesn’t look outdated whatsoever. Perhaps it’s the orange and blue. Or the crazy line scribblings in the header. The only minor letdown here was the footer—a lot more detail could’ve gone into that. Really like the fixed world map background though.

J. Bradford Dillon

This one also seems lacking in hierarchy—hardly any variation in type sizes, for starters. But kudos for creating a 100% fluid layout. Not to mention the “Table of Contents” style articles list to the right.

The Old State

Ignore the use of monitors, gradients, and rounded corners and you’ll enjoy how much of an ancient-looking site this is. Especially their blog. The branding has a lot to do with it, but I also think it’s the bold use of black and white.

Social Media Weekly

Design – Crank Up Your Design Radar

Accessibility – A Designer’s Guide To Accessibility and 508 Compliance

Friday Focus 04/10/09: Dark Rainbows

By

Rainbows are typically loud and attention-grabbing, but these sites have toned down the explosion of color to bring about a more modern look altogether.

Designs of the Week

Neutron Creations

The background is like a blueprint with an interesting twist. I love the icons in the Services section—I want to see more of them! The color wheel-like logo is lovely too.

WebKitBits

This site screams Apple UI, from the typeface to the pill-shaped interface elements, all with a very subtle gradient and etched text effect. I guess the only thing that bothers me are the color choices: why black for the ordinary text, and why bright blue and magenta for the headers and links.

Stefan Velthuys

The rainbow background here is so subtle, one wouldn’t mind having two strips of brighter rainbow gradients on the top and bottom parts. I like the transparent fixed footer, which is just text. But I’m also oddly drawn to the datestamp on the top right corner—it’s just well-designed.

Main Event

Hip and clubby sites tend to use rainbows and glitter and funky lines, but here I’m glad it’s more of an accent than a trademark look. I love the use of brown. Even the rounded corners, which doesn’t feel like a fad, but a nice touch that somehow adds some funk.

Social Media Weekly

Design – White Space: How to Get it ‘Right’
Examples and practice make perfect.

Design – Top 7 Icon Search Engines
Because image search, let alone icon search, is tricky enough.

Programming – The four stages of programming competence
Which stage are you?

Friday Focus 11/28/08: Huge Backgrounds

By

Hope everyone had a great Thanksgiving! Hope you aren’t too stuffed yet, ’cause we have huge backgrounds on this week’s Friday Focus.

Designs of the Week

Deborah Cavenaugh

One of the questions that will be asked when dealing with large backgrounds is “how much is too much”? The main content here seems to drown into the illustrations and you have to wonder if this was done on purpose. A lot of other things throw your eyes all over the place. The designer certainly took risks in this instance, and you’ll probably either love it or hate it.

Oleg Kostuk

Now for a more realistic look. My only gripe here is that the foreground is almost disconnected from the background, the complete opposite of the previous website. Almost—the designer still made transparent borders to ease the transition.

Ira Deus

This looks like the best execution so far, but now the design is abstract. Dark, but still striking. The fades and glows reinforce the mysterious, gothic look.

Communauté de Communes du Pays Sud Gâtine

And back to another illustrated look. I’d say this one’s another “just right”. It’s okay for the text boxes to look like they’re floating especially since the background is an aerial view of a community. Makes sense. Rounded corners and outlines add to the relaxed, fun feel.

Social Media Weekly

Programming – 15 Must-Have Bookmarklets For Web Designers And Developers

Programming – Essential free apps for your web design toolkit

Friday Focus 11/21/08: Focus

By

Focus is one of the most important aspects of design—you need to tell the audience which elements are important and which aren’t. This week’s featured sites execute this idea well, and even take it to the next level. See if these designs don’t grab your attention at all!

Designs of the Week

unblab: Brief Email for Busy People

This layout makes you feel you’re really interacting with an application as opposed to a webpage. And it doesn’t hurt that Apple’s design touches are at play here: colorful icon art reinforced by shades of gray on everything else. Plus transparency, gradients, and rounded corners, of course!

Achieve focus by making the foreground far more pronounced than the background. And if you have few elements on your page, big, shiny icons are great for the most important links.

Versions

This looks completely stunning. Great lighting, great detail. Almost wallpaper-worthy, I’d say!

89Bytes Web Studio

You can get away with no illustrations at all and just use good type. Then try an unusual combination like fuchsia and wood. Simple but very catchy!

Isabella

Or you could play with both type and complementary graphics. Here’s a good hint for “coming soon” pages: put all your keywords front and center to keep your guests from guessing. That’ll increase your chances of returning visits.

Social Media Weekly

Design – Large Website Backgrounds Do’s and Don’ts
A great design trend that should not be abused!

Programming – How to SEO Flash
Flash and SEO don’t mix, right? They can!

About Devlounge

Want to read more about Devlounge, or maybe you want to contact us, or even advertise? Oh, and don't forget to subscribe to updates!

The Best of Devlounge