Создание градиентной сетки в CSS/Jquery

Я не уверен, возможно ли это или нет, но могу ли я использовать методы CSS/Jquery для создания градиентной сетки? Что-то похожее на это enter image description here

Я хотел бы случайным образом генерировать эту сетку, а затем, возможно, анимировать ее, поэтому я пытаюсь избежать использования изображений. Не уверен, что такое вообще возможно.

Я думал, может быть, создать несколько слоев отдельных градиентов, а затем сложить их все вместе в фиксированное положение и изменить их настройки непрозрачности?

11
css css3 design jquery

3 ответов

В настоящее время

несколько лет назад я экспериментировал с чем-то подобным, используя SVG, тег холста HTML5 и совсем недавно градиенты CSS3. Я не верю, что в настоящее время существует естественный способ выйти за пределы простых линейных или радиальных градиентов.

вопрос в том, можно ли моделировать градиент сетки, используя только простые линейные и радиальные градиенты (которые являются единственными доступными инструментами).

к сожалению, при объединении нескольких градиенты используя непрозрачность или rgba, цвета разных градиентов, как правило, объединяются таким образом, что это не полезно, что приводит к размытым цветам. Чтобы избежать этого, потребуется возможность отображать его в браузере как один сложный градиент.

существуют также значительные ограничения на формы, которые могут иметь градиенты-линейные градиенты под произвольным углом и эллиптические градиенты с радиальной симметрией. Не допускает свободной формы, неправильной формы. В 2D преобразований то, что можно применить к полученному изображению, также довольно регулярно (масштабирование, перекос и т. д.).

в будущем

наиболее перспективным вариантом, о котором я знаю в ближайшем будущем, является возможная поддержка градиентов сетки в SVG 2.0 (и, возможно, диффузионных кривых). Если это произойдет, и это в конечном итоге поддерживается браузерами, это должно начать значительно расширять параметры. И тег HTML5 canvas и CSS3 могут последовать в ближайшее время впоследствии.

и, как указал @vals в комментарии ниже, WebGL должен предложить некоторые очень перспективные варианты (для тегов HTML5 canvas с использованием 3D-контекста).

ссылки по теме

4

Я сделал простой макет, чтобы применить это.

во-первых, я поставлю 4 divs, первый, чтобы показать частичные результаты, и последний, чтобы увидеть конечный результат. Разметка просто:

<div class="box mesh1"></div>
<div class="box mesh2"></div>
<div class="box mesh3"></div> 
<div class="box mesh"></div>

здесь коробка как раз для размеров, меш1 до 3 держит частично результаты, в сетке мы кладем ее все совместно.

CSS:

.box {
    width: 400px;
    height: 150px;
    position: relative;
    display: inline-block;
}

.mesh1, .mesh {
background:
    -webkit-linear-gradient(5deg,  rgba(0, 250, 0, 0.5), rgba(0, 100, 0, 0.5))
}

.mesh:after, .mesh:before {
    content: "";
    position: absolute;
    left: 0px;
    bottom: 0px;
    top: 0px;
    right: 0px;
}
.mesh2, .mesh:after {
background:   -webkit-radial-gradient(center center, circle cover, rgba(250, 0, 0, 0.6) 0%, rgba(120, 0, 10, 0.5) 100%);}

.mesh3, .mesh:before {
background: -webkit-radial-gradient(10% 10%, ellipse cover, rgba(0, 0, 250, 0.6) 0%, white 100%);}

Я даю классу mesh1 фон линейный, наклоненный на 5 градусов, и указываю цвета в формате rgba на обеспечить прозрачность.

затем, чтобы иметь возможность накладывать больше градиентов, я указываю на псевдо-элементы, как до и после, разделяя те же свойства макета.

последнему элементу я даю круговой градиент, общий с mesh2 Перед элементом я даю эллиптический градиент, вне центра. Все они могут быть rgba.

в конце вы видите в сетке div результат перекрытия всего

(я использовал везде webkit обозначение, чтобы сделать его коротким)

Я бы не сказал, что это много художественного, но я оставляю эту часть вам: -)

скрипку здесь

4

в моем первом ответе я интерпретировал это больше "художественно", чем "математически". Ответ Мэтта Кофлина заставляет меня задуматься о более математическом ответе, в котором мы бы сделали "сетчатую" часть требования более строгой.

то есть у нас есть матрица цветов, и мы хотим показать это в сетке. Если сетка имеет интервал, скажем, 100px, то цвет [x][y] матрицы будет дан пикселю в 100x и 100y. Пиксели между ними будет aproximated в билинейная пути.

для такого подхода css будет:

.mesh { overflow: hidden; position: absolute;   width: 300px;   height: 300px;    }

.tile {    width: 200px;    height: 200px;    position: absolute;    display: block;   }

.tile11, .tile21, .tile31 {
left: -50px;
}
.tile12, .tile22, .tile32 {
left: 50px;
}
.tile13, .tile23, .tile33 {
left: 150px;
}
.tile11, .tile12, .tile13 {
top: -50px;
}
.tile21, .tile22, .tile23 {
    top: 50px;
}
.tile31, .tile32, .tile33 {
top: 150px;
}

.tile11 {
background: -webkit-radial-gradient(center center, 100px 100px, 
      rgba(255, 0, 0, 1) 0%, 
      rgba(255, 0, 0, 0.5) 50%,
      rgba(255, 0, 0, 0) 100%);}

.tile12 {
background: -webkit-radial-gradient(center center, 100px 100px, 
      rgba(255, 0, 0, 1) 0%, 
      rgba(255, 0, 0, 0.5) 50%,
      rgba(255, 0, 0, 0) 100%);}

Я использую каждый div в качестве локального участника сетки, получая только "касание" промежуточного соседа и переходя к полной прозрачности за пределами этой точки.

результат такой :

скрипка

2 первой цвета как красный, как тест. В идеальной системе линия, соединяющая 2 точки, должна быть идеально Красной все время.

Это правда, что это не идеальный результат, но "мутность" или "размытость" результата более или менее избегается

2