3.4. СSS — жұмыстар

CSS – Жұмыстарға 20 Практикалық Мысал

Кеңес: әр мысалды өз бетіңізде қолданып, эксперимент жасап көріңіз. Осылайша тәжірибеңіз артады.

---

1. Беттің фонын өзгерту

Мақсаты: Қарапайым фон түсін беру

body {
  background-color: #f0f0f0;
}

---

2. Мәтін түсін беру

Мақсаты: Тақырып түсін қою

h1 {
  color: #2c3e50;
}

---

3. Шрифт өзгерту (Google Fonts)

Мақсаты: Қаріп стилін таңдау

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

body {
  font-family: 'Roboto', sans-serif;
}

---

4. Көлеңке қосу (box-shadow)

Мақсаты: Элементке тереңдік беру

.card {
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

---

5. Батырма стилі

Мақсаты: Қолданушы батырмасына стиль беру

button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

---

6. Hover эффекті

Мақсаты: Тінтуірмен ұсталғанда түс өзгерту

button:hover {
  background-color: #0056b3;
}

---

7. Анимация (keyframes)

Мақсаты: Қозғалыс жасау

@keyframes slide {
  from { transform: translateX(-100px); }
  to { transform: translateX(0); }
}
div {
  animation: slide 0.5s ease-in-out;
}

---

8. Жақтау (border)

Мақсаты: Контентке шекара орнату

img {
  border: 2px solid #000;
  border-radius: 8px;
}

---

9. Flexbox қолдану

Мақсаты: Элементтерді қатарға қою

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

---

10. Grid жүйесі

Мақсаты: Қатар мен бағанға бөлшектеу

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

---

11. Адаптивтілік (Media Query)

Мақсаты: Телефон үшін жеке стиль

@media (max-width: 600px) {
  body {
    background-color: #e0f7fa;
  }
}

---

12. Псевдокласс :hover, :active

Мақсаты: Батырма ұсталған сәтті көрсету

a:hover {
  text-decoration: underline;
}
a:active {
  color: red;
}

---

13. z-index арқылы қабаттар

Мақсаты: Бір элементті үстіне шығару

.modal {
  position: absolute;
  z-index: 999;
}

---

14. Fixed меню

Мақсаты: Жоғарыда бекітілген навигация

nav {
  position: fixed;
  top: 0;
  width: 100%;
  background: white;
}

---

15. Анимациямен батырма (hover scale)

Мақсаты: Тінтуірмен ұсталғанда үлкейту

.card:hover {
  transform: scale(1.05);
  transition: 0.3s ease-in-out;
}

---

16. Айналмалы жүктеу белгісі (spinner)

Мақсаты: Загрузка анимациясы

.loader {
  border: 4px solid #ccc;
  border-top: 4px solid #007bff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

---

17. Түсті градиент

Мақсаты: Жұмсақ фон түсі

body {
  background: linear-gradient(45deg, #6dd5ed, #2193b0);
}

---

18. Анимациялық жазу (text-shadow + hover)

Мақсаты: Жылтырап тұрған жазу

h1 {
  text-shadow: 2px 2px 5px #555;
}
h1:hover {
  color: #007bff;
}

---

19. Изменение курсора

Мақсаты: Элементке ерекше курсор

a {
  cursor: pointer;
}

---

20. Scroll эффект (scroll-behavior)

Мақсаты: Бет ішінде тегіс айналдыру

html {
  scroll-behavior: smooth;
}

---

Қосымша Ресурстар:

Сайт	Мақсаты
https://codepen.io	Live CSS кодтарды тексеру
https://css-tricks.com	Кеңестер мен шаблондар
https://web.dev/learn/css/	Google-дің ресми CSS оқу платформасы