color - yozuv rangi
color: dodgerblue;
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum, consectetur!
background-color - orqa fon rangi
background-color: teal;
color: white;
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum iste consequatur voluptatibus.
font-size - yozuv o'lchami
font-size: 30px;
Lorem ipsum dolor sit amet consectetur.
border - ramka, chegara (ramka qalinligi, dizayni va rangi)
border: 3px solid dodgerblue;
Lorem ipsum dolor sit amet consectetur.
padding - elementning ramkadan ichkari qismidan joy ochadi
padding: 17px;
Lorem ipsum dolor sit amet consectetur.
Lorem ipsum dolor sit amet consectetur.
margin - elementning ramkadan tashqari qismidan joy ochadi
margin: 20px;
Lorem ipsum dolor sit amet consectetur.
Lorem ipsum dolor sit amet consectetur.
border-radius - element qirralarini dumaloqlashtiradi
border-radius: 15px;
Lorem ipsum dolor sit amet consectetur.
text-align: center/left/right/justify - matnlar va kichik elementlarning gorizontal joylashuvini o'zgartiradi
text-align: center;
Lorem ipsum dolor sit.
text-align: right;
Lorem ipsum dolor sit.
text-align: justify;
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit veritatis consequatur quod, beatae rem voluptas culpa aut consectetur, provident eos modi quis consequuntur iste quo perspiciatis delectus molestias tempore aliquam ab adipisci praesentium minus quam. Suscipit est optio ut iure enim unde inventore odio ducimus, maiores porro deleniti quod odit sequi, dolores aperiam harum in doloribus similique eius quis commodi.
font-weight: bold/normal - yozuv qalinligini o'zgartiradi
font-weight: bold;
- Lorem ipsum dolor sit amet.
font-style - italic/normal - yozuv dizaynini o'zgartiradi
font-style: italic;
- Lorem ipsum dolor sit amet.
line-height: 1.6 - matn qatorlari orasini ochadi, yozuvlar orasidan vertikal ravishda joy ochadi
line-height: 3;
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores, labore. At blanditiis excepturi maiores exercitationem alias pariatur odio corporis quod deserunt quisquam eos, perspiciatis molestiae incidunt doloribus ipsam libero omnis expedita inventore ab voluptas unde deleniti recusandae. Voluptatem nostrum illo officiis sunt porro non at.
word-spacing - #px so'zlar orasini ochadi
letter-spacing - #px harflar orasini ochadi
word-spacing: 30px;
letter-spacing: 10px;
Lorem ipsum dolor sit amet consectetur.
text-shadow:
#px #px #px color - matnga soya chiqaradi
text-shadow: 2px 3px 1px red,
-4px -3px 2px green;
-
Lorem ipsum dolor
box-shadow:
#px #px #px #px color - elementga soya chiqaradi
box-shadow: 0 0 15px 3px black,
10px 12px blue,
-7px -5px 8px red;
-
Lorem ipsum dolor
rotate: [0:360]#deg - elementni aylantiradi
rotate: 20deg; -
element
translate: #px - elementni siljitadi
translate: 50px -30px; -
element
scale: # - element hajmini o'zgartiradi
scale: 0.7; -
element
.element:hover{} - sichqoncha element ustiga borganda elementning dizaynini o'zgartiradi
.element {
width: 130px;
height: 130px;
background-color: gray;
color: white;
font-weight: bold;
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 22px;
transition: 0.2s all linear;
}
.element:hover {
scale: 1.1;
rotate: -100deg;
translate: 70px 20px;
background-color: teal;
color: white;
}
square
transition: all #s linear - element bir holatdan boshqa holatga o'tish vaqtini belgilaydi, effekt vaqtini uzaytiradi yoki qisqartiradi
transition ishlatilmasa ->
test
transition: 0.2s all linear; ->
test
Frontend