StylizedWeb

Subscribe to our updates:

A Design, WordPress and Tutorials Blog.

Dedicated to helping you learn the art and science of the web.

How to Create Inset Text with CSS3

The new CSS3 properties being adopted by browser manufactures gives us whole new ways to creatively style our websites with out having to resort to images, javascript or flash. As more people start to play with the CSS3 properties you can expect new ways to use them that might not be in ways that you would imagine.

In this case we are going to use the text-shadow property that is currently supported by Firefox, Opera and Safari to create the appearance of inset text. Inset text being text that has been pushed into the background, almost like a reverse embossed effect.

The Effect We Are Going To Create

If you look at this image and text treatment you will see what we are trying to achieve. Through color and slight shading it creates the appearance that the text has been pushed inward into the background. Previously we would have had to create this effect in an image, however now we can do it simply by using the text-shadow property (despite its primary use being designed for creating a relief effect).

Step 1. Primary Text Color

The first step is to make the text we are working with a darker shade of the the background that it will be sitting on. This will make it look further away to users and shadowed from the light, how dark it should be will depend on the colors you are using. I recommend mocking up your text in photoshop to get the right shade and tone.

Step 2. Ridge Color

To really get the inset 3D effect we need to have a thin line of shading around our text to create the illusion of a ridge. By having it below the text where it normally will be a shadow, it will create the illusion of depth. The color should be lighter shade of the background, but not too much lighter. This is another situation where picking the right color is critical, if it is too light it looks strange and if it is too dark you won't be able to see it. You may want to use photoshop to try mockup up the text in order to pick the right color.

Step 3. The Code


     .inset-text {
          font-size: 32px;
          color: #344251;
          text-shadow: 1px 1px 0px #bad3ed;
          font-weight: bold;
     }

The code is very simple, we are just using the text-shadow property to put a 1 pixel line on the text 1 pixel below it, and 1 pixel to the right.

The Result

Here is an example of the result. If a user doesn't have a browser that supports the text-shadow property they still see and can read the text with no issues!

Here Is Some Inset Text

Leave a comment on Stylized Web Have some feedback? Leave a comment

101 Comments So Far

  1. Try to look for a gta san andreas game gta cheatcode for gta san andreas game…

  2. Pingback: 30 Adet CSS tipografi Uygulaması | Paylaş Gelsin

  3. Thx for info, we use inset a lot in our designs and we always have some trouble with the css to make it look exactly as in psd:s.

    Thanks one again!

  4. Pingback: - WebDesignR

  5. Pingback: CSS3的文字阴影—text-shadow | 异次元花园 | 涵盖前端后台的代码库

  6. Pingback: 14 Increíbles efectos de texto con CSS3

  7. Pingback: CSS3的文字阴影—text-shadow

  8. Pingback: CSS3的文字阴影—text-shadow | Web前端开发

  9. I don’t really see much difference in the inset text in your example. Is it perhaps because you’re using white text or a light text shadow color on a light background?

    Thanks.

  10. Pingback: 15 个用 CSS3 实现的文本效果 – 90互联网数据中心

  11. dusakabin, dus teknesi, kuvet

  12. Pingback: CSS3的文字阴影—text-shadow – php圈子

  13. Pingback: text-shadow 学习 | 儿是刘丕

  14. Pingback: CSS3 Yazı(Text) Efektleri | Enes Aktas

  15. Pingback: [Css3教程]-CSS3文字阴影—text-shadow – CSSwang-CSS网站

  16. Pingback: Learn how-to Create CSS3 Text Effects - 30 Mystic CSS3 Tutorials | Dzinepress

  17. Pingback: 8 تأثيرات مميزة للنصوص بواسطة Text-shadow و css3 - شبكة لحبابي التقنية التطويرية

  18. Pingback: CSS3的文字阴影—text-shadow » 觉

  19. Pingback: CSS3 经典教程系列:CSS3 阴影(text-shadow)详解 | 田淏予博客

  20. Pingback: 30 Awesome Free CSS3 Text Effects, Tutorials and Techniques

  21. Looks like your CSS that set’s the inset has been removed from your site…

  22. Pingback: CSS3 经典教程系列:CSS3 阴影(text-shadow)详解 - CSS - 开发者第661702个问答

  23. The effect of text-shadow on this website is very perfect,so it must be helpful.

  24. Pingback: CSS3的文字阴影—text-shadow » 站群之家

  25. Pingback: CSS3的文字阴影—text-shadow | 开发者文摘

  26. ADadA

  27. Pingback: 8 تأثيرات مميزة للنصوص بواسطة Text-shadow و css3 | Imad1.net Imad1.net

  28. Pingback: 11 efectos de texto con CSS3 | 313onlinedesign en las nubes

  29. Pingback: Amazing CSS3 Text Effects Tutorials

  30. Pingback: CSS3的文字阴影—text-shadow 第四节

  31. Pingback: 8 تأثيرات مميزة للنصوص بواسطة Text-shadow و css3 | دردشة العراق - دردشة العراق الكتابية - شات العراق - Chat iraq

  32. Post writing is also a fun, if you be acquainted with then you can write or
    else it is difficult to write.
    I’m confident all of you listed here perform Group
    Fortress 2, or else you wouldn’t be below! I also engage in TF2,
    and one factor that I couldn’t get my head about was accumulating all the things!!
    I’v discovered some gamers cant even gather most of the things, never ever
    brain ALL of them!! I was focused to obtaining all the products,
    but it appeared not possible, so being an seasoned programmer, I acquired to function!

    Soon after several hours of tough perform I designed, what I
    say a single of the best hacks out there! (biased significantly?!) The device that I
    have created permits you to unlock any of the products you would like
    in TF2!
    I’ts simple actually…
    I was arranging to offer this tool and enable some income commence rolling
    in, but i know the feeling of not being ready to
    afford it, or becoming a ‘poor’ male on TF2, so I have determined to give
    this out for totally free to see what people think of it!
    Just study the tutorial underneath outlining how to obtain and use the tool!

  33. Si vous êtes déjà demandé comment embrasser votre partenaire, sans crainte
    d’être rejeté et la façon de rendre le baiser aussi
    passionné que possible, alors ne vous inquiétez pas. en suivant ce guide simple, vous
    aurez même la fille que vous êtes après penchant pour
    vous embrasser!

    un baiser peux vous faire du bien ou l’inverse, donc il est important
    de faire une bonne première impression quand il s’agit de baiser.
    ce guide va vous transformer à partir d’un ameteur à un prefessionnel en embrassant quelques minutes sans avoir besoin de pratique.

    vous pouvez consulter ce guide en ligne ou téléchargez-le gratuitement!
    obtener ce guide pour découvrir les ingrédients pour le baiser
    parfait!

  34. Pingback: 11 efectos de texto con CSS3 - 313onlinedesign en las nubes

  35. Hello! I could have sworn I’ve visited this site before but after going
    through a few of the articles I realized it’s
    new to me. Anyhow, I’m definitely delighted I stumbled upon it and I’ll be
    bookmarking it and checking back frequently!

  36. Pingback: 8 تأثيرات مميزة للنصوص بواسطة Text-shadow و css3 - eevpass.com

  37. Absolutely nothing symbolizes normal life greater than miley cyrus sex tape,
    and I mean almost nothing. It has been explained that will
    the one solution with society which could pull through any nuclear episode is usually miley cyrus sex
    tape. This really is completely wrong, in fact cockroaches usually are the one thing
    that may pull through a new nuclear assault. Irrefutably
    there exists a hyperlink. How should that become
    discussed? Of course fascination may at some point get rid on
    the highly effective effect associated with miley cyrus sex tape,
    but is not before most of us go to the standard business insurance policy for
    everyone. Just what all this passes down to be able to is
    usually funds. Capitalists really like miley cyrus sex tape.

  38. Pingback: 30 Useful and Cutting Edge CSS3 Text Effect and Web Typography Tutorials - 313onlinedesign en las nubes

  39. Hey would you mind sharing which blog platform you’re working
    with? I’m planning to start my own blog in the near future but I’m having
    a hard time choosing between BlogEngine/Wordpress/B2evolution
    and Drupal. The reason I ask is because your design seems different then most
    blogs and I’m looking for something unique. P.S Sorry
    for getting off-topic but I had to ask!

    prix de chaussures louboutin

  40. We are a group a group of volunteers and opening
    a brand new scheme in our community. Your web site offered us with
    valuable information and work on . You have a formidable task
    and our whole community will likely be grateful to you .

    Undeniably imagine that you stated . Your favorite justification appeared to be on the net easy thing to have in
    mind of . I tell you , i definitely get annoyed
    think worries clear that not recognize about .
    You controlled and also out on all managed to
    hit the nail on the top without having side-effects , other
    folks cAN could take a signal. Will likely be back to get more.
    Thank you

    Feel free to visit my web page: dead trigger 2 cheats

  41. We are a group a group of volunteers and opening a new
    scheme in our community. Your web site provided us with valuable information and
    work on . You have made ​​an impressive activity and
    our whole group will likely be grateful to you .

    Undeniably Account which you said . Your favorite justification appeared to be on the net easy
    thing to have in mind of . I tell you , i certainly
    annoyed consider think concerns clear that not
    recognize about . You controlled and defined everything managed to hit the nail on the top without having side effect ,
    people cAN could take a signal. Will probably
    be back to get more. Thank you

    Review my web page Dragon Story Cheats

  42. Pingback: css 3 实现文字内阴影的方法 | 无言官

  43. Pingback: CSS3的文字阴影—text-shadow

  44. Very good blog! Do you have any tips for aspiring writers?
    I’m planning to start my own site soon but I’m a little lost on everything.
    Would you suggest starting with a free platform like WordPress or go for a paid option? There are so
    many options out there that I’m totally confused .. Any tips?
    Kudos!

  45. We’re a group of volunteers and opening a brand new
    scheme in our community. Your website offered us with helpful helpful
    and paintings on . You have a formidable
    activity and our whole community can be thankful to you .

    Definitely imagine which you stated .
    Your favorite reason appeared to be on the web simple
    thing to take note of . I tell you , i certainly annoyed
    others folks think concerns clear that not realize
    about . You controlled and out everything managed to hit
    the nail on the top no need side-effects , people cAN
    could take a signal. Will probably be again to get more.
    Thank you

    Feel free to visit my homepage :: click here to visit site!

  46. I’ve been browsing online greater than 3 hours lately, but
    I never found any attention-grabbing article like yours. It is beautiful
    value enough for me. Personally, if all site owners and bloggers made good content
    as you did, the net will be a lot more helpful than ever
    before.

    Here is my blog post :: war thunder golden eagles hack

  47. I got this web site from my pal who told me on the topic of this website and
    at the moment this time I am browsing this site and reading very informative articles here.

    My homepage – Trainstation Hack

  48. Pingback: CSS3基本属性之文字阴影text-shadow详解 | 实战互联网

  49. My partner and I stumbled over here by a different web page and thought I should check things out.
    I like what I see so i am just following you. Look forward to going
    over your web page for a second time.

    Feel free to visit my web site :: how to use the game of war
    fire age hack, Gale,

  50. Pingback: 8 تأثيرات مميزة للنصوص بواسطة Text-shadow و css3

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>