وانە چوارەم: فێربوونی زمانی HTML و CSS! 🎉

بەخێربێیت بۆ وانە چوارەم لە سلسلەی فێربوونی زمانی HTML و CSS ! لەم وانەیەدا، ئێمە بە تێکچوونی تەکنیکە پێشکەوتووەکانی CSS دەچینە سەر کە یارمەتی ئەوەی دەدات تا دیزاینەکانت باشتر و جوڵاوتر بن. ئێمە فێردەبین چۆن بەکاربێنین Flexbox و Grid بۆ دروستکردنی ڕووبەندکردنە نوێ و ئاسان، لەگەڵ ئەوەی ئەفەکتە بینراوەکان وەک ئەنیمەیشنەکان (Animations) و سێوەکان (Shadows) دەربڕنەوە.

1. پێداچوونەوەی خێرا

لە وانەی پێشوو، ئێمە فێر بووین:

• چۆن ڕوونکردنەوەی پەڕگەکان بە بەکارهێنانی CSS .
• ڕەنگەکان، خطەکان، هاوشوێنەکان، کەسروەکان، و دیزاینی گونجاو .

ئێستا، ئێمە بەرزدەچینەوە بۆ تەکنیکە پێشکەوتووەکان وەک Flexbox و Grid ، لەگەڵ ئەوەی ئەفەکتە بینراوەکان وەک ئەنیمەیشنەکان و سێوەکان دەربڕنەوە.

2. Flexbox: سیستەمی ڕووبەندکردنی کێش

Flexbox چییە؟

Flexbox سیستەمێکی ڕووبەندکردنە کە یارمەتی ئەوەی دەدات کە ئەلیمەنتەکان بە شێوەیەکی کێش دابەش بکرێن لە ناو کەسرویەکی ئاسۆیی یان ستوونی. Flexbox بە شێوەیەکی ئاسان بەکاردێت و کۆنتڕۆڵێکی باشی هەیە لەسەر ڕیزکردنی ئەلیمەنتەکان و دابەشکردنی شوێنەکان.

تایبەتمەندییە بنەڕەتییەکانی Flexbox:

• تایبەتمەندییەکانی کەسرو (Container Properties):

  • display: flex;: گۆڕینی کەسرو بۆ سیستەمی Flexbox .
  • flex-direction: دیاریکردنی بازنەی ئەلیمەنتەکان (row, column).
  • justify-content: دابەشکردنی ئەلیمەنتەکان بۆ ئاسۆیی (center, space-between, flex-start).
  • align-items: دابەشکردنی ئەلیمەنتەکان بۆ ستوونی (center, flex-start, flex-end).

• تایبەتمەندییەکانی ئەلیمەنت (Item Properties):

  • flex-grow: دیاریکردنی چەندەوە ئەلیمەنتێک بەردەوام بدرێت.
  • flex-shrink: دیاریکردنی چەندەوە ئەلیمەنتێک کەم بێت.
  • flex-basis: دیاریکردنی قەبارەی بنچینەیی ئەلیمەنت.

نموونەی تاقیکردنەوە:

<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>

<style>
.container {
display: flex;
flex-direction: row; /* ڕیزکردنی ئەلیمەنتەکان بۆ ئاسۆیی */
justify-content: space-around; /* دابەشکردنی ئەلیمەنتەکان بە شێوەیەکی یەکسان */
align-items: center; /* تووسینەوەی ئەلیمەنتەکان بۆ ستوونی */
height: 200px;
border: 1px solid black;
}


.item {
background-color: lightblue;
padding: 20px;
margin: 5px;
border: 1px solid #333;
}
</style>

3. Grid: سیستەمی ڕووبەندکردنی شەبەکەیی

Grid چییە؟

Grid سیستەمێکی ڕووبەندکردنە کە یارمەتی ئەوەی دەدات کە ڕووبەندکردنە جیاوازەکان دروست بکرێن بە بەکارهێنانی شەبەکەیی لە ڕیز و ستوون. Grid بە شێوەیەکی باش بەکاردێت بۆ ڕووبەندکردنە سنووردار یان کێشەکان.

تایبەتمەندییە بنەڕەتییەکانی Grid:

• تایبەتمەندییەکانی کەسرو (Container Properties):

  • display: grid;: گۆڕینی کەسرو بۆ سیستەمی Grid .
  • grid-template-columns: دیاریکردنی ژمارەی ستوونەکان و عرضیان.
  • grid-template-rows: دیاریکردنی ژمارەی ڕیزەکان و بەرزییان.
  • gap: دیاریکردنی شوێن نێوان ڕیز و ستوونەکان.

• تایبەتمەندییەکانی ئەلیمەنت (Item Properties):

  • grid-column: دیاریکردنی شوێنی ئەلیمەنت لە ناو ستوونەکان.
  • grid-row: دیاریکردنی شوێنی ئەلیمەنت لە ناو ڕیزەکان.

نموونەی تاقیکردنەوە:

<div class="grid-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>

<style>
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr); /* دوو ستوون بە عرضی یەکسان */
grid-template-rows: auto; /* بەرزی ڕیزەکان بە شێوەیەکی ئاۆتۆماتیک */
gap: 10px; /* شوێن نێوان ئەلیمەنتەکان */
border: 1px solid black;
}


.item {
background-color: lightcoral;
padding: 20px;
text-align: center;
border: 1px solid #333;
}
</style>

4. ئەنیمەیشنەکان (Animations)

ئەنیمەیشنەکان چۆن کار دەکەن؟

ئەنیمەیشنەکان بەکاردێن بۆ گۆڕینی تایبەتمەندییەکانی ئەلیمەنت بە شێوەیەکی ئاڕاستەیی لە ماوەی کاتێکی دیاریکراو.

جیاوازی ڕێگەکان بۆ دروستکردنی ئەنیمەیشنەکان:

• @keyframes: دیاریکردنی مەرجەکانی حرکەت.
• animation: بەکارهێنانی حرکەت لەسەر ئەلیمەنت.

نموونەی تاقیکردنەوە:

/* دیاریکردنی حرکەت */
@keyframes slide-in {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}


/* بەکارهێنانی حرکەت */
.box {
width: 100px;
height: 100px;
background-color: lightgreen;
animation: slide-in 2s ease-in-out;
}

5. سێوەکان (Shadows)

جۆرەکانی سێوەکان:

• Text Shadow : سێوە بۆ نوسین.
• Box Shadow : سێوە بۆ ئەلیمەنتەکان.

نموونەی تاقیکردنەوە:

/* سێوە بۆ نوسین */
h1 {
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}


/* سێوە بۆ ئەلیمەنتەکان */
.box {
width: 100px;
height: 100px;
background-color: lightblue;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

6. کاری تاقیکردنەوە

هەوڵبدە پەڕگەیەکی HTML دروست بکەیت کە پێکهاتووە لە:

• ڕووبەندکردن بە بەکارهێنانی Flexbox:

  • ڕیز و ستوونە کێشەکان.
  • ئەلیمەنتەکان بە شێوەیەکی یەکسان تووسینەوە بۆ ئاسۆیی و ستوونی.

• ڕووبەندکردن بە بەکارهێنانی Grid:

  • شەبەکەییەک کە پێکهاتووە لە ٣ ستوون و ٢ ڕیز.
  • ئەلیمەنتەکان بە شوێنی یەکسان.

• ئەنیمەیشنەکان:

  • کەسروێک کە لە چەپ بۆ ڕاست دەجوڵێت.

• سێوەکان:

  • نوسین و ئەلیمەنتەکان بە سێوەی جوان.

7. چی دواتر؟

لە وانەی داهاتوودا، ئێمە فێردەبین:

• چۆن ئەفەکتە ڕاکێشەکان بەکاربهێنرێن بە بەکارهێنانی JavaScript .
• دروستکردنی دوگمەی "دیاریکردن/شاردن" بۆ نوسینەکان.
• دروستکردنی شوێنی جوڵاو بۆ دەرئەنجامەکان.

📌 پێشنیار: هیچ شک نەکە بۆ تاقیکردنەوەی کۆدەکان بە خۆت و گۆڕینیان بۆ بینینی ئەنجامەکان. چارەسەرکردن مەرجە بۆ باشبوونەوە! 🚀