CSS Glassmorphism Player & App Icons UI

934 codex

Im Editor öffnen Veröffentlichen Sie Ihren Code

Empfohlen

26 March 2025

Mehrstufiges Formular mit Fortschrittsbalken unter Verwendung von jQuery und CSS3

19 March 2025

Reine CSS3 Star Wars Lichtschwert-Kontrollkästchen

6 December 2024

Wetter-App

HTML

<div class="player">
        <div class="player__thumb">
          <img class="player__img" src='https://cdn-images.dzcdn.net/images/cover/cc4f9cb36261380fe2d011d85bd441ac/1900x1900-000000-80-0-0.jpg' alt='' style="width:50px;" >
          <div class="player__legend">
            <h3 class="player__legend__title">Fancy</h3>
            <span class="player__legend__sub-title">Drake</span>
          </div>
        </div>

</div>
    </div>
</div></div>

<svg style="display: none">
      <filter id="lg-dist" x="0%" y="0%" width="100%" height="100%">
        <feTurbulence type="fractalNoise" baseFrequency="0.008 0.008" numOctaves="2" seed="92" result="noise" />
        <feGaussianBlur in="noise" stdDeviation="2" result="blurred" />
        <feDisplacementMap in="SourceGraphic" in2="blurred" scale="70" xChannelSelector="R" yChannelSelector="G" />
      </filter>
    </svg>
  </div>
</div>

CSS

:root {
  --lg-bg-color: rgba(255, 255, 255, 0.25);
  --lg-highlight: rgba(255, 255, 255, 0.75);
  --lg-text: #ffffff;
  --lg-hover-glow: rgba(255, 255, 255, 0.4);
  --lg-red: #fb4268;
  --lg-grey: #5b5b5b;
}

/* ========== BASE LAYOUT ========== */
body {
  margin: 0;
  padding: 2rem 0;
  min-height: calc(100vh - 4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
  background: url("https://images.unsplash.com/photo-1551384963-cccb0b7ed94b?q=80&w=3247&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D")
    center/cover;
  animation: bg-move 5s ease-in-out infinite alternate;
}

@keyframes bg-move {
  from {
    background-position: center center;
  }
  to {
    background-position: center top;
  }
}

/* ========== CONTAINER ========== */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.container--inline {
  flex-direction: row;
}

/* ========== GLASS CONTAINER ========== */
.glass-container {
  position: relative;
  display: flex;
  font-weight: 600;
  color: var(--lg-text);
  cursor: pointer;
  background: transparent;
  border-radius: 2rem;
  overflow: hidden;
  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}

.glass-container--rounded {
  border-radius: 5rem;
  margin: 0.5rem;
  fill: var(--lg-grey);
}

.glass-container--small {
  margin: 5rem 0 1rem;
  border-radius: 5rem;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
}

.glass-container--large {
  min-width: 32rem;
}

.glass-container--medium {
  min-width: 25rem;
}

.glass-container svg {
  fill: white;
}

/* ========== GLASS ITEM ========== */
.glass-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border-radius: 1rem;
  color: white;
  transition: color 0.3s ease;
  text-align: center;
}

.glass-item svg {
  fill: white;
  height: 50px;
  margin-bottom: 0.25rem;
}

.glass-item--active {
  background: rgba(0, 0, 0, 0.25);
  color: black;
  margin: 0 -0.5rem;
  padding: 0.25rem 1.95rem;
  border-radius: 5rem;
}

.glass-item--active svg {
  fill: black;
}

.player {
  display: flex;
  align-items: center;
  width: 100%;
  flex: 1 1 auto;
  justify-content: space-between;
}

.player__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem;
}

.player__img {
  width: 5rem;
  height: auto;
  margin: 0.25rem 0;
  border-radius: 0.5rem;
}

.player__legend {
  display: flex;
  flex-direction: column;
  margin: 0 1rem;
  color: black;
}

.player__legend__title {
  font-size: 1rem;
  margin: 0;
}

.player__legend__sub-title {
  font-size: 1rem;
  margin: 0;
  opacity: 0.45;
}

.player__controls {
  margin-right: -1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.player__controls__play {
  margin-right: 1rem;
  display: flex;
}

.player__controls__ff {
  display: flex;
}

/* ========== GLASS LAYERS ========== */
.glass-filter {
  position: absolute;
  inset: 0;
  z-index: 0;
  backdrop-filter: blur(0px);
  filter: url(#lg-dist);
  isolation: isolate;
}

.glass-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--lg-bg-color);
}

.glass-specular {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  overflow: hidden;
  box-shadow: inset 1px 1px 0 var(--lg-highlight),
    inset 0 0 5px var(--lg-highlight);
}

.glass-content {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 1rem 1.5rem 0.9rem;
}

.glass-content--inline {
  padding: 0.25rem 2rem 0.25rem 0.75rem;
  flex: 1 1 auto;
  justify-content: space-between;
}

/* ========== ICONS AND IMAGES ========== */
.glass-content a {
  display: inline-block;
  position: relative;
  padding: 1px;
  border-radius: 1.2rem;
}

.glass-content a img {
  display: block;
  width: 75px;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}

.glass-content a img:hover {
  transform: scale(0.95);
}

Empfohlen

Mehrstufiges Formular mit Fortschrittsbalken unter Verwendung von jQuery und CSS3

Reine CSS3 Star Wars Lichtschwert-Kontrollkästchen

Wetter-App

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS