Sifooyinka Heersare ee CSS

CSS kuma koobna oo kaliya midabyada iyo qaabaynta (layout) — waxaa jira sifooyin heersare ah oo kuu sahlaya inaad dhoodhoobto qaabab gaar ah, carousel is-dhaqaajiya (scroll carousel), qoraal gradient leh, iyo maaskarayn (mask image) [1]. Casharkan waxaan si dhab ah ugu dhex muquuran doonnaa sifooyinkan hal-abuurka ah.

clip-path — Qaabaynta iyo Goynta Curiyaha

Sifada clip-path waxay kuu sahlaysaa inaad curiyaha u gooyso qaab kasta oo gaar ah oo aad adigu naqshadayso:

.qaab-wareega {
  clip-path: circle(50%);
}

.qaab-sadex {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.qaab-lix {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

Qaybta Sare ee Iilan (Polygon Hero):

.hero {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
  /* Wuxuu qaybta hoose ka dhigayaa mid iilan */
}

Talo: Waxaad adeegsan kartaa aaladda bilaashka ah ee Clippy (https://bennettfeely.com/clippy/) si aad u dhoodhoobto qaabab goynta CSS ah oo aad u kakan.

shape-outside — Qoraalka la-jaanqaada Qaabka Curiyaha

Sifada shape-outside waxay kuu sahlaysaa in qoraalku uu si naxariis leh u raaco qaabka goolka ah ee curiyaha (waxay shaqaysaa oo kaliya marka curiyuhu leeyahay sifada float):

.sawir-wareega {
  float: left;
  width: 200px;
  height: 200px;
  shape-outside: circle(50%);
  clip-path: circle(50%);
  margin-right: 20px;
}

Qoraalku wuxuu si qurux badan u dhex-gelayaa agagaarka goobada, halkii uu ka fariisan lahaa qaab sanduuq afar-gees ah oo caadi ah.

background-clip: text — Qoraal Gradient ah

Habka ugu habboon ee qoraalka loo siiyo midabka is-gudba (gradient):

.cinwaanka-gradient {
  background: linear-gradient(135deg, #667eea, #764ba2);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 3rem;
  font-weight: 800;
}

Hannaankani wuxuu kuu dhoodhoobayaa qoraal leh midabyo is-gudba oo aad u soo jiidasho badan.

mask-image — Maaskarada iyo Ciiryaamada

Sifada mask-image waxay kuu sahlaysaa inaad qariyo qayb ka mid ah curiyaha iyadoo la adeegsanayo sawir kale ama gradient:

.sawir-masked {
  mask-image: linear-gradient(black 60%, transparent);
  -webkit-mask-image: linear-gradient(black 60%, transparent);
  /* Qaybta hoose wuxuu ka dhigayaa mid si tartiib ah u baaba'a */
}

Waxaad u adeegsan kartaa sawir gaar ah, is-gudub midabeed (gradient), ama faylka SVG sidii maaskaro (mask):

.curiye {
  mask-image: url('star.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-image: url('star.svg');
}

scroll-behavior: smooth

In boggu si tartiib ah oo naxariis leh hoos ugu dhoco marka la gujiyo xiriiriyayaasha (Smooth scrolling):

html {
  scroll-behavior: smooth;
}

Tani waxay ka dhigaysas xiriiriyayaasha dhexda u booda (#section-id) kuwo si tartiib ah u siqa, halkii ay mar qura si kedis ah ugu boodi lahaayeen meesha.

scroll-snap — Carousel Is-waafajiya

Sifooyinka scroll-snap waxay si buuxda u xakameeyaan meesha iyo habka uu scroll-ku u joogsanayo marka la dhaqaajiyo carousel-ka:

/* Curiyaha Sare (Weelka): */
.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 16px;
  padding: 20px;
}

/* Curiyayaasha Hoose (Carruurta): */
.carousel .card {
  flex: 0 0 280px;
  scroll-snap-align: start;
}

resize — Beddelka Cabbirka Curiyaha

Waxaad u oggolaan kartaa isticmaalaha inuu si toos ah u jiido oo uu u beddelco cabbirka curiyaha bogga ku dhex jira:

textarea {
  resize: vertical;   /* Toosan oo kaliya */
  resize: horizontal; /* Jiif oo kaliya */
  resize: both;       /* Labada jiho isku mar */
  resize: none;       /* Dami beddelka cabbirka */
}

div.resizable {
  overflow: auto;
  resize: both;
  min-width: 200px;
  min-height: 150px;
  max-width: 500px;
  max-height: 400px;
}

appearance: none iyo pointer-events

/* Ka saarista hannaanka caadiga ah ee bog-furayaasha (appearance reset): */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
}

/* Dami is-dhexgalka ama gujinta curiyaha (pointer-events bypass): */
.overlay {
  pointer-events: none;
}

/* Dib u soo celinta markii la dul tago: */
.button-container:hover .overlay {
  pointer-events: auto;
}

user-select iyo cursor

/* Dami in qoraalka la xulan karo (text selection disable): */
.unselectable {
  user-select: none;
  -webkit-user-select: none;
}

/* Dooro ama xulo dhammaan qoraalka hal mar: */
.select-all {
  user-select: all;
}

/* Noocyada kala duwan ee tilmaamaha jiirka (Cursor variants): */
.custom-cursor {
  cursor: pointer;      /* Tilmaame gacan ah (Pointer) */
  cursor: grab;         /* Qaab qabsasho ah (Grab) */
  cursor: zoom-in;      /* Weyneyn (Zoom-in) */
  cursor: not-allowed;  /* Aan la oggolayn (Not-allowed) */
  cursor: help;         /* Caawimo (Help) */
  cursor: wait;         /* Sugid (Wait) */
  cursor: crosshair;    /* Xariiq is-dhaaf ah (Crosshair) */
}

Tusaale Mashruuc Dhamaystiran

<!DOCTYPE html>
<html lang="so">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Horumarsan — Carousel &amp; Shapes</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }

    html { scroll-behavior: smooth; }

    body {
      font-family: system-ui, sans-serif;
      background: #f8fafc;
      color: #0f172a;
    }

    .container {
      max-width: 900px;
      margin: 0 auto;
      padding: 32px 20px;
    }

    h1 { font-size: 2rem; margin-bottom: 8px; }

    /* Qoraalka gradient-ka ah (Gradient Text) */
    .gradient-text {
      background: linear-gradient(135deg, #667eea, #764ba2, #f093fb);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-size: clamp(1.5rem, 5vw, 3rem);
      font-weight: 800;
      line-height: 1.2;
    }

    .subtitle { color: #64748b; margin: 8px 0 32px; }

    /* Qaybta sare ee iilan (Clip-path hero) */
    .hero-clip {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      padding: 80px 40px;
      text-align: center;
      clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
      margin-bottom: 0;
      color: white;
    }

    .hero-clip h2 { font-size: 2rem; margin-bottom: 8px; }
    .hero-clip p { opacity: 0.9; max-width: 500px; margin: 0 auto; line-height: 1.6; }

    /* Tusaalaha shape-outside */
    .shape-demo {
      margin: 40px 0;
      padding: 24px;
      background: white;
      border-radius: 14px;
      border: 1px solid #e2e8f0;
    }

    .shape-demo h3 { margin-bottom: 12px; }

    .circle-img {
      float: left;
      width: 140px;
      height: 140px;
      shape-outside: circle(50%);
      clip-path: circle(50%);
      margin-right: 20px;
      margin-bottom: 10px;
      background: linear-gradient(135deg, #f093fb, #f5576c);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 3rem;
      color: white;
    }

    .shape-demo p {
      color: #475569;
      line-height: 1.7;
      font-size: 0.9rem;
    }

    /* Carousel is-waafajiya (Scroll-snap carousel) */
    .carousel-h2 { margin: 40px 0 16px; font-size: 1.25rem; }

    .carousel {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      gap: 16px;
      padding: 12px 4px 20px;
      -webkit-overflow-scrolling: touch;
    }

    .carousel::-webkit-scrollbar {
      height: 6px;
    }
    .carousel::-webkit-scrollbar-track {
      background: #e2e8f0;
      border-radius: 99px;
    }
    .carousel::-webkit-scrollbar-thumb {
      background: #94a3b8;
      border-radius: 99px;
    }

    .carousel .card {
      flex: 0 0 260px;
      scroll-snap-align: start;
      background: white;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      padding: 24px;
      transition: all 0.2s;
    }

    .carousel .card:hover {
      box-shadow: 0 8px 24px rgba(0,0,0,0.06);
      transform: translateY(-2px);
    }

    .carousel .card .icon { font-size: 1.75rem; margin-bottom: 8px; }
    .carousel .card h3  { font-size: 0.95rem; margin-bottom: 6px; }
    .carousel .card p   { font-size: 0.8rem; color: #64748b; line-height: 1.5; }

    /* Tusaalaha mask-image */
    .mask-demo {
      margin: 40px 0;
      height: 200px;
      background: linear-gradient(135deg, #3b82f6, #8b5cf6);
      mask-image: linear-gradient(90deg, black 50%, transparent);
      -webkit-mask-image: linear-gradient(90deg, black 50%, transparent);
      border-radius: 14px;
    }

    /* Sanduuq cabbirkiisa la beddeli karo */
    .resizable {
      overflow: auto;
      resize: both;
      min-width: 200px;
      min-height: 120px;
      max-width: 400px;
      max-height: 250px;
      background: white;
      border: 2px dashed #cbd5e1;
      border-radius: 12px;
      padding: 16px;
      margin: 32px 0;
    }

    .resizable p { color: #64748b; font-size: 0.85rem; }

    /* Section */
    .qayb { margin-bottom: 40px; }
    .qayb h2 { font-size: 1.5rem; margin-bottom: 16px; }
    .qayb p  { color: #475569; line-height: 1.7; }

    code { background: #f1f5f9; padding: 1px 5px; border-radius: 4px; font-size: 0.85em; }
  </style>
</head>
<body>

  <!-- Hero with clip-path -->
  <div class="hero-clip">
    <h2>🎨 CSS Horumarsan</h2>
    <p>clip-path, scroll-snap, mask-image, gradient text, iyo sifooyin kale oo hal-abuur leh.</p>
  </div>

  <div class="container">

    <!-- Gradient text -->
    <h1 class="gradient-text">Gradient Text</h1>
    <p class="subtitle"><code>background-clip: text</code> iyo <code>-webkit-text-fill-color: transparent</code></p>

    <!-- Shape-outside -->
    <div class="shape-demo">
      <h3>Shape-outside — <code>circle(50%)</code></h3>
      <div class="circle-img">✦</div>
      <p>
        Qoraalkani wuxuu si qurux badan ugu wareegayaa sawirka goobada ah sababtoo ah adeegsiga <code>shape-outside: circle(50%)</code>.
        Haddii kale, qoraalku wuxuu u habayn lahaa sidii sanduuq afar-gees ah oo caadi ah. Tani waxay aad ugu habboon tahay naqshadaynta joornaalada
        iyo blog-yada casriga ah. Sifada <code>shape-outside</code> waxay khasab ugu baahan tahay <code>float</code> si ay si sax ah ugu shaqayso.
        Waxaad sidoo kale u adeegsan kartaa <code>polygon()</code>, <code>ellipse()</code>, iyo <code>url()</code> si aad u samayso qaabab kale oo kakan.
      </p>
    </div>

    <!-- Mask demo -->
    <div class="qayb">
      <h2>Mask-image — Gradation Fade</h2>
      <div class="mask-demo"></div>
      <p>Kani waa maaskarada gradient-ka ah: <code>mask-image: linear-gradient(90deg, black 50%, transparent)</code>. Qaybta midig ee sawirka ayaa si tartiib ah u baaba'aysa.</p>
    </div>

    <!-- Scroll-snap carousel -->
    <h2 class="carousel-h2">Carousel Is-waafajiya (Scroll-Snap) ⟷</h2>
    <div class="carousel">
      <div class="card">
        <div class="icon">🎨</div>
        <h3>Midabyada</h3>
        <p>Baro midabyada CSS — hex, rgb, hsl, iyo is-gudubyo.</p>
      </div>
      <div class="card">
        <div class="icon">📐</div>
        <h3>Flexbox</h3>
        <p>Qaabaynta hal-jiho oo dabacsan.</p>
      </div>
      <div class="card">
        <div class="icon">🧩</div>
        <h3>CSS Grid</h3>
        <p>Qaabaynta laba-jiho oo aad u awood badan.</p>
      </div>
      <div class="card">
        <div class="icon">✨</div>
        <h3>Animations</h3>
        <p>Transitions, keyframes, iyo transforms.</p>
      </div>
      <div class="card">
        <div class="icon">📱</div>
        <h3>Responsive</h3>
        <p>Media queries, clamp(), iyo mobile-first.</p>
      </div>
      <div class="card">
        <div class="icon">🌙</div>
        <h3>Dark Mode</h3>
        <p>CSS variables iyo theme switcher.</p>
      </div>
    </div>

    <!-- Resizable -->
    <div class="qayb">
      <h2>Beddelka Cabbirka — <code>resize: both</code></h2>
      <div class="resizable">
        <p>Guji geeska hoose ee midig oo jiid si aad u beddesho cabbirka sanduuqan. Sifada <code>resize: both</code> ayaa oggolaanaysa labada jiho. Curiyayaasha <code>min-width</code> iyo <code>max-width</code> ayaa xaddidaya inta uu u weynaan karo ama u yaraan karo.</p>
      </div>
    </div>

    <!-- User-select / cursor demo -->
    <div class="qayb">
      <h2>Maareynta Xulashada iyo Tilmaamaha Jiirka</h2>
      <p style="user-select: none; background:#f1f5f9; padding:12px; border-radius:8px; cursor: not-allowed;">
        Qoraalkan <strong>lama xuli karo</strong> (<code>user-select: none</code>) — tilmaamaha jiirkuna waa mid muujinaya <code>not-allowed</code> (aan la oggolayn).
      </p>
      <p style="margin-top:8px;">
        Kani waa <span style="cursor: help; border-bottom: 1px dashed #94a3b8;" title="Caawimo">cursor: help (caawimo)</span>,
        <span style="cursor: grab;">cursor: grab (qabsasho)</span>, iyo
        <span style="cursor: zoom-in;">cursor: zoom-in (weyneyn)</span>.
      </p>
    </div>

  </div>
</body>
</html>

Casharka xiga: Waxaan ku baran doonnak Nidaamyada Dhismaha iyo Maamulida Koodka CSS-ta Mashaariicda Waaweyn (CSS Architecture & Best Practices).