<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>
