Created mesh grid of pixels to represent the counter
I am creating a grid of pixels to represent quantity (see image) and wondering how best to do this.
These tiles should be responsive (1px, 2px, 4px). I could create a super large sprite containing all 196 combinations that are @ 4X, so it scales perfectly to 2px and 1px and then creates a css class ...
<div class="pixel-block c-000"></div>
<div class="pixel-block c-001"></div>
... there must be a better way?
Any ideas are appreciated.
+3
source to share
1 answer
Here's an example of how it can be done without using a 196 combination sprite, just a grid image and CSS.
The idea is simple:
- Hold container:
- Mesh image (top)
- A "large" panel that will span the entire height of the container.
- A "small" panel that will only cover the rest.
- The "large panel" will have a width equal to the width of the hole (squared) (14) * in the grid.
- The "low bar" will have a height equal to (count value% 14) * the height of the hole in the grid.
I used a grid with 3px holes (2px + 1px separation) and attributes data-
to set the counter values and an indicator for the big bar (count / 14) and low bar (count% 14).
Here's a demo:
.box {
border:1px solid #6699aa;
width:43px;
height:43px;
position:relative;
background:#aaccff;
overflow:hidden;
display:inline-block;
}
.grid { background:url(http://i.imgur.com/w0jBLzK.png) no-repeat top left;
width:43px;
height:43px;
position:absolute;
top:0;
left:0;
z-index:3;
}
.bigbar {
height:43px;
width:0px;
background:black;
z-index:2;
float:left;
}
.lowbar {
float:left;
width:3px;
height:0px;
position:relative;
background:black;
}
.box[data-big="1"] .bigbar { width:3px; }
.box[data-big="2"] .bigbar { width:6px; }
.box[data-big="3"] .bigbar { width:9px; }
.box[data-big="4"] .bigbar { width:12px; }
.box[data-big="5"] .bigbar { width:15px; }
.box[data-big="6"] .bigbar { width:18px; }
.box[data-big="7"] .bigbar { width:21px; }
.box[data-big="8"] .bigbar { width:24px; }
.box[data-big="9"] .bigbar { width:27px; }
.box[data-big="10"] .bigbar { width:30px; }
.box[data-big="11"] .bigbar { width:33px; }
.box[data-big="12"] .bigbar { width:36px; }
.box[data-big="13"] .bigbar { width:39px; }
.box[data-big="14"] .bigbar { width:42px; }
.box[data-low="1"] .lowbar { height:3px; margin-top:39px; }
.box[data-low="2"] .lowbar { height:6px; margin-top:36px; }
.box[data-low="3"] .lowbar { height:9px; margin-top:33px; }
.box[data-low="4"] .lowbar { height:12px; margin-top:30px; }
.box[data-low="5"] .lowbar { height:15px; margin-top:27px; }
.box[data-low="6"] .lowbar { height:18px; margin-top:24px; }
.box[data-low="7"] .lowbar { height:21px; margin-top:21px; }
.box[data-low="8"] .lowbar { height:24px; margin-top:18px; }
.box[data-low="9"] .lowbar { height:27px; margin-top:15px; }
.box[data-low="10"] .lowbar { height:30px; margin-top:12px; }
.box[data-low="11"] .lowbar { height:33px; margin-top:9px; }
.box[data-low="12"] .lowbar { height:36px; margin-top:6px; }
.box[data-low="13"] .lowbar { height:39px; margin-top:3px; }
.box[data-low="14"] .lowbar { height:42px; margin-top:0px; }
<div class="box" data-count="0" data-big="0" data-low="0">
<div class="grid"></div>
<div class="bigbar"></div>
<div class="lowbar"></div>
</div>
<div class="box" data-count="5" data-big="0" data-low="5">
<div class="grid"></div>
<div class="bigbar"></div>
<div class="lowbar"></div>
</div>
<div class="box" data-count="34" data-big="2" data-low="10">
<div class="grid"></div>
<div class="bigbar"></div>
<div class="lowbar"></div>
</div>
<div class="box" data-count="196" data-big="14" data-low="0">
<div class="grid"></div>
<div class="bigbar"></div>
<div class="lowbar"></div>
</div>
+4
source to share