{"id":150,"date":"2020-06-01T09:10:40","date_gmt":"2020-06-01T08:10:40","guid":{"rendered":"https:\/\/csee.bangor.ac.uk\/?p=150"},"modified":"2020-06-01T09:10:40","modified_gmt":"2020-06-01T08:10:40","slug":"pure-css-rainbows","status":"publish","type":"post","link":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/01\/pure-css-rainbows\/","title":{"rendered":"Pure CSS Rainbows"},"content":{"rendered":"\n<!-- Custom post code :: Pure CSS Rainbows -->\n<!-- Adds prettyprint for code snippets -->\n\n  code { background-color: rgba(0,0,0,.05); }\n  .linenums { color: #aaa; }\n  .linenums li {\n    list-style-type: decimal !important;\n    font-size: 12pt;\n    margin-top: 0px;\n  }\n  .linenums li:nth-child(even) { background: transparent !important; }\n  .wp-block-image { text-align: center !important; }\n  .wp-block-image img { display: inline; }\n\n\n\n\n\n<p>In <a href=\"https:\/\/csee.bangor.ac.uk\/category\/project-rainbow\/\">Cameron&#8217;s earlier post<\/a> we learned how to create an animated rainbow with D3.js and SVG. What if I told you it was possible to create an animated rainbow without any JavaScript at all? In this guide you will learn how to create an animated rainbow using only HTML and CSS.<\/p>\n\n\n\n<p>To jump straight into the final code, remix the <a href=\"https:\/\/codepen.io\/pbutcher\/pen\/XWmBwYz\">demo on Codepen<\/a>.<\/p>\n\n\n\n<p>Here&#8217;s what we&#8217;ll be creating:<\/p>\n\n\n\n<p class=\"codepen\" data-height=\"465\" data-theme-id=\"dark\" data-default-tab=\"result\" data-user=\"pbutcher\" data-slug-hash=\"XWmBwYz\" style=\"height: 465px;align-items: center;justify-content: center;border: 2px solid;margin: 1em 0;padding: 1em\" data-pen-title=\"Project Rainbow: Pure CSS Rainbows (Single element)\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/pbutcher\/pen\/XWmBwYz\">\n  Project Rainbow: Pure CSS Rainbows (Single element)<\/a> by Peter Butcher (<a href=\"https:\/\/codepen.io\/pbutcher\">@pbutcher<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n\n\n\n\n<h2 class=\"wp-block-heading\">What is CSS?<\/h2>\n\n\n\n<p><strong>Cascading<\/strong>&nbsp;<strong>Style<\/strong>&nbsp;<strong>Sheets<\/strong>&nbsp;(CSS) are responsible for adding colour, format and fonts to our webpages, and so much more. Powering this flamboyance is a feature rich language, which amongst other things, allows us to create fast and fluid, hardware accelerated animations and transitions.<\/p>\n\n\n\n<p>Typical use cases for CSS transitions are user interactions on buttons, pull out menus and animations (spinners\/loaders) to let a user know that their content is loading. The latter is a possible real-world application for what we are about to create. Mainly though, this is just a bit of fun to demonstrate some of the capabilities of CSS that you might not be aware of.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Getting Started<\/h2>\n\n\n\n<p>We are going to be using a <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/CSS_preprocessor\">CSS preprocessor<\/a> called <a href=\"https:\/\/sass-lang.com\/\">Sass<\/a> (Syntactically Awesome Style Sheets). Sass like most other CSS preprocessors provides additional syntax features, making it easier to create more complex effects in CSS. Sass requires a compilation step to generate CSS that the browser can understand. Therefore it is normally necessary to integrate it into your build pipeline. There are a few ways to integrate Sass into your projects, including the <a href=\"https:\/\/npmjs.org\/node-sass\">node-sass<\/a> NPM package if you prefer to work offline, or low-friction online IDEs which support Sass out of the box such as <a href=\"https:\/\/codepen.io\/pen\/\">CodePen<\/a>.<\/p>\n\n\n\n<p>For this tutorial we will use CodePen to create our rainbow animation.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Create a new Pen<\/h3>\n\n\n\n<p>First we need to create a new Pen and tell CodePen to interpret our CSS as Sass so that it knows to compile it before presenting our output to us. You can either use <a href=\"https:\/\/codepen.io\/pen?template=RwWYgER\">this pre-made template<\/a> or follow these instructions:<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/codepen.io\/pen\">Create a new Pen<\/a><\/li><li>Click the settings cog at the top of the CSS panel.<\/li><li>From the CSS Preprocessor drop-down menu, choose SCSS.<\/li><\/ul>\n\n\n\n<p>You&#8217;re ready to go!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: HTML<\/h3>\n\n\n\n<p>We&#8217;ll start off by writing two lines of HTML, the only two lines we&#8217;ll need to create both of our rainbows.<\/p>\n\n\n\n<p>Go ahead and open up the HTML panel of your Pen and add the following two lines of code:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted prettyprint linenums\">&lt;figure class=\"rainbow bands\"&gt;&lt;\/figure&gt;\n&lt;figure class=\"rainbow smooth\"&gt;&lt;\/figure&gt;<\/pre>\n\n\n\n<p>Each of our rainbows will be rendered inside these <code>&lt;figure&gt;<\/code> elements. We have defined the following classes which will allow us to add custom properties to each of our figure elements:<\/p>\n\n\n\n<ul><li><code>rainbow<\/code> Render a rainbow<\/li><li><code>bands<\/code> Give a rainbow individual colour bands<\/li><li><code>smooth<\/code> Give a rainbow a colour gradient<\/li><\/ul>\n\n\n\n<p>By combining these classes together we can define both types of rainbow.<\/p>\n\n\n\n<p>That&#8217;s it for the HTML!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: CSS Boilerplate<\/h3>\n\n\n\n<p>Next we need to set up our scene. To do that we need to set a few properties of the page itself. CodePen adds our code to an HTML page before rendering the output. The basic structure that it generates looks like this:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted prettyprint linenums\">&lt;html&gt;\n  &lt;head&gt;\n    &lt;!-- Our CSS is inserted here by CodePen --&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;!-- Our HTML is inserted here by CodePen --&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n\n\n\n<p>We therefore need to add some CSS to style the <code>&lt;html&gt;<\/code> and <code>&lt;body&gt;<\/code> elements because they contain our content and we want to control how those look on our page. Add the following to your CSS:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted prettyprint linenums\">html, body {\n  margin: 0px;\n  height: 100%;\n}\n\nbody {\n  display: flex;\n  justify-content: space-evenly;\n  align-items: center;\n  flex-flow: row wrap;\n  background-color: $background-colour;\n}<\/pre>\n\n\n\n<p>The first CSS code block targets the <code>&lt;html&gt;<\/code> and <code>&lt;body&gt;<\/code> elements and sets some mutual properties for both. It removes a small margin around the edge of our page that we do not normally want and ensures the elements containing our HTML code will fill the whole height of our browser window.<\/p>\n\n\n\n<p>The second CSS code block only targets the <code>&lt;body&gt;<\/code> element. This block specifies that we would like to use the Flexbox Layout (<code>display: flex<\/code>) module on our page. Flexbox lets us lay out and align items on our page in a more <em>&#8220;flexible&#8221;<\/em> way, distributing space around or between items more efficiently. In this case we want to allocate an equal spacing around and between each of our rainbows and so we will use <code>justify-content: space-evenly<\/code> to split the remaining available space between each of our items horizontally. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/pure-css-rainbows-flex-1.png\" alt=\"Space-Evenly Flexbox\" class=\"wp-image-216\" width=\"360\" height=\"100\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/pure-css-rainbows-flex-1.png 363w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/pure-css-rainbows-flex-1-300x83.png 300w\" sizes=\"(max-width: 360px) 100vw, 360px\" \/><figcaption>This is what happens to items inside a <code>flex<\/code> container when we use <code>justify-content: space-evenly<\/code> [<a href=\"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\">Source<\/a>]<\/figcaption><\/figure>\n\n\n\n<p>To place our rainbows in the centre of our screen vertically we need to use <code>align-items: center<\/code>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/pure-css-rainbows-flex-2.png\" alt=\"Center Flexbox\" class=\"wp-image-229\" width=\"183\" height=\"151\" \/><figcaption>This is what happens to items inside a <code>flex<\/code> container when we use <code>align-items: center<\/code> [<a href=\"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\">Source<\/a>]<\/figcaption><\/figure>\n\n\n\n<p>To allow our rainbows to wrap underneath each other (like text) when the screen becomes too narrow to fit them both on one line we can specify the <code>flex-wrap: wrap<\/code> CSS rule. Lastly we encounter our first piece of Sass syntax when we are setting the <code>background-color<\/code> property of our page. See the next step for an explainer on what&#8217;s happening here. For further information on Flexbox, refer to <a href=\"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/\">this handy guide<\/a> by CSS Tricks.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: SCSS Variables<\/h3>\n\n\n\n<p>The latest version of CSS (version 3) now supports variables. A variable is a reference to a value that you can use throughout your code:<\/p>\n\n\n\n<pre class=\"wp-block-code prettyprint linenums\"><code>:root {\n  --rainbow-diameter: 300px;\n}\n\n.rainbow {\n  width: var(--rainbow-diameter);\n}<\/code><\/pre>\n\n\n\n<p>Our CSS pre-processor has a different way of specifying variables and this is how we will specify variables in our Pen:<\/p>\n\n\n\n<pre class=\"wp-block-code prettyprint linenums\"><code>$rainbow-diameter: 300px;\n\n.rainbow {\n  width: $rainbow-diameter;\n}<\/code><\/pre>\n\n\n\n<p>In SCSS, each variable is defined with the <code>$<\/code> symbol and can be globally scoped (as above) or block scoped (inside a CSS declaration block <code>{ }<\/code>).<\/p>\n\n\n\n<p>We are going to need global variables for the following properties of our rainbow animation:<\/p>\n\n\n\n<ul><li>Rainbow diameter <em>(total width of each rainbow arc)<\/em><\/li><li>Rainbow thickness <em>(distance from inside to outside of rainbow arc)<\/em><\/li><li>Animation duration <em>(how long our animation will last on each cycle)<\/em><\/li><li>Background colour <em>(the background colour of our scene)<\/em><\/li><li>Rainbow filter <em>(post-processing filters to improve the visual appearance of our rainbows)<\/em><\/li><li>Rainbow opacity <em>(transparency factor of our rainbow)<\/em><\/li><li>Rainbow colours <em>(a list of each of the colours of the rainbow)<\/em><\/li><\/ul>\n\n\n\n<p>At the top of your CSS add the following code:<\/p>\n\n\n\n<pre class=\"wp-block-code prettyprint linenums\"><code>\/* Variables (Play with these) *\/\n$rainbow-diameter: 300px;\n$rainbow-thickness: 60px;\n$animation-duration: 6s;\n$background-colour: #1A3256;\n$rainbow-filter: hue-rotate(-15deg) contrast(95%);\n$rainbow-opacity: 1;\n$rainbow-colours:   \n  #FF0000, \/\/ red\n  #FF7F00, \/\/ orange\n  #FFFF00, \/\/ yellow\n  #00FF00, \/\/ green\n  #0000FF, \/\/ blue\n  #4B0082, \/\/ indigo\n  #9400D3; \/\/ violet<\/code><\/pre>\n\n\n\n<p>Once we have completed the tutorial, you will be able to modify these variables to fine tune your rainbows.<\/p>\n\n\n\n<p>We will also need 2 more variables which use some of the variables we have already created. These are mainly for convenience later on and shouldn&#8217;t be changed:<\/p>\n\n\n\n<ul><li>Rainbow radius (half of our rainbow diameter)<\/li><li>Colour band width (width of each colour band of our rainbow)<\/li><\/ul>\n\n\n\n<p>Add the following 3 lines of code under the current set of variables:<\/p>\n\n\n\n<pre class=\"wp-block-code prettyprint linenums\"><code>\/* Leave these alone *\/\n$rainbow-radius: $rainbow-diameter \/ 2;\n$colour-band-width: $rainbow-thickness \/ length($rainbow-colours);<\/code><\/pre>\n\n\n\n<p>The <code>$colour-band-width<\/code> variable uses the SCSS <code>length()<\/code> function to return the number of elements in a list. In this case the returned length will be 7 (the number of colours in our <code>$rainbow-colours<\/code> variable). This variable is important because it stipulates how thick each of our rainbow colour bands needs to be.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 5: Mixins<\/h3>\n\n\n\n<p>Now that we have defined all of our global variables we can begin to draw our rainbows using the properties we have defined. In the demo at the top of this page you can see two styles of rainbow. The first has solid bands of colour and the second is a smooth radial colour gradient. Both of these styles are considered gradients in CSS and are created in much the same way. Instead of hard coding each style of gradient we will write a special function called a mixin which can be used later on in our code to draw the rainbow in our scene.<\/p>\n\n\n\n<p>First we will construct a mixin called <code>rainbowGradient<\/code>. Much like functions in other programming languages, mixins can accept arguments and so ours will accept an argument <code>$type<\/code> (the type of rainbow, either <code>bands<\/code> or <code>smooth<\/code>).<\/p>\n\n\n\n<p>Add the following code under your variables:<\/p>\n\n\n\n<pre class=\"wp-block-code prettyprint linenums\"><code>\/* Generate a rainbow gradient *\/\n@mixin rainbowGradient($type) {\n  \/\/ Generate rainbow gradient here\n}<\/code><\/pre>\n\n\n\n<p>This is where we will write our code to generate each of the rainbow gradient types. It will return a set of CSS properties including a <code>background<\/code> property with our rainbow gradient.<\/p>\n\n\n\n<p>To use a mixin you use the <code>@include<\/code> directive inside a declaration block to inject the properties it generates. We will do this later. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 6: CSS Gradients<\/h3>\n\n\n\n<p>There are two types of colour gradients available in CSS:<\/p>\n\n\n\n<ul><li>Linear gradients (up, down, left, right or diagonally)<\/li><li>Radial gradients (from a central position outwards)<\/li><\/ul>\n\n\n\n<p>To generate a simple rainbow texture in CSS we can use either of these two methods:<\/p>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\"><div class=\"wp-block-group__inner-container\"><\/div><\/div>\n<\/div><\/div>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-17.42.54.png\" alt=\"Linear gradient\" class=\"wp-image-606\" width=\"328\" height=\"114\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-17.42.54.png 804w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-17.42.54-300x104.png 300w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-17.42.54-768x267.png 768w\" sizes=\"(max-width: 328px) 100vw, 328px\" \/><figcaption>A rainbow as a linear CSS gradient<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-17.42.21.png\" alt=\"Radial gradient\" class=\"wp-image-607\" width=\"331\" height=\"116\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-17.42.21.png 806w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-17.42.21-300x105.png 300w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-17.42.21-768x269.png 768w\" sizes=\"(max-width: 331px) 100vw, 331px\" \/><figcaption>A rainbow as a radial CSS gradient<\/figcaption><\/figure>\n\n\n\n<p>For this exercise we will use a radial gradient as we need the rainbow to form an arc. Our gradient will also need to make use of what are known as colour stops so that our gradient can begin and end at fixed distances. This will give the appearance of an arc.<\/p>\n\n\n\n<p>The gradients we will generate will look like this to begin with:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"526\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-17.57.44-1024x526.png\" alt=\"Gradient rings\" class=\"wp-image-612\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-17.57.44-1024x526.png 1024w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-17.57.44-300x154.png 300w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-17.57.44-768x394.png 768w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-17.57.44.png 1438w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>The rainbow gradients will start out as rings. We will then hide the bottom half of each ring to reveal our rainbow shape.<\/figcaption><\/figure>\n\n\n\n<p>Each of the gradient rings above have 9 colour stops. The first colour is transparent, then we show the 7 colours of the rainbow and finish on transparent again. We will position each of our colour stops dynamically so that we can fine tune the appearance of our rainbows afterwards.<\/p>\n\n\n\n<p>You will notice that the first rainbow ring (left) comprises 7 distinct solid colour bands and the second rainbow ring (right) is a more traditional gradient. Both of these styles can be created with radial gradients by tweaking the colour stop values.<\/p>\n\n\n\n<p>A simple radial gradient in CSS looks like this:<\/p>\n\n\n\n<pre class=\"wp-block-code prettyprint linenums\"><code>.myGradient {\n  width: 200px;\n  height: 200px;\n  background: radial-gradient(\n    circle at center,\n    transparent,\n    red\n  );\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-18.10.11.png\" alt=\"Simple radial gradient\" class=\"wp-image-614\" width=\"143\" height=\"144\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-18.10.11.png 400w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-18.10.11-300x300.png 300w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-18.10.11-150x150.png 150w\" sizes=\"(max-width: 143px) 100vw, 143px\" \/><figcaption>This is the gradient that the above code will generate. The first colour stop is transparent, the final colour stop is red.<\/figcaption><\/figure>\n\n\n\n<p>You can include as many colour stops as you want. By default, each colour will fill an even proportion of the gradient. The distance each colour occupies can be adjusted as follows:<\/p>\n\n\n\n<pre class=\"wp-block-code prettyprint linenums\"><code>.myGradient {\n  width: 200px;\n  height: 200px;\n  background: radial-gradient(\n    circle at center,\n    transparent 0px,\n    red 50px\n  );\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-18.15.52.png\" alt=\"Demonstrating radial gradient colour stops\" class=\"wp-image-617\" width=\"143\" height=\"142\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-18.15.52.png 402w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-18.15.52-300x300.png 300w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-18.15.52-150x150.png 150w\" sizes=\"(max-width: 143px) 100vw, 143px\" \/><figcaption>This is the gradient that the above code will generate. The first colour stop is transparent and 0 pixels from the centre. The second colour stop is red and starts from 50 pixels from the centre and fills the remaining space.<\/figcaption><\/figure>\n\n\n\n<p>This demonstrates the basic principle of creating a smooth gradient. But what about bands? The trick is that colour stops can occupy the same distance from the centre to define a hard border between colours:<\/p>\n\n\n\n<pre class=\"wp-block-code prettyprint linenums\"><code>.myGradient {\n  width: 200px;\n  height: 200px;\n  background: radial-gradient(\n    circle at center,\n    transparent 0px,\n    transparent 50px, \/* This sets the end of our transparency *\/\n    red 50px\n  );\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-18.19.49.png\" alt=\"Demonstrating hard borders - radial gradient colour stops\" class=\"wp-image-620\" width=\"147\" height=\"147\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-18.19.49.png 400w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-18.19.49-300x300.png 300w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-18.19.49-150x150.png 150w\" sizes=\"(max-width: 147px) 100vw, 147px\" \/><figcaption>This is the gradient generated by the code above. By specifying a second instance of the colour &#8220;transparent&#8221; at 50 pixels from the centre, instead of blending with red, this defines a hard border creating the appearance of a solid circle.<\/figcaption><\/figure>\n\n\n\n<p>This theory can be extrapolated to create both styles of gradient we need for our rainbows.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 7: Generating CSS Gradients<\/h3>\n\n\n\n<p>Instead of hard-coding both of our rainbow styles we will generate them using some more SCSS language features. Our logic will be as follows:<\/p>\n\n\n\n<ul><li>Create a base gradient variable that we will append colours to.<\/li><li>Loop over each colour and add it to our base gradient.<\/li><li>If we&#8217;re generating a banded rainbow, add colour stops.<\/li><li>Export our gradient as a CSS background<\/li><\/ul>\n\n\n\n<p>Each of the following code snippets will need to be added inside of our <code>rainbowGradient<\/code> mixin.<\/p>\n\n\n\n<p>First of all we need to define our base gradient. This will look very similar to the last coded example above except we will use some of the variables we have already defined. This will ensure that our rainbows can be adjusted more easily in future:<\/p>\n\n\n\n<pre class=\"wp-block-code prettyprint linenums\"><code>\/\/ Base gradient\n$rainbow-gradient: \n  circle at center,\n  transparent,\n  transparent $rainbow-radius - $rainbow-thickness,\n  nth($rainbow-colours, -1) $rainbow-radius - $rainbow-thickness;<\/code><\/pre>\n\n\n\n<p>Lines 2 to 4 of this code set up our radial gradient properties, setting the inner-most colour to transparent.<\/p>\n\n\n\n<p>Line 5 of this code snippet defines the inner edge of our rainbow by factoring in the radius of the total rainbow minus its thickness.<\/p>\n\n\n\n<p>Line 6 of this code snippet defines the first colour in our list of rainbow colours and sets its colour stop distance to be the same as the inner edge of the rainbow. The <code>nth()<\/code> SCSS function used here selects a value from our <code>$rainbow-colours<\/code> colour list at a given index (location in the list). The value <code>-1<\/code> means that we take the value at the end of the list first (violet) because we are working inside to outside.<\/p>\n\n\n\n<p>The purpose of this variable is such that we can now add each of our rainbow colours to it in turn with a loop. Loops work by iterating over a list of items. We will loop over each colour in our <code>$rainbow-colours<\/code> list variable in reverse order, appending them to our gradient as we go.<\/p>\n\n\n\n<p>Our loop is defined as follows:<\/p>\n\n\n\n<pre class=\"wp-block-code prettyprint linenums\"><code>\/\/ Generate banded or smooth radial gradient\n@for $i from 1 through length($rainbow-colours) {\n  \/\/ We will add our gradient generation code here!\n}<\/code><\/pre>\n\n\n\n<p>The <code>@for<\/code> directive is used to define a for loop in SCSS. A for loop is used to iterate over items in a list one at a time. In this case this loop will run 7 times, from item 1 to 7, the length of our <code>$rainbow-colours<\/code> list. The <code>$i<\/code> variable will store the current index of the list (1-7).<\/p>\n\n\n\n<p>Inside our for loop we will store the colour value of the next colour like so:<\/p>\n\n\n\n<pre class=\"wp-block-code prettyprint linenums\"><code>\/\/ Next colour\n$colour: nth($rainbow-colours, -$i);<\/code><\/pre>\n\n\n\n<p>Remember, we use the minus symbol here because we are working backwards through the list. On every iteration through the loop the value of <code>$i<\/code> will increase by 1 so we can achieve what we want by negating it.<\/p>\n\n\n\n<p>Now that we have the next colour we can append it to our gradient like so:<\/p>\n\n\n\n<pre class=\"wp-block-code prettyprint linenums\"><code>\/\/ Start of band\n$rainbow-gradient: append(\n  \/\/ First we add the gradient we have already generated\n  $rainbow-gradient,\n  \/\/ Now we add the next colour\n  $colour $rainbow-radius - ($rainbow-thickness - \n    if(\n      \/\/ If we are generating a smooth gradient...\n      $type == \"smooth\",\n      \/\/ Smooth: Offset the band start by half a band for better blending\n      $colour-band-width + ($colour-band-width \/ (length($rainbow-colours) )),\n      \/\/ Else if we are generating a banded gradient...\n      \/\/ Bands: Do not offset the band\n      $colour-band-width\n    ) * ($i - 1)\n  )\n);<\/code><\/pre>\n\n\n\n<p>This code snippet appends the next colour to our <code>$rainbow-gradient<\/code> variable. The first 6 lines should be fairly straight forward as we repeat the same basic logic we used to define the <code>$rainbow-gradient<\/code> variable. Line 2 uses the <code>append()<\/code> SCSS function which can be used to add values to a list. Note that on line 4 we specify the variable we are appending to. What follows from line 7 onwards is an adjustment to the distance of the band we are appending.<\/p>\n\n\n\n<p>In SCSS, an <code>if()<\/code> statement is a function that takes 3 comma separated arguments:<\/p>\n\n\n\n<ul><li>An expression<\/li><li>What to do if the expression is true<\/li><li>What to do if the expression is false<\/li><\/ul>\n\n\n\n<p>In this case we want to determine what sort of gradient we are generating: bands or smooth. The first argument of our <code>if()<\/code> statement is a check for the <code>$type<\/code> variable we passed into our mixin. This type can either be <code>smooth<\/code> or <code>bands<\/code>. Therefore our <code>if()<\/code> statement evaluates to true if the type of gradient we are generating is <code>smooth<\/code> and evaluates to false if the gradient type is <code>bands<\/code>. This statement allows us to conditionally render either type of gradient.<\/p>\n\n\n\n<p>The code from line 7 to 16 accounts for an offset that is necessary for each gradient type. In order to show the correct amount of colour for type <code>smooth<\/code> we have to add an offset of half the width of the band.<\/p>\n\n\n\n<p>Next, if we are generating a rainbow of type <code>bands<\/code> we need to add an extra colour stop to produce hard borders between colours, as shown in step 6.<\/p>\n\n\n\n<p>At the end of your for loop, add the following code:<\/p>\n\n\n\n<pre class=\"wp-block-code prettyprint linenums\"><code>\/\/ End of band (only use this for type == band)\n@if($type == \"bands\") {\n  $rainbow-gradient: append(\n    $rainbow-gradient,\n    $colour $rainbow-radius - ($rainbow-thickness - $colour-band-width * $i)\n  );\n}<\/code><\/pre>\n\n\n\n<p>This code should look familiar by now. This code only executes if the <code>$type<\/code> argument passed to this mixin is <code>bands<\/code>. Line 5 is the important part that adds an extra colour stop to produce the hard colour border that we need.<\/p>\n\n\n\n<p>Our loop is complete. To complete the mixin all that&#8217;s left to do is export our radial gradient as a CSS background. To do this, add the following line at the bottom of the mixin body:<\/p>\n\n\n\n<pre class=\"wp-block-code prettyprint linenums\"><code>background: radial-gradient($rainbow-gradient);<\/code><\/pre>\n\n\n\n<p>When we include this mixin into our rainbow CSS element, this CSS property will be injected. It defines a CSS <code>background<\/code> consisting of a radial gradient with our generated <code>$rainbow-gradient<\/code> variable.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 8: Rainbow Rendering<\/h3>\n\n\n\n<p>It&#8217;s finally time to see our rainbows on the screen. We&#8217;ve written all of the code we need to generate both types of rainbow we need and now it&#8217;s time to see the results of all that code.<\/p>\n\n\n\n<p>We are going to create another mixin which will contain the element which will hold our gradient:<\/p>\n\n\n\n<pre class=\"wp-block-code prettyprint linenums\"><code>\/\/ the rainbow element\n@mixin rainbow($type) {\n  &amp;::before {\n    content: '';\n    position: absolute;\n    width: $rainbow-diameter;\n    height: $rainbow-diameter;\n    filter: $rainbow-filter;\n    opacity: $rainbow-opacity;\n    border-radius: 50%;\n    @include rainbowGradient($type);\n  }\n}<\/code><\/pre>\n\n\n\n<p>This mixin exports a CSS <code>::before<\/code> <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Pseudo-elements\">pseudo element<\/a> which has various properties set to it based on the variables we defined earlier. The border radius property on line 10 ensures that our rainbow is perfectly rounded. Line 11 includes our <code>rainbowGradient()<\/code> mixin and passes the type of rainbow along to it.<\/p>\n\n\n\n<p>That&#8217;s it for our mixins. Let&#8217;s create the CSS for the elements we added to our HTML way back in step 2. To refresh, each of our rainbows has 2 class names, the first is <code>rainbow<\/code> so let&#8217;s write the CSS for that first.<\/p>\n\n\n\n<p>In CSS, class names are prefixed with a period: <code>.<\/code> so our class selector looks like this: <code>.rainbow<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code prettyprint linenums\"><code>\/\/ Rainbow container\n.rainbow {\n  \/\/ Rainbow CSS properties here...\n}<\/code><\/pre>\n\n\n\n<p>Add the following properties to your rainbow class:<\/p>\n\n\n\n<pre class=\"wp-block-code prettyprint linenums\"><code>width: $rainbow-diameter;\nheight: $rainbow-radius;\nmargin: 0px;\nposition: relative;\noverflow: hidden;<\/code><\/pre>\n\n\n\n<p>This creates a rectangle the width of our rainbow but more importantly half of its height so that only the top half will be visible, resulting in the semicircular rainbow shape. <code>overflow: hidden<\/code> ensures that the other half of the rainbow will not be seen.<\/p>\n\n\n\n<p>Next we need to address each of our other class names that appear in our HTML: <code>bands<\/code> and <code>smooth<\/code>. Add the following code underneath the code above:<\/p>\n\n\n\n<pre class=\"wp-block-code prettyprint linenums\"><code>\/\/ Rainbow classes\n&amp;.bands { @include rainbow(\"bands\"); }\n&amp;.smooth { @include rainbow(\"smooth\"); }<\/code><\/pre>\n\n\n\n<p>This code creates the following 2 selectors:<\/p>\n\n\n\n<ul><li><code>.rainbow.bands {}<\/code><\/li><li><code>.rainbow.smooth {}<\/code><\/li><\/ul>\n\n\n\n<p>Each include our <code>rainbow()<\/code> mixin with the corresponding rainbow type set as the only argument.<\/p>\n\n\n\n<p>If you did everything right, you will now see 2 rainbows on your screen!<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"335\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-19.49.34-1024x335.png\" alt=\"Resulting rainbows\" class=\"wp-image-630\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-19.49.34-1024x335.png 1024w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-19.49.34-300x98.png 300w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-19.49.34-768x251.png 768w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-19.49.34-1536x502.png 1536w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-19.49.34.png 1616w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>You should see 2 rainbows on your screen that look like this.<\/figcaption><\/figure>\n\n\n\n<p>But there&#8217;s one missing ingredient&#8230;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 9: Animation<\/h3>\n\n\n\n<p>All that&#8217;s left to do now is to create our animated rainbow reveal effect. The basic premise is that we will create a rectangle that starts off obscuring our rainbows which has the same background colour as our page. It will then rotate around the bottom centre of our rainbow to reveal what&#8217;s underneath.<\/p>\n\n\n\n<p>Add the following at the bottom of your <code>.rainbow {}<\/code> declaration block:<\/p>\n\n\n\n<pre class=\"wp-block-code prettyprint linenums\"><code>\/\/ Animation element\n&amp;::after {\n  content: '';\n  position: absolute;\n  transform-origin: $rainbow-radius $rainbow-radius;\n  width: $rainbow-diameter;\n  height: $rainbow-radius;\n  background-color: $background-colour;\n  animation: wipe $animation-duration ease-in-out infinite;\n}<\/code><\/pre>\n\n\n\n<p>This is another CSS pseudo element (<code>::after<\/code>) which creates the rectangle over our rainbows.<\/p>\n\n\n\n<p>Line 5 sets the transformation (in this case rotation) origin of the rectangle to be the centre of our rainbow. Line 9 sets the animation for our reveal which we will create shortly. The animation is set to have a duration equal to whatever is set in our <code>$animation-duration<\/code> variable. It will run infinitely with the <code>ease-in-out<\/code> <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/animation-timing-function\">animation timing function<\/a>.<\/p>\n\n\n\n<p>Add the following code after your <code>.rainbow {}<\/code> declaration block.<\/p>\n\n\n\n<pre class=\"wp-block-code prettyprint linenums\"><code>\/\/ Wipe animation\n@keyframes wipe {\n  0% { transform: rotate(0deg); }\n  20% { transform: rotate(180deg); }\n  70% { transform: rotate(180deg); }\n  90% { transform: rotate(360deg); }\n  100% { transform: rotate(360deg); }\n}<\/code><\/pre>\n\n\n\n<p>Our animation is defined with the SCSS <code>@keyframes<\/code> directive and consists of 5 separate keyframes:<\/p>\n\n\n\n<ul><li>Start off positioned over our rainbows at 0 degrees.<\/li><li>After 20% of the animation the rectangle will be out of sight.<\/li><li>After 70% of the animation, begin to hide the rectangle again.<\/li><li>After 90% of the animation the rainbow will be hidden.<\/li><li>The final 10% of the animation is a pause before starting over.<\/li><\/ul>\n\n\n\n<p>That&#8217;s it!<\/p>\n\n\n\n<p>You can now begin to experiment with the variables we defined and work out what each of them is doing. See what sorts of rainbows you can come up with.<\/p>\n\n\n\n<p>The full code for this tutorial is available on <a href=\"https:\/\/codepen.io\/pbutcher\/pen\/XWmBwYz\">CodePen<\/a>.<\/p>\n\n\n\n<p>If you enjoyed this exercise, here are some resources you might like:<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/codepen.io\/collection\/XjYaRM\">My CSS Artwork and Animations Collection on CodePen<\/a><\/li><li><a href=\"https:\/\/a.singlediv.com\">A Single Div: A CSS Drawing Project by Lynn Fisher<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Creating animated rainbows using only HTML and CSS.<\/p>\n","protected":false},"author":4,"featured_media":630,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,5,7,8,17],"tags":[22,30,33,50,67,108,120],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Pure CSS Rainbows - Project Rainbow<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/01\/pure-css-rainbows\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pure CSS Rainbows - Project Rainbow\" \/>\n<meta property=\"og:description\" content=\"Creating animated rainbows using only HTML and CSS.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/01\/pure-css-rainbows\/\" \/>\n<meta property=\"og:site_name\" content=\"Project Rainbow\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-01T08:10:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-19.49.34.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1616\" \/>\n\t<meta property=\"og:image:height\" content=\"528\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"peterbutcher\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"peterbutcher\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/01\/pure-css-rainbows\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/01\/pure-css-rainbows\/\"},\"author\":{\"name\":\"peterbutcher\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#\/schema\/person\/ec6cb10a1b2c038b006de6a3e8c666b9\"},\"headline\":\"Pure CSS Rainbows\",\"datePublished\":\"2020-06-01T08:10:40+00:00\",\"dateModified\":\"2020-06-01T08:10:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/01\/pure-css-rainbows\/\"},\"wordCount\":3134,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#organization\"},\"image\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/01\/pure-css-rainbows\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-19.49.34.png\",\"keywords\":[\"advanced\",\"boilerplate\",\"codepen\",\"css\",\"html\",\"rainbows\",\"scss\"],\"articleSection\":[\"Advanced\",\"Animation\",\"Colours\",\"CSS\",\"Project Rainbow\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/01\/pure-css-rainbows\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/01\/pure-css-rainbows\/\",\"url\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/01\/pure-css-rainbows\/\",\"name\":\"Pure CSS Rainbows - Project Rainbow\",\"isPartOf\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/01\/pure-css-rainbows\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/01\/pure-css-rainbows\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-19.49.34.png\",\"datePublished\":\"2020-06-01T08:10:40+00:00\",\"dateModified\":\"2020-06-01T08:10:40+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/01\/pure-css-rainbows\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/01\/pure-css-rainbows\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/01\/pure-css-rainbows\/#primaryimage\",\"url\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-19.49.34.png\",\"contentUrl\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-19.49.34.png\",\"width\":1616,\"height\":528,\"caption\":\"Rainbows created by CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/01\/pure-css-rainbows\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Pure CSS Rainbows\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#website\",\"url\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/\",\"name\":\"Project Rainbow\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#organization\",\"name\":\"Project Rainbow\",\"url\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/bangor_logo_c1_flush.png\",\"contentUrl\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/bangor_logo_c1_flush.png\",\"width\":3356,\"height\":958,\"caption\":\"Project Rainbow\"},\"image\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#\/schema\/person\/ec6cb10a1b2c038b006de6a3e8c666b9\",\"name\":\"peterbutcher\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g\",\"caption\":\"peterbutcher\"},\"url\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/author\/peterbutcher\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Pure CSS Rainbows - Project Rainbow","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/01\/pure-css-rainbows\/","og_locale":"en_US","og_type":"article","og_title":"Pure CSS Rainbows - Project Rainbow","og_description":"Creating animated rainbows using only HTML and CSS.","og_url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/01\/pure-css-rainbows\/","og_site_name":"Project Rainbow","article_published_time":"2020-06-01T08:10:40+00:00","og_image":[{"width":1616,"height":528,"url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-19.49.34.png","type":"image\/png"}],"author":"peterbutcher","twitter_card":"summary_large_image","twitter_misc":{"Written by":"peterbutcher","Est. reading time":"18 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/01\/pure-css-rainbows\/#article","isPartOf":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/01\/pure-css-rainbows\/"},"author":{"name":"peterbutcher","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#\/schema\/person\/ec6cb10a1b2c038b006de6a3e8c666b9"},"headline":"Pure CSS Rainbows","datePublished":"2020-06-01T08:10:40+00:00","dateModified":"2020-06-01T08:10:40+00:00","mainEntityOfPage":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/01\/pure-css-rainbows\/"},"wordCount":3134,"commentCount":2,"publisher":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#organization"},"image":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/01\/pure-css-rainbows\/#primaryimage"},"thumbnailUrl":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-19.49.34.png","keywords":["advanced","boilerplate","codepen","css","html","rainbows","scss"],"articleSection":["Advanced","Animation","Colours","CSS","Project Rainbow"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/01\/pure-css-rainbows\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/01\/pure-css-rainbows\/","url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/01\/pure-css-rainbows\/","name":"Pure CSS Rainbows - Project Rainbow","isPartOf":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#website"},"primaryImageOfPage":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/01\/pure-css-rainbows\/#primaryimage"},"image":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/01\/pure-css-rainbows\/#primaryimage"},"thumbnailUrl":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-19.49.34.png","datePublished":"2020-06-01T08:10:40+00:00","dateModified":"2020-06-01T08:10:40+00:00","breadcrumb":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/01\/pure-css-rainbows\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/01\/pure-css-rainbows\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/01\/pure-css-rainbows\/#primaryimage","url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-19.49.34.png","contentUrl":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-19.49.34.png","width":1616,"height":528,"caption":"Rainbows created by CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/01\/pure-css-rainbows\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/"},{"@type":"ListItem","position":2,"name":"Pure CSS Rainbows"}]},{"@type":"WebSite","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#website","url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/","name":"Project Rainbow","description":"","publisher":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#organization","name":"Project Rainbow","url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#\/schema\/logo\/image\/","url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/bangor_logo_c1_flush.png","contentUrl":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/bangor_logo_c1_flush.png","width":3356,"height":958,"caption":"Project Rainbow"},"image":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#\/schema\/person\/ec6cb10a1b2c038b006de6a3e8c666b9","name":"peterbutcher","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","caption":"peterbutcher"},"url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/author\/peterbutcher\/"}]}},"_links":{"self":[{"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/posts\/150"}],"collection":[{"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/comments?post=150"}],"version-history":[{"count":0,"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/posts\/150\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/media\/630"}],"wp:attachment":[{"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/media?parent=150"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/categories?post=150"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/tags?post=150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}