Midabada iyo Gadaasha

Casharkaan, waxaan baran doonaa sida loo isticmaalo midabada iyo gadaasha CSS-ka. Midabadu waxay door muhiim ah ka ciyaaraan qurxinta bogga iyo soo jiidashada isticmaalaha.

1. Sifooyinka Midabada

CSS waxay leedahay sifooyin midab oo kala duwan:

• color: Midabka qoraalka (font-ka).
• background-color: Midabka gadaasha.
• border-color: Midabka xuduudaha (border).

2. Qaababka Qeexida Midabada

Waxaa jira dhowr qaab oo aad ku qeexi karto midab:

A. Magacyada Midabada (Color Names)

CSS waxay taageertaa 140+ magac midab, sida: red, blue, green, black, white, orange, purple, tomato.

h1 {
    color: tomato;
}

B. Hex Codes (#RRGGBB)

Kani waa qaabka ugu caansan. Wuxuu ka kooban yahay 6 xaraf (0-9, A-F).

p {
    color: #ff5733;  /* midab liimi-casaan ah */
    background-color: #f0f0f0;  /* cawl khafiif ah */
}

C. RGB (Red, Green, Blue)

Qiimaha midab kasta wuxuu u dhexeeyaa 0 ilaa 255.

div {
    background-color: rgb(255, 87, 51);
}

D. RGBA (RGB + Alpha / Hufnaan)

alpha waxay xakamaysaa hufnaanta (0 = gabi ahaan hufan, 1 = gabi ahaan midab).

div {
    background-color: rgba(255, 87, 51, 0.5);  /* 50% hufan */
}

3. Gadaasha (Backgrounds)

CSS waxay bixisaa sifooyin badan oo gadaasha ah:

background-color

section {
    background-color: #e8f5e9;
}

background-image

header {
    background-image: url("sawir-gadaal.jpg");
}

background-repeat

body {
    background-image: url("qaab.svg");
    background-repeat: repeat-x; /* ku celi xariiqda uun */
}

background-size

.hero {
    background-image: url("banner.jpg");
    background-size: cover; /* buuxi dhammaan aagga */
    background-position: center;
}

Wada-isticmaalka (Shorthand)

Dhammaan sifooyinka gadaasha waxaa lagu qori karaa hal xariiq:

body {
    background: #f0f0f0 url("pattern.png") no-repeat center/cover;
}

4. Talooyin: Midabada Dhammaystiran (Color Harmony)

• Isticmaal midabo is waafajiya (color palette).
• Ha isticmaalin midab badan (ugu badnaan 3 midab oo waaweyn).
• Hubi in qoraalka iyo gadaashu kala duwan yihiin (contrast).

Layli (Practice)

1. Abuur cinwaan <h1> oo leh midab Hex #2e7d32 (cagaar madow).
2. Ku dar qayb <section> leh gadaal RGB (232, 245, 233) - cagaar khafiif ah.
3. Ku dar sawir gadaal ah qaybta header-ka.
4. Tijaabi rgba() si aad u hesho midab hufan.

Sii wadashada: Casharka xigta, waxaan baran doonaa hanaanka qoraalka iyo farta (typography)!