Günther says: Eine CSS Übung

2020-07-02 - christian - css, html, javascript, projects

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

“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.


serverless.industries BG by Carl Lender (CC BY 2.0)
fa7dff93 2020-10-25 21:40