Beveled, Pressed & Shadow Borders with CSS

css-border-effects-thumb

This week, I’ve been doing some website re-tooling.

I’m converting my WordPress site from a self-built theme to a fully awesome and optimized Standard Theme without changing my overall design. Of course, I am making some minor changes here and there with things I didn’t like or could be better. Some changes you can’t even see the difference, but if you looked under the hood, the change is huge.

Take for instance, my rounded corners on each page and blog post. Standard Theme already had them baked in, so switching from an inferior method of using graphic files to create rounded corners, all I had to do was tweak the CSS. This significantly speeds up the page load time, and you can’t even see the difference:

Before:

After:

Like I said, I would like to make a few other subtle visual changes. I want to keep it CSS driven, so I hunted around for some CSS tweaks that render like an image effect.

Check-out these four clean effects:

Light Shadow

Nice, simple and clean, right?

This light shadow effect is done by using shades of grey with borders. You can use a real shadow effect using box shadow with CSS3, but this snippet plays well in all browesers.

.shadow {
    padding: 20px;
    border: 1px solid #f0f0f0;
    border-bottom: 2px solid #ccc;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

Simple and clean, just like the effect, eh?

Pressed

Me likey.

I’m guessing if you play around with the colors, you might get the same pressed effect on a light background, too.

.pressed {
    color: #fff;
    padding: 20px;
    background: #111;
    border: 1px solid #000;
    border-right: 1px solid #353535;
    border-bottom: 1px solid #353535;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

This is pulling some CSS3 border-radius, so keep that in mind.

Beveled

You’ve probably seen this effect around the web. It’s often used around images to give the image a picture frame kind of look.

img.light {
    outline: 1px solid #ddd;
    border-top: 1px solid #fff;
    padding: 10px;
    background: #f0f0f0;
}
img.dark {
    outline: 1px solid #111;
    border-top: 1px solid #555;
    padding: 10px;
    background: #333;
}

Play with the colors to match your site, and you’ll be set!

Indented Lines

#WANT

#indented ul{
    margin: 20px 0; padding: 0;
    list-style: none;
}
#indented ul li {
    border-top: 1px solid #333;
    border-bottom: 1px solid #111;
}
#indented ul li:first-child {border-top: none;}
#indented ul li:last-child {border-bottom: none;}
#indented ul li a {
    padding: 10px;
    display: block;
    color: #fff;
    text-decoration: none;
}
#indented ul li a:hover {background: #111;}

Keep in mind the first-child and last-child CSS selectors are not supported by older browsers. You can read more about this here. To get around it, you can use some jQuery to support older browsers.

I love this effect, it’s so sharp!

Take a look at SOHTANAKA’s site to see how great these subtle effects can be used to make a stellar site.

Do you have any sweet border CSS snippets? Please, share!

[via SOHTANAKA]

 

8 SHARES

Eric Dye

I am an entrepreneur and human rights advocate. I spend most of my time as writer and editor for ChurchMag and Finding Justice, but you can also find me working on Live Theme and for the International Human Rights Group. All while enjoying my family and sipping espresso in Italy.

We have 8 comments...
Now let's hear from you!

  1. says

    Oh yeah, bookmarked. Thanks a lot for the tips, this really helps me. Trying to switch my design habits to include more faster processing CSS styles.

    Thanks again, Peace!

What would you like to say?

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>