Интерпретация линейного градиента CSS3

Я нашел способ сделать отличный фон на этом сайте, и я хочу понять, что происходит на CSS. Происходит много всего, и я хочу иметь возможность дублировать это с другими вещами. Вот несколько найденных мной сайтов, которые описывают основы: http://css-tricks.com/examples/CSS3Gradient/, https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient, http://www.w3schools.com/css/css3_gradients.asp

но никто из них не описывает что-то настолько сложное, как это. Кто-нибудь, пожалуйста, проведет меня только по линиям линейного градиента? Почему существует несколько линейных градиентов? Что означают аргументы за пределами скобок linear-gradient?

CSS:

background:
linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background-color: #131313;
background-size: 20px 20px;

css linear-gradients
person Casey    schedule 04.02.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

В этом методе используются 2 компонента:

a) Определив размер фона 20 пикселей на 20 пикселей (последняя строка), вы определяете квадрат этих размеров. Это будет действовать как рамка, которая будет вырезать ..

б) линейный градиент под заданным углом, переходящий от цвета к прозрачному.

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

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

Фон, который у вас есть, состоит в основном из 6 треугольников.

Что остается для создания интересного макета, так это возможность расположить разные треугольники, которые у вас есть. Это 2 параметра после цветов градиента, позиция задается координатами x и y.

Я использовал этот метод в некоторых ответах: здесь или, что довольно сложно, здесь

Играйте и экспериментируйте - вот способ учиться.

Я изменил ваш пример на это

div {
    background:
    linear-gradient(27deg, red 17px, transparent 17px) 0 20px,
    linear-gradient(207deg, green 20px, transparent 20px) 40px 0px,
    linear-gradient(90deg, pink 40px, transparent 40px),
    linear-gradient(white 25%, orange 25%, orange 50%, transparent 50%, transparent 75%, black 75%, black);
    background-size: 80px 80px;
}

background2

Синий прямоугольник - это базовый размер фона.

Первая строка создает красный треугольник с углом 27 градусов (который указывает приблизительно на 2 часа, имеет красный цвет 17 пикселей, а затем мгновенно меняется на прозрачный. Здесь находится плавкая часть. Положение 0 o будет иметь этот треугольник в качестве первого изображения, которое я опубликовал. Установив положение на 0px 20px, мы установили его вниз. Поскольку это повторяющийся градиент, теперь он отображается высоко в синем квадрате (эквивалент, более легкий для понимания, будет position = 0px - 60 пикселей. Вы устанавливаете его на расстоянии 20 пикселей от верхнего края, поэтому касаясь границы

Вторая линия стиля образует зеленый треугольник. Угол равен 207, поэтому идет в направлении, противоположном красному. размер 20 пикселей, примерно такой же, как у красного, но он расположен на 40 пикселей по оси y. Если бы он не был размещен, он бы располагался в правом верхнем углу квадрата (только первое изображение, которое я опубликовал, повернуто на 180 градусов. Сдвиг его на 40 пикселей вправо, он выглядит так, как будто он вошел в соседний квадрат .

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

person vals    schedule 04.02.2014
comment
Это полезно, но я все еще чувствую себя подавленным из-за того, сколько CSS нужно понять. Не могли бы вы интерпретировать мне несколько линий следующим образом: linear-gradient (‹начальная точка›, ‹color› ‹width› ... пожалуйста? - person Casey; 07.02.2014