UPSS SIZE 1: 118 x 65 mm

UPSS SIZE 2: 120 x 73 mm

UPSS SIZE 3: 134 x 73 mm

UPSS SIZE 4: 130 x 80 mm

UPSS SIZE 5: 137 x 77 mm

UPSS SIZE 6: 140 x 78 mm

UPSS SIZE 7: 139 x 82 mm

UPSS SIZE 8: 149 x 85 mm

UPSS SIZE 9: 149 x 92 mm

UPSS SIZE 10: 160 x 89 mm

UPSS SIZE 11: 160 x 95 mm

UPSS SIZE 12: 165 x 92 mm

UPSS SIZE 13: 171 x 94 mm

UPSS SIZE 14: 119 x 92 mm

UPSS SIZE 15: 130 x 105 mm

UPSS SIZE 16: 134 x 108 mm

UPSS SIZE 17: 140 x 108 mm

UPSS SIZE 18: 143 x 111 mm

UPSS SIZE 19: 191 x 99 mm

UPSS SIZE 20: 219 x 92 mm

UPSS SIZE 21: 225 x 98 mm

UPSS SIZE 22: 241 X 100 mm

UPSS SIZE 23: 241 x 105 mm

UPSS SIZE 24: 249 x 104 mm

UPSS SIZE 25: 258 x 111 mm

UPSS SIZE 26: 271 x 118 mm

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.