Embossed DIV look using CSS border styles

Suhail — Tue, 04 May 2010 05:08:34 +0000

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.

Gemstone Photo editing with Photoshop

Suhail — Tue, 30 Mar 2010 08:57:54 +0000

Many people have asked me how to edit gemstone as it is one of the difficult job as the colour of the gemstone in the photo and the colour of the gemstone in real would be completely different. This is because we have different lighting and settings when the picture was taken. So to correct the colours there are 2 quick adjustments you can do to the image other than Brightness/Contrast.

They are Levels and Curves. These are better than Brightness/Contrast because brightness contrast will not bring out the black colour in the image and rather increase the lightness. This is a key difference as the colour of the image change. After using Curves and Levels if the gemstone is still too brightly colours you can use the Image > Adjustment > Hue/Saturation method and correct the saturation which is the second horizontal scroll to get the perfect colour of your gemstone.

SUHAILS » Tutorial

Embossed DIV look using CSS border styles

Gemstone Photo editing with Photoshop