How to Create Inset Text with CSS3

Many exciting new functions and features are being thought up for CSS3. Today we are going to create inset test with CSS3. That property will support Firefox, Opera, Chrome and Safari. Inset text being text that has been pushed into the background, almost like a reverse embossed effect. I hope that, you will find a quite useful inspiration for your next design project. Thanks!

heading-inset-text-css3

This Text Shadow property is not supported by IE. View Demo

Let us know your thoughts? If you found any other tutorials that you want to share with us,feel free to let us know by dropping in a comment.

Example

heading-inset-text-css3-exa

Step #1 Css Structure

first we create a Simple Css code


*{
 padding:0; margin:0;
}
body{
 background:#222;
}


#container{
margin:0 auto;
background:#333333;
}


h2 {
color:#000;
text-shadow:-1px 1px 1px #4A4947;
font:36px bold Arial, Helvetica, sans-serif;
margin:0 0 0 0;
padding:0 0 10px 0;
}


p{
text-shadow:-1px 1px 1px  #4A4947;
font:bold 18px Arial, Helvetica, sans-serif;
color:#000;
padding:0 0 10px 0;
line-height:162.5%;
}

Step #2 Html Structure

now we create a Simple Html code


<div id="container">
     <h2>Heading</h2>
       <p>
         Et ut ac sociis natoque montes! Porta lundium sed,
         tempor ac porta, parturient turpis. Ac, ut eros egestas,
         adipiscing  penatibus sit lacus mattis parturient, placerat.
      </p>
      <p>
         Et ut ac sociis natoque montes! Porta lundium sed,
         tempor ac porta, parturient turpis. Ac, ut eros egestas,
         adipiscing  penatibus sit lacus mattis parturient, placerat.
      </p>
</div>

View Demo

Follow us on Twitter, or subscribe to the Developers Paradise+ RSS Feed for the best web development tutorials on the web.

Filed under: Css, Tutorials by admin

Promote Us

Tags: Css ,Tutorials

if you enjoyed reading this article, please check out other related articles below:

Untitled Document

7 Comments

[User Link:How to Create Inset Text with CSS3] | Tips for Designers and Developers | tripwire magazinesays on : March 4th, 2010 at 6:50 pm Said:

[...] User News if (typeof Meebo == ‘undefined’) { Meebo=function(){(Meebo._=Meebo._||[]).push(arguments)}; (function(q){ var args = arguments; if (!document.body) { return setTimeout(function(){ args.callee.apply(this, args) }, 100); } var d=document, b=d.body, m=b.insertBefore(d.createElement(’div’), b.firstChild); s=d.createElement(’script’); m.id=’meebo’; m.style.display=’none’; m.innerHTML=”; s.src=’http’+(q.https?’s’:”)+’://’+(q.stage?’stage-’:”)+’cim.meebo.com/cim/cim.php?network=’+q.network; b.insertBefore(s, b.firstChild); })({network:’tripwiremagazine_fu72bi’}); }How to Create Inset Text with CSS3 [...]
How to Create Inset Text with CSS3 | OnlineSchoolofDesign.comsays on : March 4th, 2010 at 11:05 pm Said:

[...] it out: http://aceinfowayindia.com/blog/2010/03/how-to-create-inset-text-with-css3/ Follow us on Twitter for even more updates!HOSTING PROMOGet a special 35% discount making it [...]
Erica | UPrintingsays on : March 5th, 2010 at 5:55 am Said:

I never knew about this, since my knowledge about css are only the basics. Thanks for sharing this, I will for sure try this one. Looking forward for your next post!
Marek Stasikowskisays on : March 5th, 2010 at 1:44 pm Said:

Sorry, but I really don’t like the idea of doubling the content in the markup. There’s better than this, eg. JavaScript based.
120+ Huge collection of Fresh Articles for Designers and Developers | tripwire magazinesays on : March 5th, 2010 at 10:57 pm Said:

[...] How to Create Inset Text with CSS3 [...]
CSS Brigit | How to Create Inset Text with CSS3says on : March 6th, 2010 at 12:11 am Said:

How to Create Inset Text with CSS3…

Many exciting new functions and features are being thought up for CSS3. Today we are going to create inset test with CSS3. …
Mikkisays on : May 11th, 2010 at 8:16 am Said:

Nice post! Here is another tutorial on inset text http://photoshoparchive.com/tutorials/wood-inset-text/index.php