{"id":3915,"date":"2010-03-03T11:50:07","date_gmt":"2010-03-03T11:50:07","guid":{"rendered":"http:\/\/aceinfowayindia.com\/blog\/?p=3915"},"modified":"2018-06-09T09:57:44","modified_gmt":"2018-06-09T09:57:44","slug":"how-to-create-inset-text-with-css3","status":"publish","type":"post","link":"http:\/\/aceinfowayindia.com\/blog\/2010\/03\/how-to-create-inset-text-with-css3\/","title":{"rendered":"How to Create Inset Text with CSS3"},"content":{"rendered":"<p>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! <\/p>\n<p><!--more--><br \/>\n[ad#co-1]<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/aceinfowayindia.com\/blog\/wp-content\/uploads\/2010\/03\/heading-inset-text-css3.jpg\" alt=\"heading-inset-text-css3\" title=\"heading-inset-text-css3\" width=\"615\" height=\"296\" class=\"alignnone size-full wp-image-3916\" srcset=\"http:\/\/aceinfowayindia.com\/blog\/wp-content\/uploads\/2010\/03\/heading-inset-text-css3.jpg 615w, http:\/\/aceinfowayindia.com\/blog\/wp-content\/uploads\/2010\/03\/heading-inset-text-css3-300x144.jpg 300w\" sizes=\"auto, (max-width: 615px) 100vw, 615px\" \/><\/p>\n<p>This Text Shadow property is not supported by IE. <a href=\"http:\/\/aceinfowayindia.com\/blog\/ace-tuts\/text-shadow.html\">View Demo<\/a><\/p>\n<p>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.<\/p>\n<h4>Example<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/aceinfowayindia.com\/blog\/wp-content\/uploads\/2010\/03\/heading-inset-text-css3-exa.jpg\" alt=\"heading-inset-text-css3-exa\" title=\"heading-inset-text-css3-exa\" width=\"513\" height=\"155\" class=\"alignnone size-full wp-image-3917\" srcset=\"http:\/\/aceinfowayindia.com\/blog\/wp-content\/uploads\/2010\/03\/heading-inset-text-css3-exa.jpg 513w, http:\/\/aceinfowayindia.com\/blog\/wp-content\/uploads\/2010\/03\/heading-inset-text-css3-exa-300x90.jpg 300w\" sizes=\"auto, (max-width: 513px) 100vw, 513px\" \/><\/p>\n<h4>Step #1 Css Structure<\/h4>\n<p>first we create a Simple Css code<\/p>\n<pre>\r\n[code lang=\"css\"]\r\n*{\r\n padding:0; margin:0;\r\n}\r\nbody{\r\n background:#222;\r\n}\r\n[\/code]\r\n\r\n[code lang=\"css\"]\r\n#container{\r\nmargin:0 auto;\r\nbackground:#333333;\r\n}\r\n[\/code]\r\n\r\n[code lang=\"css\"]\r\nh2 {\r\ncolor:#000;\r\ntext-shadow:-1px 1px 1px #4A4947;\r\nfont:36px bold Arial, Helvetica, sans-serif;\r\nmargin:0 0 0 0;\r\npadding:0 0 10px 0;\r\n}\r\n[\/code]\r\n\r\n[code lang=\"css\"]\r\np{\r\ntext-shadow:-1px 1px 1px  #4A4947;\r\nfont:bold 18px Arial, Helvetica, sans-serif;\r\ncolor:#000;\r\npadding:0 0 10px 0;\r\nline-height:162.5%;\r\n}\r\n[\/code]\r\n<\/pre>\n<h4>Step #2 Html Structure<\/h4>\n<p>now we create a Simple Html code<\/p>\n<pre>\r\n[code lang=\"htmlstrict\"]\r\n<div id=\"container\">\r\n     <h2>Heading<\/h2>\r\n       <p>\r\n         Et ut ac sociis natoque montes! Porta lundium sed,\r\n         tempor ac porta, parturient turpis. Ac, ut eros egestas,\r\n         adipiscing  penatibus sit lacus mattis parturient, placerat.\r\n      <\/p>\r\n      <p>\r\n         Et ut ac sociis natoque montes! Porta lundium sed,\r\n         tempor ac porta, parturient turpis. Ac, ut eros egestas,\r\n         adipiscing  penatibus sit lacus mattis parturient, placerat.\r\n      <\/p>\r\n<\/div>\r\n[\/code]\r\n<\/pre>\n<h4><a href=\"http:\/\/aceinfowayindia.com\/blog\/ace-tuts\/text-shadow.html\">View Demo<\/a><\/h4>\n<p>Follow us on <a href=\"http:\/\/twitter.com\/ajaydesign\">Twitter<\/a>, or subscribe to the <a href=\"http:\/\/aceinfowayindia.com\/blog\/feed\">Developers Paradise+ RSS Feed<\/a> for the best web development tutorials on the web.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 &hellip; <a href=\"http:\/\/aceinfowayindia.com\/blog\/2010\/03\/how-to-create-inset-text-with-css3\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,56],"tags":[52,23],"class_list":["post-3915","post","type-post","status-publish","format-standard","hentry","category-css","category-tutorials","tag-css","tag-tutorials"],"_links":{"self":[{"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/posts\/3915","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/comments?post=3915"}],"version-history":[{"count":11,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/posts\/3915\/revisions"}],"predecessor-version":[{"id":3928,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/posts\/3915\/revisions\/3928"}],"wp:attachment":[{"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/media?parent=3915"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/categories?post=3915"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/tags?post=3915"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}