CSS Farbgestaltung in Flexbox

Diskutiere CSS Farbgestaltung in Flexbox im CSS Forum im Bereich Programmierung; Hallo, habe mich ein bisschen in CSS Flexbox reingewurstelt und bin nun bei folgendem Design: MyPhone Jetzt möchte ich das "MyPhone" in drei...
Neues Thema erstellen Antworten
  • CSS Farbgestaltung in Flexbox Beitrag #1
B
Blvcksquid
Member
Beiträge
17
Punkte Reaktionen
0
Hallo, habe mich ein bisschen in CSS Flexbox reingewurstelt und bin nun bei folgendem Design:
MyPhone

Jetzt möchte ich das "MyPhone" in drei Teilen einfärben: Der oberer und der untere Rand sollen das hier bekommen:
background: linear-gradient(70deg, black, white);
Zum Vergrößern anklicken....
Und der Bildschirm eben einen neutralen Hintergund.
Wie stelle ich das an ohne mein ganzes Layout über einen Haufen zu werfen?

Bin noch nicht so lang bei CSS dabei, mag sein dass das eine etwas naive Frage ist, aber ich bin hier um zu lernen.

LG Matthias
 
  • CSS Farbgestaltung in Flexbox Beitrag #2
basti1012
basti1012
Well-known member
Beiträge
242
Punkte Reaktionen
18
Eigentlich h brauch man die Farbe da nur zu reinkopieren.
In deinen Fall muss man aber noch h paar Kleinigkeiten ändern.
Dann kann man noch einige Elemente löschen, die brauch man nicht.
Meistens ist weniger mehr.
Je mehr Elemente man hat, um so mehr hat der Browser zu arbeiten. Auch das Googel Ranking kann darunter leiden.

Dann solltest du auch den Inline style löschen , du hast ja schon die CSS die du nutzt.
Wenn ich das alles beachte würde ich es so machen.
HTML: 
<html>
  <head>
    <style>
      @media only screen and (max-width: 2000px) {
  body {
    background: #58A7C6;
  }
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body {
    height: 100%;
    width: 100vw;
    display: flex;
    text-align: center;
    flex-direction: column;
    background: #58A7C6;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
}
#box{
  display:flex;
  overflow:hidden;
  flex-direction:column;
  width:260px;
  height:440px;
  border:2px solid black;
  border-radius:8%;
}
#navbar{
  padding:10px 0 10px 0;
}
a{
  text-decoration:none;
  color:lightgrey;
}
#welcome-section{
  margin-top:10px;
  font-size:35px;
  color:black;
}
h2{
  color:#0D387;
}
#pic{
  border-radius:50%;
  width:30%;
  margin:auto;
}
hr{
  color:#3f3f3f;
}
.line{
    display: flex;
    flex-direction: column;
    height: 120px;
    flex-wrap: nowrap;
    justify-content: space-around;
}
#top{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  line-height:0;
}
#myphone{
   display:flex;
   justify-content:center;
  margin-bottom:20px;
  font-family:Myriad;
  color:white;
  font-size: 16px;
  text-shadow: -1px 1px 0 #000,
                          1px 1px 0 #000,
                         1px -1px 0 #000,
                        -1px -1px 0 #000;
 
 
 
 
}

#bottom-text{
 color: #FDFAD5;
}

#home{
  border:0;
  cursor: pointer;
  width:50px;

}

#home-button{
  background: linear-gradient(70deg, black, white);
}
    </style>
</head>
<body>
<div id="box">
    <a id="navbar" href=#Link >MyPhone©</a>
    <hr>
    <h1 id="welcome-section">Willkommen!</h1>
   <img id="pic" src="https://i.ibb.co/Gx9YHM5/bild3.jpg" alt="Bild des Autors">
   <h2 id="project-title">Meine Projekte:</h2>
  <div class="line">
     <a href="https://www.schach.coach" target="_blank">Schach.Coach:<br> Dies war meine erste Website.</a>
     <a href="https://codepen.io/Blvcksquid/pen/GRybRxZ">Website mit Audio Player </a>
     <a href=https://www.freecodecamp.org/fccc002a8f6-bf02-4564-b77a-30d26c11b713 target="_blank">Mein FCC Profil<a>
  </div>
  <hr>
  <div id="home-button">
        <img id="home" src="https://i.ibb.co/D9cPQCb/iphone-4-home-button.png" alt="home-button"></div>
  </div>
</body>
</html>
Man könnte es sicherlich noch besser machen .
Dann könnte man noch die hr Elemente herauswerfen, dafür kann man auch border-top nutzen
 
  • CSS Farbgestaltung in Flexbox Beitrag #3
B
Blvcksquid
Member
Beiträge
17
Punkte Reaktionen
0
Danke für die Mühe! Sieht super aus :)
 
  • CSS Farbgestaltung in Flexbox Beitrag #5
basti1012
basti1012
Well-known member
Beiträge
242
Punkte Reaktionen
18
basti1012 schrieb:
Dann kann man noch einige Elemente löschen, die brauch man nicht.
Meistens ist weniger mehr.


Dann solltest du auch den Inline style löschen , du hast ja schon die CSS die du nutzt.
Zum Vergrößern anklicken....
Ganz am Anfang der CSS habe ich
*{
margin:0;
padding:0;
}
Geschrieben, das heißt, dass es für alle Elemente gilt.
Du brauchst das bei dem Elemente nicht mehr hinzuschreiben.

Dein Javascript ging auch nicht .
Auch da hast du wieder die Styles angaben im Element mit reingeschrieben.
Das brauch man nicht und macht man eigentlich auch nicht mehr.
Alles zusammen habe ich es jetzt so
HTML: 
<html>
  <head>
    <title>MyPhone</title>
    <style>
           @media only screen and (max-width: 2000px) {
  body {
    
  }
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body {
    height: 100%;
    width: 100vw;
    display: flex;
    text-align: center;
    flex-direction: column;
    background: #58A7C6;
    align-items: center;
}
#box{
  margin-top:20px;
  display:flex;
  overflow:hidden;
  flex-direction:column;
  width:240px;
  height:450px;
  border:6px solid black;
  border-radius:8%;
  background-image:url("https://bilderupload.org/image/b8af50776-132-1322441-succulent-pla.jpg");
}
#top{
  display:flex;
  padding:10px 0 5px 0;
  background: linear-gradient(70deg, black, white);
  text-shadow: -1px 1px 0 #000,
                          1px 1px 0 #000,
                         1px -1px 0 #000,
                        -1px -1px 0 #000;
  align-items:center;
}
#navbar {
    flex: 6;
    color: #79CDCD;
    display: flex;
    justify-content: center;
}
#camera{
   width:14px;
   margin-right:10px;
}
a{
   text-decoration:none;
   color:white;
   text-shadow: -1px 1px 0 #000,
                          1px 1px 0 #000,
                         1px -1px 0 #000,
                        -1px -1px 0 #000;
}
#welcome-section{
   margin-top:10px;
   font-size:35px;
   color:white;
   text-shadow: -1px 1px 0 #000,
                          1px 1px 0 #000,
                         1px -1px 0 #000,
                        -1px -1px 0 #000;
}
h2{
   color:white;
   text-shadow: -1px 1px 0 #000,
                          1px 1px 0 #000,
                         1px -1px 0 #000,
                        -1px -1px 0 #000;

}
#pic{
   border-radius:50%;
   width:30%;
   margin:auto;
}
hr{
   color:#3f3f3f;
}
.line{
    display: flex;
    flex-direction: column;
    height: 120px;
    flex-wrap: nowrap;
    justify-content: space-around;
}
#myphone{
   display:flex;
   justify-content:center;
   margin-bottom:20px;
   font-family:Myriad;
}
#bottom-text{
   color: #FDFAD5;
}
.hiddenButton{
   font-size:12px;
   color:white;
   text-shadow: -1px 1px 0 #000,
                          1px 1px 0 #000,
                         1px -1px 0 #000,
                        -1px -1px 0 #000;
   border:none;
   background:none;
   cursor:pointer;
}
#home{
   border:0;
   cursor: pointer;
   width:50px;
}
#home-button{
    background: linear-gradient(70deg, black, white);
}
iframe.box2 {
    height: 100%;
    width: 100%;
    border: 1px solid black;
}
    </style>
  </head>
<body>
 

 
 
<div id="box">
    <div id="top"><a id="navbar" href=#Link > MyPhone© </a><img id="camera" src="https://gallery.yopriceville.com/var/resizes/Free-Clipart-Pictures/Travel-and-Suitcases.PNG/Lens_Decorative_PNG_Transparent_Image.png?m=1522321507"></div>
    <hr>
    <h1 id="welcome-section">Willkommen!</h1>
   <img id="pic" src="https://i.ibb.co/Gx9YHM5/bild3.jpg" alt="Bild des Autors">
   <h2 id="project-title">Meine Projekte:</h2>
  <div class="line">
     <button class="hiddenButton" id="button">Schach.Coach:<br> Dies war meine erste Website.</button>
     <button class="hiddenButton">Website mit Audio Player </button>
     <button class="hiddenButton">Mein FCC Profil</button>
  </div>
  <hr>
  <div id="home-button">
        <img id="home" src="https://i.ibb.co/D9cPQCb/iphone-4-home-button.png" alt="home-button"></div></div>
  <script>
document.getElementById('button').addEventListener('click',function(){
   document.getElementById("box").innerHTML ='<iframe  class="box2" src="https://schach.coach" allowfullscreen></iframe>';
})
  </script>
</body>
</html>
 
  • CSS Farbgestaltung in Flexbox Beitrag #6
B
Blvcksquid
Member
Beiträge
17
Punkte Reaktionen
0
Danke! Hatte schon gerätselt warum das Script nicht funktioniert. Gibt es eine Möglichkeit nur den "Bildschirm" auf Button Klick zum iFrame zu machen?
Wenn ich die Bestandteile des Bildschirms in ein div Element packe, zerschiesst es mir das Layout.
 
Zuletzt bearbeitet:
  • CSS Farbgestaltung in Flexbox Beitrag #7
basti1012
basti1012
Well-known member
Beiträge
242
Punkte Reaktionen
18
Du meinst top und Home Button sollen stehen bleiben?
Erstmal muss dafür ein Element erstellt werden, das den Bereich in der Mitte darstellt.
Dann wieder etwas css, js ändern und fertig
Code: 
<html>
  <head>
    <title>MyPhone</title>
    <style>
           @media only screen and (max-width: 2000px) {
  body {
    
  }
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body {
    height: 100%;
    width: 100vw;
    display: flex;
    text-align: center;
    flex-direction: column;
    background: #58A7C6;
    align-items: center;
}
#box{
  margin-top:20px;
  display:flex;
  overflow:hidden;
  flex-direction:column;
  width:240px;
  height:450px;
  border:6px solid black;
  border-radius:8%;
  background-image:url("https://bilderupload.org/image/b8af50776-132-1322441-succulent-pla.jpg");
}
#top{
  display:flex;
  padding:10px 0 5px 0;
  background: linear-gradient(70deg, black, white);
  text-shadow: -1px 1px 0 #000,
                          1px 1px 0 #000,
                         1px -1px 0 #000,
                        -1px -1px 0 #000;
  align-items:center;
}
#navbar {
    flex: 6;
    color: #79CDCD;
    display: flex;
    justify-content: center;
}
#camera{
   width:14px;
   margin-right:10px;
}
a{
   text-decoration:none;
   color:white;
   text-shadow: -1px 1px 0 #000,
                          1px 1px 0 #000,
                         1px -1px 0 #000,
                        -1px -1px 0 #000;
}
#welcome-section{
   margin-top:10px;
   font-size:35px;
   color:white;
   text-shadow: -1px 1px 0 #000,
                          1px 1px 0 #000,
                         1px -1px 0 #000,
                        -1px -1px 0 #000;
}
h2{
   color:white;
   text-shadow: -1px 1px 0 #000,
                          1px 1px 0 #000,
                         1px -1px 0 #000,
                        -1px -1px 0 #000;

}
#pic{
   border-radius:50%;
   width:30%;
   margin:auto;
}
hr{
   color:#3f3f3f;
}
.line{
    display: flex;
    flex-direction: column;
    height: 120px;
    flex-wrap: nowrap;
    justify-content: space-around;
}
#myphone{
   display:flex;
   justify-content:center;
   margin-bottom:20px;
   font-family:Myriad;
}
#bottom-text{
   color: #FDFAD5;
}
.hiddenButton{
   font-size:12px;
   color:white;
   text-shadow: -1px 1px 0 #000,
                          1px 1px 0 #000,
                         1px -1px 0 #000,
                        -1px -1px 0 #000;
   border:none;
   background:none;
   cursor:pointer;
}
      #mitte{
        display:flex;
        flex-direction:column;
        height:100%;
      }
#home{
   border:0;
   cursor: pointer;
   width:50px;
}
#home-button{
    background: linear-gradient(70deg, black, white);
}
iframe.box2 {
    height: 100%;
    width: 100%;
    border: 1px solid black;
}
    </style>
  </head>
<body>
 

 
 
<div id="box">
    <div id="top"><a id="navbar" href=#Link > MyPhone© </a><img id="camera" src="https://gallery.yopriceville.com/var/resizes/Free-Clipart-Pictures/Travel-and-Suitcases.PNG/Lens_Decorative_PNG_Transparent_Image.png?m=1522321507"></div>
  <div id="mitte">
    <hr>
    <h1 id="welcome-section">Willkommen!</h1>
   <img id="pic" src="https://i.ibb.co/Gx9YHM5/bild3.jpg" alt="Bild des Autors">
   <h2 id="project-title">Meine Projekte:</h2>
  <div class="line">
     <button class="hiddenButton" id="button">Schach.Coach:<br> Dies war meine erste Website.</button>
     <button class="hiddenButton">Website mit Audio Player </button>
     <button class="hiddenButton">Mein FCC Profil</button>
  </div>
  </div>
  <hr>
  <div id="home-button">
        <img id="home" src="https://i.ibb.co/D9cPQCb/iphone-4-home-button.png" alt="home-button"></div></div>
  <script>
document.getElementById('button').addEventListener('click',function(){
   document.getElementById("mitte").innerHTML ='<iframe  class="box2" src="https://schach.coach" allowfullscreen></iframe>';
})
  </script>
</body>
</html>
 
  • CSS Farbgestaltung in Flexbox Beitrag #8
B
Blvcksquid
Member
Beiträge
17
Punkte Reaktionen
0
Nice :) Habe jetzt auch dem Home-Button ein Java-Script hinzugefügt, um nach "Seitenaufruf" wieder zurück zum Startbilschirm zu kommen.
Allerdings kann ich das Ganze nur einmal ausführen, gäbe es einen Trick, das unendlich oft ausführbar zu machen?
Denke es liegt daran, das der neue Startbilschirm kein eigenes Javascript ausführt?
 
  • CSS Farbgestaltung in Flexbox Beitrag #9
basti1012
basti1012
Well-known member
Beiträge
242
Punkte Reaktionen
18
Blvcksquid schrieb:
Habe jetzt auch dem Home-Button ein Java-Script hinzugefügt, um nach "Seitenaufruf" wieder zurück zum Startbilschirm zu kommen.
Allerdings kann ich das Ganze nur einmal ausführen, gäbe es einen Trick, das unendlich oft ausführbar zu machen?
Zum Vergrößern anklicken....
Was meinst du mit neuem Startbildschirm?
Wenn du dir meinen Code anschaust, siehst du, dass der iFrame in das Element #mitte geladen wird, und alles vernichtet, was da vorher drinnen war. Um das wieder herzustellen, musst du alles das, was vernichtet wurde wieder reinschreiben.
Besser wäre, die Elemente sichtbar und unsichtbar zu machen.
So ungefähr
Link zur Lösung
 
Zuletzt bearbeitet:
  • CSS Farbgestaltung in Flexbox Beitrag #10
B
Blvcksquid
Member
Beiträge
17
Punkte Reaktionen
0
Mit dem neuen Startbildschirm meine ich den Inhalt nach dem ersten Klicken auf den Home-Button.
Hatte das auch so probiert, den ganzen Inhalt ins JS zu packen.
Deine Lösung ist auf jeden Fall eleganter. Danke :)
 
Thema:

CSS Farbgestaltung in Flexbox

Oben Unten