- Код: Выделить всё
<html>
<head>
<style type="text/css">
.resource {
width: 40px;
height: 45px;
display: table-cell;
text-align: center;
vertical-align: bottom;
background-repeat: no-repeat;
background-position: center center;
}
.amount {
font-size: 12pt;
color: #fff;
text-shadow:
#555 1px 0 2px,
#555 1px 1px 2px,
#555 0 1px 2px,
#555 -1px 1px 2px,
#555 -1px 0 2px,
#555 -1px -1px 2px,
#555 0 -1px 2px,
#555 1px -1px 2px;
}
.gold {
background-image: url(./gold.gif);
}
.mercury {
background-image: url(./mercury.gif);
}
</style>
</head>
<body>
<div class="resource gold">
<span class="amount">1500</span>
</div>
<div class="resource mercury">
<span class="amount">1</span>
</div>
</body>
</html>
Вот сделал. Посмотрите, может, понравится. Сохраните как test.html и положите рядом картинки с сайта: gold.gif и mercury.gif. С размытием тени можно экспериментировать, изменяя последний параметр.
Эх, умел бы я ещё пользоваться всем этим. Дизайн справочника и навигация по нему - да, старые. А что делать.
Очень легко меняется на оттенок серого. Табличка гарантированно будет выглядеть приятнее. Ещё можно границу вообще убрать. А бэкграунд первого и третьего столбца сделать чуть темнее бэкграунда центрального столбца. Тогда таблица будет выглядеть похоже на то, как если бы это была не таблица, а набор блоков с описаниями монстров внизу. В общем, нужно поэкспериментировать, как будут смотреться первый и второй варианты. Но однозначно лучше, чем сейчас.
