SUHAILS » Programming http://www.suhails.com Life online is really nothing more than the real life Wed, 19 May 2010 14:33:47 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Embossed DIV look using CSS border styles http://www.suhails.com/2010/05/embossed-div-look-using-css-border-styles/ http://www.suhails.com/2010/05/embossed-div-look-using-css-border-styles/#comments Tue, 04 May 2010 05:08:34 +0000 Suhail http://www.suhails.com/?p=291
 Read the full article]]> We always seen this cool style on many websites. The nice embossing style of illusion created using just borders. Well this is really very simple also. The concept behind this is simple. To create an embossed out effect the borders need to be on top and left. For the embossed in the borders need to be on bottom and right.

The CSS

.embossin {

width: 500px;

background: #101010;

border-right: 1px solid #2b2b2b;

border-bottom: 1px solid #2b2b2b;

}

.embossout {

width: 500px;

background: #101010;

border-left: 1px solid #2b2b2b;

border-top: 1px solid #2b2b2b;

Yes this is the code, but to see this in effect you will have to have the body background in black so that you can see this box. You can see the sample below. This style can be used in form buttons and form styling as well like in my Galaxy theme’s comment form.

View DemoDownload

]]> http://www.suhails.com/2010/05/embossed-div-look-using-css-border-styles/feed/ 0