{"id":3,"date":"2010-05-31T00:41:23","date_gmt":"2010-05-31T00:41:23","guid":{"rendered":"http:\/\/css3pie.com\/wp\/?page_id=3"},"modified":"2013-01-24T04:44:12","modified_gmt":"2013-01-24T04:44:12","slug":"home","status":"publish","type":"page","link":"http:\/\/css3pie.com\/","title":{"rendered":"CSS3 PIE"},"content":{"rendered":"\r\n<div id=\"intro\">\r\n    <p class=\"text\"><strong>PIE<\/strong> makes Internet Explorer 6-9 capable of rendering several of the most useful <strong>CSS3<\/strong> decoration features.<\/p>\r\n    <p class=\"more\"><a href=\"about\/\">Learn More<\/a><\/p>\r\n<\/div>\r\n\r\n<h2>Try the <strong>Demo<\/strong><\/h2>\r\n<p>This quick demo shows just a few of the CSS3 properties PIE can render. Use the controls to adjust the CSS3 applied to the box. Load this page in IE to see that it is rendered properly!<\/p>\r\n\r\n    <div id=\"demo\">\r\n\r\n        <div id=\"target\">\r\n            Mmmmm, pie.\r\n        <\/div>\r\n\r\n        <div id=\"controls\">\r\n            <fieldset id=\"featureControls\">\r\n                <legend>CSS3 features<\/legend>\r\n\r\n                <fieldset>\r\n                    <legend>border-radius<\/legend>\r\n\r\n                    <div class=\"toggle\">\r\n                        <input type=\"checkbox\" id=\"borderRadiusToggle\" class=\"featureToggle\" checked=\"checked\" \/>\r\n                        <label for=\"borderRadiusToggle\">Enable<\/label>\r\n                    <\/div>\r\n\r\n                    <div class=\"details\">\r\n                        <label for=\"borderRadiusSize\">Radius size:<\/label>\r\n                        <input type=\"text\" id=\"borderRadiusSize\" value=\"8\" size=\"3\" \/>\r\n                    <\/div>\r\n                <\/fieldset>\r\n\r\n                <fieldset>\r\n                    <legend>box-shadow<\/legend>\r\n\r\n                    <div class=\"toggle\">\r\n                        <input type=\"checkbox\" id=\"boxShadowToggle\" class=\"featureToggle\" checked=\"checked\" \/>\r\n                        <label for=\"boxShadowToggle\">Enable<\/label>\r\n                    <\/div>\r\n\r\n                    <div class=\"details\">\r\n                        <label for=\"boxShadowBlur\">Blur size:<\/label>\r\n                        <input type=\"text\" id=\"boxShadowBlur\" value=\"3\" size=\"3\" \/>\r\n\r\n                        <label for=\"boxShadowX\">X offset:<\/label>\r\n                        <input type=\"text\" id=\"boxShadowX\" value=\"0\" size=\"3\" \/>\r\n\r\n                        <label for=\"boxShadowY\">Y offset:<\/label>\r\n                        <input type=\"text\" id=\"boxShadowY\" value=\"2\" size=\"3\" \/>\r\n                    <\/div>\r\n\r\n                <\/fieldset>\r\n\r\n                <fieldset>\r\n                    <legend>linear-gradient<\/legend>\r\n\r\n                    <div class=\"toggle\">\r\n                        <input type=\"checkbox\" id=\"gradientToggle\" class=\"featureToggle\" checked=\"checked\" \/>\r\n                        <label for=\"gradientToggle\">Enable<\/label>\r\n                    <\/div>\r\n\r\n                    <div class=\"details\">\r\n                        <label for=\"gradientColor1\">Top color:<\/label>\r\n                        <input type=\"text\" class=\"color\" id=\"gradientColor1\" value=\"#EEFF99\" size=\"7\" \/>\r\n\r\n                        <label for=\"gradientColor2\">Bottom color:<\/label>\r\n                        <input type=\"text\" class=\"color\" id=\"gradientColor2\" value=\"#66EE33\" size=\"7\" \/>\r\n                    <\/div>\r\n                <\/fieldset>\r\n            <\/fieldset>\r\n            \r\n            <fieldset id=\"pieControls\">\r\n                <legend>Options<\/legend>\r\n                <ul>\r\n                    <li>\r\n                        <input type=\"checkbox\" id=\"pieToggle\" checked=\"checked\" \/>\r\n                        <label for=\"pieToggle\">Enable PIE (only affects IE)<\/label>\r\n                    <\/li>\r\n                    <li>\r\n                        <input type=\"checkbox\" id=\"codeToggle\" \/>\r\n                        <label for=\"codeToggle\">Show CSS<\/label>\r\n                    <\/li>\r\n                <\/ul>\r\n            <\/fieldset>\r\n        <\/div>\r\n\r\n        <code id=\"output\">\r\n            \r\n        <\/code>\r\n    <\/div>\r\n    <p class=\"more\"><a href=\"demos\/\">See More<\/a><\/p>\r\n\r\n","protected":false},"excerpt":{"rendered":"<p>PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features. Learn More Try the Demo This quick demo shows just a few of the CSS3 properties PIE can render. Use the controls to adjust the CSS3 applied to the box. Load this page in IE to see that it [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":[],"_links":{"self":[{"href":"http:\/\/css3pie.com\/wp-json\/wp\/v2\/pages\/3"}],"collection":[{"href":"http:\/\/css3pie.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/css3pie.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/css3pie.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/css3pie.com\/wp-json\/wp\/v2\/comments?post=3"}],"version-history":[{"count":0,"href":"http:\/\/css3pie.com\/wp-json\/wp\/v2\/pages\/3\/revisions"}],"wp:attachment":[{"href":"http:\/\/css3pie.com\/wp-json\/wp\/v2\/media?parent=3"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}