Assalomu alaykum aziz OMUC jamoasi, do'stlarim! Ushbu maqolda biz siz bilan veb-sahifada shaffof-blur effektiga ega bo'lgan, sahifa bo'ylab ko'chirsa bo'ladigan blok shakllantirib, kontentni yanada chiroyli qilamiz. Buning uchun biz CSSning ajoyib uslublaridan, JavaScript va  HTMLdan foydalanamiz.

 

Avvalo biz nima qilmoqchiligimizni, ya'ni maqsadni aniqlashtirib olaylik. Bizga blur effekiga ega blok kerak. Demak, bizga qulay bo'lishi uchun biz SVG texnologiyasidan foydalanamiz. Blokni sahifa bo'ylab ko'chirirsh mumkin bo'lishi kerak, demak, JavaScriptdan foydalanamiz:

Blur effektiga ega ko'chuvchi blok
Blur effektiga ega ko'chuvchi blok

 

Demak, ishga kirishamiz:

Avvalo, har doimgidek HTML faylni shakllantirb olamiz. So'ngra faylda biz xohlagan blokni div yordamida shakllantirib olamiz. Ishlashga oson bo'lishi uchun block deb klas beramiz. Uning ichida esa, masalan deylik, 2 ta obyekt shakllantiramiz ( bu aslida sizga bog'liq). Bular - sarlavha va ostgi matn.

Undan keyin esa biz SVG texnologiyasidan foydalanamiz. Yana ham to'g'rirog'i, SVG filteridan. Bu texnologiya bizga shaffof blur efffektini namoyon qilib beradi.Buning uchun <svg></svg> teglar hosil qilamiz va ularning ichida <filter> tegini yozamiz, eslash oson bo'lishi uchun blur id sini biriktiramiz. Keyin esa blur effekti uchun javob beradigan feGaussianBlur parametrini va 

stdDeviation="6" yordamida uning darajasini belgilab olamiz.  

HTML:

<div class="block">
  <h1>Sarlavha</h1>
  <span>Bu yerda biror matn yoziladi</span>
</div>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">;
  <filter id="blur">
    <feGaussianBlur stdDeviation="6"></feGaussianBlur>
  </filter>
</svg>

 

Endi navbat CSS ga!

Avvalo, html uchun umumiy uslublarni yozib olamiz, orqa fon tanlab, url-manzilini joylashtiramiz. Barchasi kutilgandek ishlashi uchun, htmldagi orqa fon rasmini background: inherit; yordamida body uchun meros qilamiz. 

Keyin blokni shakllantirshga o'tamiz. Blok o'lchovlarini kiritamiz. Blok ichidagi obyektlar qanday joylashishiga qarab o'ziga xos xossalar kiritiladi. box-shadow: 1px 1px 4px rgba(14, 14, 14, 0.3);  yordamida blok atrofida soya shaffoflikka ega bo'lgan soya hosil qilamiz. Blok ichidagi yozuvlarimiz yaxshi ko'rinishi uchun matnga oq rang va ozgina soya beramiz. Blokimiz chetiga shaffoflikka ega bo'lgan ramkani rgba(255, 255, 255, 0.15) rang qiymati orqali hosil qilamiz. Va ushbu block klasi uchun ham orqa fonni naslga qoluchi qilib qo'yamiz. 

Keyin esa blokimiz uchun bizga tanish bo'lgan :before psevdoelementini hosil qilamiz. Uning joylashuvining va pozitsiyalanishining qiymatlarini kiritamiz. Ushbu psevdoelement uchun ham background: inherit; yordamida orqa fonni avlodga o'tkazamiz. Bizning blok shaffof tusni olishi uchun filter: blur(10px); xossasini ishlatamiz. Ammo ushbu xossa eski brauzerlarda ishlamasligi mumkin. Shuning uchun html faylda #blur id sini bergan filtrimizni yordamga chaqiramiz: filter: url(#blur); .

CSS:

html {
  background: url('https://images.unsplash.com/photo-1568605117036-5fe5e7bab0b7?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80') no-repeat fixed center / cover;
  position: relative;
  overflow-y: scroll;
}
body {
  background: inherit;
  display: flex;
  min-height: 100vh;
}
.block * {
  position: relative;
}
.block {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: auto;
  width: 300px;
  height: 300px;
  box-shadow: 1px 1px 4px rgba(14, 14, 14, 0.3);
  border: 15px solid rgba(255, 255, 255, 0.15);
  border-radius: 15px;
  text-shadow: 0 1px 2px #000;
  color: #fff;
  background: inherit;
  cursor: move;
  font-family: Fira Sans;
}
h1 {
  margin-bottom: 5px;
}
.block:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: inherit;
  filter: blur(10px);
  filter: url(#blur);
}

 

Blokimiz tayyor bo'ldi. Endi uni ko'chuvchi qilish uchun JavaScriptdan foydalanamiz.

Buning uchun JQuery va JQuery UI kutubxonasidan foydalanamiz. 

Avvalo, anonim funksiya shakllantiramiz, uning ichida .draggable() ni bizning blokka biriktirish orqali uni ko'chuvchi qilamiz.

JavaScript:

$(function(){
  $('.block').draggable();
})

 

Endi esa natijani yana bir bor ko'ramiz:

Natija!
Natija!

Agar sizga maqolam foyda bergan bo'lsa, xursandman!

E'tiboringiz uchun rahmat!