Hadhka iyo Miirayaasha (Shadow & Filter)

Hadhka (shadow) iyo miirayaasha (filter) waxay mareegta internetka siiyaan qoto-dheer (depth) iyo shucuur gaar ah (mood) [1]. Sifada box-shadow waxay ka dhigi kartaa kaadhka mid “kor u soo kacay”, halka filter uu beddeli karo midabka iyo muuqaalka guud ee sawirka. Sidoo kale, waxaan ku baran doonnaa glassmorphism — oo ah naqshadaynta casriga ah ee dhalada u eg (frosty glass effect).

`box-shadow` — Hadhka Sanduuqa

Sifada box-shadow waxay hadh ku dartaa dibadda ama gudaha curiyaha:

.kaadhka {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  /*      offset-x offset-y blur-radius spread-radius midabka */
}

Qaybaha Box-shadow

Qaybta	Qiimaha tusaalaha	Sharaxaadda
`offset-x`	`0`, `4px`, `-4px`	Masaafada dhinaca jiifka (midig = togan/positive)
`offset-y`	`4px`, `-4px`	Masaafada dhinaca toosan (hoose = togan/positive)
`blur`	`6px`, `0`	Radius-ka daadsanaanta hadhka (blur)
`spread`	`-1px`, `2px`	Radius-ka fidsanaanta ama ballaca hadhka (spread)
`color`	`rgba(0,0,0,0.1)`	Midabka loo doorayo hadhka
`inset`	`inset`	U rogidda hadhka dhanka gudaha ee curiyaha

Tusaalooyin

/* Heerarka kala duwan ee hadhka caadiga ah: */
.shadow-sm   { box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.shadow-md   { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
.shadow-lg   { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
.shadow-xl   { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); }

/* Hadh midab leh (sida midab iftiimaya): */
.shadow-blue { box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35); }

/* Hadhka dhanka gudaha ah (inset): */
.shadow-inset { box-shadow: inset 0 2px 4px rgba(0,0,0,0.08); }

Isku-darka dhowr hadh hal mar

Waxaad isku dhex dari kartaa dhowr hadh hal mar si aad u hesho muuqaal waaqici ah:

.kaadhka {
  box-shadow:
    0 4px 6px rgba(0,0,0,0.06),    /* hadhka dhow */
    0 10px 30px rgba(0,0,0,0.04);  /* hadhka fog */
}

`text-shadow` — Hadhka Qoraalka

Sifada text-shadow waxay u shaqaysaa si la mid ah box-shadow, laakiin waxaa loo adeegsadaa qoraalka:

h1 {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
  /* offset-x offset-y blur midabka */
}

/* Isku-darka dhowr hadh oo qoraal ah: */
h1 {
  text-shadow:
    0 1px 2px rgba(0,0,0,0.1),
    0 0 40px rgba(59,130,246,0.5);
}

Sifada	Tusaale	Sharaxaadda
`text-shadow`	`1px 1px 3px rgba(0,0,0,0.2)`	Ku darista hadhka qoraalka
`box-shadow`	`0 4px 12px rgba(0,0,0,0.08)`	Ku darista hadhka curiyaha (sanduuqa)

`filter` — Miiraha Muuqaalka (CSS Filters)

Sifada filter waxay isbeddel ku samaysaa muuqaalka curiyaha (sida sawirrada, muuqaalka video-ga, ama curiyayaasha kale):

img {
  filter: grayscale(100%); /* Sawirku wuxuu noqonayaa madow iyo caddaan */
}

img:hover {
  filter: none; /* Midabyadii asalka ahaa dib u soo celi */
}

Miiraha (Filter)	Tusaale	Sharaxaadda
`blur(n)`	`blur(4px)`	In curiyaha la daciifiyo/ciireeyo (blur effect)
`brightness(n)`	`brightness(1.2)`	Iftiinka sawirka (1.0 waa midka caadiga ah)
`contrast(n)`	`contrast(1.5)`	Kala-duwanaanta midabada (Contrast)
`grayscale(n)`	`grayscale(100%)`	Ka dhigidda sawirka madow iyo caddaan
`hue-rotate(n)`	`hue-rotate(90deg)`	Beddelka iyo wareejinta midabada
`saturate(n)`	`saturate(2)`	Firfircoonida iyo xoogga midabada
`sepia(n)`	`sepia(80%)`	Ka dhigidda sawirka mid u eg sawirradii hore (Sepia)
`invert(n)`	`invert(100%)`	Roga midabada oo dhanka kale u beddela (Invert)
`drop-shadow(...)`	`drop-shadow(0 4px 6px #000)`	Hadh raacaya gebi ahaanba qaabka dhabta ah ee curiyaha

Isku-darka dhowr miire (filters) hal mar:

img {
  filter: brightness(1.1) contrast(1.2) saturate(1.3);
}

Farqiga u dhexeeya `drop-shadow()` iyo `box-shadow`

Farqiga ugu weyn: drop-shadow() wuxuu si sax ah u raacaa qaabka dhabta ah ee curiyaha (xataa haddii uu yahay sawir transparent PNG ah), halka box-shadow uu had iyo jeer qaab sanduuq afar-gees ah u qaadayo:

/* box-shadow: Hadhka afar-geeska caadiga ah */
.logo { box-shadow: 0 2px 8px rgba(0,0,0,0.15); }

/* drop-shadow: Hadhka si sax ah u raacaya sawirka gudihiisa (alpha channels) */
.logo { filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15)); }

`backdrop-filter` — Naqshadaynta Dhalada (Glassmorphism)

Sifada backdrop-filter waxay saamaysaa asalka ka dambeeya curiyaha, halkii ay saamayn lahayd curiyaha laftiisa. Tani waa sirta rasmiga ah ee ka dambaysa naqshadaynta dhalada ah ee glassmorphism:

.dhalada {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
}

Qaybaha Glassmorphism

Qaybta Koodka	Sharaxaadda doora ay ciyaarayso
`background: rgba(255,255,255,0.1)`	In asalka laga dhigo mid xoogaa hufan (transparent)
`backdrop-filter: blur(12px)`	In gadaasha dhalada laga dhigo mid ciiryaamo leh (blur)
`border: 1px solid rgba(255,255,255,0.2)`	In xad khafiif ah la saaro si dhaladu u lahaato gees muuqda
`box-shadow: 0 8px 32px rgba(0,0,0,0.1)`	In la siiyo hadh qoto-dheer si ay dusha uga soo baxdo
`border-radius: 16px`	Geesaha oo la gooleeyo si ay u yeelato muuqaal casri ah

`mix-blend-mode` — Isku-dhafka Midabada (Blending Modes)

Sifada mix-blend-mode waxay go’aamisaa sida uu curiyuhu ugu dhex milmo ama ula falgalo curiyayaasha kale ee ka hooseeya:

.cinwaanka {
  background: url('sawir.jpg') center/cover;
  position: relative;
}

.cinwaanka::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #2563eb;
  mix-blend-mode: multiply;
}

Qiimaha	Sharaxaadda hannaanka isku-dhafka
`multiply`	Isku-dhafid madow (Multiply)
`screen`	Isku-dhafid iftiin (Screen)
`overlay`	Isku-dhafid xooggan (Overlay)
`difference`	Muujinta farqiga midabada (Difference)

Tusaale Mashruuc Dhamaystiran o ku saabsan Hadhka iyo Miirayaasha

<!DOCTYPE html>
<html lang="so">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shadow &amp; Filter — Glassmorphism</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, sans-serif;
      min-height: 100vh;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      padding: 40px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* Qaybta sare ee Cinwaanka */
    .cinwaanka {
      color: white;
      text-shadow: 0 2px 10px rgba(0,0,0,0.2);
      margin-bottom: 32px;
      text-align: center;
    }
    .cinwaanka h1 { font-size: clamp(1.5rem,4vw,2.5rem); }
    .cinwaanka p { opacity: 0.8; margin-top: 6px; font-size: 0.95rem; }

    /* Kaadhka weyn ee leh Glassmorphism */
    .kaadhka {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 20px;
      padding: 40px;
      max-width: 600px;
      width: 100%;
      color: white;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
      margin-bottom: 32px;
    }

    .kaadhka h2 { font-size: 1.5rem; margin-bottom: 12px; }
    .kaadhka p  { opacity: 0.85; line-height: 1.7; margin-bottom: 20px; }

    .badhano {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .btn {
      padding: 12px 24px;
      border-radius: 99px;
      font-weight: 600;
      font-size: 0.875rem;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .btn-primary {
      background: white;
      color: #4c1d95;
      box-shadow: 0 4px 14px rgba(255,255,255,0.25);
    }
    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(255,255,255,0.35);
    }

    .btn-secondary {
      background: rgba(255,255,255,0.12);
      color: white;
      border: 1px solid rgba(255,255,255,0.25);
    }
    .btn-secondary:hover {
      background: rgba(255,255,255,0.2);
      transform: translateY(-2px);
    }

    /* Safafka Kaadhadhka dhalada ah */
    .glass-row {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 20px;
      max-width: 600px;
      width: 100%;
      margin-bottom: 32px;
    }

    .glass-card {
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 16px;
      padding: 24px;
      text-align: center;
      color: white;
      transition: all 0.3s ease;
      box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    }
    .glass-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 32px rgba(0,0,0,0.15);
    }
    .glass-card .icon { font-size: 2rem; margin-bottom: 10px; }
    .glass-card h3 { font-size: 0.9rem; margin-bottom: 6px; }
    .glass-card p  { font-size: 0.8rem; opacity: 0.7; }

    /* Tusaalooyinka miirayaasha sawirrada (CSS Filters) */
    .filter-demo {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
      gap: 12px;
      max-width: 600px;
      width: 100%;
      margin-bottom: 32px;
    }

    .filter-item {
      background: rgba(255,255,255,0.08);
      border-radius: 12px;
      padding: 12px;
      text-align: center;
      color: white;
    }
    .filter-item .box {
      width: 100%;
      height: 80px;
      border-radius: 8px;
      background: linear-gradient(135deg, #f093fb, #f5576c);
      margin-bottom: 8px;
    }
    .filter-item span { font-size: 0.7rem; opacity: 0.7; }

    /* Tusaalooyinka kala duwan ee box-shadow */
    .shadow-demo {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 16px;
      max-width: 600px;
      width: 100%;
      margin-bottom: 40px;
    }

    .shadow-card {
      background: white;
      border-radius: 12px;
      padding: 24px;
      text-align: center;
      font-size: 0.8rem;
      color: #333;
      transition: all 0.3s;
    }
    .shadow-card:hover { transform: translateY(-2px); }

    .shadow-sm  { box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
    .shadow-md  { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.08); }
    .shadow-lg  { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.08); }
    .shadow-xl  { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.08); }
    .shadow-glow {
      box-shadow: 0 0 20px rgba(245, 87, 108, 0.4);
      border: 1px solid rgba(245, 87, 108, 0.2);
    }
  </style>
</head>
<body>

  <div class="cinwaanka">
    <h1>Hadhka &amp; Miirayaasha</h1>
    <p>box-shadow · filter · backdrop-filter · glassmorphism</p>
  </div>

  <!-- Main glassmorphism card -->
  <div class="kaadhka">
    <h2>✨ Muuqaalka Dhalada (Glassmorphism)</h2>
    <p>Kani waa kaadh dhalo ah — <code>backdrop-filter: blur(16px)</code> ayaa sababay gadaasha inuu dhalo noqdo. Waxaa lagu daray <code>box-shadow</code> xoog leh iyo xariiq khafiif ah.</p>
    <div class="badhano">
      <button class="btn btn-primary">Bilaaw</button>
      <button class="btn btn-secondary">Akhri Faahfaahin</button>
    </div>
  </div>

  <!-- Glass cards -->
  <div class="glass-row">
    <div class="glass-card">
      <div class="icon">🎨</div>
      <h3>Midabyada</h3>
      <p>Isku-gudubka midabyada, jihooyinka, iyo dhalaalka</p>
    </div>
    <div class="glass-card">
      <div class="icon">🌀</div>
      <h3>Miirayaasha</h3>
      <p>Blur, grayscale, sepia, iyo wixii ka badan</p>
    </div>
    <div class="glass-card">
      <div class="icon">🌙</div>
      <h3>Hadhka</h3>
      <p>Box-shadow, text-shadow, drop-shadow</p>
    </div>
  </div>

  <!-- Box shadow levels -->
  <div class="shadow-demo">
    <div class="shadow-card shadow-sm">shadow-sm</div>
    <div class="shadow-card shadow-md">shadow-md</div>
    <div class="shadow-card shadow-lg">shadow-lg</div>
    <div class="shadow-card shadow-xl">shadow-xl</div>
    <div class="shadow-card shadow-glow">glow</div>
  </div>

  <!-- Filter demo boxes -->
  <div class="filter-demo">
    <div class="filter-item">
      <div class="box" style="filter: blur(2px);"></div>
      <code>blur(2px)</code>
    </div>
    <div class="filter-item">
      <div class="box" style="filter: grayscale(100%);"></div>
      <code>grayscale(100%)</code>
    </div>
    <div class="filter-item">
      <div class="box" style="filter: sepia(80%);"></div>
      <code>sepia(80%)</code>
    </div>
    <div class="filter-item">
      <div class="box" style="filter: hue-rotate(180deg);"></div>
      <code>hue-rotate(180deg)</code>
    </div>
    <div class="filter-item">
      <div class="box" style="filter: saturate(2);"></div>
      <code>saturate(2)</code>
    </div>
    <div class="filter-item">
      <div class="box" style="filter: brightness(1.5);"></div>
      <code>brightness(1.5)</code>
    </div>
    <div class="filter-item">
      <div class="box" style="filter: contrast(2);"></div>
      <code>contrast(2)</code>
    </div>
    <div class="filter-item">
      <div class="box" style="filter: invert(100%);"></div>
      <code>invert(100%)</code>
    </div>
    <div class="filter-item">
      <div class="box" style="filter: none;"></div>
      <code>Asalka (none)</code>
    </div>
  </div>

</body>
</html>

Casharka xiga: Waxaan ku baran doonnaa Sida loo qaabeeyo Jadwallada iyo Liisaska (Tables & Lists) ee CSS.

box-shadow — Hadhka Sanduuqa

Qaybaha Box-shadow

Tusaalooyin

Isku-darka dhowr hadh hal mar

text-shadow — Hadhka Qoraalka

filter — Miiraha Muuqaalka (CSS Filters)

Farqiga u dhexeeya drop-shadow() iyo box-shadow

backdrop-filter — Naqshadaynta Dhalada (Glassmorphism)