0
Kayıt Ol

Kodda ne hatası var?

7

●

218

  • 27-10-2023, 14:55:05
    #1
    soylenmezsmt
    soylenmezsmt
    Merhabalar,

    Style css olan kodda problem var,çalışmıyor.

    Koda bakabilirsiniz. https://codepen.io/zitrusfrisch/pen/DbwjOR buradan da bakabilirsiniz.

    body {
  font: 400 1em/1.5 "Neuton";
  background: #090d00;
  color: rgba(255, 255, 255, 0.25);
  text-align: center;
  margin: 0;
}

p {
  text-transform: uppercase;
  letter-spacing: 0.5em;
  display: inline-block;
  border: 4px double rgba(255, 255, 255, 0.25);
  border-width: 4px 0;
  padding: 1.5em 0em;
  position: absolute;
  top: 18%;
  left: 50%;
  width: 40em;
  margin: 0 0 0 -20em;

  span {
    font: 700 4em/1 "Oswald", sans-serif;
    letter-spacing: 0;
    padding: 0.25em 0 0.325em;
    display: block;
    margin: 0 auto;
    text-shadow: 0 0 80px rgba(255, 255, 255, 0.5);

    /* Clip Background Image */

    background: url([url]https://i.ibb.co/RDTnNrT/animated-text-fill.png[/url]) repeat-y;
    -webkit-background-clip: text;
    background-clip: text;

    /* Animate Background Image */

    -webkit-text-fill-color: transparent;
    -webkit-animation: aitf 80s linear infinite;

    /* Activate hardware acceleration for smoother animations */

    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
  }
}

/* Animate Background Image */

@-webkit-keyframes aitf {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
  • 27-10-2023, 14:57:51
    #2
    ysnozverdesign
    ysnozverdesign
    Doğruysa böyle diyor arkadaş
  • 27-10-2023, 14:57:58
    #3
    Nahara
    Nahara
    Kodunuzda belirgin bir hata görünmüyor gibi görünüyor, ancak bazı dikkat edilmesi gereken noktalar vardır. Kodunuz CSS kullanılarak tasarım yapıyor gibi görünüyor. CSS, HTML belgenizle birlikte kullanıldığında bu kod çalışacaktır. Ancak bazı önemli noktalar şunlar olmalıdır:
    1. @-webkit-keyframes ile tanımlanan animasyon doğru çalışacaktır, ancak modern tarayıcılar için -webkit- öneki gereksizdir. Bu nedenle aşağıdaki gibi standart bir @keyframes kullanmanız daha iyi olacaktır:
    @keyframes aitf {
    0% {
    background-position: 0% 50%;
    }
    100% {
    background-position: 100% 50%;
    }
    }

    background özelliğindeki URL bağlantısı, çift tırnak içinde doğru bir URL ile değiştirilmelidir. Örnek:
    background: url('https://i.ibb.co/RDTnNrT/animated-text-fill.png') repeat-y;
    1. Tarayıcı uyumluluğu için ek önekler eklemek isteyebilirsiniz. Örneğin, -webkit-text-fill-color özelliğini kullanırken, diğer tarayıcılar için -moz-text-fill-color ve text-fill-color gibi ek önekler ekleyebilirsiniz.
    Kodunuz CSS dosyası içinde kullanılıyorsa ve HTML dosyanıza başvuruyorsa, doğru bağlantıları ve sıralamayı sağladığınızdan emin olmalısınız. Ayrıca, animasyonun görünmesi için HTML belgenizde bir öğe olması gerekir.
    Kodunuzun işleyip işlemediğini ve görüntünün tarayıcınızda doğru çalışıp çalışmadığını doğrulamak için HTML dosyanızı ve bu CSS kodunu birlikte kullanarak bir tarayıcıda test edin.


    Chatgpt böyle dedi
  • 27-10-2023, 15:01:40
    #4
    webdanismani
    webdanismani
    soylenmezsmt adlı üyeden alıntı: mesajı görüntüle
    Merhabalar,

    Style css olan kodda problem var,çalışmıyor.

    Koda bakabilirsiniz. https://codepen.io/zitrusfrisch/pen/DbwjOR buradan da bakabilirsiniz.

    body {
  font: 400 1em/1.5 "Neuton";
  background: #090d00;
  color: rgba(255, 255, 255, 0.25);
  text-align: center;
  margin: 0;
}

p {
  text-transform: uppercase;
  letter-spacing: 0.5em;
  display: inline-block;
  border: 4px double rgba(255, 255, 255, 0.25);
  border-width: 4px 0;
  padding: 1.5em 0em;
  position: absolute;
  top: 18%;
  left: 50%;
  width: 40em;
  margin: 0 0 0 -20em;

  span {
    font: 700 4em/1 "Oswald", sans-serif;
    letter-spacing: 0;
    padding: 0.25em 0 0.325em;
    display: block;
    margin: 0 auto;
    text-shadow: 0 0 80px rgba(255, 255, 255, 0.5);

    /* Clip Background Image */

    background: url([url]https://i.ibb.co/RDTnNrT/animated-text-fill.png[/url]) repeat-y;
    -webkit-background-clip: text;
    background-clip: text;

    /* Animate Background Image */

    -webkit-text-fill-color: transparent;
    -webkit-animation: aitf 80s linear infinite;

    /* Activate hardware acceleration for smoother animations */

    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
  }
}

/* Animate Background Image */

@-webkit-keyframes aitf {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
    Dostum selamlar aşağıda ki şekilde kullanmayı dener misin? 

    body {
  font: 400 1em/1.5 "Neuton";
  background: #090d00;
  color: rgba(255, 255, 255, 0.25);
  text-align: center;
  margin: 0;
}

p {
  text-transform: uppercase;
  letter-spacing: 0.5em;
  display: inline-block;
  border: 4px double rgba(255, 255, 255, 0.25);
  border-width: 4px 0;
  padding: 1.5em 0em;
  position: absolute;
  top: 18%;
  left: 50%;
  width: 40em;
  margin: 0 0 0 -20em;
  animation: aitf 80s linear infinite;

  span {
    font: 700 4em/1 "Oswald", sans-serif;
    letter-spacing: 0;
    padding: 0.25em 0 0.325em;
    display: block;
    margin: 0 auto;
    text-shadow: 0 0 80px rgba(255, 255, 255, 0.5);

    /* Clip Background Image */

    background: url('https://i.ibb.co/RDTnNrT/animated-text-fill.png') repeat-y;
    -webkit-background-clip: text;
    background-clip: text;

    /* Animate Background Image */

    -webkit-text-fill-color: transparent;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
  }
}

/* Animate Background Image */

@keyframes aitf {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
  • 27-10-2023, 15:01:56
    #5
    ApYazilim
    ApYazilim 
    body {
  font: 400 1em/1.5 "Neuton";
  background: #090d00;
  color: rgba(255, 255, 255, 0.25);
  text-align: center;
  margin: 0;
}
 
p {
  text-transform: uppercase;
  letter-spacing: 0.5em;
  display: inline-block;
  border: 4px double rgba(255, 255, 255, 0.25);
  border-width: 4px 0;
  padding: 1.5em 0em;
  position: absolute;
  top: 18%;
  left: 50%;
  width: 40em;
  margin: 0 0 0 -20em;
 
  span {
  /* Clip Background Image */
 
    background: url([url]https://i.ibb.co/RDTnNrT/animated-text-fill.png[/url]) repeat-y;
    -webkit-background-clip: text;
    background-clip: text;


    font: 700 4em/1 "Oswald", sans-serif;
    letter-spacing: 0;
    padding: 0.25em 0 0.325em;
    display: block;
    margin: 0 auto;
    text-shadow: 0 0 80px rgba(255, 255, 255, 0.5);
 
  
 
    /* Animate Background Image */
 
    -webkit-text-fill-color: transparent;
    -webkit-animation: aitf 80s linear infinite;
 
    /* Activate hardware acceleration for smoother animations */
 
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
  }
}
 
/* Animate Background Image */
 
@-webkit-keyframes aitf {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
    Bunu denermisin hocam
  • 27-10-2023, 15:05:06
    #6
    soylenmezsmt
    soylenmezsmt
    webdanismani adlı üyeden alıntı: mesajı görüntüle
    Dostum selamlar aşağıda ki şekilde kullanmayı dener misin?

    body {
  font: 400 1em/1.5 "Neuton";
  background: #090d00;
  color: rgba(255, 255, 255, 0.25);
  text-align: center;
  margin: 0;
}

p {
  text-transform: uppercase;
  letter-spacing: 0.5em;
  display: inline-block;
  border: 4px double rgba(255, 255, 255, 0.25);
  border-width: 4px 0;
  padding: 1.5em 0em;
  position: absolute;
  top: 18%;
  left: 50%;
  width: 40em;
  margin: 0 0 0 -20em;
  animation: aitf 80s linear infinite;

  span {
    font: 700 4em/1 "Oswald", sans-serif;
    letter-spacing: 0;
    padding: 0.25em 0 0.325em;
    display: block;
    margin: 0 auto;
    text-shadow: 0 0 80px rgba(255, 255, 255, 0.5);

    /* Clip Background Image */

    background: url('https://i.ibb.co/RDTnNrT/animated-text-fill.png') repeat-y;
    -webkit-background-clip: text;
    background-clip: text;

    /* Animate Background Image */

    -webkit-text-fill-color: transparent;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
  }
}

/* Animate Background Image */

@keyframes aitf {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
    ApYazilim adlı üyeden alıntı: mesajı görüntüle 
    body {
  font: 400 1em/1.5 "Neuton";
  background: #090d00;
  color: rgba(255, 255, 255, 0.25);
  text-align: center;
  margin: 0;
}
 
p {
  text-transform: uppercase;
  letter-spacing: 0.5em;
  display: inline-block;
  border: 4px double rgba(255, 255, 255, 0.25);
  border-width: 4px 0;
  padding: 1.5em 0em;
  position: absolute;
  top: 18%;
  left: 50%;
  width: 40em;
  margin: 0 0 0 -20em;
 
  span {
  /* Clip Background Image */
 
    background: url([url]https://i.ibb.co/RDTnNrT/animated-text-fill.png[/url]) repeat-y;
    -webkit-background-clip: text;
    background-clip: text;


    font: 700 4em/1 "Oswald", sans-serif;
    letter-spacing: 0;
    padding: 0.25em 0 0.325em;
    display: block;
    margin: 0 auto;
    text-shadow: 0 0 80px rgba(255, 255, 255, 0.5);
 
  
 
    /* Animate Background Image */
 
    -webkit-text-fill-color: transparent;
    -webkit-animation: aitf 80s linear infinite;
 
    /* Activate hardware acceleration for smoother animations */
 
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
  }
}
 
/* Animate Background Image */
 
@-webkit-keyframes aitf {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
    Bunu denermisin hocam
    Denedim hocam,gene aynı kod çalışmadı.
  • 27-10-2023, 15:06:20
    #7
    ApYazilim
    ApYazilim
    hocam özelden kodları iletirsen daha fazla yardımcı olmaya çalışırım
  • 27-10-2023, 15:09:52
    #8
    lancelot
    lancelot
    Merhaba, bu kod SCSS kodudur. Css çevirmeden .css uzantısıyla kullanamazsınız.
    Aşağıya converted halini yazıyorum. Linkten convert işlemlerini gerçekleştirebilirsiniz.
    body {
     font: 400 1em/1.5 "Neuton";
     background: #090d00;
     color: rgba(255, 255, 255, .25);
     text-align: center;
     margin: 0;
}
 p {
     text-transform: uppercase;
     letter-spacing: 0.5em;
     display: inline-block;
     border: 4px double rgba(255, 255, 255, .25);
     border-width: 4px 0;
     padding: 1.5em 0em;
     position: absolute;
     top: 18%;
     left: 50%;
     width: 40em;
     margin: 0 0 0 -20em;
}
 p span {
     font: 700 4em "Oswald", sans-serif;
     letter-spacing: 0;
     padding: 0.25em 0 0.325em;
     display: block;
     margin: 0 auto;
     text-shadow: 0 0 80px rgba(255, 255, 255, .5);
    /* Clip Background Image */
     background: url("https://i.ibb.co/RDTnNrT/animated-text-fill.png") repeat-y;
     -webkit-background-clip: text;
     background-clip: text;
    /* Animate Background Image */
     -webkit-text-fill-color: transparent;
     -webkit-animation: aitf 80s linear infinite;
    /* Activate hardware acceleration for smoother animations */
     -webkit-transform: translate3d(0, 0, 0);
     -webkit-backface-visibility: hidden;
}
/* Animate Background Image */
 @-webkit-keyframes aitf {
     0% {
         background-position: 0% 50%;
    }
     100% {
         background-position: 100% 50%;
    }
}