Note post-it con i soli CSS

  • CSS
  • Gabriele Romanato

Le nuove proprietà CSS3 ci permettono di creare effetti davvero notevoli con una marcatura minimale. In questo articolo creeremo un post-it unicamente con i CSS.

La marcatura è la seguente:


<div class="post-it">Lorem ipsum dolor sit amet.</div>​

E questo è il codice CSS:


@import url(http://fonts.googleapis.com/css?family=Reenie+Beanie:regular);

body{
  font-family:arial,sans-serif;
  font-size:100%;
  margin:3em;
  background:#666;
  color:#fff;
}

div.post-it {
    color:#000;
  background:#ffc;
  height:10em;
  width:10em;
  padding:1em;
  -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
  -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  -moz-transition:-moz-transform .15s linear;
  -o-transition:-o-transform .15s linear;
  -webkit-transition:-webkit-transform .15s linear;
  font-family:"Reenie Beanie",arial,sans-serif;
  font-size:180%;
  -webkit-transform: rotate(-6deg);
  -o-transform: rotate(-6deg);
  -moz-transform:rotate(-6deg);
}

div.post-it:hover {
    box-shadow:10px 10px 7px rgba(0,0,0,.7);
  -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);
  -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
  position:relative;
  z-index:5;
}
​

Potete visionare l'esempio finale in questa pagina.

Torna su