Interface utilisateur des icônes de lecteur et d'application CSS Glassmorphism

2,201 codex

Ouvrir dans l'éditeur Publiez votre code

Interface utilisateur des icônes de lecteur et d'application CSS Glassmorphism

Recommandé

23 April 2026

Exemple de menu HTML avec logo (français)

15 May 2025

Un code par nasmacadic

29 January 2025

Un code par sheeshokaokayokay

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);
}