Css3 Darslari

CSS 3-dars 2-qism Attr selection // Counter // Math Function

Linear Gradients (yuqoriga , pastga va ikki yonga qarab rangni sochib beradi ) Radial Gradients (faqatgina content o’rtasidan ranglarni sochib beradi) Conic Gradients () Syntax: background: linear-gradient(direction, color-stop1, color-stop2, ...); -- direction – {to bottom right ; to top left ;} background: repeating-linear-gradient(red, yellow 10%, green 20%); background: radial-gradient(shape size at position, start-color, ..., last-color); direction {circle ; } background: conic-gradient([from angle] [at position,] color [degree], color [degree], ...); background: conic-gradient(red, yellow, green, blue, black);

CSS 3-dars 3-qism Gradient

SHAdow 2 ga bo’linadi: 1. Text-Shadow ; 2. Box-shadow ; 1.Text-shadow:: => text uchun mo’ljallangan soya hosil qilish uchun element ; p { text-shadow : horizontal (px) vertical (px) color; p { text-shadow : horizontal (px) vertical (px) opacity (px) color ; 2.Box-Shadow:: => birorta bir shakl uchun soya hosil qilish uchun foydalaniladi ; div{box-shadow: horizontal (px) vertical (px) color }; div{box-shadow: horizontal (px) vertical (px) opacity (px) color;} Transform  o'zgartirish degan ma’noni bildiradi; translate(x px , y px) – x va y o’qi bo’yicha surulish; rotate( #deg) – burulishni belgilaydi; Scale(x # , y #) - width va height jihatidan kengaytirish; SkewX(deg) – x o’qi bo’yicha burchakni cho’zadi; SkewY(deg) – y o’qi bo’yicha burchakni cho’zadi;

CSS 4-dars 1-qism shadow //Transform

Transition  o’tish deb tarjima qilinadi ; {birorta bir div ga width, height , background beriladi va } ---- transition: width(height , all) #s; va (hover holatida width (height) ga qiymat beriladi); Transition : width 2s , height 4s ; (hover holatida widthga ham heightga ham qiymat beriladi);; (width va height jihatdan o’zgarishni belgilaydi); Transition-delay: #s; (qanchadan so’ng boshlanishni belgilaydi); transition-timing-function: value ; o'tish vaqti-funksiyasini belgilab beradi ; value: ease -> sekin boshlanadi o’rtada tezlashadi va yana sekinlaydi; linear ->bir xilda boshlanadi va tugaydi ; ease-in ->boshlanishi sekinlikni belgilaydi; ease-out -> oxiri sekinlikni belgilaydi; ease-in-out ->boshlanishi ham oxiri ham sekinlikni belgilaydi; transition-duraction: #s ; transition vaqtni belgilaydi ; yuqoridagi uchun ;;;; transition-property: width (height); transiton yo’nalishini yoki xususiyatini belgilaydi; Amaliy Mashg’ulot: ikkita div bering floatdan foydalanib, left va right ga joylashtiring,bitta div tarkibida matn kiriting va shu div scroll holatidan foydalaning; ikkala div ga border bering ; soya hosil qiling va eng asosiysi : : : hover holatida birinchi div o’rtaga kengaysin, ikkinchi dev ga hover qilinganda ham shu div o’rtaga kengaysin; ; ;