Text shadow Inset effect css3

css insets
hkasera picture hkasera · May 3, 2012 · Viewed 17.4k times · Source

enter image description here

I want the inset effect for the above button. The 'text' cancel appears to be type pressed. I have tried a lot of examples available online but they don't have white background examples.

Help me to gain this effect.

Thanks in advance!!

Answer

cchana picture cchana · May 3, 2012

With the text-shadow property, you should be able to get the subtle effect that you're after:

text-shadow: 0 -1px 0 #888;

See a very basic example on jsfiddle.

Related questions

Create a "inset" effect using CSS in websites

I am very much impressed by the "inset" like effect in many latest websites. Some examples are and The line in the center. Nowadays, many websites use these kinds of lines/effects. I tried to achieve the same with borders …

Read More
How to feather the edges of an image using CSS

I have an unordered list containing 3 list items. Each list item has an image, and 3 divs containing text. I want the edges of the image to be feathered, by using only CSS. My site found here currenly has a feathered …

Read More
Control the two colors of an inset border?

I'm trying to see if there's a way to change the two colors of the inset border in CSS As you know, the inset style creates a border on an element that creates the illusion that that it has an …

Read More