Çözüldü CSS arka plan bulanıklaştırma

cinar112 · 6 Eylül 2022

Kodları bir yerden kopyaladım bunun arka planını bulanıklaştırabilir miyim?

Kxaan · 6 Eylül 2022

cinar112 dedi:
Html'e onunla ilgili kod yazmadım.

Kodları denedim ama ekranda herhangi bir şey çıkmıyor anlamadım tam olarak ne yapmak istiyorsunuz? HTML'de onunla ilgili bir kod yazmadığınızdan emin misiniz? Kendim div oluşturup denedim yine olmadı.

Edit: Tamamdır hallettim. Aşağıdaki dalgayı blurlayacağız değil mi?

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
  </head>
  <body>
    <h1>HELLO</h1>
    <div class="blur">
      <div class="wave"></div>
      <div class="wave"></div>
      <div class="wave"></div>
    </div>
  </body>
</html>

CSS:

@keyframes gradient {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}
.wave {
  background: rgb(255 255 255 / 25%);
  border-radius: 1000% 1000% 0 0;
  position: fixed;
  width: 100%;
  height: 12em;
  animation: wave 10s -3s linear infinite;
  transform: translate3d(0, 0, 0);
  opacity: 0.8;
  bottom: 0;
  left: 0;
  z-index: -1;
}

.blur {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 200%;
  filter: blur(2px);
}

.wave:nth-of-type(2) {
  bottom: -1.25em;
  animation: wave 18s linear reverse infinite;
  opacity: 0.8;
}
.wave:nth-of-type(3) {
  bottom: -2.5em;
  animation: wave 20s -1s reverse infinite;
  opacity: 0.9;
}
@keyframes wave {
  2% {
    transform: translateX(1);
  }
  25% {
    transform: translateX(-25%);
  }
  50% {
    transform: translateX(-50%);
  }
  75% {
    transform: translateX(-25%);
  }
  100% {
    transform: translateX(1);
  }
}

blur(2px) yazan yere istediğiniz değeri verebilirsiniz.

Kxaan · 6 Eylül 2022

CSS:

backdrop-filter: blur(5px);

Detaylı anlatım:

How to make a background blur in CSS with one line of code

Background blurs are cool. This is an undisputed fact. Here’s one line of code that can make them a reality in CSS.

blog.prototypr.io

cinar112 · 6 Eylül 2022

Kxaan dedi:
CSS:

backdrop-filter: blur(5px);

Neresine yazacağım tam olarak ?

Kxaan · 6 Eylül 2022

cinar112 dedi:
Neresine yazacağım tam olarak ?

Attığı linki inceleyin. Yapamazsanız ekranın şuanki halini ve nereyi bulanıklaştırmak istediğinizide yollayarak yazın. Yardımcı olmaya çalışırım.

cinar112 · 6 Eylül 2022

Baktım pek anlamadım. Kodları kendiniz deneyin anlarsınız ne demek istediğimi.

@keyframes gradient {
0% {
background-position: 0% 0%;
}
50% {
background-position: 100% 100%;
}
100% {
background-position: 0% 0%;
}
}
.wave {
background: rgb(255 255 255 / 25%);
border-radius: 1000% 1000% 0 0;
position: fixed;
width: 200%;
height: 12em;
animation: wave 10s -3s linear infinite;
transform: translate3d(0, 0, 0);
opacity: 0.8;
bottom: 0;
left: 0;
z-index: -1;
}
.wave:nth-of-type(2) {
bottom: -1.25em;
animation: wave 18s linear reverse infinite;
opacity: 0.8;
}
.wave:nth-of-type(3) {
bottom: -2.5em;
animation: wave 20s -1s reverse infinite;
opacity: 0.9;
}
@keyframes wave {
2% {
transform: translateX(1);
}
25% {
transform: translateX(-25%);
}
50% {
transform: translateX(-50%);
}
75% {
transform: translateX(-25%);
}
100% {
transform: translateX(1);
}
}

Kxaan · 6 Eylül 2022

cinar112 dedi:
Baktım pek anlamadım. Kodları kendiniz deneyin anlarsınız ne demek istediğimi.

@keyframes gradient {
0% {
background-position: 0% 0%;
}
50% {
background-position: 100% 100%;
}
100% {
background-position: 0% 0%;
}
}
.wave {
background: rgb(255 255 255 / 25%);
border-radius: 1000% 1000% 0 0;
position: fixed;
width: 200%;
height: 12em;
animation: wave 10s -3s linear infinite;
transform: translate3d(0, 0, 0);
opacity: 0.8;
bottom: 0;
left: 0;
z-index: -1;
}
.wave:nth-of-type(2) {
bottom: -1.25em;
animation: wave 18s linear reverse infinite;
opacity: 0.8;
}
.wave:nth-of-type(3) {
bottom: -2.5em;
animation: wave 20s -1s reverse infinite;
opacity: 0.9;
}
@keyframes wave {
2% {
transform: translateX(1);
}
25% {
transform: translateX(-25%);
}
50% {
transform: translateX(-50%);
}
75% {
transform: translateX(-25%);
}
100% {
transform: translateX(1);
}
}

HTML'i de atabilir misiniz?

cinar112 · 6 Eylül 2022

Kxaan dedi:
HTML'i de atabilir misiniz?

Html'e onunla ilgili kod yazmadım.

Kxaan · 6 Eylül 2022

cinar112 dedi:
Html'e onunla ilgili kod yazmadım.

Kodları denedim ama ekranda herhangi bir şey çıkmıyor anlamadım tam olarak ne yapmak istiyorsunuz? HTML'de onunla ilgili bir kod yazmadığınızdan emin misiniz? Kendim div oluşturup denedim yine olmadı.

Edit: Tamamdır hallettim. Aşağıdaki dalgayı blurlayacağız değil mi?

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
  </head>
  <body>
    <h1>HELLO</h1>
    <div class="blur">
      <div class="wave"></div>
      <div class="wave"></div>
      <div class="wave"></div>
    </div>
  </body>
</html>

CSS:

@keyframes gradient {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}
.wave {
  background: rgb(255 255 255 / 25%);
  border-radius: 1000% 1000% 0 0;
  position: fixed;
  width: 100%;
  height: 12em;
  animation: wave 10s -3s linear infinite;
  transform: translate3d(0, 0, 0);
  opacity: 0.8;
  bottom: 0;
  left: 0;
  z-index: -1;
}

.blur {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 200%;
  filter: blur(2px);
}

.wave:nth-of-type(2) {
  bottom: -1.25em;
  animation: wave 18s linear reverse infinite;
  opacity: 0.8;
}
.wave:nth-of-type(3) {
  bottom: -2.5em;
  animation: wave 20s -1s reverse infinite;
  opacity: 0.9;
}
@keyframes wave {
  2% {
    transform: translateX(1);
  }
  25% {
    transform: translateX(-25%);
  }
  50% {
    transform: translateX(-50%);
  }
  75% {
    transform: translateX(-25%);
  }
  100% {
    transform: translateX(1);
  }
}

blur(2px) yazan yere istediğiniz değeri verebilirsiniz.

cinar112 · 6 Eylül 2022

Kxaan dedi:

Kodları denedim ama ekranda herhangi bir şey çıkmıyor anlamadım tam olarak ne yapmak istiyorsunuz? HTML'de onunla ilgili bir kod yazmadığınızdan emin misiniz? Kendim div oluşturup denedim yine olmadı.

Edit: Tamamdır hallettim. Aşağıdaki dalgayı blurlayacağız değil mi?

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
  </head>
  <body>
    <h1>HELLO</h1>
    <div class="blur">
      <div class="wave"></div>
      <div class="wave"></div>
      <div class="wave"></div>
    </div>
  </body>
</html>

CSS:

@keyframes gradient {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}
.wave {
  background: rgb(255 255 255 / 25%);
  border-radius: 1000% 1000% 0 0;
  position: fixed;
  width: 100%;
  height: 12em;
  animation: wave 10s -3s linear infinite;
  transform: translate3d(0, 0, 0);
  opacity: 0.8;
  bottom: 0;
  left: 0;
  z-index: -1;
}

.blur {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 200%;
  filter: blur(2px);
}

.wave:nth-of-type(2) {
  bottom: -1.25em;
  animation: wave 18s linear reverse infinite;
  opacity: 0.8;
}
.wave:nth-of-type(3) {
  bottom: -2.5em;
  animation: wave 20s -1s reverse infinite;
  opacity: 0.9;
}
@keyframes wave {
  2% {
    transform: translateX(1);
  }
  25% {
    transform: translateX(-25%);
  }
  50% {
    transform: translateX(-50%);
  }
  75% {
    transform: translateX(-25%);
  }
  100% {
    transform: translateX(1);
  }
}

blur(2px) yazan yere istediğiniz değeri verebilirsiniz.

Oldu hocam sağ olun.

Çözüldü CSS arka plan bulanıklaştırma

Ayrıntılı düzenleme

cinar112

Hectopat

Kxaan

Kxaan

Kilopat

How to make a background blur in CSS with one line of code

cinar112

Hectopat

Kxaan

Kilopat

cinar112

Hectopat

Kxaan

Kilopat

cinar112

Hectopat

Kxaan

Kilopat

cinar112

Hectopat

Benzer konular