75 personnes ont aimer cette page.

 

Lightbox en CSS

Faire une light box pour ses images, c'est beau, c'est class. En général, on fait ça en JavaScript, mais celle-ci fait tout en HTML/CSS et très simplement. Elle utilise la pseudo-class peu connue ":target".

ExempleCode HTML
Cliquez ici <a href="#image">Cliquez ici</a>
<div class="lightbox" id="image"><a href="#"><img src="images/image.jpg" alt="images"> </a> </div>
Code CSS
div.lightbox {
display: none;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}

div.lightbox:target {
display: block;
position: fixed;
z-index: 20;
background-color: rgba(100,100,100,.8);
text-align: center;
padding-top: 150px;
}

div.lightbox:target img {
border: solid white 10px;
}

 

Bulle Popup

Voila le code pour faire apparaître une bulle popup au passage de la souris.

ExempleCode HTML
Passer votre souris Ceci est un popup <span class="bulle"> Passer votre souris<span> Ceci est un popup </span></span>
Code CSS
span.bulle {
position: relative;
cursor: pointer;
}

span.bulle span {
display: none;
}

span.bulle:hover span {
left: 0px;
width: 150px;
display: block;
position: absolute;
background-color: #0080ff;
color:#fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

 

Ombres sur texte CSS3

Faire une ombre sur un texte en CSS3.

ExempleCode HTML
Web Astuces <span class="ex1">Web Astuces</span>
Code CSS
.ex1
{text-shadow:8px 8px 8px #555555;
font-size:50px;
color: #0080ff;
}

 

Ombrages sur une image en CSS

Dan cet exemple je vous montre comment faire un ombrage sur vos images grâce au CSS avec une bordure blanche.

ExempleCode HTML
<img class="img" src="images/image.jpg">
Code CSS
.image {
border: 5px solid #fff;
-moz-box-shadow: 8px 8px 12px #aaa;
-webkit-box-shadow: 8px 8px 12px #aaa;
box-shadow: 8px 8px 12px #555;
}
.image {
width:200px;
filter:progid:DXImageTransform.Microsoft.Shadow
(color='#aaaaaa', Direction=135,
Strength=12);
zoom: 1;
}

 

Effet de rebond en CSS

Dans cet exemple, l'effet de transition est utilisé pour donner une effet de translation verticale. Pour faire cela, les propriètés "-webkit-transition", "-moz-transition" et "-o-transition" sont nécessaires en agissant sur les marges sans utiliser Javascript.
Les transitions permettent de passer à un état de départ à un nouvel état.

ExempleCode HTML
<img class="img" src="images/image.jpg">
Code CSS
.img {
margin: 15px;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out; }
.img:hover {
margin-top: 2px;}

 

Rotation d'une image avec effet de transition

Faire tourner une image en passant la souris dessus.

ExempleCode HTML
<img class="img" src="images/image.jpg">
Code CSS
.img {
-webkit-transform: rotate(0deg);
-webkit-transition: all 0.5s ease-in-out;
-moz-transform: rotate(0deg);
-moz-transition: all 0.5s ease-in-out;
width:200px;
}
.img:hover {
-webkit-transform: rotate(180deg);
-webkit-transition: all 0.5s ease-in-out;
-moz-transform: rotate(180deg);
-moz-transition: all 0.5s ease-in-out;
}

 

Border Radius (Arrondir les bords d'une image)

Voici le code pour arrondir les bords d'une image en CSS.

ExempleCode HTML
<img class="img" src="images/image.jpg">
Code CSS
.img {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px; width: 200px;
}

 

Opacité avec une transition

Voila comment faire disparaitre une image avec une transition au passage de la souris
Essayer sur l'image ci-dessous.

ExempleCode HTML
<img class="img" src="images/image.jpg">
Code CSS
.img
{
opacity:1;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
width:200px;
}
.img:hover
{
opacity: 0;
}