Midabada iyo Gadaasha CSS

Midabadu waa mid ka mid ah qaybaha ugu muhiimsan naqshadaynta bogagga internetka [1]. CSS waxay bixisaa habab badan oo midabada lagu qeexo — baro dhammaantood.

Sifada `color` — Midabka Qoraalka

h1 { color: red; }              /* Magaca midabka (Color name) */
p  { color: #00d97e; }          /* Habka Hex (Hex code) */
a  { color: rgb(0, 168, 96); }  /* Habka RGB */
span { color: hsl(151, 100%, 33%); } /* Habka HSL */

Noocyada Midabada

1. Magacyada Midabada

CSS waxay taageertaa ka badan 140 magac oo midabyo ah:

color: red;
color: green;
color: blue;
color: orange;
color: purple;
color: black;
color: white;
color: gray;
color: transparent;

2. Habka Hex Code `#RRGGBB`

Waa habka ugu isticmaalka badan:

color: #0a0a0a;   /* Madow mugdi ah */
color: #ffffff;   /* Cad */
color: #00d97e;   /* Cagaar — Midabka Ereyle */
color: #f97316;   /* Oranji (Liimi) */
color: #7c3aed;   /* Buluug-guduud (Purple) */
color: #0ea5e9;   /* Buluug */

/* Habka gaaban (marka lammaane kasta oo xarfo ah ay isku mid yihiin): */
color: #fff;      /* = #ffffff */
color: #000;      /* = #000000 */
color: #f90;      /* = #ff9900 */

3. Habka RGB — `rgb(cas, cagaar, buluug)`

Cabbirka qiimaha: 0–255:

color: rgb(0, 0, 0);         /* Madow */
color: rgb(255, 255, 255);   /* Cad */
color: rgb(0, 217, 126);     /* Cagaarka Ereyle */
color: rgb(249, 115, 22);    /* Oranji (Liimi) */

4. Habka RGBA — Shafafnimada `rgba(r,g,b,alpha)`

alpha waxay maamushaa shafafnimada: 0 (gebi ahaanba shafaf / transparent) ilaa 1 (gebi ahaanba muuqda / opaque):

color: rgba(0, 0, 0, 0.5);        /* Madow 50% shafaf ah */
color: rgba(0, 217, 126, 0.15);   /* Cagaar khafif ah — oo loogu talagalay asalka dambe (background) */
color: rgba(255, 255, 255, 0.9);  /* Cad ku dhowaad gebi ahaanba muuqda */

5. Habka HSL — `hsl(hue, saturation, lightness)`

Hue (Midabka): 0–360 (shaxda wareegga midabada)
Saturation (Dheefta): 0%–100% (xoogga iyo firfircoonida midabka)
Lightness (Iftiinka): 0%–100% (fudaydka ama madowga midabka)

color: hsl(0,   100%, 50%);  /* Casaan */
color: hsl(120, 100%, 35%);  /* Cagaar */
color: hsl(210, 100%, 50%);  /* Buluug */
color: hsl(151, 100%, 43%);  /* Cagaarka Ereyle */

/* Faa'iidada HSL: Waxaad si fudud u beddeli kartaa iftiinka iyo xoogga midabka adigoo isku midab ku jira: */
color: hsl(151, 100%, 30%); /* Mugdi ah */
color: hsl(151, 100%, 43%); /* Caadi ah */
color: hsl(151, 100%, 60%); /* Iftiin ah */
color: hsl(151,  20%, 43%); /* Midabka oo laga saaro (Cawl) */

6. Habka HSLA

color: hsla(151, 100%, 43%, 0.5); /* 50% shafaf ah */

7. Isbeddelayaasha CSS (CSS Variables) — Design Tokens

Waa habka ugu wanaagsan ee loo maamulo midabada mashruuca:

:root {
  --midab-madow:   #0a0a0a;
  --midab-cagaar:  #00d97e;
  --midab-cream:   #f9f7f4;
  --midab-muted:   #6b6b6b;
  --midab-border:  rgba(0,0,0,0.09);
}

h1    { color: var(--midab-madow); }
a     { color: var(--midab-cagaar); }
body  { background: var(--midab-cream); }

Sifada `opacity` — Shafafnimada Guud

Waxay saamaysaa curiyaha oo dhan (qoraalka, asalka dambe, iyo dhammaan curiyayaasha ku dhex jira):

.kaadhka         { opacity: 1;    }   /* Gebi ahaanba muuqda */
.kaadhka:hover   { opacity: 0.85; }   /* Hover — inuu xoogaa yara shafaf noqdo */
.naafada         { opacity: 0.4;  }   /* Curiyaha naafoobay (Disabled) */
.gabi-shaafaf    { opacity: 0;    }   /* Gebi ahaanba qarsoon */

Ogow Farqiga: opacity: 0.5 wuxuu wada shafaf ka dhigayaa curiyaha iyo wax kasta oo ku dhex jira, halka rgba(0,0,0,0.5) uu shafaf ka dhigayo oo kaliya midabka asalka dambe.

Sifada Midabka Asalka Dambe (background-color)

body      { background-color: #f9f7f4; }
.kaadhka  { background-color: #ffffff; }
.mugdi    { background-color: #0a0a0a; }
.xidid    { background-color: rgba(0, 217, 126, 0.1); }

Sifada Sawirka Asalka Dambe (background-image)

Adeegsiga Sawirka

.hero {
  background-image: url('sawirka.jpg');
  background-size:     cover;      /* Inuu gebi ahaanba daboolo meesha */
  background-position: center;     /* Inuu dhexda ka fariisto */
  background-repeat:   no-repeat;  /* Inaan sawirka dib loo soo celcelin */
}

Is-gudbinta Midabada (Gradients)

Is-gudbinta Toosan (Linear Gradient):

/* Sare ilaa hoose */
background: linear-gradient(to bottom, #0a0a0a, #1a1a1a);

/* Bidix ilaa midig */
background: linear-gradient(to right, #00d97e, #0ea5e9);

/* Xagal gaar ah — 135 digrii (degrees) */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

/* Isku-gudubka midabo banyak */
background: linear-gradient(to right, #f97316, #ec4899, #7c3aed);

Is-gudbinta Wareegsan (Radial Gradient):

/* Dhexda ilaa dibadda */
background: radial-gradient(circle, #00d97e 0%, #0a0a0a 100%);

/* Iftiin daciif ah (Glow effect) */
background: radial-gradient(
  ellipse at 30% 50%,
  rgba(0,217,126,0.15) 0%,
  transparent 60%
);

Isku-darka Sifooyinka Asalka Dambe (The background Shorthand)

.hero {
  background-color:      #0a0a0a;
  background-image:      url('hero.jpg');
  background-size:       cover;
  background-position:   center center;
  background-repeat:     no-repeat;
  background-attachment: fixed;     /* Sawirku wuxuu ahaanayaa mid dagan marka bogga la scroll-gareeyo */
}

/* Habka gaaban ee la isku daray (Shorthand): */
.hero {
  background: #0a0a0a url('hero.jpg') no-repeat center / cover;
}

Tusaale Dhamaystiran

<!DOCTYPE html>
<html lang="so">
<head>
  <meta charset="UTF-8">
  <title>Midabada CSS</title>
  <style>
    :root {
      --ink:    #0a0a0a;
      --cream:  #f9f7f4;
      --signal: #00d97e;
      --muted:  #6b6b6b;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body { font-family: sans-serif; background: var(--cream); }

    /* Hero leh gradient */
    .hero {
      background: linear-gradient(135deg, #0a0a0a 0%, #1a2a1a 100%);
      padding: 80px 40px;
      text-align: center;
    }

    .hero h1 { color: white; font-size: 3rem; margin-bottom: 12px; }
    .hero p  { color: rgba(255,255,255,0.6); font-size: 1.1rem; }

    /* Span leh midab cagaar */
    .hero h1 span { color: var(--signal); }

    /* Kaadhada */
    .kaadhada-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      padding: 40px;
      max-width: 900px;
      margin: 0 auto;
    }

    .kaadhka {
      padding: 24px;
      border-radius: 14px;
      text-align: center;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .kaadhka:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 32px rgba(0,0,0,0.12);
    }

    .kaadhka h3  { font-size: 1rem; margin-bottom: 4px; }
    .kaadhka p   { font-size: 0.85rem; opacity: 0.7; }
    .kaadhka .muunad {
      width: 48px; height: 48px;
      border-radius: 50%;
      margin: 0 auto 12px;
    }

    /* Midabada kaadhada */
    .cagaar { background: rgba(0,217,126,0.1); color: #00a860; }
    .cagaar .muunad { background: #00d97e; }

    .oranye { background: rgba(249,115,22,0.1); color: #c05c0a; }
    .oranye .muunad { background: #f97316; }

    .guduud-buluug { background: rgba(124,58,237,0.1); color: #5b21b6; }
    .guduud-buluug .muunad { background: #7c3aed; }

    /* Gradient card */
    .gradient-card {
      background: linear-gradient(135deg, #00d97e, #0ea5e9);
      color: white;
      padding: 24px;
      border-radius: 14px;
      text-align: center;
      grid-column: span 3;
    }
  </style>
</head>
<body>

  <div class="hero">
    <h1>Midabada <span>CSS</span></h1>
    <p>Baro sida midabada loo isticmaalo si xirfad leh</p>
  </div>

  <div class="kaadhada-grid">

    <div class="kaadhka cagaar">
      <div class="muunad"></div>
      <h3>Cagaar</h3>
      <p>#00d97e</p>
    </div>

    <div class="kaadhka oranye">
      <div class="muunad"></div>
      <h3>Oranji</h3>
      <p>#f97316</p>
    </div>

    <div class="kaadhka guduud-buluug">
      <div class="muunad"></div>
      <h3>Buluug-guduud</h3>
      <p>#7c3aed</p>
    </div>

    <div class="gradient-card">
      <h3 style="font-size:1.2rem; margin-bottom:4px;">Gradient</h3>
      <p style="opacity:0.85;">linear-gradient(135deg, #00d97e, #0ea5e9)</p>
    </div>

  </div>

</body>
</html>

Casharka xiga: Waxaan ku baran doonaa Farta iyo Qoraalka (Typography) — font, size, weight, iyo spacing.

Sifada color — Midabka Qoraalka

Noocyada Midabada

1. Magacyada Midabada

2. Habka Hex Code #RRGGBB

3. Habka RGB — rgb(cas, cagaar, buluug)

4. Habka RGBA — Shafafnimada rgba(r,g,b,alpha)

5. Habka HSL — hsl(hue, saturation, lightness)