Assalomu alaykum aziz OMUC jamoasi, do'stlarim! Ushbu maqolda biz siz bilan veb-sahifadagi rasm hududiga kursor olib kirilganda chiroyli ramka va yozuv paydo bo'lishi effektini shakllantirib, kontentni yanada chiroyli qilamiz. Buning uchun biz CSSning ajoyib uslublaridan va  HTMLdan foydalanamiz.

Ushbu shakllantirmoqchi bo'lgan rasm hududiga kursor olib kirilganda, rasm ichki tarafida ramka va yozuv transformatsiya bilan paydo bo'ladi. Ushbu maqolada shunchaki rangli orqa fon misolida ko'ramiz:

Rasmdagi ramka yordamidagi effekt
Rasmdagi ramka yordamidagi effekt

Maqsad shuki, kursor hududga olib kirilganda yuqori, past, chap va o'ng taraf markazlaridan chiziq kengayib, burchaklarda tutashadi va ramkani hosil qiladi. Aynan shu vaqtning o'zida rasm markazida yozilgan so'z yuqoriga ko'tariladi va ostgi matn ko'rinadi.

Endi esa kodga o'tamiz:

Avvalo rasm joylashtirish uchun <figure> html-elementi va uning ichida matn yozish uchun <figcaption> html-elementini shakllantirib olamiz.  

 

HTML:

<div class="container">
  <figure>
    <figcaption>
      <h2>Sarlavha</h2>
      <p>Ostgi matn</p>
    </figcaption>
  </figure>
 </div>

 

Endi esa CSS shakllantirishga o'tamiz.

Men butun fayl uchun, :before va :after psevdoelementlari uchun box-sizing: border-box; qilib oldim, chunki standart ichki va tashqi chetlanishlar halal bermasligi uchun.

Keyin esa body uchun umumiy xossalar beriladi, bu albatta o'zingizga bog'liq. So'ngra figure elementining o'lchovlari kiritiladi. Agar siz rasm qo'ymoqchi bo'lsangiz, background-image: url("..."); yordamida rasm manzilini kiritasiz. Men namuna uchun shunchaki oddiy rangli fondan foydalanaman. Figure ichidagi elementlarni markazga tekislab olamiz. Figure ichidagi obyektlar aynan shu figure obyektiga nisbatan shakllanishi uchun position: relative; xossasini beramiz.

 

CSS:

*, *:before, *:after {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

figure {
  width: 300px;
  height: 300px;
  background-color: #F06292;
  color: #fff;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
}

 

Endi diqqatni figure ichidagi matnlarga qaratamiz. <h2> darajadagi sarlavhani o'z joyidan 20px pastga tushiramiz, <p> ni esa 20px yuqoriga ko'tarib qo'yamiz. Ular endi ustma-ust tushib qoldi. Bu holda ostgi matnni opacity: 0; va  visibility: hidden; xossalari yordamida berkitamiz. :hover psevdoklasi yordamida ularni transition: 0.2s; xossasi yordamida o'z o'rniga qaytarganimizda chiroyli effekt hosil bo'ladi.

 

figure h2 {
  transition: 0.2s;
  transform: translateY(20px);
}
figure p {
  transition: 0.2s;
  transform: translateY(-20px);
  opacity: 0;
  visibility: hidden;
}

 

Keyin esa ramka hosil qilishga o'tamiz. border-top: solid 2px; border-bottom: solid 2px; xossalari yordamida yuqori va pastki chiziqni, border-left: solid 2px; border-right: solid 2px; yordamida ikki yon taraf chiziqlarini shakllantiramiz. transform: scaleX(0); va transform: scaleY(0); xossalari yordamida chiziqlarni o'sib chiquvchi effektga ega qilamiz. Ko'zga ko'rinarli bo'lishi uchun transition: 0.2s; xossasidan foydalanamiz.

 

 

figure:before {
  content: '';
  position: absolute;
  top: 5%;
  right: 5%;
  bottom: 5%;
  left: 5%;
  border-top: solid 2px;
  border-bottom: solid 2px;
  transition: 0.2s;
  transform: scaleX(0);
}


figure:after {
  content: '';
  position: absolute;
  top: 5%;
  right: 5%;
  bottom: 5%;
  left: 5%;
  border-left: solid 2px;
  border-right: solid 2px;
  transition: 0.2s;
  transform: scaleY(0);
}

 

:hover psevdoklasi esa o'sha biz xohlagan effektni, kursor hududga kirganida, vujudga keltiradi:

figure:hover:before, 
figure:hover:after{
  transform: scale(1);
}

figure:hover h2, 
figure:hover p {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

Endi esa natijani koʻramiz:

Natija!
Natija!

 

Agar sizga maqolam foyda bergan bo'lsa, xursandman!

E'tiboringiz uchun rahmat!