splincodewd
@splincodewd
Developer

Как для каждого блока задать свой цвет?

Вчера я задавал вопрос, но без верстки нет особого смысла вдумываться об идее
Я выложил верстку тут:
https://jsfiddle.net/kLfzb1nd/

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

Parent1
---Child1
------Child1-Child1
------Child1-Child2
---Child2

Parent2

Parent3


Задача сделать так, чтобы каждый родительский блок отличался цветом (родительских блоков может быть и тысяча, так как данные и DOM генерируется на стороне бэкэнда), хотя бы альфа каналом (уменьшать чуть-чуть прозрачность), но как это можно сделать не используя JS?

Реальная ситуация такая, дело в том, тут непонятно кто является родителем дочернего элемента (если делать внутренние margin, то инпуты едут)

Такое же можно заметить и в верстке на jsfiddle
942161aacb9e42779b2f8e543a7f47b7.png

Непонятно, как дочерние элементы соотносятся с родительскими блоками, поэтому было предложено уменьшать у дочерних элементов альфа-канал больше, но опять же, как это сделать на CSS?
  • Вопрос задан
  • 217 просмотров
Решения вопроса 3
@GreatRash
Можно эмулировать если задать бекграунд с альфой: codepen.io/GreatRash/pen/gwYKJk
Ответ написан
atis2345
@atis2345
PHP developer
Сомнительная идея.
Например у вас основной цвет желтый. Какой цвет будет у 5, 6 элемента? Скорей всего болотный или цвета г. Ну или очень светлый. Вам либо нужно знать вложенность ну или цвета будут всегда одинаковые что есть наилучший вариант.

На SASS:
Stackoverflow
Ответ написан
sergski
@sergski
web-developer
В sass есть циклы и функции для работы с цветом, с помощью которых несложно решить задачу создания классов для раскрашивания таких меню. Но, у вас количество родителей и вложеностей детей неопределенная и в этом проблема. Допустим, можно задать избыточное количество, но градаци цветов станет очень близкой. Те имхо в вашем случае можно попробовать подобрать достаточное число для покрытия потребностей числе родителей/детей при различимости в цветовых переходах.
+ вот хорошая статья
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы