![Effet de coin de page en CSS 3](https://benjaminprevot.fr/assets/img/blog/article/2010/10/28/effet-de-coin-de-page-en-css-3/thumb/800x450.png)
Effet de coin de page en CSS 3
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 :
- http://www.smple.com/pagePeel/
http://www.sohtanaka.com/web-design/examples/peeling-effect/(je me suis d’ailleurs inspiré de cette démo pour rédiger cet article)
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.
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.