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

Ouvrir dans l'éditeur Publiez votre code

Recommandé

17 May 2024

Formulaire de connexion simple

27 May 2025

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

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

Recommandé

Formulaire de connexion simple

Un code par fragolahack

Générateur d'idées HTML

HTML

CSS

JS

Recommandé

Formulaire de connexion simple

Un code par fragolahack

Générateur d'idées HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS