CSS   31
cropper css
Guest on 8th March 2023 12:26:42 AM


  1. .imgCrop_wrap {
  2.         /* width: 500px;   @done_in_js */
  3.         /* height: 375px;  @done_in_js */
  4.         position: relative;
  5.         cursor: crosshair;
  6. }
  7.  
  8. /* an extra classname is applied for Opera < 9.0 to fix its lack of opacity support */
  9. .imgCrop_wrap.opera8 .imgCrop_overlay,
  10. .imgCrop_wrap.opera8 .imgCrop_clickArea {
  11.         background-color: transparent;
  12. }
  13.  
  14. /* fix for IE displaying all boxes at line-height by default, although they are still 1 pixel high until we combine them with the pointless span */
  15. .imgCrop_wrap,
  16. .imgCrop_wrap * {
  17.         font-size: 0;
  18. }
  19.  
  20. .imgCrop_overlay {
  21.         background-color: #000;
  22.         opacity: 0.5;
  23.         filter:alpha(opacity=50);
  24.         position: absolute;
  25.         width: 100%;
  26.         height: 100%;
  27. }
  28.  
  29. .imgCrop_selArea {
  30.         position: absolute;
  31.         /* @done_in_js
  32.         top: 20px;
  33.         left: 20px;
  34.         width: 200px;
  35.         height: 200px;
  36.         background: transparent url(castle.jpg) no-repeat  -210px -110px;
  37.         */
  38.         cursor: move;
  39.         z-index: 2;
  40. }
  41.  
  42. /* clickArea is all a fix for IE 5.5 & 6 to allow the user to click on the given area */
  43. .imgCrop_clickArea {
  44.         width: 100%;
  45.         height: 100%;
  46.         background-color: #FFF;
  47.         opacity: 0.01;
  48.         filter:alpha(opacity=01);
  49. }
  50.  
  51. .imgCrop_marqueeHoriz {
  52.         position: absolute;
  53.         width: 100%;
  54.         height: 1px;
  55.         background: transparent url(marqueeHoriz.gif) repeat-x 0 0;
  56.         z-index: 3;
  57. }
  58.  
  59. .imgCrop_marqueeVert {
  60.         position: absolute;
  61.         height: 100%;
  62.         width: 1px;
  63.         background: transparent url(marqueeVert.gif) repeat-y 0 0;
  64.         z-index: 3;
  65. }
  66.  
  67. .imgCrop_marqueeNorth { top: 0; left: 0; }
  68. .imgCrop_marqueeEast  { top: 0; right: 0; }
  69. .imgCrop_marqueeSouth { bottom: 0px; left: 0; }
  70. .imgCrop_marqueeWest  { top: 0; left: 0; }
  71.  
  72.  
  73. .imgCrop_handle {
  74.         position: absolute;
  75.         border: 1px solid #333;
  76.         width: 6px;
  77.         height: 6px;
  78.         background: #FFF;
  79.         opacity: 0.5;
  80.         filter:alpha(opacity=50);
  81.         z-index: 4;
  82. }
  83.  
  84. /* fix IE 5 box model */
  85. * html .imgCrop_handle {
  86.         width: 8px;
  87.         height: 8px;
  88.         wid\th: 6px;
  89.         hei\ght: 6px;
  90. }
  91.  
  92. .imgCrop_handleN {
  93.         top: -3px;
  94.         left: 0;
  95.         /* margin-left: 49%;    @done_in_js */
  96.         cursor: n-resize;
  97. }
  98.  
  99. .imgCrop_handleNE {
  100.         top: -3px;
  101.         right: -3px;
  102.         cursor: ne-resize;
  103. }
  104.  
  105. .imgCrop_handleE {
  106.         top: 0;
  107.         right: -3px;
  108.         /* margin-top: 49%;    @done_in_js */
  109.         cursor: e-resize;
  110. }
  111.  
  112. .imgCrop_handleSE {
  113.         right: -3px;
  114.         bottom: -3px;
  115.         cursor: se-resize;
  116. }
  117.  
  118. .imgCrop_handleS {
  119.         right: 0;
  120.         bottom: -3px;
  121.         /* margin-right: 49%; @done_in_js */
  122.         cursor: s-resize;
  123. }
  124.  
  125. .imgCrop_handleSW {
  126.         left: -3px;
  127.         bottom: -3px;
  128.         cursor: sw-resize;
  129. }
  130.  
  131. .imgCrop_handleW {
  132.         top: 0;
  133.         left: -3px;
  134.         /* margin-top: 49%;  @done_in_js */
  135.         cursor: e-resize;
  136. }
  137.  
  138. .imgCrop_handleNW {
  139.         top: -3px;
  140.         left: -3px;
  141.         cursor: nw-resize;
  142. }
  143.  
  144. /**
  145.  * Create an area to click & drag around on as the default browser behaviour is to let you drag the image
  146.  */
  147. .imgCrop_dragArea {
  148.         width: 100%;
  149.         height: 100%;
  150.         z-index: 200;
  151.         position: absolute;
  152.         top: 0;
  153.         left: 0;
  154. }
  155.  
  156. .imgCrop_previewWrap {
  157.         /* width: 200px;  @done_in_js */
  158.         /* height: 200px; @done_in_js */
  159.         overflow: hidden;
  160.         position: relative;
  161. }
  162.  
  163. .imgCrop_previewWrap img {
  164.         position: absolute;
  165. }
Raw Paste

Login or Register to edit or fork this paste. It's free.