CSS Resize Generator

Full Example

/* CSS Resize Examples */

/* Basic resize values */
.resizable {
  resize: both;          /* Resize in any direction */
  overflow: auto;        /* Required for resize to work! */
}

.resize-horizontal {
  resize: horizontal;    /* Width only */
  overflow: auto;
}

.resize-vertical {
  resize: vertical;      /* Height only */
  overflow: auto;
}

.no-resize {
  resize: none;          /* Disable resize */
}

/* Logical resize (for internationalization) */
.resize-block {
  resize: block;         /* Block axis (vertical in LTR) */
  overflow: auto;
}

.resize-inline {
  resize: inline;        /* Inline axis (horizontal in LTR) */
  overflow: auto;
}

/* Standard textarea - resizable by default */
textarea {
  resize: vertical;      /* Usually best to limit to vertical */
  min-height: 100px;
  max-height: 400px;
  overflow: auto;
}

/* Disable textarea resize */
textarea.no-resize {
  resize: none;
}

/* Resizable sidebar/panel */
.sidebar {
  resize: horizontal;
  overflow: auto;
  min-width: 200px;
  max-width: 500px;
  width: 280px;
  height: 100%;
  border-right: 1px solid #ddd;
}

/* Resizable code editor area */
.code-editor {
  resize: vertical;
  overflow: auto;
  min-height: 150px;
  max-height: 80vh;
  font-family: monospace;
  background: #1e1e1e;
  color: #d4d4d4;
  padding: 1rem;
  border-radius: 8px;
}

/* Chat/message input */
.chat-input {
  resize: vertical;
  overflow: hidden;
  min-height: 40px;
  max-height: 200px;
  border: 1px solid #ddd;
  border-radius: 20px;
  padding: 0.5rem 1rem;
}

/* Resizable modal/dialog */
.modal-resizable {
  resize: both;
  overflow: auto;
  min-width: 300px;
  min-height: 200px;
  max-width: 90vw;
  max-height: 90vh;
}

/* Resizable notes/sticky */
.sticky-note {
  resize: both;
  overflow: auto;
  min-width: 150px;
  min-height: 150px;
  max-width: 400px;
  max-height: 400px;
  background: #fff3cd;
  padding: 1rem;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
}

/* Image container */
.image-preview {
  resize: both;
  overflow: hidden;
  min-width: 100px;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Resizable columns layout */
.column-resizable {
  resize: horizontal;
  overflow: auto;
  min-width: 100px;
  flex-shrink: 0;
}

/* Terminal/console */
.terminal {
  resize: both;
  overflow: auto;
  min-width: 400px;
  min-height: 200px;
  background: #000;
  color: #0f0;
  font-family: monospace;
  padding: 1rem;
}

/* Form field group */
.field-group {
  resize: vertical;
  overflow: auto;
  min-height: 100px;
  max-height: 500px;
  border: 1px solid #ddd;
  padding: 1rem;
}

/* Split pane */
.split-pane-left,
.split-pane-right {
  resize: horizontal;
  overflow: auto;
  min-width: 200px;
  flex: 1;
}

/* Cards grid container */
.cards-container {
  resize: both;
  overflow: auto;
  min-width: 300px;
  min-height: 200px;
}

/* Styling the resize handle (WebKit only) */
.custom-handle::-webkit-resizer {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 4px;
}

/* Hide resize handle but keep functionality */
.subtle-resize {
  resize: both;
  overflow: auto;
}

.subtle-resize::-webkit-resizer {
  background: transparent;
}

/* Resize with custom cursor */
.resizable-cursor {
  resize: both;
  overflow: auto;
  cursor: nwse-resize;
}

/* Responsive resize limits */
@media (max-width: 768px) {
  .sidebar {
    resize: none;        /* Disable on mobile */
  }

  textarea {
    resize: vertical;    /* Only vertical on mobile */
    max-height: 200px;
  }
}

/* Print - disable resize */
@media print {
  * {
    resize: none !important;
  }
}

/* Focus state enhancement */
.resizable:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* Resizable with visible handle */
.resizable-visible {
  resize: both;
  overflow: auto;
  position: relative;
}

.resizable-visible::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background: linear-gradient(
    135deg,
    transparent 50%,
    #ccc 50%,
    #ccc 60%,
    transparent 60%,
    transparent 70%,
    #ccc 70%,
    #ccc 80%,
    transparent 80%
  );
  pointer-events: none;
}

/* Accessibility - resize indicator */
.resizable[aria-label]::before {
  content: attr(aria-label);
  position: absolute;
  bottom: 4px;
  right: 24px;
  font-size: 10px;
  color: #999;
  opacity: 0;
  transition: opacity 0.2s;
}

.resizable[aria-label]:hover::before {
  opacity: 1;
}