{"id":2187,"date":"2017-01-23T00:13:05","date_gmt":"2017-01-23T00:13:05","guid":{"rendered":"http:\/\/cssreset.com\/?p=2187"},"modified":"2017-01-23T00:13:05","modified_gmt":"2017-01-23T00:13:05","slug":"css-tools-cssmatic-generators","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/css-tools-cssmatic-generators\/","title":{"rendered":"CSS Tools: CSSMatic Generators"},"content":{"rendered":"<style type=\"text\/css\"><!--\np.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica; color: #000000; -webkit-text-stroke: #000000}\np.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica; color: #000000; -webkit-text-stroke: #000000; min-height: 13.0px}\nspan.s1 {font-kerning: none}\n--><\/style>\n<p><a href=\"http:\/\/www.cssmatic.com\/\" target=\"_blank\">CSSMatic<\/a> is a generator tool that you can use to create CSS code for gradients, borders, box-shadow, and noise texture\u2026so basically, all the CSS rules that have annoyingly complicated syntaxes that can be hard to remember and even harder to type out. These properties are also very versatile, you can use linear gradients and noise texture as background, borders and border radiuses to change the shape of elements, and box shadow to add dimension to any of your HTML elements. With CSSMatic, the code is created for you using an interactive platform, and the code that\u2019s generated can be copy and pasted into your stylesheets.<\/p>\n<p><a href=\"http:\/\/www.cssmatic.com\/\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft size-large wp-image-2188\" alt=\"Screen Shot 2017-01-23 at 11.16.52 AM\" src=\"https:\/\/cssdeck.com\/blog\/\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-23-at-11.16.52-AM-1024x288.png\" width=\"1024\" height=\"288\" srcset=\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-23-at-11.16.52-AM-1024x288.png 1024w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-23-at-11.16.52-AM-300x84.png 300w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-23-at-11.16.52-AM-180x50.png 180w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-23-at-11.16.52-AM.png 1152w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/p>\n<p>Not only does this generator make your life easier as a developer, but if you\u2019re just learning CSS, it\u2019s also a really good way to understand the foundations of these properties. Some of these properties, especially the ones that have a lot of variables, like gradients and box shadows, can be difficult to fully understand without seeing them in action. With the CSSMatic, you can actually play around with different values and see the results unfold in front of you quickly and easily, which is a great way to gain full understanding of the concepts.<\/p>\n<div class=\"wp-socializer wpsr-share-icons \" data-lg-action=\"show\" data-sm-action=\"show\" data-sm-width=\"768\" ><h3>Share and Enjoy !<\/h3><div class=\"wpsr-si-inner\"><div class=\"wpsr-counter wpsrc-sz-32px\" style=\"color:#000\"><span class=\"scount\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook,twitter,linkedin,pinterest,print,pdf\">0<\/span><\/span><small class=\"stext\">Shares<\/small><\/div><div class=\"socializer sr-popup sr-32px sr-circle sr-opacity sr-pad sr-count-1 sr-count-1\"><span class=\"sr-facebook\"><a rel=\"nofollow\" href=\"https:\/\/www.facebook.com\/share.php?u=\" target=\"_blank\"  title=\"Share this on Facebook\"  style=\"color: #ffffff\" ><i class=\"fab fa-facebook-f\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-twitter\"><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/intent\/tweet?text=%20-%20%20\" target=\"_blank\"  title=\"Tweet this !\"  style=\"color: #ffffff\" ><i class=\"fab fa-twitter\"><\/i><\/a><\/span>\n<span class=\"sr-linkedin\"><a rel=\"nofollow\" href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=\" target=\"_blank\"  title=\"Add this to LinkedIn\"  style=\"color: #ffffff\" ><i class=\"fab fa-linkedin-in\"><\/i><\/a><\/span>\n<span class=\"sr-pinterest\"><a rel=\"nofollow\" href=\"https:\/\/www.pinterest.com\/pin\/create\/button\/?url=&amp;media=&amp;description=\" target=\"_blank\"  title=\"Submit this to Pinterest\"  style=\"color: #ffffff\" data-pin-custom=\"true\"><i class=\"fab fa-pinterest\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"pinterest\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-print\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Print this article \"  style=\"color: #ffffff\" ><i class=\"fa fa-print\"><\/i><\/a><\/span>\n<span class=\"sr-pdf\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Convert to PDF\"  style=\"color: #ffffff\" ><i class=\"fa fa-file-pdf\"><\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>CSSMatic is a generator tool that you can use to create CSS code for gradients, borders, box-shadow, and noise texture\u2026so basically, all the CSS rules that have annoyingly complicated syntaxes that can be hard to remember and even harder to [&#8230;]<\/p>\n<p><a class=\"more-link article\" href=\"https:\/\/cssdeck.com\/blog\/css-tools-cssmatic-generators\/\" title=\"Click to read 'CSS Tools: CSSMatic Generators'\">Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":2188,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[36],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2187"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=2187"}],"version-history":[{"count":1,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2187\/revisions"}],"predecessor-version":[{"id":2189,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2187\/revisions\/2189"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/2188"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=2187"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=2187"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=2187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}