Guillaume Duverger - Développement & Graphisme - Blog

Vous êtes ici : Accueil > Démonstrations > CSS > Lightbox/slideshow/slider

Lightbox avec élément HTML details et CSS shapes

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.

Code :

HTML


<details>
<summary></summary>
<div class="contenu-fenetre">
</div>
</details>


CSS


*{box-sizing:border-box}


details { 

background-color: #7A5FFF;
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{
line-height:2rem;
cursor:pointer; 
display: flex;
justify-content: center;
text-transform: uppercase;

	
	}
	
summary:before{

content:'ouvrir'
	
	}
	
details[open] summary:before{ 
	
z-index: 3;
font-size: 2rem;
content: '❌';
position: fixed;
top: 0;
right: 0
	
}
	
details[open]  {

transition: clip-path .4s cubic-bezier(0, 0.58, 0.36, 1);	
position: fixed;
z-index: 2;
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[open] .contenu-fenetre{
	
overflow-y: auto;
max-width: 80vw;
height: 100vh;
max-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
margin: auto
	
	}
	
	
details[open] .contenu-fenetre p{

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

Support navigateurs :

CSS clip-path

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.