Guillaume Duverger - DĂ©veloppement & Graphisme - Blog

Vous ĂȘtes ici : Accueil > DĂ©monstrations > CSS > Autres

CSS card glassmorphism

NB : Meilleur rendu sur Chrome

Guillaume Duverger

DĂ©veloppeur / graphiste

En savoir plus

Code :

HTML


<div class=bg-demo>
<div class="cadre-demo">
<div class="devant">
<img src="image.jpg" alt>
<h3>Lorem ipsum dolor sit amet</h3>
<h4>Lorem ipsum dolor sit amet</h4>
<a class=bouton href="#">En savoir plus</a>
<div class=demo-social>
<a href="#"><svg height="0" width="0" viewBox="0 0 112 112" role="img" aria-hidden="true"><path d="M90.46 40.316c-2.403 1.066-4.99 1.787-7.7 2.11 2.768-1.66 4.893-4.285 5.896-7.418-2.59 1.537-5.462 2.652-8.515 3.253-2.445-2.604-5.93-4.232-9.79-4.232-7.403 0-13.408 6.005-13.408 13.41 0 1.05.12 2.073.35 3.055-11.145-.56-21.026-5.897-27.64-14.012-1.154 1.98-1.816 4.286-1.816 6.743 0 4.65 2.37 8.757 5.965 11.16-2.196-.068-4.265-.67-6.072-1.678v.17c0 6.497 4.623 11.916 10.756 13.147-1.124.308-2.31.47-3.532.47-.866 0-1.705-.082-2.523-.238 1.705 5.326 6.656 9.203 12.525 9.312-4.59 3.597-10.37 5.74-16.655 5.74-1.08 0-2.15-.063-3.197-.188 5.93 3.806 12.98 6.025 20.553 6.025 24.664 0 38.152-20.432 38.152-38.153 0-.58-.013-1.16-.04-1.734 2.623-1.89 4.896-4.25 6.693-6.94z"/></svg></a>
<a href="#"><svg height="0" width="0" viewBox="0 0 64 64" role="img" aria-hidden="true"><path d="M18.5 13.5v5.7h.5c14.8 0 26.8 12 26.8 26.8v.5h5.7V46c0-17.9-14.6-32.5-32.5-32.5h-.5zm0 12v5.7h.5c8.2 0 14.8 6.6 14.8 14.8v.5h5.7V46c0-11.3-9.2-20.5-20.5-20.5h-.5zm4.5 12c-2.5 0-4.5 2-4.5 4.5s2 4.5 4.5 4.5 4.5-2 4.5-4.5-2-4.5-4.5-4.5z"/></svg></a>
<a href="#"><svg height="0" width="0" viewBox="0 0 24 24"><path d="M23.469 5.929l.03.196a3.043 3.043 0 00-2.068-2.112l-.021-.005c-1.871-.508-9.4-.508-9.4-.508s-7.51-.01-9.4.508A3.044 3.044 0 00.527 6.104l-.005.021c-.699 3.651-.704 8.038.031 11.947l-.031-.198a3.043 3.043 0 002.068 2.112l.021.005c1.869.509 9.4.509 9.4.509s7.509 0 9.4-.509a3.043 3.043 0 002.084-2.096l.005-.021c.318-1.698.5-3.652.5-5.648l-.001-.221.001-.23c0-1.997-.182-3.951-.531-5.846zM9.608 15.651V8.358l6.266 3.652z"/></svg></a>
</div>
</div>
</div>
</div>


CSS


*{box-sizing:border-box}



.bg-demo{	
		
display: grid;
place-content: center;
margin: 2rem auto;
min-height: 80vh;
padding: 1rem;

background:linear-gradient(320deg, rgba(186, 74, 255, 1), rgba(186, 74, 255, 0) 70%), 
	linear-gradient(180deg, rgba(0, 138, 255, 1), rgba(0, 138, 255, 0) 70%), 
	linear-gradient(45deg, rgba(0, 255, 198, 1), rgba(0, 255, 198, 0) 70%) fixed, 
	url(image.jpg) no-repeat top center/cover;}
	
	

	
.cadre-demo {

width: min(80vw, 60ch);
	min-height:60vh;
z-index:1;
display:grid;
grid-template-areas: "card";
color:#5a5a5a;
border-radius: 0.5ch;
overflow: hidden;
box-shadow: .05rem .1rem .3rem -.03rem rgba(0, 0, 0, 0.20);
	
}


.cadre-demo>*{
	
	grid-area: card;
	
	}
	
.cadre-demo::before{
	
z-index:-1;
grid-area: 1 / 1 / -1 / -1;
transition:.6s;
content:'';
clip-path: polygon(0% 0%, 25% 0%, 50% 100%, 25% 100%);
transform: translatex(-100%);
background: rgba(255, 255, 255, 0.4);
	
	}	
	
	
.cadre-demo:hover::before{transform:translatex(100%);}
	
	
	
.cadre-demo img{

width:100px;
height:100px;
object-fit: cover;
border-radius:9999px;

	
	}

.devant>*{
	
margin: 1rem 0
	
	}	

.devant{
	
display: grid;
place-items: center;
border: 1px solid rgba(255, 255, 255, 0.2);
background-color: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(20px);
border-radius: inherit;
padding: 2rem 1rem;
backface-visibility: hidden
	
	}
	
.cadre-demo h3{
	

font-size:2rem;
font-size:clamp(1.5rem, 1.3269rem + 0.7692vw, 2rem);
	
}	
	
.cadre-demo h4{
	
font-size: 1.25rem;
font-size: clamp(0.75rem, 0.5769rem + 0.7692vw, 1.25rem)
	
	}
	

	
.bouton{

font-size: 1rem;
font-size:clamp(0.85rem, 0.8065rem + 0.1935vw, 1rem);
border-radius: 9999px;
padding:.85rem 1rem;
outline: none;
text-decoration: none;
background-color: rgba(255, 255, 255, 1);

	
}
	
.bouton:focus{
	
transition:.4s;
box-shadow: 0 0 0.25em 0.25em rgba(255, 255, 255, 0.31);
	
	}

 .cadre-demo svg{
	
filter: drop-shadow(0 0 0.25em rgba(0, 0, 0, 0.18));
width: min(max(1.19051563rem, 4.58637337vw), 1.776889rem);
height: min(max(1.19051563rem, 4.58637337vw), 1.776889rem);

	
	}	
	
.demo-social{
	
	display: flex;
	gap: .5rem
	
	}
	



Support navigateurs :

backdrop-filter

Article sur les filtres CSS

Vous rencontrez un problÚme avec cette démonstration ?

Avant de vous arracher les cheveux ou de crier au scandale, procĂ©dez Ă  quelques simples vĂ©rifications. Si la dĂ©monstration fonctionne ici, il n'y a aucune raison pour qu'il n'en soit pas de mĂȘme chez vous. De plus vous pouvez tĂ©lĂ©charger la dĂ©monstration. Si vraiment vous coincez, vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne rĂ©ponds qu'aux messages respectueux.