Outside the Box

Macro: המבנה של הסקשן

קונספט שמשנה את העימוד עצמו. סקשן שעומד על 0 מתחיל מכאן, ולא רק מנגיעה.

1

Pictures on one grid

1.1 Stepped Pair1.2 Trio1.3 Cascade1.4 Circle detail1.5 Offset frame1.6 Editorial

כמה תמונות חופפות על גריד אחד.

פתח

2

Over the picture

2.1 Plain split2.2 Overlap card2.3 Stepped Pair2.4 Section head

המלל חוצה את קצה התמונה.

פתח

4

Asymmetry

4.1 Photo and centred copy4.2 Offset columns4.3 Head in the step4.4 Zigzag that touches4.5 Text between two pictures4.6 A wide quote4.7 The text at the start4.8 Four columns4.9 Uneven grids

גריד לא סימטרי בטייל: חצי עד הקצה, עמודות מדורגות, שורה עם מלל באמצע.

פתח

5

Bento

5.1 Three pillars5.2 Four pillars

כרטיסים בגדלים שונים בגריד אחד.

פתח

6

uk-expand-to-edge

6.1 To the edge6.2 With breathing room6.3 Zigzag

התמונה יוצאת מהקונטיינר עד הקצה.

פתח

9

Tailwind website style

9.1 Title over a card9.2 Mixed content9.3 Visible lines9.4 Lines as a background9.5 Baseline rhythm

גריד אחד לכותרות ולתוכן, כמו עיתון.

פתח

Micro: נגיעה בתוך מבנה

נגיעות שהמבנה נשאר לידן כמו שהוא: גריד רגיל עם טוויסט אחד.

3

Band card

3.1 Photo band3.2 Colour band3.3 Centred

תמונה על התפר בין פס צבע לסקשן.

פתח

7

Container card

7.1 Tonal block7.2 Over a picture7.3 Dark split7.4 Picture panel7.5 Framed picture

בלוק צבע שמחזיק סקשן שלם.

פתח

8

BG elements

Desktop only (1600+)8.1 Across two sections8.2 A quiet drawing8.3 Opposite corners8.4 A net and a glow

אובייקט בשוליים, נחתך בקצה המסך.

פתח

Image tiles

כולה גריד עם תמונת רקע: uk-image-tiles, בלי רווח ובלי קונטיינר, והכרטיס כולו לינק. מתחת ל-768 הם נערמים.

Card on a picture

תמונת רקע וכרטיס בעמודה אחת מתוך ארבע, אז רוב התמונה נשארת חשופה. בטלפון העמודה הריקה נערמת מתחת לכרטיס, ושם רואים את התמונה.

Split banner

פתאום יש סקשן שמשהו בו חצוי: הרקע מתחלף באמצע הגובה, והבאנר יושב על התפר. רק גרדיאנט עם מעבר חד, בלי שכבות.

Hover swap

יש תמונה, ובמעבר עכבר יש תמונה אחרת: האובייקט, ואז האובייקט בשימוש. לא fade רגיל אלא שני דברים יחד: התמונה החדשה נכנסת ומתיישבת מ-1.06 לגודלה, ב-ease חזק של in-out (--ease-in-out-strong). uk-hover-swap, CSS בלבד, ורק עם עכבר: בטלפון נשארת הראשונה. ברוב הכרטיסים זה סתם zoom על התמונה (uk-hover-scale-image), וזה מספיק. swap רק כשלפריט יש באמת שתי תמונות, ושונות בבירור: שתיים כמעט זהות (אותו אדם, אותו פריים) נקראות כאותה תמונה גם אחרי ההחלפה. ומעבר עכבר אף פעם לא מציג תוכן: בטלפון אין hover, ומה שמסתתר מאחוריו הולך לאיבוד.

<a className="uk-hover-swap uk-card-link">
  <span className="uk-hover-swap__media">
    <img src="/helmet.webp" alt="…" />
    <img className="uk-hover-swap__alt" src="/helmet-worn.webp" alt="" />
  </span>
  <span>Liquid Chrome 2024</span>
</a>

// the mode is a class beside it:
//   (none)               fade: the second picture fades in and settles
//   uk-hover-swap--wipe  the second picture opens from the bottom up
//   one picture only: not a swap, the kit's zoom, [uk-hover-scale-image]
//   <UkHoverShader shader="ripple" />  inside __media: through a shader

fadeLiquid Chrome 2024wipeMirrorball 2026

shaderMirrorball → Podium 2026שיידר:peelpeel-ypixelizesliceswindflyeyesquaresstretchmorph-xmorph-yripplewave-xhorizonx-glass

Negative / Positive

נשמע אידיוטי, לצבוע דיב. אבל ברמת הגלילה זה שובר: שני הצבעים של הדף מתחלפים בתפקיד, הכהה נהיה הרקע והבהיר נהיה המלל, והגלילה נקראת חיובי, שלילי, חיובי. כמעט אין את זה בדמואים: שם הכהה מופיע כקופסה (כרטיס, פוטר), לא כסקשן בקצב של הדף. uk-section-negative הופך את הטוקנים של הסקשן, אז כל מה שבנוי עליהם מתהפך איתו, באותם צבעים של Colour Shift (--uk-body-dark-*): דמו שהגדיר את הכהה שלו פעם אחת מקבל את שניהם.

<section className="uk-section">…</section>
<section className="uk-section uk-section-negative">…</section>
<section className="uk-section">…</section>

Page texture

לדף עצמו יש טקסטורה: רקע חלש מאוד, ברמה שלא מפריעה לקריאה. לא קל למצוא תמונה כזו, אבל לא מסובך לשים משהו בכמה אחוזים. uk-texture על העוטף של הדף, לא על כל סקשן: סקשן שמצייר אותה לעצמו מתחיל אותה מחדש, והקווים נשברים בקו ישר בכל תפר. הקווים בצבע המלל (מסכה על currentColor), אז בסקשן נגטיב הם בהירים לבד, והם מתחת לתוכן, אף פעם לא על תמונה. ברירת המחדל היא קווים טופוגרפיים שלנו, אריח שהקצוות שלו נפגשים.

<div className="uk-texture">…the page's sections…</div>
<section className="uk-section uk-section-negative uk-texture">…</section>   {/* a ground of its own takes it itself */}

--uk-texture-image: url(/textures/topo.svg);   --uk-texture-size: 1200px;   --uk-texture-opacity: 0.06;

Gradient edge

התחלה או סוף של סקשן בגרדיאנט: הרקע של הדף, ואז צבע חזק של המותג לקראת הקצה, לפני הפוטר או אחרי ההדר. הצבע שבו הגרדיאנט מתחיל הוא הצבע של הסקשן שמעליו, אז לא רואים איפה הוא מתחיל: הוא פשוט מתחבר לסקשן מעל, ונגמר בצבע. כשיש מעט מלל, אחרת הגרדיאנט עובר מתחת למלל ופוגע בקריאה. בטלפון המלל נמתח לגובה, אז לפעמים צריך גרדיאנט אחר: החלק האחיד ארוך יותר. Tailwind וזהו, בלי קלאס.

<section className="uk-section bg-linear-to-b from-background from-25% to-primary max-uk-s:from-55%">…</section>

Full-width picture

נשמע מובן מאליו: תמונה רוחבית מרשימה מקצה לקצה, בלי מלל ובלי תוכן מעליה, כהפרדה בין חלקים. לרוב פעם אחת בדף: אחרי זה היא מתחילה להיראות כמו טעות.

<img src="/wide.jpg" alt="…" loading="lazy" className="block w-full aspect-[5/2] max-md:aspect-[4/3] object-cover" />

משחקי כותרת

חלק מהכותרת מקבל טיפול: קו ביד, מרקר, עיגול ביד, גרדיאנט או צבע. הצורות מצוירות ב-SVG בקוד. וזה גם עניין של טעם: עיגול סביב מילה ארוכה כמו "אינציקלופדיה" כבר לא עובד. קלאס אחד על span, והגודל והמשקל נשארים של הכותרת. או קו לפני הכותרת: צורה ולא טקסט, flex עם ::before.

<span className="uk-title-marker [--uk-title-marker-color:oklch(0.85_0.15_90)]">שחלמתם</span>

<span className="uk-title-circle [--uk-title-circle-color:#e0533d]">הכלים</span>

<span className="uk-title-wave [--uk-title-wave-color:var(--accent)]">שעובד</span>

<span className="uk-title-strike [--uk-title-strike-color:#e0533d]">יקר</span>

יושבים כדוגמה בתוך קונספט

• Section head: הראש של סקשן באמצע העמוד הוא תמונה מרשימה עם overlay.

להוסיף בהמשך: תיקיית Masonry רצינית. ב-CSS columns הסדר רץ בטורים, 1, 4, 7, אז לקוח לא יכול לסדר תוכן במערכת ניהול, ולכן זה לא כאן. צריך לשים כל פריט בטור הכי נמוך, וזה דורש מדידה ב-JS, או display: grid-lanes כשיהיה נתמך.

להוסיף בהמשך: רעיונות ל-Timeline ול-Steps. דרכים יפות לסדר תוכן, אבל נדירות, אז רק כשמבקשים.

סניפט: תמונה אחת דרך כמה כרטיסים

כל כרטיס מראה את הפרוסה שלו מאותה תמונה, והפרוסות ממשיכות אחת את השנייה מעל הרווחים. CSS בלבד, רספונסיב כי זה גריד. המחיר: את התמונה צריך לתכנן לחיתוך, נושא לכל פרוסה, ולקוח יראה רק שהתמונה שלו נחתכת. כנראה לא בשימוש.