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!
[ad#co-1]
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
Step #1 Css Structure
first we create a Simple Css code
[code lang="css"] *{ padding:0; margin:0; } body{ background:#222; } [/code] [code lang="css"] #container{ margin:0 auto; background:#333333; } [/code] [code lang="css"] 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; } [/code] [code lang="css"] 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%; } [/code]
Step #2 Html Structure
now we create a Simple Html code
[code lang="htmlstrict"][/code]Heading
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.
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.
View Demo
Follow us on Twitter, or subscribe to the Developers Paradise+ RSS Feed for the best web development tutorials on the web.
Pingback: [User Link:How to Create Inset Text with CSS3] | Tips for Designers and Developers | tripwire magazine
Pingback: How to Create Inset Text with CSS3 | OnlineSchoolofDesign.com
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!
Sorry, but I really don’t like the idea of doubling the content in the markup. There’s better than this, eg. JavaScript based.
Pingback: 120+ Huge collection of Fresh Articles for Designers and Developers | tripwire magazine
Pingback: CSS Brigit | How to Create Inset Text with CSS3
Nice post! Here is another tutorial on inset text http://photoshoparchive.com/tutorials/wood-inset-text/index.php
I haven抰 checked in here for a while since I thought it was getting boring, but the last several posts are great quality so I guess I抣l add you back to my daily bloglist. You deserve it my friend 🙂