disign | Watermark su stampa di pagina web | a digital sign for a best design!
A digital sign for a best design

Articolo stampato da http://disign.improntedigitali.it/watermark-su-stampa-di-pagina-web-526-3-1.html

© Luca Frassineti

Css tips and tricks 584 visualizzazioni

Watermark su stampa di pagina web

22/11/2022

È possibbile inserire nel proprio sito un watermark che apparirà nella stampa della prima pagina.

Possiamo rendere anche molto rilevante la consistenza del watermark semplicemente agendo sui settaggi del foglio di stile.

Prima di tutto inseriamo il div contenitore nell'html del template: è un div nascosto quindi può essere inserito in qualsiasi punto dell'html, per ordine meglio subito dopo l'apertura del body.

 

<div class="print">
     <p><h2>Articolo stampato da https://domain.ext</h2></p>
     <p><h1>&copy; domain.ext</h1></p>
</div>

 

Il testo è ovviamente del tutto customizzabile, e può anche essere sostituito / integrato con un immagine, logo etc.

 

Poi impostiamo le regole del css per formattare il contenuto del div (rendendolo nascosto) e -soprattutto- modifichiamo la visibilità esclusivamente in fase di stampa:

 

<style>

.print {

     display: none;

     position: absolute;

     top: 0;

     left: 0;

     width: 100%;

     height: auto;

     z-index: 1000;

     opacity: 30%;

     color: black;

     font-weight: bolder;

     text-align: center;

     margin-top: 50%;

     rotate: -45deg;

     border: dashed medium;

     text-align: center;

}

@media print {

     .print h1 {

          font-size: 64px;

     }

     .print h2 {

          font-size: 48px;

     }

     .print {

          display: block;

     }

}

</style>

 

Attenzione all'opacità, verificate bene che sia compatiblile con la leggibilità del contenuto mandato in stampa!

Sia chiaro, come tutti i metodi di 'protezione' dei contenuti anche questo è ampliamenta bypassabile da chi minimante sappia come muoversi.

Enjoy  ;)

Invia una domanda o un commento sull'articolo

I campi obbligatori sono segnalati *

*

*



 


Questo sito è totalmente privo di pubblicità, se volete sostenere questa inziativa, potete scegliere di fare una piccola donazione libera:


© 2009 - 2024 Impronte digitali di Luca Frassineti. Tutti i diritti riservati.