CSS rasm shakllari
CSS yordamida rasmlarni doira, ellips va ko‘pburchak shakllariga olib kelish (clip) oson.
CSS clip-path xossasi va circle() funksiyasi
clip-path xossasi elementni asosiy shaklga olib kelish (clip) imkonini beradi.
circle() funksiyasi radius va joylashuvli doirani belgilaydi.
Bu yerda rasmini 50% radiusli doiraga olib kelamiz:
Misol
Rasmni 50% radiusli doiraga olib kelish:
img {
clip-path: circle(50%);
}
O‘zingiz sinab ko‘ring »
Doira markazini ham belgilash mumkin. Bu uzunlik yoki foiz qiymati bo‘lishi mumkin, left, right, top yoki bottom kabi qiymat ham bo‘lishi mumkin. Standart qiymat — center.
Bu yerda rasmini 50% radiusli doiraga olib kelib, doira markazini o‘ng tomonda joylashtiramiz:
Misol
Rasmni 50% radiusli doiraga olib kelib, doira markazini o‘ng tomonda joylashtirish:
img {
clip-path: circle(50% at right);
}
O‘zingiz sinab ko‘ring »
CSS shape-outside va circle()
shape-outside xossasi inline kontentning o‘ralishi uchun shakl belgilash imkonini beradi.
circle() funksiyasi radius va joylashuvli doirani belgilaydi.
Bu yerda rasmini 40% radiusli doiraga olib kelamiz va shape-outside ni 45% radiusli doiraga belgilaymiz (matnni shakllantirish uchun):
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac laoreet quam, id aliquet nisl. Etiam id eros ligula. Aenean euismod, enim sed mollis feugiat, magna massa cursus leo, ut maximus metus eros non ante. Eget tincidunt mauris, ut euismod ipsum. In hac habitasse platea dictumst. Tortor magna dapibusda, elementum elementum neque sagittis id. Integer vestibulum semper dui, quis finibus libero elementum noc. Fusce ultricies lectus a eros interdum, nibh turlicha samarali. Present sed ex bibendum, fermentum tortor nec, tincidunt augue. Maecenas in lobortis ligula, at viverra velit. Donec facilisis blandit purus sed eficitur. Duis est augue, bibendum quis bibendum sed, feugiat vel eros. Quisque ut nisi sed erat malesuada euismod. Aliquam feugiat erat eget sodales imperdiet. Ut vel tortor auctor, rutrum lectus a, tempor nunc. Vivamus nec elit ornare, dictum urna sollicitudin, ornare diam. Nullam dictum arcu vitae odio ultrices iaculis.
Misol
circle(), clip-path va shape-outside dan foydalanish:
img {
float: left;
clip-path: circle(40%);
shape-outside: circle(45%);
}
O‘zingiz sinab ko‘ring »
CSS clip-path va ellipse()
clip-path xossasi elementni asosiy shaklga olib kelish (clip) imkonini beradi.
ellipse() funksiyasi x va y radiusli ellipsni belgilaydi.
Bu yerda rasmini 50% x radius va 35% y radiusli ellipsga olib kelamiz:
Misol
Rasmni 50% x radius va 35% y radiusli ellipsga olib kelish:
img {
clip-path: ellipse(50% 35%);
}
O‘zingiz sinab ko‘ring »
Ellips markazini ham belgilashimiz mumkin. Bu uzunlik yoki foiz qiymati bo‘lishi mumkin. Shuningdek, left, right, top yoki bottom kabi qiymat ham bo‘lishi mumkin. Standart qiymati center.
Bu yerda rasmini 50% x radius va 35% y radiusli ellipsga olib kelib, ellips markazini o‘ng tomonda joylashtiramiz:
Misol
Rasmni 50% x radius va 35% y radiusli ellipsga olib kelib, ellips markazini o‘ng tomonda joylashtirish:
img {
clip-path: ellipse(50% 35% at right);
}
O‘zingiz sinab ko‘ring »
CSS shape-outside va ellipse()
Bu yerda rasmini 40% x radius va 50% y radiusli ellipsga olib kelamiz va shape-outside ni 45% x radius va 50% y radiusli ellipsga belgilaymiz (matnni shakllantirish uchun):
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac laoreet quam, id aliquet nisl. Etiam id eros ligula. Aenean euismod, enim sed mollis feugiat, magna massa cursus leo, ut maximus metus eros non ante. Eget tincidunt mauris, ut euismod ipsum. In hac habitasse platea dictumst. Tortor magna dapibusda, elementum elementum neque sagittis id. Integer vestibulum semper dui, quis finibus libero elementum noc. Fusce ultricies lectus a eros interdum, nibh turlicha samarali. Present sed ex bibendum, fermentum tortor nec, tincidunt augue. Maecenas in lobortis ligula, at viverra velit. Donec facilisis blandit purus sed eficitur. Duis est augue, bibendum quis bibendum sed, feugiat vel eros. Quisque ut nisi sed erat malesuada euismod. Aliquam feugiat erat eget sodales imperdiet. Ut vel tortor auctor, rutrum lectus a, tempor nunc. Vivamus nec elit ornare, dictum urna sollicitudin, ornare diam. Nullam dictum arcu vitae odio ultrices iaculis.
Misol
ellipse(), clip-path va shape-outside dan foydalanish:
img {
float: left;
clip-path: ellipse(40% 50%);
shape-outside: ellipse(45% 50%);
}
O‘zingiz sinab ko‘ring »
CSS polygon() funksiyasi
polygon() funksiyasi ko‘pburchakni belgilaydi.
Bu funksiya ko‘pburchakni belgilovchi nuqtalarni o‘z ichiga oladi. Bu uzunlik yoki foiz qiymati bo‘lishi mumkin. Har bir nuqta x va y koordinatalari juftligidir. 0 0 chap-yuqori burchakni, 100% 100% esa o‘ng-pastki burchakni belgilaydi.
polygon() funksiyasi clip-path xossasi va shape-outside xossasi ichida ishlatiladi.
Bu yerda biz rasmni ko‘pburchakga qirqib olamiz:
Misol
Rasmni ko‘pburchak shaklida kesish:
img {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
O‘zingiz sinab ko‘ring »
CSS xossalari va funksiyalari
Quyidagi jadval bu bobda ishlatilgan CSS xossalari va funksiyalarini sanab o‘tadi:
| Property/Function | Tavsif |
|---|---|
| clip-path | Elementni asosiy shaklga yoki SVG manbasiga kesish imkonini beradi |
| shape-outside | Inline kontent atrofidan o‘ralib o‘tishi uchun shakl belgilash imkonini beradi |
| circle() | Radiusi va pozitsiyasi bo‘lgan doirani belgilaydi |
| ellipse() | Ikki x va y radiusli ellipsni belgilaydi |
| polygon() | Ko‘pburchakni belgilaydi |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!