Gradient Trands 2018

не удалять. используется в статье

by Andrej Sharapov

HTML

<div class='settings'>
  <h1>Basic usage</h1>
  <ul>
    <li>Choose the ball with the gradient that suits you best</li>
    <li>Then click the left mouse button</li>
    <li>Click in the box to copy to the clipboard. <i>The code will be copied automatically</i></li>
    <li>Set the code in the right place, after the <code>background-image</code></li>
  </ul>
</div>
<div class='code'>
  <input type='text' id='grad_code' placeholder='linear-gradient()' onclick='this.select();'>
</div>
<div class='gradients'>
  <div class='grad grad-1'></div>
  <div class='grad grad-2'></div>
  <div class='grad grad-3'></div>
  <div class='grad grad-4'></div>
  <div class='grad grad-5'></div>
  <div class='grad grad-6'></div>
  <div class='grad grad-7'></div>
  <div class='grad grad-8'></div>
  <div class='grad grad-9'></div>
  <div class='grad grad-10'></div>
  <div class='grad grad-11'></div>
  <div class='grad grad-12'></div>
  <div class='grad grad-13'></div>
  <div class='grad grad-14'></div>
  <div class='grad grad-15'></div>
  <div class='grad grad-16'></div>
  <div class='grad grad-17'></div>
  <div class='grad grad-18'></div>
  <div class='grad grad-19'></div>
  <div class='grad grad-20'></div>
  <div class='grad grad-21'></div>
  <div class='grad grad-22'></div>
  <div class='grad grad-23'></div>
  <div class='grad grad-24'></div>
  <div class='grad grad-25'></div>
  <div class='grad grad-26'></div>
  <div class='grad grad-27'></div>
  <div class='grad grad-28'></div>
  <div class='grad grad-29'></div>
  <div class='grad grad-30'></div>
  <div class='grad grad-31'></div>
  <div class='grad grad-32'></div>
  <div class='grad grad-33'></div>
  <div class='grad grad-34'></div>
  <div class='grad grad-35'></div>
  <div class='grad grad-36'></div>
</div>

SCSS

* {
  box-sizing: border-box
}

::-webkit-input-placeholder {
 color: white;
}

.code {
  margin-bottom: 10px;
  background-image: linear-gradient(to left, rgba(255, 255, 255, 0.4), rgba(0, 0, 0, .1));
  padding: 20px;
  #grad_code {
  min-height: 20px;
  width: 100%;
  outline: none;
  border:0;
  background-color: transparent;
  color: white;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.25);
  }
}
.gradients {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  counter-reset: div;
  font-size: 62.5%;
  overflow: hidden;
  padding: 20px 25px;
  .grad {
    display: inline-block;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    margin: 10px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    counter-increment: div;
    position: relative;
    box-shadow: inset 0 -5px 15px rgba(255, 255, 255, 0.4), inset -2px -1px 40px rgba(0, 0, 0, 0.1), 0 0 1px lightgray;    
      /*clip-path: polygon(0 0, 100% 0, 100% 25px, 90% 25px, 90% 75%, 100% 75%, 100% 100%, 0 100%);*/
    &:hover {
      transform: scale(1.5);
      transition: .2s ease;
      z-index:2;
      cursor: -webkit-grab;
      cursor: -moz-grab;
      cursor: grab;
    }
    &::after {
      content: attr(class);
      /* counter(div) */
      color: white;
      font-size: 1rem;
      text-shadow: 1px 1px 1px rgba(0,0,0,0.25);
    }
    &::before {
      position: absolute;
      left: 15px;
      top: 7px;
      transform: rotate(-25deg);
      content: '';
      width: 40px;
      height: 20px;
      background-image: -webkit-linear-gradient(top, rgba(232, 232, 232, 1) 0%, rgba(232, 232, 232, 1) 1%, rgba(255, 255, 255, 0) 100%);
      border-radius: 40px / 20px
    }
    &-1 {
      background-image: linear-gradient(to right, #76d9ee 0%, #a0eafa 100%)
    }
    &-2 {
      background-image: linear-gradient(80deg, rgba(81, 204, 226, .7) 0%, rgba(51, 105, 231, .9) 100%)
    }
    &-3 {
      background-image: linear-gradient(73deg, #3369E7,...

JavaScript

const input = document.querySelector('input');
const bg = document.querySelector('.code');

function onClick(event) {
  const {
    backgroundImage
  } = getComputedStyle(event.target);
  input.value = 'background:' + backgroundImage + ';';
  bg.style.backgroundImage = backgroundImage;
}

for (const el of document.querySelectorAll('.grad')) {
  el.addEventListener('click', onClick);
}

var copy = document.querySelector('#grad_code');
copy.addEventListener('click', function(event) {
  var text = document.querySelector('#grad_code');
  text.select();
  document.execCommand('copy');
});