css mischief: a movable, resizable widget

2024-12-13 15:30

grab the handle on the top-left-hand corner to move me around :) grab the handle on the bottom-right-hand to resize!

nota bene

tested on latest stable firefox/linux, chromium/macos, safari/macos. this will not work on safari/ios because apple intentionally disables this property on that platform.

credits

view source

<div style="height: min(100vh,30rem); overflow: clip; background: linear-gradient(#008080, #9198e5); border-radius: 0.75rem;">
  <div style="display:table; position: relative;">
    <div style="display:table-row; overflow: visible;">
      <div style="display:table-cell">
        <div style="resize:both; overflow:hidden; background: transparent; width: 2rem; height: 2rem;"></div>
      </div>
      <div style="display:table-cell; overflow:visible;"></div>
    </div>
    <div style="display:table-row;  overflow: visible;">
      <div style="display:table-cell"></div>
      <div style="display:table-cell; overflow:visible; min-width: 20rem; max-width: 20rem;">
        <div style="position: absolute; user-select: none; pointer-events: none; margin-left: -1rem; margin-top: -1rem; width: 1.5rem; height: 1.5rem; border-radius: 0.75rem; box-shadow: 0 0.1rem 0.1rem rgb(0 0 0/ 25%); background: #999">
          <!--https://remixicon.com/icon/drag-move-2-fill-->
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
          >
            <path d="M18 11V8L22 12L18 16V13H13V18H16L12 22L8 18H11V13H6V16L2 12L6 8V11H11V6H8L12 2L16 6H13V11H18Z"></path>
          </svg>
        </div>
        <div style="margin-left: -0.5rem; margin-top: -0.5rem; border-radius: 0.75rem; box-shadow: 0 0.1rem 0.1rem rgb(0 0 0/ 25); background: light-dark(#eee, #111); padding: 1rem; overflow: hidden; resize: both;">
          grab the handle on the top-left-hand corner to move me around :) grab the handle on the bottom-right-hand to resize!
        </div>
      </div>
    </div>
  </div>
</div>