Как «нарисовать» стопку карт?

Question

[bitwheeze]

Есть нужда нарисовать стопку карт, так что бы можно было видно число карт в стопке. То-есть этакое 2.5D.



Самое простое нагенерить кучу div-ов, с фоном рубашки карт. Но в таком случае получается куча ненужных div-ов. Сильно некрасиво для Accessibility выходит. Вот думаю, можно ли как то обойтись одним div-ом и css. Как то повторить фон нужное число раз со сдвигом?

Спасибо

Comments

[Lynn «Кофеман»]

Обычно в 2.5D такой точностью не заморачиваются и ограничиваются вариантами 1, 2 и «много» =)

Ну и просто 51 карта и минимум по 2px на сдвиг что бы они не слились в одну сплошную линию это будет лишних 100px. Что-то мне плохо верится что это можно отрисовать красиво.

ЗЫ. А при чём тут Accessibility?

[bitwheeze]

Ну обычно наверное да, достаточно пару штук нарисовать, но в данном случае должен получиться блэкджек. Я конечно не специалист в нем, но судя по всему для игроков важно прикидывать число карт в колоде, что бы вести подсчет. Потому хочу достаточно точно отобразить. Не каждую карту, каждую вторую или даже каждую четвертую. В стопке в покере 2-4 стандартных колоды карт.

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

Answer 1

[bitwheeze]

Нашел в интернете, как сделать.

{
    top: var(--deck-top);
    left: var(--deck-left);
    background-image: url("/assets/back_02.png"), url("/assets/back_02.png"), url("/assets/back_02.png");
    background-size: var(--card-width) var(--card-height);
    background-repeat: no-repeat, no-repeat, no-repeat;
    width: var(--card-width);
    height: calc(var(--card-height) + 6px);
    border: 1px solid red;
    background-position: left 0px bottom 0px, left 0px bottom 2px, left 0px bottom 4px;
}

И вот результат

Answer 2

[Mikhail Osher]

Количество div элементов, особенно в данном случае, не является чем-то критическим.

Не вижу никаких проблем в данном случае использовать нужное количество div'ов + z-index.

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

Как то повторить фон нужное число раз со сдвигом?

Тут уже додумайте сами. Звучит, как задание.

Answer 3

[Максим]

https://ru.stackoverflow.com/a/904634/308951 я раньше делал это