Come fare per - Messaggio di richiamo
Scopri come creare messaggi di callout con CSS.
Chiamare
Un messaggio di callout viene spesso posizionato nella parte inferiore di una pagina per informare l'utente di qualcosa di speciale: suggerimenti/trucchi, sconti, azioni necessarie, altro.
Crea un richiamo
Passaggio 1) Aggiungi HTML:
Esempio
<div class="callout">
<div class="callout-header">Callout
Header</div>
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<div class="callout-container">
<p>Some text...</p>
</div>
</div>
Se vuoi la possibilità di chiudere il messaggio callout, aggiungi un elemento <span> con un onclick
attributo che dice "quando fai clic su di me, nascondi il mio elemento padre" - che è il contenitore <div> (class="alert").
Suggerimento: usa l'entità HTML " ×
" per creare la lettera "x".
Passaggio 2) Aggiungi CSS:
Modella la casella callout e il pulsante di chiusura:
Esempio
/* Callout box
- fixed position at the bottom of the page */
.callout {
position: fixed;
bottom: 35px;
right: 20px;
margin-left: 20px;
max-width: 300px;
}
/* Callout header */
.callout-header {
padding: 25px
15px;
background: #555;
font-size: 30px;
color: white;
}
/* Callout container/body */
.callout-container
{
padding: 15px;
background-color:
#ccc;
color: black
}
/* Close button */
.closebtn {
position:
absolute;
top: 5px;
right: 15px;
color: white;
font-size: 30px;
cursor: pointer;
}
/* Change color on
mouse-over */
.closebtn:hover {
color: lightgrey;
}
Suggerimento: controlla anche i messaggi di avviso .
Suggerimento: controlla anche Note .