UPSS SIZE 1: 118 x 65 mm

hello. Let's layout some sized divs

UPSS SIZE 2: 120 x 73 mm

hello. Let's layout some sized divs

UPSS SIZE 3: 134 x 73 mm

hello. Let's layout some sized divs

UPSS SIZE 4: 130 x 80 mm

hello. Let's layout some sized divs

UPSS SIZE 5: 137 x 77 mm

hello. Let's layout some sized divs

UPSS SIZE 6: 140 x 78 mm

hello. Let's layout some sized divs

UPSS SIZE 7: 139 x 82 mm

UPSS SIZE 8: 149 x 85 mm

hello. Let's layout some sized divs

UPSS SIZE 9: 149 x 92 mm

hello. Let's layout some sized divs

UPSS SIZE 10: 160 x 89 mm

hello. Let's layout some sized divs

UPSS SIZE 11: 160 x 95 mm

hello. Let's layout some sized divs

UPSS SIZE 12: 165 x 92 mm

hello. Let's layout some sized divs

UPSS SIZE 13: 171 x 94 mm

hello. Let's layout some sized divs

UPSS SIZE 14: 119 x 92 mm

hello. Let's layout some sized divs

UPSS SIZE 15: 130 x 105 mm

hello. Let's layout some sized divs

UPSS SIZE 16: 134 x 108 mm

hello. Let's layout some sized divs

UPSS SIZE 17: 140 x 108 mm

hello. Let's layout some sized divs

UPSS SIZE 18: 143 x 111 mm

hello. Let's layout some sized divs

UPSS SIZE 19: 191 x 99 mm

hello. Let's layout some sized divs

UPSS SIZE 20: 219 x 92 mm

hello. Let's layout some sized divs

UPSS SIZE 21: 225 x 98 mm

hello. Let's layout some sized divs

UPSS SIZE 22: 241 X 100 mm

hello. Let's layout some sized divs

UPSS SIZE 23: 241 x 105 mm

hello. Let's layout some sized divs

UPSS SIZE 24: 249 x 104 mm

hello. Let's layout some sized divs

UPSS SIZE 25: 258 x 111 mm

hello. Let's layout some sized divs

UPSS SIZE 26: 271 x 118 mm

hello. Let's layout some sized divs

This is a demonstration of sizing and layout of div elements. These elements are sized to common envelope sizes. They are laid out in a grid and slightly rotated to show them off. Also they are styled with various background images simulating the paper that the envelopes are made of. The whole thing is scaled smaller because it would be very big otherwise.

This demonstration is brought to you by Amillia Publishing Company. It is classified as a 'toy program' because it is just a demonstration of cool html5, CSS and JavaScript methods and exists as a demonstration for the amusement of the public and other programers. Hopefully highering programmers!

What is next with this demo? A bunch of ideas come to mind. I'd like to be able to set the scaling of the sizes of these envelopes so that this happens for the user in real time. I'd like to be able to create the sziing of the divs based upon the information that is contained in the data. But that seems pendantic. Also: create a 'custom' envelope size: a new class of the object.

There are a lot of topics that could be discussed here concerning this demo. Many various design ideas come to mind. Various 'video game' like concepts come to mind.

The next step for this would also, of course, be to put in animation so that these envelopes don't just lay there in an uninteresting way but can be collected, sorted, stacked, transfered, antimated, etc, all the time with all of their cachettes, etc, also being animated, etc. . . That is where this envelope demo should be taken.

There are some important lessons to take from here. The first is that the scale feature of the transform makes origins change, etc. So it is not trivial to center the items. I don't really understand enough yet the transform effects and how they work in the 'flow' of the doucment.