Effet de coin de page en CSS 3
Table des matières
Arborescence du site Mise en place de la structure HTML Définition des styles

Effet de coin de page en CSS 3

Web CSS

De nombreux sites ont mis en place un effet de coin de page (Peel effect en anglais) pour des publicité, donner des informations complémentaires…

Vous pouvez en voir des exemples ici :

Comme vous l’aurez remarqué, cet effet est mis en place en utilisant une animation Flash ou du JavaScript.

Nous allons voir dans cet article comment réaliser le même effet en CSS 3 sans script complémentaire.

Démo

Arborescence du site

Avant toute chose, voici comment sont ordonnés les fichiers.

  • img : répertoire contenant les images
  • index.php : fichier principal contenant la structure HTML
  • style.css : feuille de style

Mise en place de la structure HTML

Dans un premier temps, nous allons mettre en place notre page HTML afin de définir les différents composant dont nous avons besoin.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />

    <link href="style.css" media="screen" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <a href="http://benjaminprevot.fr/" id="peel">
      <img src="img/corner.png" />
    </a>
    <div id="header">
      <span class="title">Peel effect</span>
    </div>
  </body>
</html>

Cette page contient un lien (id="peel") représentant notre coin de page cliquable ; il aura comme arrière-plan l’information que nous souhaitons mettre en place.

L’image qu’il contient est en fait le coin de page plié.

Définition des styles

Maintenant, il faut mettre en forme notre page.

Pour cela, il faudra placer le coin de page en haut à droite.

body, html {
  background: #f5f5ff;
  font: normal normal normal 11px/20px Verdana, sans-serif;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

#header {
  background: #145eb1 url(img/header.png) repeat-x scroll 0 0;
  height: 200px;
}

#header .title {
  color: #ffffff;
  font: normal normal bold 2em Verdana, sans-serif;
  line-height: 200px;
}

#peel {
  background: transparent url(img/text.png) no-repeat scroll 100% 0;
  position: absolute;
  right: 0;
  text-decoration: none;
  top: 0;
  width: 50px;
  height: 50px;
  box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.3);
  transition: height 0.3s ease-out 0, width 0.3s ease-out 0;
  -moz-box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.3);
  -moz-transition: height 0.3s ease-out 0, width 0.3s ease-out 0;
  -o-transition: height 0.3s ease-out 0, width 0.3s ease-out 0;
  -webkit-box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.3);
  -webkit-transition: height 0.3s ease-out 0, width 0.3s ease-out 0;
}

#peel:hover {
  height: 300px;
  width: 300px;
}

#peel img {
  border: none;
  height: 100%;
  width: 100%;
}

Nous définissons la nouvelle taille du lien lorsque le curseur le survole.

L’image adaptera sa taille automatiquement et dévoilera alors le contenu.

L’ajout de transition permet de donner plus de fluidité à l’effet.

Démo