Mastering CSS3: Practical Guide to Modern Layouts, Animations, and Variables

CSS3: Qaab-dhismeedka Layout, Animation iyo Variables

CSS3 waa horumarka cusub ee naqshadeynta webka. Waxay keentay Flexbox, Grid, variables, transitions, iyo media queries si loo dhiso bogag casri ah oo responsive ah.

1. Flexbox – Hal xariiq layout

Flexbox wuxuu kuu oggolaanayaa inaad si siman u dhigto qaybaha bogga — sida navigation ama card lists.

.container {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.item {
  flex: 1;
}

2. Grid – Laba xariiq layout

Grid wuxuu kuu oggolaanayaa inaad si sax ah u kala dhigto rows iyo columns — sida dashboards ama galleries.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.header { grid-column: 1 / -1; }

3. Variables (Custom Properties)

Variables waxay fududeeyaan in styles la wadaago oo la maareeyo:

:root {
  --primary: #0b79d0;
  --gap: 16px;
}
.box {
  background: var(--primary);
  padding: var(--gap);
}

4. Transitions & Animations

Transitions waxaa loo isticmaalaa isbeddel degdeg ah, animations-na waxay keeni karaan dhaqdhaqaaq muuqda.

.button { transition: transform 0.2s ease; }
.button:hover { transform: translateY(-3px); }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.card { animation: fadeIn 0.4s ease both; }

5. Media Queries – Naqshad responsive ah

.container { display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .container { grid-template-columns: 1fr 2fr; }
}

CSS3: Layouts, Animations & Variables

CSS3 powers modern web design. It introduced Flexbox, Grid, variables, transitions, and media queries to build responsive layouts.

1. Flexbox – One-dimensional layout

Flexbox helps align items in a row or column — like navbars or card lists.

.container {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.item {
  flex: 1;
}

2. Grid – Two-dimensional layout

Grid gives precise control over rows and columns — perfect for dashboards or galleries.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.header { grid-column: 1 / -1; }

3. Variables (Custom Properties)

Variables make styles reusable and easier to manage:

:root {
  --primary: #0b79d0;
  --gap: 16px;
}
.box {
  background: var(--primary);
  padding: var(--gap);
}

4. Transitions & Animations

Use transitions for quick changes, and animations for visual movement.

.button { transition: transform 0.2s ease; }
.button:hover { transform: translateY(-3px); }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.card { animation: fadeIn 0.4s ease both; }

5. Media Queries – Responsive design

.container { display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .container { grid-template-columns: 1fr 2fr; }
}