Question

I would like to add a “preview” stripe to a site.
I like what blogger does when you click to preview editing a post (Anteprima means preview in italian)

Do you know how to make it as a layer in order to plug it without modifying the main html code of my site?

Answer 1

Here’s another option to play with. Just fiddle around with the values. I used webkit rotation in this sample. For more rotation compatibility, see here

CSS:

.preview {
    position:absolute;
    top:50px;
    left:-125px;
    width:400px;
    font-size:32px;
    text-align:center;
    background-color:#888; 
    color:#fff;
    border:1px solid black;
    -webkit-transform:rotate(-45deg);
    -webkit-transform-origin-x:50%;
    -webkit-transform-origin-y:0px;
}

and the HTML:

<div class="preview">Preview</div>