{"id":21621,"date":"2020-07-09T07:02:27","date_gmt":"2020-07-09T07:02:27","guid":{"rendered":"https:\/\/webartdevelopers.com\/blog\/?p=21621"},"modified":"2020-07-09T07:07:48","modified_gmt":"2020-07-09T07:07:48","slug":"tab-controls-using-html-and-css","status":"publish","type":"post","link":"https:\/\/webartdevelopers.com\/blog\/tab-controls-using-html-and-css\/","title":{"rendered":"TAB CONTROLS USING HTML AND CSS"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\"><strong><span style=\"text-decoration: underline;\"><em>Author:<\/em><\/span><\/strong><\/h4>\n\n\n\n<ul><li>Nicolas Bevacqua<\/li><li>October 18, 2013<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><span style=\"text-decoration: underline;\"><em>Made with:<\/em><\/span><\/strong><\/h4>\n\n\n\n<ul><li>HTML (Pug) \/ CSS (Stylus)<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><span style=\"text-decoration: underline;\"><em>About the code:<\/em><\/span><\/strong><\/h4>\n\n\n\n<p>This is an amazing and simple CSS Tabs Animation. Clicking on the labels is effectively the same as clicking on the input boxes. The radio inputs are hidden with CSS. When a radio is selected, their curious tab content neighbors show up. That&#8217;s it! The only drawback is you won&#8217;t be able to style the selected tab without resorting to some JS, but that shouldn&#8217;t be a very big deal.<\/p>\n\n\n\n<p><strong><em>Compatible browsers:<\/em><\/strong> Chrome, Edge, Firefox, Opera, Safari<\/p>\n\n\n\n<p><strong><em>Responsive:<\/em><\/strong> Yes<\/p>\n\n\n\n<p><strong><em>Dependencies:<\/em><\/strong> &#8211;<\/p>\n\n\n<a href=\"https:\/\/codepen.io\/bevacqua\/share\/zip\/qxnDw\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Download<\/span><\/a>\n\n\n<a href=\"https:\/\/codepen.io\/bevacqua\/pen\/qxnDw\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Demo and Code<\/span><\/a>\n<!-- AddThis Advanced Settings generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"Author: Nicolas Bevacqua October 18, 2013 Made with: HTML (Pug) \/ CSS (Stylus) About the code: This is an amazing and simple CSS Tabs Animation. Clicking on the labels is effectively the same as clicking on the input boxes. The radio inputs are hidden with CSS. When a radio is selected, their curious tab content neighbors show up. That&#8217;s it! The only drawback is you won&#8217;t be able to style the selected tab without resorting to some JS, but that shouldn&#8217;t be a very big deal. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: Yes Dependencies: &#8211;<!-- AddThis Advanced Settings generic via filter on get_the_excerpt -->","protected":false},"author":1,"featured_media":21622,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2481],"tags":[20,2483,6048,2197],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/21621"}],"collection":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/comments?post=21621"}],"version-history":[{"count":1,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/21621\/revisions"}],"predecessor-version":[{"id":21623,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/21621\/revisions\/21623"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media\/21622"}],"wp:attachment":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media?parent=21621"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/categories?post=21621"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/tags?post=21621"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}