שני מהלכי הקרפט מהעבודה החדשה: צל קשיח בצבע מותג בהיסט 45 מעלות, ורדיוס שמעוגל רק בצד אחד.
מתי משתמשים: כרטיסי מפתח בעורות עם אופי. שפת צל אחת לעמוד: או מוזח או רך, לא שניהם.
הדמו כאן עיצובי-ניטרלי בכוונה. כשהמהלך נכנס לפרויקט, מיובאת רק ההתנהגות: הצבעים, הרדיוסים, הפונטים והצללים יורשים את העיצוב של אותו פרויקט.
תמיד 45 מעלות, תמיד צבע מותג, בלי blur. עבור עליי.
40 40 0 0. שובר את המלבניות בלי אפקט.
0 0 60 0. אסימטריה מכוונת.
הקוד כאן עומד בפני עצמו. כל טוקן עיצוב נושא ברירת מחדל, מחלקות העזר של המאגר מוטמעות בו, ותגי הסקריפט מסודרים לפי הסדר הנכון. פרויקט שמגדיר --accent או --line משלו יורש אותם אוטומטית.
/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.stage{padding:var(--sec, clamp(120px, 12vw, 260px)) var(--gutter, clamp(24px, 5vw, 96px));position:relative}
.stage.tight{padding-block:clamp(48px,5vw,90px)}
.stage.full{padding-inline:0}
/* LM9 · צל מוזח קשיח + רדיוס חד-צדדי */
.craft{display:flex;gap:var(--gap, clamp(16px, 1.6vw, 36px));justify-content:center;flex-wrap:wrap}
.hard{background:var(--card, #fff);border:2px solid var(--ink, #16182b);border-radius:14px;padding:30px;box-shadow:8px 8px 0 #f49e40;max-width:240px;transition:transform .25s,box-shadow .25s}
.hard:hover{transform:translate(-3px,-3px);box-shadow:12px 12px 0 #f49e40}
.oneside{background:var(--ink, #16182b);color:var(--bg, #f7f7fa);padding:30px;border-radius:40px 40px 0 0;max-width:240px}
.oneside2{background:var(--card, #fff);border:1px solid var(--line, #e4e4ee);padding:30px;border-radius:0 0 60px 0;max-width:240px}
.craft h3{margin:0 0 6px;font-size:17px}.craft p{margin:0;font-size:13.5px;color:var(--muted, #6a6d85)}
.oneside p{color:color-mix(in srgb,var(--bg, #f7f7fa) 70%,transparent)}<div class="stage tight"><div class="craft">
<div class="hard"><h3>צל מוזח קשיח</h3><p>תמיד 45 מעלות, תמיד צבע מותג, בלי blur. עבור עליי.</p></div>
<div class="oneside"><h3>רדיוס עליון בלבד</h3><p>40 40 0 0. שובר את המלבניות בלי אפקט.</p></div>
<div class="oneside2"><h3>פינה אחת בלבד</h3><p>0 0 60 0. אסימטריה מכוונת.</p></div>
</div></div>