Assalomu alaykum qadrli doʻstlar ushbu postimda men sizlarga akkardeonga oʻxshash rasm galleriyasi qanday yaratilishi haqida aytib bermoqchiman.

 

Hammamiz akkardeonni ko'rganmiz va u nima ekanligini bilamiz. Ushbu musiqa asbobi ikki qo'l orasida kengaytirib siqiladi va maxsus tugmachalar yordamida musiqa hosil qilinadi. Mana shu kengaytirib siqilish jarayonini biz "o'zimizga mos ko'rinish"ga keltirib olamiz, ya'ni veb-sahifamizni boyitib turgan galereyani yanada boyitish uchun ishlatamiz. Ushbu kodni yozganimizda veb-sahifamizda quyidagicha galereya hosil bo'ladi.

 

Akkordeonga o'xshash rasm galereyasi
Akkordeonga o'xshash rasm galereyasi

 

Demak sizni uzoq kuttirmay, maqolaning mag'ziga o'taman):

Ushbu ajoyib galereyani hosil qilish uchun bizga HTML va CSSda ish olib borish kerak bo'ladi.  

  • Birinchi o'rinda biz yaratmoqchi bo'lgan shunaqa galereyamizda nechada rasm bo'lishi kerakligini aniqlab olamiz va shunga mos tarzda< div> elementidan foydalanamiz. Mening holatimda ular 5 ta. Men 5 ta div elementini yaratdim, ularning har biriga 1 ta  faqat o'ziga xos klass va 1 ta umumiy klass berdim. Shu yaratgan elementlarimizni hammasini 1 ta div elementi ichiga olamiz, klass beramiz. Shu bilan biz HTML da kerak bo'ladigan ishni bajardik. 

 

HTML:

<div class="container">

  <div class="gallery-wrap">
    <div class="item item-1"></div>
    <div class="item item-2"></div>
    <div class="item item-3"></div>
    <div class="item item-4"></div>
    <div class="item item-5"></div>
  </div>

</div>

 

  • Keyingi ishimiz esa CSS da bo'ladi. Rasm uchun yaratilgan, har biri uchun o'ziga xos bo'lgan div elementi klasslarini yozamiz va background-image: url() orqali o'zimizga kerakli bo'lgan rasmlar yo'lini ko'rsatamiz. Barcha rasmlarni o'z ichida jamlagan .gallery-wrap div elementida displeyning flex, ya'ni egiluvchan, yig'iluvchan bo'lishi ,  yig'ilishning qay tarzda amalga oshirilishi, elementing balandligi va kengligi qiymatlari kiritilgan. Rasm uchun yaratilgan, hammasi uchun bir xil qilib berilgan div elementi klassini CSS faylga 2 marta yozamiz. 1-gal yozganimizda rasmlar uchun bir xil bo'lgan xossalar va ularning qiymatini kiritamiz, 2-galda esa :hover {} psevdoklasini kiritamiz. Bu psevdoklasning vazifasi shuki, sichqonchani shu psevdoklas kiritilgan obyekt ustudan olib o'tganda shu obyektning o'z holatini o'zgartirishini ta'minlab beradi. Lekin bizga aynan qanaqa o'zgarishi kerak? Biz uchun rasmning akkordeonga o'xshab yoyilishi kerak, demak biz bu yerda flex elementidan foydalanamiz.

 

CSS:

html,
body {
  width: 100%;
  height: 100%;
  background-color: #f2f8f8;
}
.container {
  padding: 100px 0;
  margin: 0 auto;
  width: 740px;
}
.gallery-wrap {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 50vh;
}
.item {
  flex: 1;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: none;
  transition: flex 0.8s ease;
}
.item:hover {
  flex: 7;
}
.item-1 {
  background-image: url("https://cdn.pixabay.com/photo/2020/07/15/11/22/raspberry-5407356_960_720.jpg");
}
.item-2 {
  background-image: url("https://cdn.pixabay.com/photo/2018/05/27/16/19/apricots-3433818_960_720.jpg");
}
.item-3 {
  background-image: url("https://cdn.pixabay.com/photo/2016/01/03/17/59/bananas-1119790_960_720.jpg");
}
.item-4 {
  background-image: url("https://cdn.pixabay.com/photo/2016/08/14/11/56/apple-1592588_960_720.jpg");
}
.item-5 {
  background-image: url("https://cdn.pixabay.com/photo/2017/08/25/11/10/plum-2679782_960_720.jpg");
}

 

Ushbu galereyada ishtirok etayotgan rasmlarni siz, bemalol, o'zingiz xohlaganingizga almashtirishingiz mumkin. Bunung uchun siz CSSdagi rasm url-manzillarini o'zgartirsangiz bas.

 

Har doimgidek, o'z bilganlarimni siz bilan ulashishga doimo tayyorman. Layk bilan qo'llab yuborishni unutmang, do'stlarim, sizlar uchun harakatdaman!