Es fing mit einer kleinen CSS Übung an und ist dann ein bisschen eskaliert. “Günther says” ist ein “Simon says” Klon welcher komplett in JavaScript und HTML/CSS programmiert ist.
“Günther says” kann hier gespielt werden: https://guenther.serverless.industries/
Kreise
Kreise lassen sich ganz einfach aus einem <div> erzeugen:
.circle {
width: 100px;
height: 100px;
border: 4px solid black;
border-radius: 100%;
background-color: red;
}
<div class="circle"></div>
Invertierte Runde Kanten
Invertiert lassen sich runde Kanten nicht so einfach realisieren.
Hier müssten zwei <div> Container ineinander verschachtelt werden.
.circle {
width: 100px;
height: 100px;
overflow:hidden;
position: relative;
border-top-left-radius: 100%;
background-color: green;
}
.circle .edge {
width: 100px;
height: 100px;
position: absolute;
background-color: white;
border-radius: 100%;
bottom: -50%;
right: -50%;
}
<div class="circle">
<div class="edge"></div>
</div>
Quelle: https://stackoverflow.com/a/22422105
Skalieren mit dem Browser Fenster
Dank so wunderbarer Techniken wie Flexbox, Viewport Units
und box-sizing ist die einzige Herausforderung, dem
äußersten Container die korrekte width und height zuzuweisen.
Alle weiteren Elemente können anschließend Prozentwerte nutzen.
.square {
width: 20vh;
height: 20vh;
border: 4px solid black;
background-color: red;
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.window {
width: 60%;
height: 60%;
background-color: blue;
border-radius: 50% 50% 10% 10%;
}
<div class="square">
<div class="window"></div>
</div>
Die Größe dieses Beispiels sollte sich ändern, wenn das Browserfenster in der Höhe vergrößert oder verkleinert wird.
