{"id":1320,"date":"2011-05-19T00:47:54","date_gmt":"2011-05-19T07:47:54","guid":{"rendered":"https:\/\/bryanhadaway.com\/?p=1320"},"modified":"2025-05-22T15:23:41","modified_gmt":"2025-05-22T22:23:41","slug":"how-to-create-inset-text-with-css3","status":"publish","type":"post","link":"https:\/\/webguy.io\/blog\/how-to-create-inset-text-with-css3\/","title":{"rendered":"How to Create Inset Text with CSS3"},"content":{"rendered":"

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>\n

p{text-indent:20px}<\/code><\/pre>\n
<\/em><\/p>\n
What I’m referring to, is my new favorite CSS3 technique:<\/p>\n
Hello, how are you today?<\/div>\n
VS<\/div>\n
Hello, how are you today?<\/div>\n
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.<\/em><\/p>\n
We could of course go a little more dramatic:<\/p>\n
Hello, how are you today?<\/div>\n
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).<\/p>\n
CSS<\/h2>\n
.inset{text-shadow:0 1px 0 #fff}<\/code><\/pre>\n
HTML<\/h2>\n
<div class="inset">Hello, how are you today?<\/div><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
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 …  How to Create Inset Text with CSS3<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[39,5],"tags":[239,254,278,206],"class_list":["post-1320","post","type-post","status-publish","format-standard","hentry","category-code","category-web-design","tag-code","tag-css","tag-css3","tag-web-design"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/posts\/1320","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/comments?post=1320"}],"version-history":[{"count":0,"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/posts\/1320\/revisions"}],"wp:attachment":[{"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/media?parent=1320"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/categories?post=1320"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/tags?post=1320"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}