Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

Hover qoplamalari

ULASHISH

Rasm hover qatlami

Hover paytida qatlam (overlay) effekti yaratish:

Misol

Matnning asta paydo bo‘lishi:

Avatar
Salom Dunyo
O‘zingiz sinab ko‘ring »

Misol

Blokning asta paydo bo‘lishi:

Avatar
John
O‘zingiz sinab ko‘ring »

Misol

Sirpanib kirish (yuqoridan):

Avatar
Salom Dunyo
O‘zingiz sinab ko‘ring »

Misol

Sirpanib kirish (pastdan):

Avatar
Salom Dunyo
O‘zingiz sinab ko‘ring »

Misol

Sirpanib kirish (chapdan):

Avatar
Salom Dunyo
O‘zingiz sinab ko‘ring »

Misol

Sirpanib kirish (o‘ngdan):

Avatar
Salom Dunyo
O‘zingiz sinab ko‘ring »

Rasmni aylantirish (flip)

Rasmni gorizontal aylantirish uchun sichqonchasini ustiga olib boring:

Paris

Misol

img:hover {
  transform: scaleX(-1);
}
O‘zingiz sinab ko‘ring »

Moslashuvchan rasm galereyasi

CSS yordamida moslashuvchan rasm galereyalari yaratish mumkin. Bu misol turli ekran o‘lchamlarida rasmlarni qayta joylashtirish uchun media so‘rovlaridan foydalanadi. Effektni ko‘rish uchun brauzer oynasining o‘lchamini o‘zgartiring:

Cinque Terre
Cinque Terre
Forest
Green Forest
Northern Lights
Northern Lights
Mountains
Mountains

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.


‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish