le MEMO du WEB développeur
••• CSS •••  Liste des Mémos, astuces et bonnes pratiques

Effet carnet de notes en CSS 3 - empilement de feuilles

 
 

Effet visuel pile de feuilles tout en CSS3 en utilisant subtilement la propriété box-shadow

Code HTML :

<div id="art201">
  <div class="feuilles"> </div>
</div>

Code CSS :

#art201{
  background : #7c8d07;
  width:100%;height:80px;
}
.feuilles{
  margin:auto;
  width:40px;
  height:55px;
  border:#ccc solid 1px;
  background-color:#fff;
  box-shadow: 4px 4px 0 #fff,
              5px 5px 0 #ccc,
              9px 9px 0 #fff,
              10px 10px 0 #ccc,
              14px 14px 0 #fff;
-moz-box-shadow: 4px 4px 0 #fff,
                 5px 5px 0 #ccc,
                 9px 9px 0 #fff,
                 10px 10px 0 #ccc,
                 14px 14px 0 #fff;
-webkit-box-shadow: 4px 4px 0 #fff,
                    5px 5px 0 #ccc,
                    9px 9px 0 #fff,
                    10px 10px 0 #ccc,
                    14px 14px 0 #fff;
}

 

publié le 30/06/2013 par Memo Web
CSS3
Commenter le Mémo :

Rajouter du texte dans un élement via CSS
Aligner verticalement du texte avec une image
Dessiner un cercle sans image grâce à CSS 3
Ombrage - propriété box-shadow
Les transitions en CSS3 : rotation d'un élément - rotate()
Comment rajouter un séparateur entre les items d'une liste
Faire appel à un fichier CSS à l'intérieur d'un autre fichier CSS
Effet ruban sur un titre en CSS 3
@font-face ou Comment choisir une police non standard
Comment utiliser une police google web font sur son site Internet
Ajoutez vos propres Mémos sur MEMO-WEB

Il suffit de vous créer un compte sur le site

Vous pourrez choisir un thème parmis l'une des catégories proposées par MEMO-WEB.

Rédigez votre Mémo.
Après validation par MEMO-WEB, il sera mis en ligne.
Ajouter vos Mémos