"gradient"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/Paran0a/pen/XXGxev?limit=all&page=19&q=gradient" /> <style class="cp-pen-styles">html, body { margin: 0; height: 100%; overflow: hidden; position: relative; font-family: sans-serif; } .box { position: absolute; background: black; color: white; text-shadow: 1px 1px 1px black; overflow: hidden; display: flex; justify-content: center; align-items: center; font-size: 14px; text-transform: uppercase; } label { font-size: 13px; } fieldset, legend { margin: 0; padding: 0; border: none; } .input_container { width: 200px; background: rgba(255, 255, 255, .7); box-shadow: 0px 3px 10px rgba(0, 0, 0, .3), 0px -4px 20px rgba(0, 0, 0, .2); position: fixed; top: 0; left: 0; padding: 5px; border-radius: 5px; z-index: 1000; } .input_container > div { margin: 5px 0; } .input_container > div:first-child { margin-top: 0; } .input_container > div:last-child { margin-bottom: 0; } #colorPicker { background: white; box-shadow: 0px 3px 10px rgba(0, 0, 0, .3); border: none; } [data-num]:first-child { box-sizing: border-box; z-index: 100; } [data-num]:last-child { box-sizing: border-box; z-index: 100; } .libLink { font-size: 10px; }</style></head><body> <div class="input_container"> <div> <fieldset class="colorPickers"> <label for="colorPicker1">Color 1</label> <input value='#FF0040' class="colorPicker" type="color" id="colorPicker1"> <label for="colorPicker2">Color 2</label> <input value='#00FF50' class="colorPicker" type="color" id="colorPicker2"> </fieldset> </div> <div class="rowNum_input"> <label for="boxNum">Boxes number</label> <select id="boxNum"> <option value="4">4</option> <option value="9">9</option> <option selected value="16">16</option> <option value="25">25</option> <option value="81">81</option> <option value="100">100</option> <option value="225">225</option> <option value="2500">R U INSANSE?</option> </select> </div> <div class="hex_input"> <label for="showHex">Show HEX</label> <input id="showHex" type="checkbox"> </div> <a class="libLink" href="//paran0a.github.io/Gradient-TextJS" target="_blank">Want to gradient your text?</a> </div> <div class="boxes_container"> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script >var boxAmount = 16; var initialBoxColor = '#FF0040'; var initialBoxColorAlt = '#00FF50'; var topCords; var cordsOffset; var cords; var boxAmountRow = Math.sqrt(boxAmount); var boxIndex = 0; var posPerc; // Function that initilly appends our box amount to the body. // In it we call the function that will position and color our boxes. function initiateBoxes() { var boxColor; topCords = null; cordsOffset = null; cords = null; boxAmountRow = Math.sqrt(boxAmount); dimensionPercentage = 100 / boxAmountRow; boxIndex = 0; $('.boxes_container').empty(); for (var i = 1; i <= boxAmount; i++) {if (window.CP.shouldStopExecution(1)){break;}if (window.CP.shouldStopExecution(1)){break;} var dimension = 100 / boxAmountRow + '%'; $box = $('<div class="box" data-num="' + i + '"/></div>').css('width', dimension).css('height', dimension); $('.boxes_container').append($box); } window.CP.exitedLoop(1); window.CP.exitedLoop(1); initiateBoxProp(); } function initiateBoxProp() { $('.box').each(function(index, element) { // In order to do the position ( absolute right position ) correctly we need to restart it when we enter new row. // For that we first calculate cordsOffset and then substract it when calculating cords. cordsOffset = isFinite(100 * boxIndex) ? 100 * boxIndex : 0; cords = ((index * dimensionPercentage) - cordsOffset) + '%'; // Calculating top coords. topCords = isFinite(dimensionPercentage * boxIndex) ? dimensionPercentage * boxIndex + '%' : 0 + '%'; //Calculating mix of colors. boxColor = createColor(initialBoxColor, initialBoxColorAlt, (index / (boxAmount - 1))); // Asigning all of the calculated values to the box. $(this).css({ "top": topCords, "right": cords, "background": boxColor }); // Styling first and last box so we can easily indentify them. if (index == 0) { $('.box:last-child').css('border-left', '5px solid' + boxColor); } else if (index == (boxAmount - 1)) { $('.box:first-child').css('border-right', '5px solid' + boxColor); } if ($('#showHex').is(':checked')) { $(this).text(boxColor); } // This little guy helps us know if we need to send our boxes to the new row. if ($(this).data('num') % boxAmountRow == 0) { boxIndex += 1; } }); } $('#boxNum').on('change', function() { boxAmount = $(this).val(); initiateBoxes(); }); //ty u/Ob101010 for teaching me about event delegation <3 $('.colorPickers').on('change', '.colorPicker', function() { initialBoxColor = $('#colorPicker1').val(); initialBoxColorAlt = $('#colorPicker2').val(); initiateBoxes(); }); $('#showHex').on('change', function() { initiateBoxes(); }); function createColor(color, colorAlt, ratio) { var endColor =''; color = color.substring(1); colorAlt = colorAlt.substring(1); var toHex = function(x) { x = x.toString(16); return (x.length == 1) ? '0' + x : x; }; for (var i = 0; i < color.length; i += 2) {if (window.CP.shouldStopExecution(2)){break;}if (window.CP.shouldStopExecution(2)){break;} var calculated = Math.ceil(parseInt(color.substring(i, i + 2), 16) * ratio + parseInt(colorAlt.substring(i, i + 2), 16) * (1 - ratio)); endColor += toHex(calculated > 255 ? 255 : calculated); } window.CP.exitedLoop(2); window.CP.exitedLoop(2); return '#' + endColor; } /* LETS GO */ initiateBoxes(); /* GRADIENT-TEXT JS */ function gradText(r,n,t){r.jquery&&(r=r[0]);var e=r.innerHTML,a=e.match(/\x20/g)?e.match(/\x20/g).length:0;for(r.innerHTML="",i=0,skip=0;i<e.length;i++){if (window.CP.shouldStopExecution(3)){break;}if (window.CP.shouldStopExecution(3)){break;}" "==e[i]?(skip+=1,r.innerHTML+=e[i]):(gradColor=createColor(n,t,(i-skip)/(e.length-a-1)),r.innerHTML+='<span style="color:'+gradColor+'">'+e[i]+"</span>")} window.CP.exitedLoop(3); window.CP.exitedLoop(3); }function createColor(r,n,t){var i="";r=r.substring(1),n=n.substring(1);for(var e=function(r){return r=r.toString(16),1==r.length?"0"+r:r},a=0;a<r.length;a+=2){if (window.CP.shouldStopExecution(4)){break;}if (window.CP.shouldStopExecution(4)){break;}var o=Math.ceil(parseInt(r.substring(a,a+2),16)*t+parseInt(n.substring(a,a+2),16)*(1-t));i+=e(o>255?255:o)} window.CP.exitedLoop(4); window.CP.exitedLoop(4); return"#"+i} gradText(document.getElementsByClassName('libLink')[0],'#ffa500','#FF00FF'); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: