HTML First va CSS
HTML-birinchi ishlanmada CSS ko‘pincha HTMLdan keyin ikkinchi qadamdir.
JavaScript o‘rniga CSS yordamida ko‘plab vizual effektlarni yaratish mumkin.
CSS maketlar, hover effektlari, o‘tishlar (transitions), animatsiyalar, moslashuvchan dizayn va oddiy holat o‘zgarishlarini boshqara oladi.
Hover effektlari
:hover selektori elementni sichqoncha ustiga bosganda o‘zgartirishi mumkin.
Misol
<style>
button:hover {
background-color:#059862;
}
</style>
<button>Hover Over Me</button>
O‘zingiz sinab ko‘ring »
Transitions
CSS o‘tishlari (transitions) o‘zgarishlarni silliq animatsiya qilishi mumkin.
Misol
<style>
.box {
width:100px;
height:100px;
background-color:#04AA6D;
transition:width 0.5s;
}
.box:hover {
width:200px;
}
</style>
<div class="box"></div>
O‘zingiz sinab ko‘ring »
Kontentni ko‘rsatish va yashirish
CSS selektorlar yordamida kontentni ko‘rsatishi va yashirishi mumkin.
Bu oddiy menyular va ochiladigan menyular uchun foydali bo‘lishi mumkin.
Misol
<style>
.menu-content {
display:none;
}
.menu:hover .menu-content {
display:block;
}
</style>
<div class="menu">
Menu
<div class="menu-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
</div>
</div>
O‘zingiz sinab ko‘ring »
Moslashuvchan maketlar
CSS media so‘rovlari turli ekran o‘lchamlari uchun tartibni o‘zgartirishi mumkin.
Bu JavaScript-ga asoslangan tartibni o‘zgartirish zaruratidan qochadi.
Misol
<style>
.container {
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:16px;
}
@media (max-width:600px) {
.container {
grid-template-columns:1fr;
}
}
</style>
O‘zingiz sinab ko‘ring »
CSS animatsiyalari
CSS animatsiyalari JavaScript-ni ishlatmasdan takroriy harakatni yaratishi mumkin.
Misol
<style>
.spinner {
width:40px;
height:40px;
border:6px solid #ddd;
border-top:6px solid #04AA6D;
border-radius:50%;
animation:spin 1s linear infinite;
}
@keyframes spin {
to { transform:rotate(360deg); }
}
</style>
<div class="spinner"></div>
O‘zingiz sinab ko‘ring »
CSS yetarli bo‘lganda
O‘zgartirish vizual bo‘lsa, CSS ko‘pincha yetarli.
Ranglar, o‘lchamlar, bo‘shliqlar, maket, harakat va oddiy ko‘rinish o‘zgarishlari uchun CSS’dan foydalaning.
Sahifaga mantiq, ma’lumotlarni qayta ishlash, saqlash yoki server bilan aloqa qilish kerak bo‘lganda JavaScript-dan foydalaning.
Agar muammo vizual bo‘lsa, avval CSS’ni sinab ko‘ring.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!