Vaadin 7 UI Design By Example Beginner's Guide

Styling panels

Panels are rendered like this:

<div class="v-panel ... " ... >

  <div class="v-panel-captionwrap" ... >

    <div class="v-panel-nocaption">
      <span>My caption</span>
    </div>
  </div>

  <div class="v-panel-content ..." ... >
  </div>

  <div class="v-panel-deco" ... >
  </div>

</div>

Here is some CSS magic to make panels look like a post-it:

 .v-panel { overflow: auto; } .v-panel-content { background: #ffee00; border: 0px #fff; padding: 10px; font-family: cursive, sans-serif; } .v-panel:before, .v-panel:after { z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width:300px; background: #777; -webkit-box-shadow: 0 18px 10px #777; -moz-box-shadow: 0 18px 10px #777; box-shadow: 0 18px 10px #777; -webkit-transform: ...