Div mit Glas-Effekt

<- Zurück

In diesem Artikel habe ich dir einen einfachen Div-Container mit Glas-Effekt zusammengestellt.
Hierbei handelt es sich um einen reinen HTML und CSS Container.

Das ist ein Div-Container mit Glas-Effekt. Zum Code gelangst du, indem du auf den Link unten drückst.

Zum Code

Div-1:

HTML:

<div class="div-1">
  <div class="div-1-card">
    <p>Das ist ein Div-Container mit <strong>Glas-Effekt</strong>. Zum Code gelangst du, indem du auf den Link unten drückst.</p>
    <p class="div-1-footer"><a href="#div-1">Zum Code</a></p>
  </div>
</div>

CSS:

.div-1 {
  display: grid;
  place-items: center;
  padding: 1.5em;
}


.div-1-card {
  max-width: 300px;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  display: inside-block !important;
  padding: 35px;

  background-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);

  backdrop-filter: blur(10px);
}

.div-1-footer {
  font-size: 0.65em;
  color: #446;
}

.div-1 {
  display: inline-block !important;
}

<- Zurück