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.


More


serverless.industries BG by Carl Lender (CC BY 2.0)
Mastodon via chaos.social Mastodon via einbeck.social