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
090 - Text Wrap
🔥 100 - Popover
🔥 110 - scroll-driven animations
999 - Playground
Loading ...
CSS
:root { --modal-bg: #fafafa; --modal-color: #313131; --modal-padding: 1.5rem; --modal-border-radius: 1rem; } .modal { position: fixed; top: 100%; 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; transition-behavior: allow-discrete; color: var(--modal-color); background: var(--modal-bg); opacity: 0; width: clamp(12rem, 80vw, 38rem); scale: 0.25; & > *:first-child { margin-top: 0; } &.show { display: block; top: 50%; scale: 1; opacity: 1; @starting-style { top: 100%; opacity: 0; scale: 0.25; } } } :root { --btn-color: #ffffff; --btn-bg: #9c27b0; --btn-border-color: hsl(from var(--btn-bg) h s calc(l * 1.2)); --btn-hover-color: var(--btn-color); --btn-hover-bg: hsl(from var(--btn-bg) h s calc(l * 1.1)); --btn-hover-border-color: hsl(from var(--btn-bg) h s calc(l * 1.3)); --btn-focus-color: var(--btn-color); --btn-focus-bg: hsl(from var(--btn-bg) h s calc(l * 1.2)); --btn-focus-border-color: hsl(from var(--btn-bg) h s calc(l * 1.4)); } .container { text-align: center; } .btn { border: 2px solid transparent; border-radius: .25rem; padding: .5rem 1rem; font-size: 1.2rem; color: var(--btn-color); background: var(--btn-bg); border-color: var(--btn-border-color); cursor: pointer; &:hover { color: var(--btn-hover-color); background: var(--btn-hover-bg); border-color: var(--btn-hover-border-color); } &:focus { color: var(--btn-focus-color); background: var(--btn-focus-bg); border-color: var(--btn-focus-border-color); } }
HTML
<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> <div class="form"> <div class="form-section"> <label for="transitionbehavior">transition-behavior:</label> <select id="transitionbehavior" data-trigger="change" data-target=".modal" data-property="transition-behavior" > <option value="allow-discrete">allow-discrete</option> <option value="normal">normal</option> </select> </div> </div>
-a
+A
Off
1/2
1/1
2/1
Zoom
Document
Container