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?
You will either have to add an additional DIV or add an additional SCRIPT in document head. It's simpler with a DIV, because it will be there immediately without executing any script.
Example HTML (Version 1):
<body>
<div class="preview"></div>
...
</div>
Example HTML (Version 2):
<body>
<img class="preview" />
...
</div>
Example CSS:
.preview
{
position: absolute;
top: 0;
left: 0;
display: block;
z-index: 100;
/* omit all these if you use an IMG */
width: 100px; /* adjust */
height: 100px; /* adjust */
background-image: url(...); /* adjust */
background-repeat: no-repeat;
}
You could just insert a semi-transparent PNG with the content and position it at the top left corner couldn't you?
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>
Hi systempuntoout
Very simple solution
Markup
<img src="preview-image.png" class="preview">
Css
.preview {
position: fixed;
top: 0;
left: 0;
display: block;
}