├── CNAME ├── .gitignore ├── favicon.ico ├── test ├── test.js └── test.html ├── package.json ├── README.md ├── index.html ├── scripts.js └── styles.css /CNAME: -------------------------------------------------------------------------------- 1 | colorstream.design 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GeorgeSmith-Sweeper/colorStream/HEAD/favicon.ico -------------------------------------------------------------------------------- /test/test.js: -------------------------------------------------------------------------------- 1 | const assert = require('chai').assert; 2 | 3 | describe('Array', function() { 4 | describe('#indexOf()', function() { 5 | it('should return -1 when the value is not present', function() { 6 | assert.equal([1,2,3].indexOf(4), -1); 7 | }); 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "color_stream", 3 | "version": "1.0.0", 4 | "description": "Creating colorful backgrounds", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "mocha-chrome test/test.html" 8 | }, 9 | "author": "George Smith-Sweeper", 10 | "license": "MIT", 11 | "dependencies": {}, 12 | "devDependencies": { 13 | "chai": "^4.1.2", 14 | "mocha": "^5.2.0", 15 | "mocha-chrome": "^1.1.0" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Color Stream 2 | CSS Gradient background generator! 3 | 4 | 5 | Color Stream uses JavaScript and CSS to generate vibrant gradient backgrounds. Each background is completely unique, and can be used as a great banner for your website or project. 6 | 7 | Backgrounds can be recreated by clicking the "Reveal" button to display the exact CSS properties used to create the current gradient. 8 | 9 | If you like this project, be sure to click the star button located on the page! 10 | 11 | Take a look [Color Stream](http://colorstream.design). 12 | -------------------------------------------------------------------------------- /test/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Tests 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Color Stream 5 | 6 | 7 | 8 | 9 |
10 | Color Stream 11 |

Click the "Create" button to generate a new gradient background

12 |

If you like a background, click the "Reveal" button to display the CSS used to create it

13 |
CREATE
14 |
REVEAL
15 |
16 |
17 | 18 | Star 24 |
25 |
26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /scripts.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // query Selectors for page elements 4 | const main = document.querySelector('.main'); 5 | const displayStylesBtn = main.querySelector('.displayStylesBtn'); 6 | const randomBtn = main.querySelector('.randomBtn'); 7 | const theStylesDiv = main.querySelector('.theStylesDiv'); 8 | 9 | // creates random colors in RGB 10 | const randomColor = () => { 11 | const letters = '01234566789ABCDEF'; 12 | let color = '#'; 13 | for (let i = 0; i < 6; i++) { 14 | color += letters[Math.floor(Math.random() * 16)]; 15 | } 16 | return color; 17 | }; 18 | 19 | // creates a random number from 1-180 20 | const gradientDegree = () => { 21 | return (Math.round(Math.random() * ((180 - 1) + 1)).toString()); 22 | }; 23 | 24 | // will clear the displayed stylesDiv 25 | const clearStylesDiv = () => { 26 | theStylesDiv.textContent = ''; 27 | return theStylesDiv; 28 | }; 29 | 30 | // Applies the random color to the 'body' 31 | const applyRandomColor = () => { 32 | const theGradient = `linear-gradient(${gradientDegree()}deg, ${randomColor()} 0%, ${randomColor()} 45%, ${randomColor()} 100%)`; 33 | clearStylesDiv(); 34 | document.body.style.background = theGradient; 35 | return document.body.style.background; 36 | }; 37 | 38 | // will modifiy the textContents to display the current CSS background 39 | const displayStyles = () => { 40 | const startingBackground = 'linear-gradient(73deg, rgb(228, 50, 27) 0%, rgb(198, 20, 104) 45%, rgb(217, 4, 230) 100%)'; 41 | const domBodyBackground = document.body.style.background; 42 | 43 | // if the background style hasn't been changed, display the original CSS 44 | const backgroundStyle = `background: ${domBodyBackground ? domBodyBackground : startingBackground};`; 45 | theStylesDiv.textContent = backgroundStyle; 46 | return theStylesDiv; 47 | }; 48 | 49 | // Event Listeners 50 | displayStylesBtn.addEventListener('click', displayStyles); 51 | randomBtn.addEventListener('click', applyRandomColor); 52 | 53 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | display: flex; 4 | background: linear-gradient(73deg, rgb(228, 50, 27) 0%, rgb(198, 20, 104) 45%, rgb(217, 4, 230) 100%); 5 | height: 100vh; 6 | text-align: center; 7 | justify-content: center; 8 | align-items: center; 9 | } 10 | 11 | span { 12 | font-family: 'Pacifico', cursive; 13 | font-size: 60px; 14 | color: white; 15 | text-align: center; 16 | animation: fadein 3s; 17 | -moz-animation: fadein 3s; /* Firefox */ 18 | -webkit-animation: fadein 3s; /* Safari and Chrome */ 19 | -o-animation: fadein 3s; /* Opera */ 20 | } 21 | 22 | p { 23 | font-family: 'Open Sans', sans-serif; 24 | font-size: 17px; 25 | color: white; 26 | text-align: center; 27 | } 28 | 29 | .button { 30 | font-family: 'Open Sans', sans-serif; 31 | font-size: 17px; 32 | border: solid; 33 | color: white; 34 | margin: 15px; 35 | padding: 16px 32px; 36 | text-align: center; 37 | text-decoration: none; 38 | background: transparent; 39 | -webkit-transition-duration: 0.4s; /* Safari */ 40 | transition-duration: 0.4s; 41 | } 42 | 43 | /* Controls the github star button*/ 44 | .githubBtn { 45 | padding-top: 5%; 46 | } 47 | 48 | .theStylesDiv { 49 | padding-top: 5%; 50 | font-size: 19px; 51 | color: #FFFFFF; 52 | font-family: 'Open Sans', sans-serif; 53 | } 54 | 55 | /* Sweep To Right */ 56 | .hvr-sweep-to-right { 57 | display: inline-block; 58 | vertical-align: middle; 59 | -webkit-transform: perspective(1px) translateZ(0); 60 | transform: perspective(1px) translateZ(0); 61 | box-shadow: 0 0 1px transparent; 62 | position: relative; 63 | -webkit-transition-property: color; 64 | transition-property: color; 65 | -webkit-transition-duration: 0.3s; 66 | transition-duration: 0.3s; 67 | } 68 | .hvr-sweep-to-right:before { 69 | content: ""; 70 | position: absolute; 71 | z-index: -1; 72 | top: 0; 73 | left: 0; 74 | right: 0; 75 | bottom: 0; 76 | background: #000000; 77 | -webkit-transform: scaleX(0); 78 | transform: scaleX(0); 79 | -webkit-transform-origin: 0 50%; 80 | transform-origin: 0 50%; 81 | -webkit-transition-property: transform; 82 | transition-property: transform; 83 | -webkit-transition-duration: 0.3s; 84 | transition-duration: 0.3s; 85 | -webkit-transition-timing-function: ease-out; 86 | transition-timing-function: ease-out; 87 | } 88 | .hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active { 89 | color: white; 90 | } 91 | .hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before { 92 | -webkit-transform: scaleX(1); 93 | transform: scaleX(1); 94 | } 95 | 96 | /* Sweep To Left */ 97 | .hvr-sweep-to-left { 98 | display: inline-block; 99 | vertical-align: middle; 100 | -webkit-transform: perspective(1px) translateZ(0); 101 | transform: perspective(1px) translateZ(0); 102 | box-shadow: 0 0 1px transparent; 103 | position: relative; 104 | -webkit-transition-property: color; 105 | transition-property: color; 106 | -webkit-transition-duration: 0.3s; 107 | transition-duration: 0.3s; 108 | } 109 | .hvr-sweep-to-left:before { 110 | content: ""; 111 | position: absolute; 112 | z-index: -1; 113 | top: 0; 114 | left: 0; 115 | right: 0; 116 | bottom: 0; 117 | background: #000000; 118 | -webkit-transform: scaleX(0); 119 | transform: scaleX(0); 120 | -webkit-transform-origin: 100% 50%; 121 | transform-origin: 100% 50%; 122 | -webkit-transition-property: transform; 123 | transition-property: transform; 124 | -webkit-transition-duration: 0.3s; 125 | transition-duration: 0.3s; 126 | -webkit-transition-timing-function: ease-out; 127 | transition-timing-function: ease-out; 128 | } 129 | .hvr-sweep-to-left:hover, .hvr-sweep-to-left:focus, .hvr-sweep-to-left:active { 130 | color: white; 131 | } 132 | .hvr-sweep-to-left:hover:before, .hvr-sweep-to-left:focus:before, .hvr-sweep-to-left:active:before { 133 | -webkit-transform: scaleX(1); 134 | transform: scaleX(1); 135 | } 136 | 137 | @keyframes fadein { 138 | from { 139 | opacity:0; 140 | } 141 | to { 142 | opacity:1; 143 | } 144 | } 145 | @-moz-keyframes fadein { /* Firefox */ 146 | from { 147 | opacity:0; 148 | } 149 | to { 150 | opacity:1; 151 | } 152 | } 153 | @-webkit-keyframes fadein { /* Safari and Chrome */ 154 | from { 155 | opacity:0; 156 | } 157 | to { 158 | opacity:1; 159 | } 160 | } 161 | @-o-keyframes fadein { /* Opera */ 162 | from { 163 | opacity:0; 164 | } 165 | to { 166 | opacity: 1; 167 | } 168 | } 169 | --------------------------------------------------------------------------------