Home
001 - Basic
002 - Variables
003 - Layer
004 - Nested Rules
010 - Grid
011 - Grid Complex
012 - Grid Contents
013 - Grid Logos
014 - Grid Spanning
020 - Container
021 - Container Style Queries
030 - Focus Visible
031 - Focus Within
040 - Color Scheme
041 - Color Light-Dark
042 - Color Mix
043 - Color Mix Mixer
044 - Color Mix Palette
045 - Relative Color
046 - Relative Color Palette
050 - Mask Image
051 - Background Clip Text
060 - Accent Color
070 - Has
071 - Starting Style
072 - Transition Behavior
073 - Anchor Position
090 - Text Wrap
100 - Popover
101 - Details Element
110 - Scroll Driven Animations
120 - Customizable Select
999 - Playground
Loading ...
CSS
-a
+A
.modal { --modal-bg: #fafafa; --modal-color: #313131; --modal-padding: 1.5rem; --modal-border-radius: 1rem; position: fixed; top: 50%; left: 50%; display: none; translate: -50% -50%; padding: var(--modal-padding); border-radius: var(--modal-border-radius); transition-property: opacity, display, top, scale; transition-duration: 0.5s; color: var(--modal-color); background: var(--modal-bg); opacity: 1; width: clamp(12rem, 80vw, 38rem); scale: 1; @starting-style { top: 100%; opacity: 0; scale: 0.25; } & > *:first-child { margin-top: 0; } &.show { display: block; } }
HTML
-a
+A
<div class="container"> <button type="button" class="btn" data-modal-toggle="true"> Open </button> </div> <div id="modal" class="modal"> <p>Morbi faucibus imperdiet lectus in sodales. Donec id odio fermentum massa mollis eleifend. Cras posuere vulputate luctus. Praesent eget dignissim lorem. Mauris eu sagittis mauris. Nulla id accumsan eros. Aliquam erat volutpat. Vivamus in ligula feugiat, facilisis ex a, convallis nisl. Nullam hendrerit odio congue egestas mattis.</p> <p>Fusce leo urna, interdum id euismod ut, dapibus nec erat. Nulla placerat sodales lacus, blandit ornare nisi posuere volutpat. Vivamus ut orci eget augue dignissim dapibus id ac quam. Aenean nec purus sit amet nulla dapibus feugiat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec tristique tincidunt velit sed luctus. Nam ultricies fringilla lacus id finibus.</p> <button type="button" class="btn" data-modal-toggle="true"> Close </button> </div>
Off
1/2
1/1
2/1
Zoom
Document
Container