Градиенти и шарки

Как работят повтарящите се градиенти като шарки

Когато зададете фиксиран размер на фона, един gradient може да се повтаря хоризонтално и вертикално и да създава шарка (pattern). Чрез комбиниране на няколко градиента и използване на прозрачен цвят можете да изградите по-сложни фонове без изображения. Най-важното е, че с правилно позициониране и отместване се получава цялостен, повтарящ се дизайн.

Стъпка по стъпка: създаване на диагонална шарка

1. Започнете с вече създаден елиптичен radial-gradient.
2. Задайте фиксиран размер чрез background-size, за да се получи повторение на градиента.
3. Заменете крайния цвят с transparent, за да позволите фонът отдолу да прозира.
4. Добавете втори градиент, като го отделите със запетая в background.
5. Направете го от черно към transparent.
6. Използвайте позициониране и отместване (например половината от размера – 100px 25px), за да преместите втория градиент така, че да запълни прозрачните зони.
7. Настройте цветните стопове (например прозрачност от 50%), за да оформите балансирана шарка.

Резултатът е редуване на цветни и черни елипси по диагонал, което създава стилен фон.

Използвани CSS свойства

• background – позволява добавяне на няколко градиента, разделени със запетая
• radial-gradient() – създава кръгов или елиптичен градиент
• transparent – задава прозрачен цвят в градиента
• background-size – определя размера и контролира повторението
• background-position – отмества фоновото изображение за прецизно подравняване