Полупрозрачные градиенты [13/24]


Помогите разобраться. Что за код написан к “square-top-right”, я сам сделать не смог и удивился что за показатели в ответе. Вот грубо говоря задание, которое надо написать “Цвета: белый 30% непрозрачности, прозрачный, белый 30% непрозрачности, прозрачный */”, а код к нему как-будто совсем другой.Кто может объяснить, почему проценты другие, не как в задании, почему transparent’ов больше чем написано в задании?

Код

.square-top-left {
background-image: linear-gradient(
135deg,
rgba(255, 255, 255, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
transparent 75%
);
}

.square-top-right {
background-image: linear-gradient(
225deg,
rgba(255, 255, 255, 0.3) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0.3) 75%,
transparent 75%
);
/* Цвета: белый 30% непрозрачности, прозрачный, белый 30% непрозрачности, прозрачный */
}

.square-bottom-right {
background-image: linear-gradient(
315deg,
rgba(255, 255, 255, 0.4) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.4) 50%,
rgba(255, 255, 255, 0.4) 75%,
transparent 75%
);
}

.square-bottom-left {
/* Цвета: белый 50% непрозрачности, прозрачный, белый 50% непрозрачности, прозрачный */
}

.squares {
margin: 70px auto;
width: 300px;
height: 300px;
background-color: #3498db;
}

.square {
float: left;
width: 50%;
height: 150px;
}

html,
body {
margin: 0;
padding: 0;
}

давайте сначала расшифруем rgba - red green blue alpha - красный зеленый голубой непрозрачность, это 8-битные (2 в 8 степени = 256 оттенков, соответственно от 0 до 255) кодировки каждого цвета.
соответственно для белого цвета все выкручены на максимум, для черного - на минимум.
rgb(255, 255, 255)
alpha - это непрозрачность, по заданию 30% - указываем в долях
rgba(255, 255, 255, 0.3)

линейный градиент мы задаем равными интервалами по 25%
т.е. это 25%, 50%, 75%
а еще мы повернем его на 225 градусов - 225degree - 225deg

Итак, резюмируя:

225deg, // повернули градиент на 225 градусов
rgba(255, 255, 255, 0.3) 25%, // красный 255, зеленый 255, голубой 255, непрозрачность 0.3 [от 0] до 25% ширины градиента
transparent 25%, // прозрачный цвет от 25%…
transparent 50%, // …до 50% ширины градиента
rgba(255, 255, 255, 0.3) 50%, // тот же цвет что и в первой полосе от 50%…
rgba(255, 255, 255, 0.3) 75%, // …до 75% ширины градиента
transparent 75% // от 75% и до конца - прозрачный

т.е. первым аргументом передаем цвет, вторым интервал (от или до, в зависимости от контекста) в полосках

То есть линейный градиент будет занимать первые 25% части элемента, а после 25% будет повторяться каждые 25%, так?

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

А какая положенная ширина у градиента? Я не хотел бы вас задалбливать своими вопросами, но загуглив я инфы не нашёл.

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

1 лайк