{"id":7521,"date":"2018-11-04T12:28:54","date_gmt":"2018-11-04T12:28:54","guid":{"rendered":"http:\/\/webartdevelopers.com\/?p=7521"},"modified":"2020-02-11T11:58:27","modified_gmt":"2020-02-11T11:58:27","slug":"cold-hot-toggle-switch","status":"publish","type":"post","link":"https:\/\/webartdevelopers.com\/blog\/cold-hot-toggle-switch\/","title":{"rendered":"COLD-HOT TOGGLE SWITCH"},"content":{"rendered":"<div class=\"info-box\">\n<div class=\"info info-author\">\n<h4><em><span style=\"text-decoration: underline;\"><strong>Author:<\/strong><\/span><\/em><\/h4>\n<ul>\n<li>Jon Kantner<\/li>\n<li class=\".last-child\"><time>June 8, 2018<\/time><\/li>\n<\/ul>\n<\/div>\n<div class=\"info info-link\"><\/div>\n<div class=\"info info-frontend\">\n<h4><em><span style=\"text-decoration: underline;\"><strong>Made with:<\/strong><\/span><\/em><\/h4>\n<ul>\n<li class=\".last-child\">HTML \/ CSS<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<h4 class=\"about-the-item\"><em><span style=\"text-decoration: underline;\"><strong>About the code:<\/strong><\/span><\/em><\/h4>\n<p>This is probably a very cool and amazing <strong>toggle switch<\/strong>\u00a0concept that no one has tried before. This one is for temperature\u2014options being cold or hot. The idea is to portray the handle as an ice cube for cold and a flame for hot. For hot, the cube moves right and melts at the same time, and a rising flame moves along with it. For cold again, the water forms back into a cube while moving left, and the flame dies while moving with it.<\/p>\n<p><span class=\"accent\"><em><strong>Compatible browsers:<\/strong><\/em>\u00a0<\/span>Chrome, Firefox, Opera, Safari<\/p>\n<p><span class=\"accent\"><em><strong>Dependencies:<\/strong><\/em>\u00a0<\/span>&#8211;<\/p>\n<a href=\"https:\/\/codepen.io\/jkantner\/share\/zip\/XYNONw\" 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<a href=\"https:\/\/codepen.io\/jkantner\/pen\/XYNONw\" 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: Jon Kantner June 8, 2018 Made with: HTML \/ CSS About the code: This is probably a very cool and amazing toggle switch\u00a0concept that no one has tried before. This one is for temperature\u2014options being cold or hot. The idea is to portray the handle as an ice cube for cold and a flame for hot. For hot, the cube moves right and melts at the same time, and a rising flame moves along with it. For cold again, the water forms back into a cube while moving left, and the flame dies while moving with it. Compatible browsers:\u00a0Chrome, Firefox, Opera, Safari Dependencies:\u00a0&#8211;<!-- AddThis Advanced Settings generic via filter on get_the_excerpt -->","protected":false},"author":1,"featured_media":7526,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1896],"tags":[1900,20,1898],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/7521"}],"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=7521"}],"version-history":[{"count":2,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/7521\/revisions"}],"predecessor-version":[{"id":19462,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/7521\/revisions\/19462"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media\/7526"}],"wp:attachment":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media?parent=7521"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/categories?post=7521"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/tags?post=7521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}