{"id":5910,"date":"2018-10-18T07:04:07","date_gmt":"2018-10-18T07:04:07","guid":{"rendered":"http:\/\/webartdevelopers.com\/?p=5910"},"modified":"2018-10-18T07:04:29","modified_gmt":"2018-10-18T07:04:29","slug":"css-only-notifications-component","status":"publish","type":"post","link":"https:\/\/webartdevelopers.com\/blog\/css-only-notifications-component\/","title":{"rendered":"CSS-ONLY NOTIFICATIONS COMPONENT"},"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>Dami\u00e1n Muti<\/li>\n<li class=\".last-child\"><time>June 10, 2017<\/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 (SCSS) \/ JavaScript<\/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 a Sass mixin that provides\u00a0<strong>notifications<\/strong>\u00a0functionality using little-to-none Javascript. It makes use of\u00a0<strong>CSS<\/strong>transitions and animations to display notifications as popups or bars on different locations of the viewport. The best thing is that it is fully customizable and easy to use.<\/p>\n<p><span class=\"accent\">Compatible browsers:\u00a0<\/span>Chrome, Edge, Firefox, Opera, Safari<\/p>\n<p><span class=\"accent\">Dependencies:\u00a0<\/span>jquery.js<\/p>\n<a href=\"https:\/\/codepen.io\/damianmuti\/share\/zip\/GEZoeG\" 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\/damianmuti\/pen\/GEZoeG\" 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: Dami\u00e1n Muti June 10, 2017 Made with: HTML \/ CSS (SCSS) \/ JavaScript About the code: This is a Sass mixin that provides\u00a0notifications\u00a0functionality using little-to-none Javascript. It makes use of\u00a0CSStransitions and animations to display notifications as popups or bars on different locations of the viewport. The best thing is that it is fully customizable and easy to use. Compatible browsers:\u00a0Chrome, Edge, Firefox, Opera, Safari Dependencies:\u00a0jquery.js<!-- AddThis Advanced Settings generic via filter on get_the_excerpt -->","protected":false},"author":1,"featured_media":5911,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1343],"tags":[20,1345,1349,1347],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/5910"}],"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=5910"}],"version-history":[{"count":1,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/5910\/revisions"}],"predecessor-version":[{"id":5912,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/5910\/revisions\/5912"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media\/5911"}],"wp:attachment":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media?parent=5910"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/categories?post=5910"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/tags?post=5910"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}