Heute zeichnen wir mal wieder etwas in CSS – mit solchen Experimente kann man nämlich immer viel lernen. Es gibt Vollprofis da draussen die können ganze Bilder malen wie die Künstler aus alten Tagen. Sehr beeindruckend.

Heute zeiche ich mit euch ein Tropfen auf einer Oberfläche. Besonders spannend ist die Arbeit mit border-radius und box-shadow.

Video

HTML

<div class="container">
      <div class="tropfen"></div>
    </div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #e0e0e0;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.tropfen {
  position: absolute;
  height: 150px;
  width: 150px;
  /*border: 1px solid #fff;*/
  border-radius: 60% 40% 30% 65% / 52% 35% 50% 60%;
  box-shadow: inset 5px 30px 20px 0 #c9c9c9, inset 20px 80px 15px 0 #e0e0e0,
    10px 20px 20px 0px #c9c9c9;
}

.tropfen::before {
  content: "";
  position: absolute;
  border-radius: 35% 50% 45% 45%;
  background: #fff;
  width: 50px;
  height: 15px;
  top: 20px;
  left: 20px;
  transform: rotate(-30deg);
}
.tropfen::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #fff;
  width: 10px;
  height: 10px;
  top: 60px;
  left: 20px;
}