Une technique de conception courante consiste dernièrement à créer un effet de pli, dans lequel il apparaît qu'un titre est enveloppé derrière son conteneur. Ceci est généralement réalisé grâce à l'utilisation d'images minuscules; Cependant, avec CSS, nous pouvons facilement imiter cet effet. Je vais vous montrer comment dans quatre minutes.

Abonnez-vous à notre page YouTube pour voir tous les tutoriels vidéo!

Regarde plutôt sur Screenr.com?

---

HTML final

         
 
 Ma rubrique  
 
  

---

CSS final

 #container background: # 666; marge: auto; largeur: 500px; hauteur: 700px; rembourrage en haut: 30px; famille de polices: helvetica, arial, sans-serif;  h1 background: # e3e3e3; arrière-plan: -moz-linear-gradient (haut, # e3e3e3, # c8c8c8); arrière-plan: -webkit-gradient (linéaire, gauche en haut, gauche en bas, de (# e3e3e3) à (# c8c8c8)); rembourrage: 10px 20px; marge gauche: -20px; marge supérieure: 0; position: relative; largeur: 70%; -moz-box-shadow: 1px 1px 3px # 292929; -webkit-box-shadow: 1px 1px 3px # 292929; box-shadow: 1px 1px 3px # 292929; couleur: # 454545; texte-ombre: 0 1px 0 blanc;  .arrow width: 0; hauteur: 0; hauteur de ligne: 0; border-left: 20px solid transparent; border-top: 10px solid # c8c8c8; en haut: 104%; gauche: 0; position: absolue;