Wenn ihr eurer Webseite einen leichten MacOS Stile geben möchtet, dann habe ich heute was für euch. Und zwar zeige ich euch wie ihr ein Box Element erstellen könnt, der aussieht wie direkt aus einem Mac.

Relativ einfach aber noch eine coole Sache für alle Mac-Fans da draussen.

Video

HTML

<div class="container">
    <div class="card">
        <div class="kopf">
            <div class="kreis">
                <span class="box rot"></span>
            </div>
            <div class="kreis">
                <span class="box gelb"></span>
            </div>
            <div class="kreis">
                <span class="box gruen"></span>
            </div>
        </div>
        <div class="inhalt">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aut, expedita reprehenderit corrupti rerum dignissimos numquam autem nobis maxime aspernatur ullam.
        </div>
    </div>
 </div>

CSS

.card {
    width: 190px;
    height: 254px;
    margin: 0 auto;
    background-color: black;
    border-radius: 8px;
    z-index: 1;

    box-shadow: 0 5px 15px black;
   }

.kopf {
    display: flex;
    align-items: center;
    padding: 9px;
}
.box{
    display: inline-block;
    align-items: center;
    width: 10px;
    height: 10px;
    padding: 1px;
    border-radius: 50%;
}

.rot {
    background-color: red;
}
.gelb {
    background-color: yellow;
}
.gruen {
    background-color: green;
}
.kreis {
    padding: 0 3px;
}

.inhalt {
    color:#fff;
    margin: 20px;
}