CSS rasmlar uslubi
Rasmlarni CSS yordamida uslublashni o‘rganing.
Yumaloq burchakli rasmlar
Yumaloq rasmlar yaratish uchun border-radius xossasidan foydalanishingiz mumkin:
Maslahat: Rasmlarni doiralar, ellipslar va ko‘pburchaklar shaklida qirqishni (clip) o‘rganish uchun CSS Image Shapes bobiga qarang.
Miniatyura rasmlar (thumbnails)
Miniatyura rasmlar yaratish uchun border xossasidan foydalaning:
Misol
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
O‘zingiz sinab ko‘ring »
Havola sifatidagi kichik rasm (thumbnail):
Misol
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
img:hover {
box-shadow: 0 0
2px 1px rgba(0, 140, 186, 0.5);
}
O‘zingiz sinab ko‘ring »
Adaptiv rasmlar
Moslashuvchan rasmlar ekran o‘lchamiga moslashuvi avtomatik sozlanadi.
Effektni ko‘rish uchun brauzer oynasining o‘lchamini o‘zgartiring:
Rasm kerak bo‘lganda kichrayishi, lekin hech qachon asl o‘lchamidan kattalashmasligi kerak bo‘lsa, quyidagini qo‘shing:
Maslahat: Responsive veb-dizayn haqida ko‘proq ma’lumotni CSS RWD qo‘llanmamizda o‘qing.
Polaroid rasmlar / kartochkalar
Cinque Terre
Northern Lights
Misol
div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0,
0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
img {width: 100%}
div.container {
text-align: center;
padding: 10px 20px;
}
O‘zingiz sinab ko‘ring »
Moslashuvchan rasm galereyasi
CSS moslashuvchan rasm galereyalarini yaratish uchun ishlatilishi mumkin. Bu misol turli ekran o‘lchamlarida rasmlarni qayta joylashtirish uchun media so‘rovlardan foydalanadi. Effektni ko‘rish uchun brauzer oynasining o‘lchamini o‘zgartiring:
Misol
@media only screen and (max-width: 768px) {
div.gallery-item {
width: calc(50% - 20px);
}
}
@media only screen and (max-width: 480px) {
div.gallery-item {
width: calc(100% - 20px);
}
}
O‘zingiz sinab ko‘ring »
Maslahat: Responsive veb-dizayn haqida ko‘proq ma’lumotni CSS RWD qo‘llanmamizda o‘qing.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!