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 les dégradés CSS

Dernière modification : octobre 2022

Petite astuce pour créer à la fois une lightbox et un overlay uniquement en utilisant les dégradés CSS.



<input type="checkbox" id="lightbox">
<label for="lightbox">Ouvrir lightbox</label>

<div class=lightbox>

<label for="lightbox" aria-label="fermer"></label>

</div>




*,*::after,*::before{box-sizing:border-box}	

body{margin:0;display:grid;place-items:center;min-height:100vh}
	
	
input{
	
position: absolute;
left:-100vw
	
	}	
	
label{cursor: pointer}
	
#lightbox+label{
display: flex;
justify-content: center;
padding: 10px 20px;
border-radius: 5px;
color: white;
background-color:#6753ea
	
	}



.lightbox{
	
position: fixed;
top: 0;
left: 0;
min-height: 100vh;
width: 100%;
background-size: 50% 50%, 100% 100%;
background-size: clamp(50%,(100vw - 64rem)*-1000,80%) clamp(25%,(100vw - 64rem)*1000,50%) /*definit la largeur de la fenetre*/, 
100% 100% /*definit la largeur de l'ensemble de la page*/;

background-position:center center;/*on centre la fenetre*/

background-repeat:no-repeat !important;/*si on repete le background de la fenetre, celle-ci va prendre l'ensemble de la page*/

pointer-events:none;/*voir https://developer.mozilla.org/fr/docs/CSS/pointer-events , on empeche le clic sur le lien quand la lightbox est active*/

opacity:0;/*on cache la fenetre*/

transition:opacity .5s;/*on applique une transition pour un effet 'fade'*/


background-image:
linear-gradient(rgb(255,255,255),rgb(255,255,255))/*on definit la couleur de la fenetre*/,
radial-gradient(ellipse,rgba(0,0,0,.2),
rgba(0,0,0,.6))/*on definit la couleur du background de l'ensemble de la page*/;

	}
	
#lightbox:checked ~ .lightbox{
	
z-index:1;
pointer-events:auto;/*on rend le lien hypertexte cliquable uniquement quand on cible la fenetre*/
opacity:1
	
	}
	
	
#lightbox:checked+label{
	
font-size: 0;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 25%;
right: 25%;
top: clamp(25%,(100vw - 64rem)*-1000,37.5%);
right: clamp(10%,(100vw - 64rem)*1000,25%);
border-radius: unset;
display: flex;
align-items: center;
justify-content: center;
color: white;
background: linear-gradient(to bottom,#ff646c,#c94f55);
width: 2rem;
aspect-ratio:1;
  
}
	
	
	
#lightbox:checked+label::before,
#lightbox:checked+label::after {
	
content: "";
position: absolute;
left: 0;
right: 0;
height: 4px;
background-color: #FFF;
border-radius: 4px;
}
	
#lightbox:checked+label::before {
	
  transform: rotate(45deg);
	
}
	
#lightbox:checked+label::after {
	
  transform: rotate(-45deg);
}




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.