How to Create Inset Text with CSS3

This often gets confused with “How to Create Indented Text with CSS3” which is completely different. Indent, to me at least, means an indented paragraph. If that’s what you’re here looking for, I won’t leave you hanging, it’s:

p{text-indent:20px}

What I’m referring to, is my new favorite CSS3 technique:

Hello, how are you today?
VS
Hello, how are you today?

The difference isn’t dramatic, but it’s the subtleties that really bring a design together. Note: If you don’t see any difference at all, that means your browser does not support this CSS3 feature.

We could of course go a little more dramatic:

Hello, how are you today?

It really all depends on your color scheme and the contrast between the background color, font color, and shadow color. I’d only recommend using this technique on headers, info boxes, your copyright line, etc., but not on your content (main readable text area).

CSS

.inset{text-shadow:0 1px 0 #fff}

HTML

<div class="inset">Hello, how are you today?</div>

  • Sahil_gnr

    Thanx.. :)

  • You’re welcome.

  • kevin

    That is not inset, it’s beveled down. Inset is basically indentation from all sides (padding)

  • Yes, and responsive doesn’t really mean responsive, but adaptive. You wouldn’t write an article call “Adaptive Web Design” if you wanted the masses that are interested in “Responsive Web Design” to find it.

    Frankly, it doesn’t matter. It’s what people are looking for that matters. If I used the term beveled, people would picture the following:

    http://www.zetaprints.com/help/wp-content/uploads/2009/11/web-to-print_beveled_text.png

    Google “inset css” and you’ll find that people are mostly either looking for this solution or the one with the border and outline trick that looks like this:

    http://img687.imageshack.us/img687/457/inset2.png

    I care about accuracy, but not always in the context of when human definition trumps technical definition.

    I do appreciate the heads up though.

    Thanks, Bryan