{"id":23,"date":"2008-02-08T02:01:26","date_gmt":"2008-02-08T08:01:26","guid":{"rendered":"http:\/\/cssnewbie.com\/elsewhere\/great-links-from-the-week-of-february-01-to-february-08\/"},"modified":"2008-02-08T02:01:26","modified_gmt":"2008-02-08T08:01:26","slug":"great-links-from-the-week-of-february-01-to-february-08","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/great-links-from-the-week-of-february-01-to-february-08\/","title":{"rendered":"Great Links from the Week of February 01 to February 08"},"content":{"rendered":"<div class=\"magnolia_post xfolkentry\">\n<h4><a class=\"taggedlink\" href=\"http:\/\/cssglobe.com\/post\/1272\/pure-css-data-chart\">Pure Css Data Chart | Css Globe<\/a><\/h4>\n<p><a class=\"taggedlink\" href=\"http:\/\/cssglobe.com\/post\/1272\/pure-css-data-chart\"><\/a><\/p>\n<div class=\"description\">In this great article from CSS Globe, Alen Grakalic explains how to create a very attractive bar chart using nothing but a XHTML definition list and a whole lot of CSS. There is plenty of detailed instruction and images along the way, so it&#8217;s fairly easy to follow along. While this probably isn&#8217;t the most practical way of going about creating a bar chart &#8212; I would have probably at least resorted to Javascript to help out &#8212; it is a fantastic example of thinking outside of the box (box model?) and showing how versatile CSS really is.<\/div>\n<p class=\"tags\">Tags: css, data, chart<\/p>\n<h4>Span-Free Gradient Text Effect<\/h4>\n<div class=\"description\">Sam Rayner expands on Nick La&#8217;s article describing how to create a nice gradient text effect (letters fade from light to dark, top to bottom) using CSS and a PNG. Mr. Rayner&#8217;s contribution removes the extra non-semantic &lt;span&gt; tag from the code and makes clever use of the :after pseudo-element. However, Mr. Rayner&#8217;s version does not work in IE6 or IE7, so if you need your gradients to show up across all browsers, you&#8217;re better off learning Mr. La&#8217;s technique.<\/div>\n<p class=\"tags\">Tags: css, text, gradient, pseudo-element<\/p>\n<h4><a class=\"taggedlink\" href=\"http:\/\/jontangerine.com\/log\/2007\/09\/the-incredible-em-and-elastic-layouts-with-css\">The Incredible Em &#038; Elastic Layouts with CSS<\/a><\/h4>\n<p><a class=\"taggedlink\" href=\"http:\/\/jontangerine.com\/log\/2007\/09\/the-incredible-em-and-elastic-layouts-with-css\"><\/a><\/p>\n<div class=\"description\">Jon Tan(gerine) has posted a fantastically well-written and detailed article on the art (and science!) of laying out a website using ems instead of pixels. Even if you&#8217;re not ready to tackle such a layout (it is, admittedly, more complicated than using pixels), this article provides a detailed understanding of how ems function as a unit of measurement on the screen.<\/div>\n<p class=\"tags\">Tags: css, ems, measurement, layout<\/p>\n<\/div>\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>Pure Css Data Chart | Css Globe<\/p>\n<p>In this great article from CSS Globe, Alen Grakalic explains how to create a very attractive bar chart using nothing but a XHTML definition list and a whole lot of CSS. There is plenty [&#8230;]<\/p>\n<p><a class=\"more-link article\" href=\"https:\/\/cssdeck.com\/blog\/great-links-from-the-week-of-february-01-to-february-08\/\" title=\"Click to read 'Great Links from the Week of February 01 to February 08'\">Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[167],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/23"}],"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=23"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/23\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=23"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=23"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=23"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}