{"id":1851,"date":"2018-03-10T14:15:48","date_gmt":"2018-03-10T14:15:48","guid":{"rendered":"http:\/\/thingography.com\/?p=1851"},"modified":"2018-11-06T14:19:16","modified_gmt":"2018-11-06T14:19:16","slug":"css-rainbow","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-rainbow\/","title":{"rendered":"Rainbow Made with Pure CSS"},"content":{"rendered":"<style>\n.ani-box {width: 100%; height: auto; overflow: hidden;}\n#half {\n\twidth: 80%;\n\theight: 85%;\n\tposition: absolute;\n\ttop: 30px;\n\tleft: 50%;\n\tmargin-left: -40%;\n}\n.rainbow  {\n\tmargin: 0px auto 0px auto;\n\twidth: 80%;\n\theight: 150%;\n}\n.red, .orange, .yellow, .green, .blue, .indigo, .violet {\n\tborder-radius: 50%;\n\tposition: absolute;\n\twidth: 100%;\n\theight: 200%;\n\tbackground: transparent;\n}\n\/* ====== Big rainbow is hidden to better show the small rainbow on small screen less than 720px ===== *\/\n@media screen and (max-width: 699px) {\n#half  {visibility: hidden;}\n}\n.red  {\n\tborder: 2% solid #FF0000;\n\ttop: 2%;\n\tleft: 1%;\n\tbox-shadow: 0px 0px 3em 0px red, 0px 0px 4em 0px red inset;\n\twidth: 98%\n}\n.orange  {\n\tborder: 2% solid #FF9900;\n\ttop: 4%;\n\tleft: 2%;\n\tbox-shadow:0px 0px 4em 0px orange, 0px 0px 4em 0px orange inset;\n\twidth: 96%\n}\n.yellow  {\n\tborder: 2% solid yellow;\n\ttop: 6%;\n\tleft: 3%;\n\tbox-shadow:0px 0px 4em 0px yellow, 0px 0px 4em 0px yellow inset;\n\twidth: 94%;\n}\n.green  {\n\tborder: 2% solid #66FF33;\n\ttop: 8%;\n\tleft: 4%;\n\tbox-shadow:0px 0px 4em 0px #66FF33, 0px 0px 4em 0px #66FF33 inset;\n\twidth: 92%;\n}\n.blue  {\n\tborder: 2% solid blue;\n\ttop: 10%;\n\tleft: 5%;\n\tbox-shadow:0px 0px 4em 0px blue, 0px 0px 4em 0px blue inset;\n\twidth: 90%;\n}\n.indigo  {\n\tborder: 2% solid #4b0082;\n\ttop: 12%;\n\tleft: 6%;\n\tbox-shadow:0px 0px 4em 0px #4b0082, 0px 0px 4em 0px #4b0082 inset;\n\twidth: 88%;\n}\n.violet  {\n\tborder: 2% solid #ee82ee;\n\ttop: 14%;\n\tleft: 7%;\n\tbox-shadow:0px 0px 4em 0px #ee82ee, 0px 0px 3em 0px #ee82ee inset;\n\twidth: 86%;\n}\n\/* ===== The Little Rainbow ===== *\/\n.rb2 {\n\tmargin: 0em auto 1em auto;\n\twidth: 225px;\n\theight: 125px;\n\tposition: relative;\n\tz-index: 1000;\n\toverflow: hidden;\n}\n.rainbow2  {\n\tmargin: 30px auto 0px auto;\n\twidth: 200px;\n\theight: 100px;\n\tposition: relative;\n}\n.red2, .orange2, .yellow2, .green2, .blue2, .indigo2, .violet2 {  \/* New Colors needed to make the smaller rainbow colors more definitive  *\/\n\tborder-radius: 50%;\n\tposition: absolute;\n\twidth: 100%;\n\theight: 200%;\n\tbackground: transparent;\n}\n.red2  {\n\tborder: 2% solid #FF0000;\n\ttop: 2%;\n\tleft: 1%;\n\tbox-shadow: 0px 0px 15px 0px red;   \/* box-shadows changed from big rainbow = more defintive colors  *\/\n\twidth: 98%\n}\n.orange2  {\n\tborder: 2% solid #FF9900;\n\ttop: 4%;\n\tleft: 2%;\n\tbox-shadow:0px 0px 15px 0px orange;\n\twidth: 96%\n}\n.yellow2  {\n\tborder: 2% solid yellow;\n\ttop: 6%;\n\tleft: 3%;\n\tbox-shadow:0px 0px 15px 0px yellow;\n\twidth: 94%;\n}\n.green2  {\n\tborder: 2% solid #66FF33;\n\ttop: 8%;\n\tleft: 4%;\n\tbox-shadow:0px 0px 15px 0px #66FF33;\n\twidth: 92%;\n}\n.blue2  {\n\tborder: 2% solid blue;\n\ttop: 10%;\n\tleft: 5%;\n\tbox-shadow:0px 0px 15px 0px blue;\n\twidth: 90%;\n}\n.indigo2  {\n\tborder: 2% solid #4b0082;\n\ttop: 12%;\n\tleft: 6%;\n\tbox-shadow:0px 0px 15px 0px #4b0082;\n\twidth: 88%;\n}\n.violet2  {\n\tborder: 2% solid #ee82ee;\n\ttop: 14%;\n\tleft: 7%;\n\tbox-shadow:0px 0px 15px 0px #ee82ee;\n\twidth: 86%;\n}\n\/*  ===== End Little Rainbow CSS ===== *\/\n\/*  ====== Text in the content ======= *\/\n.panel {\n\tmargin: 120px auto 10px auto;\n\tpadding:  0.5em 1em 2em 1em;\n\twidth: 80%;\n\tdisplay: block;\n\tz-index: 10;\n\tposition: relative;\n\tfont-size: 1em;\n}\n.contentpanel {\n\tpadding: 0em 0.5em 0.5em 0.5em;\n\twidth: 90%; \n\tmargin: 0 auto 2em auto;\n\tcolor: #000000;\n\tfont-size: 1.1em;\n\tletter-spacing: 0.05em;\n\tposition: relative;\n}\n.contentpanel p  {\n\tcolor: #000000;\n\ttext-align: left;\n}\n<\/style>\n<div class=\"ani-box\">\n<div id=\"half\">\n<div class=\"rainbow\">\n<div class=\"red\"><\/div>\n<div class=\"orange\"><\/div>\n<div class=\"yellow\"><\/div>\n<div class=\"green\"><\/div>\n<div class=\"blue\"><\/div>\n<div class=\"indigo\"><\/div>\n<div class=\"violet\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p><!-- Close Half --><\/p>\n<div class=\"panel\">\n<div class=\"rb2\">\n<div class=\"rainbow2\">\n<div class=\"red2\"><\/div>\n<div class=\"orange2\"><\/div>\n<div class=\"yellow2\"><\/div>\n<div class=\"green2\"><\/div>\n<div class=\"blue2\"><\/div>\n<div class=\"indigo2\"><\/div>\n<div class=\"violet2\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <!-- rb2 --><\/p>\n<div class=\"contentpanel\">\n<p>&nbsp;&nbsp;&nbsp; The rainbows on this page are created with pure CSS. (The large background rainbow is hidden on screens less than 699px &#8211; too big to fit nicely on a small screen.)  Using DIV&#8217;s with transparent backgrounds, colored borders, and border-radii allowed for the curved arch. Box-shadows were used to enhance the appearance of the rainbow. Trying to keep the rainbow on the page when the page is resized was my concern.  My solution was to use percentages in the CSS and keep the rainbow in a fixed position.  There are probably a number of methods to achieve the rainbow using pure CSS, this was mine.<\/p>\n<p><\/p>\n<p>&nbsp;&nbsp;&nbsp; The large rainbow will flex with the page size.  The height and width will adjust to be the height and the width of the page. Changing the CSS can adjust the size and shape to the desired appearance. The little rainbow is a fixed size. The HTML and CSS code for both are shown below. Please note any CSS animations created here were made for desktop compurers &#8211; created before &#8220;Mobilegeddon&#8221;, and later quick fixed (to the best of our ability) to fit hand held devices.\n<\/p>\n<p>\n\t<\/div>\n<p> <!-- Close Content Panel --><\/p>\n<\/div>\n<p>\t<!-- Close Panel --><\/p>\n<\/div>\n<p> <!-- Ani-box --><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp;&nbsp;&nbsp; The rainbows on this page are created with pure CSS. (The large background rainbow is hidden on screens less than 699px &#8211; too big to fit nicely on a small screen.) Using DIV&#8217;s with transparent backgrounds, colored borders, and<\/p>\n","protected":false},"author":2,"featured_media":2599,"comment_status":"open","ping_status":"open","sticky":false,"template":"ani-post-single.php","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6,4,5,186],"_links":{"self":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/1851"}],"collection":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/comments?post=1851"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/1851\/revisions"}],"predecessor-version":[{"id":2636,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/1851\/revisions\/2636"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2599"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=1851"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=1851"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=1851"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}