Guillaume Duverger - Développement & Graphisme - Blog

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

Lightbox avec les dégradés CSS

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

Ouvrir lightbox

Code :

HTML


<a href="#lightbox" class="ouvrir" id="lightbox">Ouvrir la lightbox</a>
<div class=lightbox>
<a class="ferm" href="#">X</a>
</div>


CSS


*{box-sizing:border-box}

body{margin: 0}

.ouvrir{
display: flex;
justify-content: center;
padding: 10px;
max-width: 20rem;
margin: 2rem auto;
border-radius: 5px;
text-decoration: none;
color: white;
background: linear-gradient(to bottom,#7A5FFF,#6852d6)}
     
.ferm{
position: fixed;
top: 25%;
right: 25%;
padding: 10px;
height: 30px;
width: 30px;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
background: linear-gradient(to bottom,#ff646c,#c94f55)}


.lightbox{
position: fixed;
top: 0;
left: 0;
min-height: 100%;
width: 100%;
background-size: 50% 50%, 100% 100% ;

background-position:center center;

background-repeat: no-repeat !important;

pointer-events: none;

opacity: 0;

transition: opacity .5s;

/*firefox*/
background-image:
-moz-radial-gradient(ellipse,rgb(255,255,255),
rgba(255,255,255,.6)),
-moz-radial-gradient(ellipse,rgba(0,0,0,.2),rgba(0,0,0,.6));

/*opera*/
background-image:
-webkit-radial-gradient(ellipse,rgb(255,255,255),
rgba(255,255,255,.6)),
-webkit-radial-gradient(ellipse,rgba(0,0,0,.2),rgba(0,0,0,.6));

/*IE, edge*/
background-image:
-ms-radial-gradient(ellipse,rgb(255,255,255),rgba(255,255,255,.6)),
-ms-radial-gradient(ellipse, rgba(0,0,0,.2),
rgba(0,0,0,.6));
}

.connexion{
	
display: grid;
place-items: center;
min-height: 100vh
	
	}


#lightbox:target ~ .lightbox{
	
z-index: 1;
pointer-events: auto;
opacity: 1
	
	}

Support navigateurs :

CSS gradients

Source, inspiration, ressources :

source originale

Voir sur ce blog la rubrique HTML5.

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.