Générateur en ligne de cadres en CSS avec ombre portée

Prenons cet effet. Quel le code CSS pour le mettre en place ?

 

 

Réponse :

/* This code is tested with latest version of Firefox and Chrome */
.box {
  position: relative;
  width: 400px;
  height: 300px;
  background-color: #fff;
  box-shadow: 0 1px 5px rgba(0,0,0,0.25), 0 0 50px rgba(0,0,0,0.1) inset;
  border-radius: 1% 1% 1% 1% / 1% 1% 1% 1%;
}
.box:before {
    position: absolute;
    width: 100%;
    height: 80%;
    border-radius: 10px / 100px;
    z-index: -1;
    top: 10%;
    bottom: 10%;
    content: "";
    box-shadow: 0 0 15px rgba(0,0,0,0.6);
    }

Evident, non ?

---

Pour être honnête, ce code CSS est généré via ce site : css3-drop-shadows.herokuapp.com

1 – On me propose des modèles :

2 – Puis, les réglages :

3 – Création du code CSS

4 – Et enfin, un simple copier-coller dans votre code…

Simple, non ?