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
Have some feedback? Leave a comment
We’re using this on a few of our H tags… I think you’ll see a lot of over-use in 2010 though.
Great Tutorial, I really like this look and I’ll take a CSS solution over SIFR
Sounds like a good effect, unfortunately I can’t see the effect in my browser. Which versions of browsers currently support CSS3?
蛮好的
Pingback: Twitter Link Roundup (10.25 – 10.31)
backing up data- that’s the one thing I often overlook, procrastinate, because it’s always such a tedious task.
好文章
Thank you again for this article very useful.
Pingback: Inset Text com CSS3 » CSS no Lanche
Pingback: Больше, больше эффектов c CSS3! | rotorweb.ru | Проблемы и решения в Web-дизайне
Pingback: Texto em relevo usando text-shadow do CSS3 - André D. Molin » Blog – PHP, MySQL, xHTML, CSS, Tableless, jQuery
Thanks nice blog … learned some good tips of css3
Thank you very much for this one. It’s very helpful…
thanks, this is interesting and very usefull
Pingback: How to Create Inset Typography with CSS3
Very nice and great tutorial. Just for sharing, here is another great tutorial http://morzdesign.com/how-to-create-an-inset-text-button-using-adobe-photoshop/
Pingback: 8 css3 text-shadow effects at The MegaMag
Nice, simple and very elegant ! merci beaucoup !
Pingback: الدكتور نت | تقنية إبداعية| 8 تأثيرات مميزة للنصوص بواسطة Text-shadow و css3 | Css
Pingback: Beberapa efek ‘text-shadow’ dengan CSS3 | Rudy Azhar
Very useful, thanks for the tutorial..
I’ve used it for my temporary index here:
http://chesterwebconsultancy.com
Pingback: Bits And Pix » CSS3: Text inset
الورده
dfththu
Wow cool, the css property is the same for shadow, but the value is different, cool dude.
Thanks
Nice Read
Pingback: 30 Useful and Cutting Edge CSS3 Text Effect and Web Typography Tutorials
Pingback: 30 Useful and Cutting Edge CSS3 Text Effect and Web Typography Tutorials « jembling.com
Pingback: 30 Useful and Cutting Edge CSS3 Text Effect and Web Typography Tutorials | Free Web Design Tucson
Pingback: 30 Useful and Cutting Edge CSS3 Text Effect and Web Typography Tutorials | General Zone
Pingback: 30 Useful and Cutting Edge CSS3 Text Effect and Web Typography Tutorials | Layers & Tags
Pingback: 30 Useful and Cutting Edge CSS3 Text Effect and Web Typography Tutorials
This is really simple, but brilliant
Pingback: 30 Useful and Cutting Edge CSS3 Text Effect and Web Typography Tutorials | Revo2.0 Mkt
Pingback: 8 تأثيرات مميزة للنصوص بواسطة Text-shadow و css3
Pingback: 23 Creative Uses of CSS3 Text Effects to Enhance Your Web Presence | Bitmag
http://www.outlet-louisvuittonukcom.com/louis-vuitton-agendas-damier-ebene-canvas-c-72_74.html
Nice, simple and very elegant ! merci beaucoup !
Pingback: 8 تأثيرات مميزة للنصوص بواسطة Text-shadow و3 css | خبرات تصميم المواقع و التكويد
Pingback: CSS3的文字阴影—Text-Shadow | 移动生活网-我的前端生活
Nice and simple text effects. Too bad IE users can’t enjoy it.
Pingback: Useful and Cutting Edge CSS3 Text Effect | VapvaruN | Wp Experts
Pingback: 15 Amazing CSS3 Text Effects
Pingback: web前端开发资源-15 个用 CSS3 实现的文本效果 | web前端开发
Pingback: 15 text effect achieved with CSS3 - Open News
Pingback: E-sitesweb » 30 Useful and Cutting Edge CSS3 Text Effect and Web Typography Tutorials
I’m using Google Chrome and I can’t see the effect… I thought Chrome supports text shadow
Your site is pretty interesting to me and your subject matter is very relevant. I was browsing around and came across something you might find interesting. I was guilty of 3 of them with my sites. “99% of blog managers are doing these 5 errors”. http://bit.ly/syWJZ9 You will be suprised how fast they are to fix.
Pingback: تأثيرات مميزة للنصوص بواسطة Text-shadow و3 css