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

Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.
C

cinar112

Decapat
Katılım
20 Nisan 2021
Mesajlar
309
Çözümler
3
Daha fazla  
Cinsiyet
Erkek
Kodları bir yerden kopyaladım bunun arka planını bulanıklaştırabilir miyim?

1662482902747.png
 
Çözüm
Kxaan
cinar112 dedi:
Html'e onunla ilgili kod yazmadım.
Genişletmek için tıkla...
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.
Tarihe göre sırala Puana göre sırala
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);
}
}
 
Artı 0 Eksi
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);
}
}
Genişletmek için tıkla...
HTML'i de atabilir misiniz?
 
Artı 0 Eksi
cinar112 dedi:
Html'e onunla ilgili kod yazmadım.
Genişletmek için tıkla...
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.
 
Son düzenleyen: Moderatör:
Artı 0 Eksi
Çözüm
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.
Genişletmek için tıkla...
Oldu hocam sağ olun.
 
Artı 0 Eksi

Benzer konular

KaansiBlox
C#  Arka plan nasıl değiştirilir?
Mesaj
1
Görüntüleme
216
goodpat
goodpat
DonanımBilmez
CSS ile arka plan fotoğrafı göstermiyor
2
Mesaj
13
Görüntüleme
3B
Berkay Davas
Berkay Davas
E
Visual Studio Arka Plan Sorunu
Mesaj
5
Görüntüleme
2B
byanigli
byanigli
ErrorCorrection
  • Çözüldü
Çözüldü  CSS elementin Padding'i artınca arka plan kayıyor
2
Mesaj
14
Görüntüleme
640
ErrorCorrection
ErrorCorrection
5
Rehber  Visual Studio Code arka plan değiştirme
Mesaj
3
Görüntüleme
162
kaankesen
kaankesen

Yeni konular

Yeni mesajlar

Geri
Yukarı