Assalomu alaykum qadrli OMUC jamoasi, do'stlar! Ushbu maqolada biz veb-sahifaga ajoyib ko'rinish beradigan, CSS transformatsiyasi yordamida shakllantiriladigan bloklarni o'rganamiz. Qani unda ketdik!

 

Tasavvur qiling, siz saytingizda, deylik o'z portfolioingizda biror veb-sahifaning telefon, planshet va kompyuter ekranlariga qanday adaptatsiya bo'lishligini ko'rsatib bermoqchisiz. Bunday holda men sizga ushbu maqola bilan yaxshi tanishib chiqishingizni so'rab qolaman.)

 

Bloklar chiqmagandagi holat
Bloklar chiqmagandagi holat

 

Biz shakllantriadigan 3 ta blok hajmi jihatidan telefn, planshet va kompyuter ekranlariga mos keladi va siz shu bloklarga veb-sahifangizning adaptatsiyalangan 3 xildagi rasmini joylashtirasiz. 

Bloklarning chiqib kelish jarayoni 
Bloklarning chiqib kelish jarayoni 

 

Eng ajoyibi shundagi, ushbu bloklar shunchaki sahifada turmaydi, a kursor sahifa asosiy blok chegarasiga kirgan vaqtda bloklar pastdan chiqib keladi. Chiqqanda ham chiroyli effektlar va aylanishlar bilan.

Bloklar chiqib bo'lgan vaziyat
Bloklar chiqib bo'lgan vaziyat

 

Keling, dasturlashga o'tamiz:

Biz avvalo 3 ta div shakllantirib olamiz va ularni 1 ta section klasli div bilan o'rab olamiz. Ichkarida har bir divga klas beramiz. Va html da qiladigan ishimiz o'z nihoyasiga yetdi.

HTML:

<div class="section">
  <div class="phone"><span>Telefon</span></div>
  <div class="tablet"><span>Planshet</span></div>
  <div class="desctop"><span>Kompyuter</span></div>
  <h1 class="heading">(Biror bir so'z)</h1>
</div>

 

Endi css ga o'tamiz. O'zimizning vaziyatimizdan kelib chiqqan holda bodyga uslublar beramiz. section klasli devni ham o'zimizga mos tarzda shakllantiramiz. Lekin shuni unutmangki, 3 ta blokni o'rab turuvchi section klasli blok position: relative; ni o'z ichiga olishi kerak. Chunki ichkaridagi 3 ta blok mana shu dev ota-ona elementi deb hisoblaydi va shu asnosida joylashadi.

phone ,tablet ,desctop klasli divlar uchun umumiy xossalarni beramiz. Avvalda ular ko'rinmay turishi uchun Y o'qi bo'yicha to'liq pastga tushishi - transform: translateY(100%);  xossasini beramiz. Paydo bo'lish ko'zga sezilarli bo'lishi uchun 1 s vaqt kiritamiz. (transition: 1s;).

Va yana o'sha :hover psevdoklasiga qaytamiz. Usiz nima ham qilamiz)))! sectionga :hover sevdoklasini biriktiramiz. Va kursor asosiy blok chegarasiga kirgan vaqtda phone ,tablet ,desctop klaslari quyidagi transformatsiyani bajaradi: transform: translateY(10px) rotateY(-15deg);, ya'ni yuqoriga chiqib bizga ko'rinish beradi.

 

CSS:

body {
  margin: 0;
  font-family: sans-serif;
}
.section {
  background-color: #f2395a;
  color: #fff;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  perspective: 1000px;
}
.heading {
  margin-left: 20%;
}

span {
  font-weight: bold;
  margin-top: 25px; 
  color: black;
}

.phone, 
.tablet,
.desctop {
  background-color: #fff;
  box-shadow: 13px 13px 32px 0 rgba(242, 57, 90, .3);
  position: absolute;
  transition: 1s;
  transform: translateY(100%);
}
.section:hover .phone,
.section:hover .tablet,
.section:hover .desctop {
  transform: translateY(10px) rotateY(-15deg);
}
.phone {
  width: 200px;
  height: 280px;
  left: 5%;
  bottom: 0;
  background: #fff url('/*Veb-sahifaning telefon ekraniga moslangan rasmi url-manzili*/') center no-repeat;
  z-index: 3;
  transition-delay: 0.2s;
}
.tablet {
  width: 360px;
  height: 380px;
  background: #fff url('/*Veb-sahifaning planshet ekraniga moslangan rasmi url-manzili*/');
  bottom: 0;
  left: 10%;
  z-index: 1;
  transition-delay: 0.4s;
}
.desctop {
  width: 680px;
  height: 480px;
  background: #fff url('/*Veb-sahifaning kompyuter ekraniga moslangan rasmi url-manzili*/');
  bottom: 0;
  left: 15%;
  transition-delay: 0.6s; 
}

 

Endi esa natijani ko'ramiz: 

Natija!
Natija!

 


Agar sizga maqolam foyda bergan bo'lsa, xursandman!

E'tiboringiz uchun rahmat!