Aller au contenu principal

Guillaume Duverger Développeur & graphiste - Blog

Accueil BlogDémonstrationsCSSLightbox/slideshow/slider...
Partagez cette démonstration : Partager sur Facebook Partager sur Twitter

Lightbox avec élément HTML details et CSS shapes

Dernière modification : septembre 2022

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fringilla, nunc vel volutpat faucibus, lectus enim mattis lorem, sed malesuada justo dolor vel dui. Duis tellus nulla, tristique et elit suscipit, hendrerit venenatis nibh. Morbi vel scelerisque sem, ut consequat odio. Donec vehicula ex nec molestie tincidunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fringilla, nunc vel volutpat faucibus, lectus enim mattis lorem, sed malesuada justo dolor vel dui. Duis tellus nulla, tristique et elit suscipit, hendrerit venenatis nibh. Morbi vel scelerisque sem, ut consequat odio. Donec vehicula ex nec molestie tincidunt.



<details>
<summary></summary>

<div class="contenu-fenetre">
<div>
<p>....</p>
</div>
</div>
</details>




*{box-sizing:border-box}

details > summary::-webkit-details-marker {
	
  display: none;
	
}
	
details { 

width:100%;
background-color: #6753ea;
clip-path: polygon(calc(50% - 5em ) calc(50% - 2em ),
calc(50% + 5em ) calc(50% - 20em ), 
calc(50% + 5em ) calc(50% + 20em ),
calc(50% - 5em ) calc( 50% + 2em ));
color: white;

}
	
details summary{

height:2rem;
cursor:pointer; 
display: flex;/*on enleve la fleche sur firefox*/
justify-content: center;
align-items: center;
text-transform: uppercase;

	
	}
	
details summary:before{
	

content:'ouvrir'
	
	}

details[open] summary{display:unset}
	
details[open] summary::before{ 


font-size:2rem;
content:'❌';
position:fixed;
top:1rem;
right:1vw
	
}
	
details[open]  {
	
transition: clip-path .4s cubic-bezier(0, 0.58, 0.36, 1);	
position: fixed;
z-index:1;
top: 0;
left: 0;
right: 0;
bottom: 0;
clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%)

}
	
.contenu-fenetre p{
opacity: 0;
transform: translate3d(0, -5rem, 0);




}	
	
details .contenu-fenetre{

overflow-y:auto;
max-width: 80vw;
height:100vh;
margin:auto;
display:grid;
	
	}
	
.contenu-fenetre>div{place-self:center}	
	
details[open] .contenu-fenetre p{

opacity:1;
transform: translate3D(0, 0, 0);
transition: opacity .3s .2s, transform .6s .2s cubic-bezier(0, 0.65, 0.06, 0.98);
 }
	



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

Vous avez constaté un oubli ou une erreur dans le code ? N'hésitez pas à me le signaler par mail (contact@guyom-design.com). Vous ne parvenez pas à faire fonctionner la démonstration ? Vous pouvez également me contacter et je vous aiderai si je le peux.