{"id":3086,"date":"2009-12-16T14:08:15","date_gmt":"2009-12-16T14:08:15","guid":{"rendered":"http:\/\/aceinfowayindia.com\/blog\/?p=3086"},"modified":"2018-06-01T20:05:23","modified_gmt":"2018-06-01T20:05:23","slug":"5-awesome-css3-features","status":"publish","type":"post","link":"http:\/\/aceinfowayindia.com\/blog\/2009\/12\/5-awesome-css3-features\/","title":{"rendered":"5 Awesome CSS3 Features"},"content":{"rendered":"

Many exciting new functions and features are being thought up for CSS3. We will try and showcase some of them on this page. So, have a look at these 5 Awesome CSS3 Features and let us know your thoughts in comment.<\/p>\n

<\/p>\n

Here is the useful css3 tips. I hope that, you will find a quite useful inspiration for your next design project. Thanks!<\/p>\n

[ad#co-1]<\/p>\n

1. Rounded Corner<\/h4>\n

You don’t have to have image for each corner. It can now render itself!<\/p>\n

Example :<\/strong>
\n\"rounded-corner\"<\/a><\/p>\n

Code<\/strong><\/p>\n

\r\n[code lang=\"css\"]\r\n.Box {\r\nbackground-color: #6b6b6b;\r\n-moz-border-radius: 7px;\r\n-webkit-border-radius: 7px;\r\nborder: 1px solid #000;\r\npadding: 10px;\r\nwidth:500px;\r\ncolor:#fff;\r\n}\r\n[\/code]\r\n<\/pre>\n
2. Text Shadow<\/h4>\n
Learn how to add shadows to text. The only web browser which supports the CSS3 text-shadow<\/strong> property is Safari. <\/p>\n
Example:<\/strong>
\n\"text-shadow\"<\/a><\/p>\n
Code:<\/strong><\/p>\n
\r\n[code lang=\"css\"]\r\nh1 {\r\ntext-shadow:#9c9c9c 2px 2px 2px;\r\ncolor:#993333;\r\n}\r\n[\/code]\r\n<\/pre>\n
3. Border Image<\/h4>\n
Another exciting new border feature of CSS3 is the property border-image. Learn how to properly use Image<\/p>\n
\"border-mage\"<\/a><\/p>\n
4. Using Any Custom Font<\/h4>\n
CSS 3 can read a font file if you specify the path, and then it can render the text that you apply the CSS class or id<\/p>\n
\"custom-font\"<\/a><\/p>\n
5. Multiple Backgrounds<\/h4>\n
Finally you can apply more than one background the one element.<\/p>\n
\"multiple-background\"<\/a><\/p>\n
A good place to check out some awesome css3 features is a website named CSS3.info<\/a>.<\/p>\n
if you would like to receive more inspiration from us, please consider subscribing to our feed by RSS or by email.<\/p>\n","protected":false},"excerpt":{"rendered":"
Many exciting new functions and features are being thought up for CSS3. We will try and showcase some of them on this page. So, have a look at these 5 Awesome CSS3 Features and let us know your thoughts in … Continue reading →<\/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-3086","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\/3086","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=3086"}],"version-history":[{"count":18,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/posts\/3086\/revisions"}],"predecessor-version":[{"id":3148,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/posts\/3086\/revisions\/3148"}],"wp:attachment":[{"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/media?parent=3086"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/categories?post=3086"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/aceinfowayindia.com\/blog\/wp-json\/wp\/v2\/tags?post=3086"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}