Thứ Ba, 22 tháng 3, 2011

Have Fun w/ Borders – Beveled, Pressed, & More!

Have Fun w/ Borders – Beveled, Pressed, & More!

Tags: ,
Since I released my new redesigned blog, a lot of people have asked me how I styled the pressed effect on my category navigation. I would like to share some simple border style tricks to get various effects for your next project.

Light Shadow

CSS Borders Light Shadow
A simple light shadow effect can be achieved with using shades of grey with borders. With CSS3 you can achieve a real shadow effect using box shadow, but this is a clean and simple way that works in all browsers.
CSS
.shadow {
 padding: 20px;
 border: 1px solid #f0f0f0;
 border-bottom: 2px solid #ccc;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}

Pressed


CSS Borders  - Pressed

The pressed effect is very similar to the CSS Letter Press technique but we rely solely on border colors to achieve the effect. Add some CSS3 rounded corners and you can achieve a very clean pressed look to your layouts.
CSS
.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;
}

Beveled


CSS Borders - Beveled Images

This technique is very similar to your double border technique commonly used with images. With a little bit of tinkering, you can achieve a subtle beveled effect using the outline property.
CSS
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;
}

Indented Lines


CSS Borders - Indented Lines

I use this technique often when creating vertical menus and lists. Its a simple combination of top and bottom borders with different shades of the background color. 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.
CSS
#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;}

Related Articles

Related Posts

Không có nhận xét nào:

Đăng nhận xét