✨ 16–22) Gradients / Radius / Shadow / Opacity / Emmet / Backgrounds / Floats

16) Gradient

שילוב צבעים בעזרת linear-gradient, radial-gradient, conic-gradient ועוד.

/* דוגמאות קצרות */
.btn-grad { background: linear-gradient(90deg, #22d3ee, #a78bfa); }
.badge-radial { background: radial-gradient(circle at 30% 30%, #fef08a, #f59e0b); }
.slice-conic { background: conic-gradient(from 45deg, #34d399, #06b6d4, #818cf8); }
Gradient

Border-radius

עיגול פינות כולל ערכים אליפטיים ו־/ לרדיוס אופקי/אנכי.

.card { border-radius: 16px; }
.pill { border-radius: 9999px; }
.cut  { border-radius: 24px 0 24px 0 / 50% 0 50% 0; }
Border-radius

Box-shadow

צללים רכים/חדים, ריבוי צללים, ו־inset לצל פנימי.

.card      { box-shadow: 0 8px 24px rgba(2, 132, 199, .18); }
.card:hover { box-shadow: 0 10px 28px rgba(2, 132, 199, .24); }
.input      { box-shadow: inset 0 0 0 2px #e5e7eb; }
Box-shadow

Opacity

שקיפות של אלמנט שלם או צבע בודד עם RGBA/HEX אלפא.

.dim     { opacity: .5; }
.overlay  { background: rgba(0,0,0,.6); }
.brand    { color: #22d3eecc; /* hex עם אלפא */ }
Opacity

Emmet

קיצורי מקלדת נפוצים להאצת HTML/CSS.

ul>li.item$*5            →  <ul><li class="item1"></li> ...</ul>
section.wrapper>h2+p+ul>li*3
button.btn.btn-primary    →  <button class="btn btn-primary"></button>
m10 p-4 bgc#f1f5f9        →  margin:10px; padding:1rem; background-color:#f1f5f9;

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

Emmet

לעוד פקודות: חפשו בתיעוד Emmet או בלשונית Preferences → Emmet בעורך הקוד.

Backgrounds

סוגי רקעים, גדלים, מקור (origin), חיתוך (clip) וקיצור.

Backgrounds

גדלים — background-size

/* 1 */ .bg-size-300x100 { background-size: 300px 100px; }
/* 2 */ .bg-size-auto-300 { background-size: auto 300px; }
/* 3 */ .bg-size-50p      { background-size: 50%; }
/* 4 */ .bg-size-cover    { background-size: cover; }
/* 5 */ .bg-size-contain  { background-size: contain; }
background-size-300x100background-size-auto-300background-size-50-percentbackground-size-coverbackground-size-contain

background-attachment

.parallax { background-attachment: fixed; } /* האפקט נשאר קבוע בזמן גלילה */
background-attachment-fixed

Origin

.bg-origin-padding { background-origin: padding-box; }
.bg-origin-content { background-origin: content-box; }
.bg-origin-border  { background-origin: border-box; }
background-origin-padding-boxbackground-origin-content-boxbackground-origin-border-box

Clip

.bg-clip-padding { background-clip: padding-box; }
.bg-clip-content { background-clip: content-box; }
background-clip-padding-boxbackground-clip-content-box

קיצור — background

/* תמונה, חזרה, מיקום, צימוד, גודל */
.hero {
  background: url("/assets/logo.png") no-repeat center fixed / cover;
}
background-shorthand

22) Floats — השיטה הישנה לסידור אלמנטים

פעם השתמשו ב־float ו־clear לגרידים. כיום עדיף Flexbox ו־CSS Grid, אך טוב להכיר.

.col { float:left; width:33.33%; }
.row::after { content:""; display:block; clear:both; } /* clearfix */
Floats

🔗 מקורות חיצוניים