@StepsOnes

Как реализовать такую таблицу с затемнением?

Как реализовать такую таблицу с затемнением?
641df408b789b267980400.png
  • Вопрос задан
  • 110 просмотров
Решения вопроса 1
sfi0zy
@sfi0zy Куратор тега CSS
Creative frontend developer
В таких штуках самое главное - это свести цвета на пересечениях линий. Просто вставить линии-градиенты на всю ширину-высоту таблицы картинками тут не прокатит т.к. пропорции ячеек могут меняться и цвета на пересечениях будут расходиться. Вариант наложить на всю сетку SVG-маску тоже отпадает по этой же причине - она будет расходиться с пропорциями конкретных ячеек и будет ломаться логика, в каких пределах должно происходить затемнение. Поэтому, вне зависимости от выбора CSS-свойств, все будет сводиться к одной и той же идее, что мы должны сделать границы для всех ячеек в центре стандартным образом, а для первой и последней колонки и первой и последней строки нарисовать кастомные границы. Как вариант:



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

P.S.: И тут, по хорошему, стоит уточнить у дизайнера, как он видит длину затемнения в процентах от длины ячейки, особенно когда они сильно отличаются по пропорциям. Здесь градиенты от края до края, но, возможно, что в вашем случае нужно делать градиент не от 0% до 100%, а от 0% до какого-то другого значения, возможно зависящего от размера шрифта, а дальше уже заканчивать одним цветом.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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