Background linear gradiant

ButterKnecht · 4. August 2021

Hi,

Ich mal wieder

Ich habe folgendes Problem.

Ich in meiner CSS folgenden Farbeverlauf eingestellt.

background: linear-gradient(180deg, rgba(42,34,34,1) 0%, rgba(65,7,91,1) 53%, rgba(120,06,99,47) 100%);

Das funktioniert ganz gut. Aber sobald ich den Browser kleiner mache und man anfangen muss zu scrollen, fängt der Farbverlauf wieder von vorne an, statt durchgängig zu bleiben.

basti1012 · 4. August 2021

Ich glaube du brauchst sowas

Code

background-repeat:no-repeat;

Falls nicht , bitte eine genauere Erklärung für mich .

ButterKnecht · 5. August 2021

Zitat von basti1012
Ich glaube du brauchst sowas
Code
background-repeat:no-repeat;
Falls nicht , bitte eine genauere Erklärung für mich .

Nein, das geht leider auch nicht. Dann fängt er nicht von vorne an, sondern es bleibt einfach weiß.

Sempervivum · 5. August 2021

Das war nicht anders zu erwarten. Am besten postest Du mal die URL deiner Seite oder, wenn das nicht möglich ist, das relevante HTML und CSS.

basti1012 · 5. August 2021

Zitat von ButterKnecht

Nein, das geht leider auch nicht. Dann fängt er nicht von vorne an, sondern es bleibt einfach weiß.

Ich hatte das wohl falsch verstanden.

Wie schon gesagt wurde, poste mal dein Code oder mach ein Beispiel bei codepen fertig, wo man das Problem erkennen kann.

Oder Link zur Seite, wenn du hast

ButterKnecht · 5. August 2021

Code: CSS

html {
  
 height: 100%;
    color: white;
     font-family: 'Quicksand';
    font-family: url("fonts/Quicksand.ttf");
    src: url("fonts/Quicksand.ttf");
    font-family: 'Quicksand', 
}

body {
    
    background: linear-gradient(180deg, rgba(42,34,34,1) 0%, rgba(65,7,91,1) 53%, rgba(120,06,99,47) 100%);
    font-family: 'Quicksand', sans-serif;
    letter-spacing: 0.2em;
  
}

    
    
.webgl-content {
   
    margin-top: 3%;
   
    
   
} 
nav {
    
    display: flex;
    
    
    
}




nav ul {
    
    display: flex;
    
   
    
}

nav ul slash {
   margin:18px; 
    color:#dd00e6;
    
} 


nav ul li a {
    height: 20px;
    width:150px;
    align-items: center;
    padding: 0.6rem;
    
    
    
 
    
    
    margin:7px;
    text-decoration: none;
    color: white;

}

  li {
            display: grid;
        }
  li .german,
        li .japanese {
            text-align: center;
            grid-area: 1 / 1;
            transition: opacity 1s;
        }

li .german {
    text-align: center;
            opacity: 1;
        }

 li .japanese {
     text-align: center;
            opacity: 0;
        }
  li:hover .german {
            opacity: 0;
      
        }
  li:hover .japanese {
            opacity: 1;
     
      color: #dd00e6;
      
        }




.sideTitle {
 
    float:right;
    writing-mode: vertical-lr;
    font-weight: 700;
  font-size: 120px;
  color: #f70cca;
  text-align: center;
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #dd00e6, 0 0 40px #dd00e6, 0 0 50px #dd00e6, 0 0 60px #dd00e6, 0 0 70px #dd00e6;
  
 
}
.Main{
   
    
    text-align: center;
    color:aliceblue;
    
    font-size: 25px;
    margin-top: 3%;
    display: flex;
    
    flex-direction: column;
    align-items: center;
    line-height:200%;
}
.Main h1{
   font-size: 30px;
    border: 4px solid #dd00e6;
    padding: 0.8rem;
    border-radius: 10px;
     box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #dd00e6, 0 0 20px #dd00e6, 0 0 25px #dd00e6, 0 0 30px #dd00e6, 0 0 35px #dd00e6;
    clear: both;

    
}

.Highscore {
   
    
    text-align: center;
     color: #fff;
    
    font-size: 70px;
    margin-top: 3%;
    display: flex;
    
    flex-direction: column;
    align-items: center;
    line-height:200%;
}

.Game{
   
    
    text-align: center;
    color:aliceblue;
    letter-spacing: 0.1em;
    font-size: 20px;
    margin-top: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    line-height:200%;
}
.impressum{
     margin-top: 4rem;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
}

.kontakt {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 4rem;
    
    background-position: center;
    
    
    
}

.kontakt h1{
  font-family: 'Quicksand';
    text-align: center;
     color: #02E1FF;
    letter-spacing: 0.2em;
    font-size: 70px;
    display: flex; 
    flex-direction: column;
    align-items: center;
    line-height:200%;
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #02E1FF, 0 0 40px #02E1FF, 0 0 50px #02E1FF, 0 0 60px #02E1FF, 0 0 70px #02E1FF;
    clear: both;
}
.kontakt form {
    display: flex;
    flex-direction: column;
    align-items: center;
}


.kontakt form tag {
    display: flex;
    flex-direction: column;
    padding: 10px;
}
.kontakt form input {
    width: 20rem;
    height: 3rem;
}
.kontakt form button {
    font-family: 'Quicksand', sans-serif;
width: 20rem;
    padding: 15px;
}


.kontakt h2 {
    
    font-size: 20px;
    margin-bottom: 0rem;
    
}

.kontakt p {
    font-size: 20px;
    margin: 5px 0;
    margin-bottom: 5rem;
}

.kontakt input {
    
    background: none;
    color: white;
    border: none;
    border: 3px solid rgba(255, 255, 255, 0);
    transition: 0.5s ease-in-out;
}

.kontakt input:hover {
    border: 3px  solid #ff00ee;
   
}

.arcadeMachine{
   position: relative;
    z-index: 1;
   height:628px;
  width:348px;
  background: url("images/I_Asteroids_1.png");
    background-size: contain;
}
.arcadeMachine1{
   z-index: 5;

}


.arcadeMachine img{
    position:absolute;
  left:0;
  -transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
.arcadeMachine:hover{
     
 /* filter: brightness(1.2) ;*/
    height:628px;
  width:348px;
  background-image: url("images/I_Asteroids_2.png");
    filter:contrast(120%);
}
table{
  width:100%;
  table-layout: fixed;
}
h2{
font-size: 30px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 300;
  text-align: center;
  margin-bottom: 15px;

}

#ani-wrap {
            display: flex;
            /* Breite auf die der Einzelbilder setzen: */
            width: 348px;
            overflow: hidden;
        }
        #ani-wrap img {
            /* Verhindern, dass Mausaktionen auch auf die Bilder wirken: */
            pointer-events: none;
        }

Alles anzeigen

HTML: HTML

<!doctype html>

<html> 

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="external.css"/>
     <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="bootstrap-5.0.2-dist/css/bootstrap.min.css"/>
    
    <title>
    Arcade
    </title>
    
</head>

    
<body>
    
   <nav>
        <ul>
            <li>
                <a  class="german" href="index.html">HOME</a>
                <a class="japanese" href="index.html">ホームホーム</a>
                
            </li>
            
            
            <li>
                <a class="german" href="ueber_uns.html">ÜBER UNS</a>
                <a class="japanese"href="ueber_uns.html">私について</a>
            </li>
            
            <li>
                <a class="german" href="kontakt.html">KONTAKT</a>
                <a class="japanese"href="kontakt.html">連絡先の詳細</a>
            </li>
            
             <li>
                 <a class="german" href="impressum.html">IMPRESSUM</a>
        <a class="japanese"href="impressum.html">インプリント</a>
    </li>
        </ul>
    </nav> 
   <div class="sideTitle">
       アーケード
       </div>
   
  
    <div class="Main">
        <div>Willkommen / <span style="  color: #f70cca;">こんにちは </span>  </div>
       <div>Wähle deinen Automaten und habe Spaß !!!   </div></div>
       <div class="container">
  <div class="row">
    
    <div class="col">
        <div id="ani-wrap">
        <a href="HighScoreSite.html" ><img width="348" height="628,5" src="images/I_Asteroids_3.png" alt="Game3"></a>
        <a href="HighScoreSite.html" ><img width="348" height="628,5" src="images/I_Asteroids_2.png" alt="Game3"></a>
        <a href="HighScoreSite.html" ><img width="348" height="628,5" src="images/I_Asteroids_1.png" alt="Game3"></a>
    </div>
        </div>


<div class="col">
         
          <a href="Build_2D_Racer/Index.html" >  <img width="348" height="628,5" src="images/Game1.png" alt="Game2"></a></div>

<div class="col">
          
             <a href="HighScoreSite.html" ><img width="348" height="628,5" src="images/Game1.png" alt="Game3"></a>
        
        </div>
        </div>
      
            </div>
       
<script>
        const fps = 3,
            aniWrapper = document.getElementById('ani-wrap');
        // Gibt an, ob die Animation läuft:
        let aniRunning = false;
        function animateIt() {
            if (aniRunning) {
                // Wir nehmen das letzte Bild und stellen es an den Anfang:
                aniWrapper.prepend(aniWrapper.lastElementChild);
            }
        }
        // Funktion zyklisch ausführen:
        setInterval(animateIt, 1000 / fps);
        // Animation starten und stoppen mit Eventhandler
        // fuer Mouseover und Mouseout:
        aniWrapper.addEventListener('mouseover', event => {
            aniRunning = true;
        });
        aniWrapper.addEventListener('mouseout', event => {
            aniRunning = false;
        });
        
         </script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </body>
    
    


</html>

Alles anzeigen

Ja ich weiß. Ist noch super Chaotisch. Bin noch viel am experimentieren.

Sempervivum · 5. August 2021

Wie ich sehe, verwendest Du da die Animation aus deinem anderen Thread.

Ich sehe es mir an ...

Sempervivum · 5. August 2021

Da musste ich Stackoverflow um Rat fragen und habe dort die Lösung gefunden: Man muss für html min-height auf 100% setzen statt height:

Code

html {
    /* height: 100%; */
    min-height: 100%;
    color: white;
    font-family: 'Quicksand';
    font-family: url("fonts/Quicksand.ttf");
    src: url("fonts/Quicksand.ttf");
    font-family: 'Quicksand',
}

https://stackoverflow.com/ques…retch-but-instead-repeats

(die Lösung von Ricardo Zea)

basti1012 · 5. August 2021

Möchtest du noch paar Hinweise zu dein HTML / CSS haben?

In der CSS steht das, überlege dir mal was daran falsch/ unnutz ist

CSS

nav ul slash {
   margin:18px; 
    color:#dd00e6;
}
------
.kontakt form tag {
    display: flex;
    flex-direction: column;
    padding: 10px;
}
------
.arcadeMachine img{
    position:absolute;
  left:0;
  -transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
------

Alles anzeigen

Im HTML

type="text/css" Kannst du löschen , ist veraltet

style=" color: #f70cca;" Auf Inline Styles sollte man verzichten, dafür gibt es die CSS

Mehr konnte ich jetzt nicht finden.

ButterKnecht · 5. August 2021

Zitat von Sempervivum
Da musste ich Stackoverflow um Rat fragen und habe dort die Lösung gefunden: Man muss für html min-height auf 100% setzen statt height:
Code
html {
    /* height: 100%; */
    min-height: 100%;
    color: white;
    font-family: 'Quicksand';
    font-family: url("fonts/Quicksand.ttf");
    src: url("fonts/Quicksand.ttf");
    font-family: 'Quicksand',
}
https://stackoverflow.com/ques…retch-but-instead-repeats
(die Lösung von Ricardo Zea)

Danke. Hat geklappt. Davon habe ich noch nie gehört.

ButterKnecht · 5. August 2021

Zitat von basti1012
Möchtest du noch paar Hinweise zu dein HTML / CSS haben?
In der CSS steht das, überlege dir mal was daran falsch/ unnutz ist
CSS
nav ul slash {
   margin:18px; 
    color:#dd00e6;
}
------
.kontakt form tag {
    display: flex;
    flex-direction: column;
    padding: 10px;
}
------
.arcadeMachine img{
    position:absolute;
  left:0;
  -transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
------
Alles anzeigen
Im HTML
type="text/css" Kannst du löschen , ist veraltet
style=" color: #f70cca;" Auf Inline Styles sollte man verzichten, dafür gibt es die CSS

Mehr konnte ich jetzt nicht finden.
Alles anzeigen

Klar immer gerne. Ja die Klassen von der CSS habe ich mal gebraucht und bin mir noch nicht ganz sicher ob das bleiben soll.

Wie gesagt ich experementiere noch viel.

Wo ich mir noch nicht ganz sicher bin ist Bootstrap. Das nutze ich erst seit ein paar tagen. Mir gefällt es zum Beispiel nicht das ich den unteren Teil noch über URL ziehe. Die kann man doch sicher auch herunterladen und lokal laden oder? Und wäre es auch nicht schicker alle meine Skripte in eine externe Datei zu packen?

Sempervivum · 5. August 2021

Ich bin ja kein Freund von Bootstrap, siehe hier:

https://webentwicklung.ulrichb…ud-i-learn-bootstrap.html

Sempervivum · 5. August 2021

Zitat

Davon habe ich noch nie gehört.

Ich auch nicht und zunächst war es auch nicht plausibel für mich: Wenn man den Farbverlauf auf body anwendet sollte man erwarten, dass die 100% sich auch auf body beziehen. Es ist jedoch so, dass sich eine Breiten- oder Höhenangabe fast immer auf das Elternelement bezieht und das ist in diesem Fall html. Und der Farbverlauf läuft ja auch unter background-image, wird also wie ein Bild behandelt. Damit ist es dann doch wieder plausibel.

ButterKnecht · 8. August 2021

Zitat von Sempervivum

Ich auch nicht und zunächst war es auch nicht plausibel für mich: Wenn man den Farbverlauf auf body anwendet sollte man erwarten, dass die 100% sich auch auf body beziehen. Es ist jedoch so, dass sich eine Breiten- oder Höhenangabe fast immer auf das Elternelement bezieht und das ist in diesem Fall html. Und der Farbverlauf läuft ja auch unter background-image, wird also wie ein Bild behandelt. Damit ist es dann doch wieder plausibel.

Da ihr gefragt ob ich noch hilfe brauche. Die brauche ich tatsächlich.

Am rechten Rand soll ja immer in japanischen Schriftzeichen vertikal Arcade angeheftet werden.

<div class="sideTitle">
アーケード
</div>

Da klappt bei mir auch ganz gut. Nur bei kleineren Monitoren kann es passieren das andere Elemente unter mein "sideTitle" rutschen. Ich hätte aber gerne das der immer rechts bleibt, komme was wolle. Das gleiche ist mit der oberen Nav Zeile.

Ich weiß das ich da mit Grids und Container arbeiten müsste. Aber ich kriege das mit dem side Title irgendwie nicht gebacken.

Sempervivum · 9. August 2021

Möchtest Du, dass "sideTitle" und die Navigation fixiert sind, d. h. dass sie beim vertikalen Scrollen immer sichtbar bleiben?

ButterKnecht · 9. August 2021

Zitat von Sempervivum

Möchtest Du, dass "sideTitle" und die Navigation fixiert sind, d. h. dass sie beim vertikalen Scrollen immer sichtbar bleiben?

Achso. Nein das nicht.

Sempervivum · 9. August 2021

Also das Layout kann ruhig fest sein, OK. Soll diese Seite denn überhaupt scrollbar sein? Im Moment ist ja nur wenig Content drin.

ButterKnecht · 9. August 2021

Zitat von Sempervivum

Also das Layout kann ruhig fest sein, OK. Soll diese Seite denn überhaupt scrollbar sein? Im Moment ist ja nur wenig Content drin.

Also mein Grundidee war schon das jede Seite so aufgeräumt ist, das man nicht scrollen muss. Weiß nur nicht ob das bei allen Monitoren möglich ist. Ich habe noch eine Seite mit Highscore die von den Spielen über einen mySQL Connector übertragen werden. Und da wird es eng. (Ist aber auf 10 Einträge beschränkt)

Sempervivum · 9. August 2021

Solange man sich auf Monitore beschränkt, ist das sicher machbar. Wenn man Handys einbezieht, wird es allerdings schwierig.

ButterKnecht · 9. August 2021

Zitat von Sempervivum

Solange man sich auf Monitore beschränkt, ist das sicher machbar. Wenn man Handys einbezieht, wird es allerdings schwierig.

Ne. Für Smartphones muss es nicht sein. Da die Spiele auch schon nicht für Smartphones ausgelegt sind.

Background linear gradiant

Jetzt mitmachen!

Teilen