Créer un postit en CSS3

L’idée est d’afficher une alerte sous la forme d’un postit géré entièrement en CSS3.

Le premier div nommé #overlay sera stylé de manière à couvrir la totalité de la page.

#overlay {
background:rgba(255, 255, 255, 0.8);
height:100%;
left:0;
position:fixed;
top:0;
width:100%;
z-index:2000;
}

Le deuxième div d’alerte affiche l’effet Post-it en pur CSS3.

@font-face {
font-family:'Reenie Beanie';
font-style:normal;
font-weight:normal;
src:local('Reenie Beanie'),
local('ReenieBeanie'),
url('http://themes.googleusercontent.com/font?kit=ljpKc6CdXusL1cnGUSamXybsRidxnYrfzLNRqJkHfFo')
format('truetype');
}
#postit {
margin:-125px 0 0 -175px;
background-color:#FFFAAA;
background-image:-webkit-gradient(linear, 0% 0%, 0% 80%, from(#FFFAAA), to(#FFF055));
background-image:-moz-linear-gradient(#FFFAAA 0%, #FFF055 80%);
color:#000;
font:40px 'Reenie Beanie', cursive;
height:250px;
left:50%;
line-height:250px;
position:absolute;
text-align:center;
text-shadow:1px 1px 1px #FFFAAA;
top:50%;
width:350px;
-webkit-box-shadow:#AAA 0px 10px 15px;
-moz-box-shadow:#AAA 0px 10px 15px;
-moz-transform:rotate(3deg);
-webkit-transform:rotate(3deg);
z-index:2001;
}

Dans le body :

<div id="overlay"></div>
<div id="postit">Le texte de votre postit</div>

RDWeb