Css3 Darslari

CSS 4-dars 2-qism Transition // Amaliy Mashg’ulot

Animation-name: name..; animatsiyaga nom berishni belgilaydi; Animation-duration: #s ; animatsiya vaqtini belgilaydi; div{ animation-name: yangi; animation-duration:5s; width:100px; height:100px; background-color:red; } @keyframes yangi{ from{background-color:black;} to{background-color:yellow;} // keyinchalik left:; top:; bottom:; right:; } or @keyframes yangi{ 0%{} 25%{} 50%{} 75%{} 100%{] } animation-delay: #s; animatsiya qachondan keyin boshlanishni belgilab beradi; animation-iteration-count: #; animatsiya sonini belgilaydi ; (infinite -> cheksiz davom etish uchun); animation-direction: value; animatsiya yo’nalishini belgilaydi ; reverse - > teskari tarafdan boshlanadi; alternative -> birinchi to’g’ri boshlanadi ikkinchi aylanada esa teskaridan boshlanadi; alternative-reverse -> birinchi teskaridan boshlanadi keyin ikkinchi aylanadan esa to’g’ri davom etadi; animation-timing-function: value ; transition xususiyati bilan bir xil; animation: name duration a-t-f delay count direction;

CSS 4-dars 3-qism Animation / Amaliy Mashg’ulot

Flex -- > egiluvchanlik deb tarjima qilinadi; display: flex ; flex da ishlash uchun start ni belgilaydi; flex-direction -- > flex ning yo’nalishini belgilaydi ; (row; column; row-reverse ; column-reverse); flex-wrap -- > bitta qatorga sig’dirish yoki ikkinchi qatorga tushurishni belgilaydi ; (wrap; no-wrap); justify-content -- > content joylashish o’rnini belgilab beradi ; (center ; space-around ; space-between ; flex-start ; flex-end); align-items -- > content ichidagi qismni kontentga nisbatan joylashish o’rnini belgilaydi; (yuqoridagi qiymatlar);

1

2

3

4

// tartibi kiritilgan ; flex-grow – flexning itemlari ichida ishlatiladi va shu item qolganlaridan nisbatan necha marta katta ekanligini bildirib beradi; -- umumiy item classiga berilsa , contentni to’ldirib beradi; flex-shrink – agar itemlarning widthi kata contentdan oshib ketadigan bo’lsa shu holatda shuning qiymatini itemga bersak bo’ladi ,va uni shu berilgan darajada pasaytirib beradi ; flex-basis: ; -- umumiy contentga mos qilib joylashtirib beradi ;