| 1 | .imageUploader {
|
| 2 | position: relative;
|
| 3 | }
|
| 4 |
|
| 5 | .imageUploader label {
|
| 6 | width: 256px;
|
| 7 | height: 256px;
|
| 8 | }
|
| 9 |
|
| 10 | .imageUploader input[type='file'] {
|
| 11 | display: none;
|
| 12 | }
|
| 13 |
|
| 14 | .imageUploader input[type='range'] {
|
| 15 | position: absolute;
|
| 16 | transform-origin: top left;
|
| 17 | left: 300px;
|
| 18 | transform: rotate(90deg);
|
| 19 | }
|
| 20 |
|
| 21 | .imageUploader canvas {
|
| 22 | width: 512px;
|
| 23 | height: 512px;
|
| 24 | transform: scale(0.5);
|
| 25 | margin: 0 -256px -256px 0;
|
| 26 | transform-origin: top left;
|
| 27 | background-image:
|
| 28 | -moz-linear-gradient(45deg, #CCC 25%, transparent 25%),
|
| 29 | -moz-linear-gradient(-45deg, #CCC 25%, transparent 25%),
|
| 30 | -moz-linear-gradient(45deg, transparent 75%, #CCC 75%),
|
| 31 | -moz-linear-gradient(-45deg, transparent 75%, #CCC 75%);
|
| 32 | background-image:
|
| 33 | -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #CCC), color-stop(.25, transparent)),
|
| 34 | -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #CCC), color-stop(.25, transparent)),
|
| 35 | -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #CCC)),
|
| 36 | -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #CCC));
|
| 37 | background-color: #EEE;
|
| 38 | background-size:40px 40px;
|
| 39 | background-position:0 0, 20px 0, 20px -20px, 0px 20px;
|
| 40 | }
|