Monsoon v0.2.0
Made by Alexandre Kohler Star

Media and files

Compare vertical

A top and bottom split. It needs monsoon.js.

Media and files1 classesNeeds monsoon.jsLight and dark

Needs monsoon.js. The styles work on their own, and the behavior comes from the optional interactive layer: add <script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script> or import 'monsooncss/js'. See the interactive layer.

Example

Full

JavaScript API

Attribute

Add compare-vertical next to compare. Same API as the compare.

Classes

1 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

ClassTypeWhat it does
Base Base class of the compare vertical. On a <div> in the example. Sets ns-resize cursor, offsets, width, height and transform.
CSS
.compare-vertical .compare-knob {
  rotate: 90deg;
}

.compare-vertical .compare-after {
  clip-path: inset(var(--pos) 0 0 0);
}

Usage

The styles ship inside the same stylesheet as the utilities, and the behavior comes from the optional monsoon.js script, which enhances any element with a matching data-m attribute, including markup added later.

index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">
<script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script>

<!-- Compare vertical: start from the base class, then add modifiers -->
<div class="compare compare-vertical aspect-video max-w-xl" data-m-compare data-m-compare-position="40"><img class="compare-before" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1200'%20height='675'%20viewBox='0%200%201200%20675'%3E%3Cdefs%3E%3ClinearGradient%20id='s'%20x2='0'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%23cbd5e1'/%3E%3Cstop%20offset='1'%20stop-color='%23e2e8f0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width='1200'%20height='675'%20fill='url(%23s)'/%3E%3Ccircle%20cx='840'%20cy='230'%20r='74.25'%20fill='%23f1f5f9'/%3E%3Cpath%20d='M0%20418.5L240%20283.5L456%20391.5L720%20243L1200%20445.5V675H0Z'%20fill='%2394a3b8'/%3E%3Cpath%20d='M0%20499.5L336%20378L624%20486L936%20405L1200%20513V675H0Z'%20fill='%2364748b'/%3E%3Crect%20y='567'%20width='1200'%20height='108'%20fill='%23475569'%20opacity='.85'/%3E%3C/svg%3E" alt="Before: the raw photo"><img class="compare-after" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1200'%20height='675'%20viewBox='0%200%201200%20675'%3E%3Cdefs%3E%3ClinearGradient%20id='s'%20x2='0'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%23fdba74'/%3E%3Cstop%20offset='1'%20stop-color='%23f472b6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width='1200'%20height='675'%20fill='url(%23s)'/%3E%3Ccircle%20cx='840'%20cy='230'%20r='74.25'%20fill='%23fff7d6'/%3E%3Cpath%20d='M0%20418.5L240%20283.5L456%20391.5L720%20243L1200%20445.5V675H0Z'%20fill='%237c3aed'/%3E%3Cpath%20d='M0%20499.5L336%20378L624%20486L936%20405L1200%20513V675H0Z'%20fill='%233b0764'/%3E%3Crect%20y='567'%20width='1200'%20height='108'%20fill='%231e1b4b'%20opacity='.85'/%3E%3C/svg%3E" alt="After: the color graded photo"><span class="compare-label">Before</span><span class="compare-label compare-label-after">After</span></div>

Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.

Accessibility

  • Give meaningful images an alt text and decorative ones alt="". Initials avatars should expose the full name to screen readers.
  • Every interactive part shows a visible focus ring with :focus-visible, and tone colors pair with -foreground tokens that keep text at 4.5:1 or better in light and dark mode.
Media and filesBefore and after compareTwo pictures (or any two elements) split by a divider that follows the pointer, a finger or the keyboard through a native range input, with optional labels. It needs monsoon.js. Without it a fixed half and half split shows.Media and filesMedia gallery masonryThe same gallery in balanced columns that keep each picture at its own height. It needs monsoon.js.Media and filesSignature padSmooth, speed and pressure aware strokes with pen colors and width, undo, clear, PNG and SVG export, and strokes that survive a resize; the result goes into a hidden input. A typed name field stays available for people who cannot draw. It needs monsoon.js. Without it only the typed name field shows.Media and filesDropzoneDrag and drop, click to browse or paste files, with type, size and count validation, previews for images, GIFs, video, audio and documents, progress, retry, remove, reorder and a total; the native input stays in sync so a normal form submit sends the files. It needs monsoon.js. Without it the native file input still works.

No recent searches

Try , , or .

Recent

Loading the search index

No results for ""

Check the spelling, or search a class name such as px-4.